mongodb-chatbot-ui/build/es/index12.js

UI React components for the MongoDB Chatbot Framework

import g, { createContext as J, useContext as K } from "react";
import { ag as w, m as l, Q as h, aN as V, aO as X, d as R, n as x, b as f, a2 as P, z as $, ac as c, F as ee, aL as k, aM as O } from "./index2.js";
import { h as ne } from "./index4.js";
function te(e, n, t) {
  return (n = function(r) {
    var a = function(i, o) {
      if (typeof i != "object" || !i)
        return i;
      var u = i[Symbol.toPrimitive];
      if (u !== void 0) {
        var p = u.call(i, o);
        if (typeof p != "object")
          return p;
        throw new TypeError("@@toPrimitive must return a primitive value.");
      }
      return String(i);
    }(r, "string");
    return typeof a == "symbol" ? a : a + "";
  }(n)) in e ? Object.defineProperty(e, n, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = t, e;
}
function I() {
  return I = Object.assign ? Object.assign.bind() : function(e) {
    for (var n = 1; n < arguments.length; n++) {
      var t = arguments[n];
      for (var r in t)
        ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
    }
    return e;
  }, I.apply(null, arguments);
}
function W(e, n) {
  if (e == null)
    return {};
  var t, r, a = function(o, u) {
    if (o == null)
      return {};
    var p = {};
    for (var d in o)
      if ({}.hasOwnProperty.call(o, d)) {
        if (u.indexOf(d) !== -1)
          continue;
        p[d] = o[d];
      }
    return p;
  }(e, n);
  if (Object.getOwnPropertySymbols) {
    var i = Object.getOwnPropertySymbols(e);
    for (r = 0; r < i.length; r++)
      t = i[r], n.indexOf(t) === -1 && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
  }
  return a;
}
function s(e, n) {
  return n || (n = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(n) } }));
}
var E, z, G, M, S, _, F, L, C, D, Y, H, Q, T = J({}), ie = w("input_option-content"), U = w("input_option-title"), re = w("input_option-description"), Z = w("input_option-left-glyph"), ae = function(e) {
  var n = e.hasLeftGlyph ? "left-glyph" : "text", t = e.hasRightGlyph ? "right-glyph" : "text";
  return l(E || (E = s([`
    display: grid;
    grid-template-columns: `, "px 1fr ", `px;
    grid-template-areas: '`, " text ", `';
    gap: `, `px;
    align-items: center;
    width: 100%;
  `])), h[400], h[400], n, t, h[200]);
}, oe = function(e) {
  var n = e.theme, t = e.disabled, r = e.highlighted, a = t ? k.Disabled : k.Primary, i = r ? O.Focus : O.Default;
  return l(z || (z = s([`
    grid-area: left-glyph;
    display: flex;
    align-items: center;
    // Hover styles set by parent InputOption
    color: `, `;
    transition: color `, `ms ease-in-out;
  `])), c[n].icon[a][i], f.default);
}, le = function(e) {
  var n = e.theme, t = e.disabled ? k.Disabled : k.Primary;
  return l(G || (G = s([`
    grid-area: right-glyph;
    display: flex;
    align-items: center;
    color: `, `;
    transition: color `, `ms ease-in-out;
  `])), c[n].icon[t].default, f.default);
}, se = l(M || (M = s([`
  grid-area: text;
  line-height: `, `px;
`])), h[400]), de = function(e) {
  var n = e.theme, t = e.highlighted, r = e.disabled;
  return l(S || (S = s([`
  overflow-wrap: anywhere;
  font-size: inherit;
  line-height: inherit;
  font-weight: normal;
  transition: color `, `ms ease-in-out;

  `, `
`])), f.default, t && !r && l(_ || (_ = s([`
    font-weight: bold;
    color: `, `;
  `])), c[n].text.primary.focus));
}, ce = ["children", "description", "leftGlyph", "rightGlyph", "preserveIconSpace", "className"], he = function(e) {
  var n = e.children, t = e.description, r = e.leftGlyph, a = e.rightGlyph, i = e.preserveIconSpace, o = i === void 0 || i, u = e.className, p = W(e, ce), d = K(T), m = d.disabled, b = d.highlighted, v = d.darkMode, y = R(v).theme;
  return g.createElement("div", I({ className: x(ie, ae({ hasLeftGlyph: !!r || o, hasRightGlyph: !!a }), u) }, p), r && g.createElement("div", { className: x(Z, oe({ theme: y, disabled: m, highlighted: b })) }, r), g.createElement("div", { className: se }, g.createElement("div", { className: x(U, de({ theme: y, highlighted: b, disabled: m })) }, n), t && g.createElement(ne, { className: x(re, l(F || (F = s([`
    max-height: `, `px;
    overflow: hidden;
    font-size: inherit;
    line-height: inherit;
    text-overflow: ellipsis;
    transition: color `, `ms ease-in-out;
  `])), h[1200], f.default)), darkMode: v, disabled: m }, t)), a && g.createElement("div", { className: le({ theme: y, disabled: m }) }, a));
};
he.displayName = "InputOptionContent";
var ue = w("input_option"), pe = function(e) {
  var n = e.theme, t = e.disabled, r = e.highlighted, a = e.isInteractive, i = r ? O.Focus : O.Default;
  return l(L || (L = s([`
    display: block;
    position: relative;
    list-style: none;
    outline: none;
    border: unset;
    margin: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;

    font-size: `, `px;
    line-height: `, `px;
    font-family: `, `;
    padding: `, "px ", `px;

    transition: `, `ms ease-in-out;
    transition-property: background-color, color;

    color: `, `;
    background-color: `, `;

    `, `

    /* Interactive states */
    `, `
  `])), P.body1.fontSize, P.body1.lineHeight, $.default, h[300], h[300], f.default, c[n].text.primary[i], c[n].background.primary[i], t && l(C || (C = s([`
      cursor: not-allowed;
      color: `, `;
    `])), c[n].text.disabled[i]), a && !t && l(D || (D = s([`
      /* Hover */
      &:hover {
        outline: none;
        color: `, `;
        background-color: `, `;

        .`, ` {
          color: `, `;
        }

        .`, ` {
          color: `, `;
        }
      }

      /* Focus (majority of styling handled by the 'highlighted' prop) */
      &:focus {
        outline: none;
        border: unset;
      }
    `])), c[n].text.primary.hover, c[n].background.primary.hover, U, c[n].text.primary.hover, Z, c[n].icon.primary.hover));
}, ge = h[100], me = h[200], fe = function(e) {
  var n = e.disabled, t = e.highlighted;
  return l(Y || (Y = s([`
  // Left wedge
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: `, `px;
    height: calc(100% - `, `px);
    min-height: `, `px;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 0 6px 6px 0;
    transform: scale3d(0, 0.3, 0) translateY(-50%);
    transform-origin: 0%; // 0% since we use translateY
    transition: `, `ms ease-in-out;
    transition-property: transform, background-color;

    `, `

    `, `
  }
`])), ge, 2 * me, h[600], f.default, t && l(H || (H = s([`
      transform: scaleY(1) translateY(-50%);
      background-color: `, `;
    `])), ee.blue.base), n && l(Q || (Q = s([`
      content: unset;
    `]))));
}, be = ["as", "children", "disabled", "highlighted", "checked", "darkMode", "showWedge", "isInteractive", "className"], ve = V(function(e, n) {
  var t = e.as, r = t === void 0 ? "li" : t, a = e.children, i = e.disabled, o = e.highlighted, u = e.checked, p = e.darkMode, d = e.showWedge, m = d === void 0 || d, b = e.isInteractive, v = b === void 0 || b, y = e.className, q = W(e, be), A = X(r).Component, N = R(p), j = N.theme, B = N.darkMode;
  return g.createElement(T.Provider, { value: { checked: u, darkMode: B, disabled: i, highlighted: o } }, g.createElement(A, I({ ref: n, role: "option", "aria-selected": o, "aria-checked": u, "aria-disabled": i, tabIndex: -1, className: x(ue, pe({ theme: j, disabled: i, highlighted: o, isInteractive: v }), te({}, fe({ theme: j, disabled: i, highlighted: o, isInteractive: v }), m), y) }, q), a));
});
ve.displayName = "InputOption";
export {
  he as K,
  ve as e
};