mongodb-chatbot-ui
Version:
UI React components for the MongoDB Chatbot Framework
652 lines (600 loc) • 21.2 kB
JavaScript
import E, { forwardRef as Mn } from "react";
import { r as En, m as a, F as n, v as B, Y as _, z as Rn, d as Ln, n as Y, a3 as Fn } from "./index2.js";
import { A as N, J as Zn, $ as Hn } from "./index4.js";
import { l as Bn } from "./X.js";
import { H as An } from "./index8.js";
import { W as Tn, d as Vn } from "./Warning.js";
import { c as zn, g as Wn } from "./jsx-runtime.js";
var $n = { exports: {} };
(function(o, u) {
(function(b, d) {
o.exports = d(E, En);
})(zn, function(b, d) {
function w(e) {
if (e && typeof e == "object" && "default" in e)
return e;
var r = /* @__PURE__ */ Object.create(null);
return e && Object.keys(e).forEach(function(c) {
if (c !== "default") {
var l = Object.getOwnPropertyDescriptor(e, c);
Object.defineProperty(r, c, l.get ? l : { enumerable: !0, get: function() {
return e[c];
} });
}
}), r.default = e, Object.freeze(r);
}
var p = w(b);
function h(e, r, c) {
return (r = function(l) {
var v = function(f, j) {
if (typeof f != "object" || !f)
return f;
var x = f[Symbol.toPrimitive];
if (x !== void 0) {
var O = x.call(f, j);
if (typeof O != "object")
return O;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return String(f);
}(l, "string");
return typeof v == "symbol" ? v : v + "";
}(r)) in e ? Object.defineProperty(e, r, { value: c, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = c, e;
}
function C() {
return C = Object.assign ? Object.assign.bind() : function(e) {
for (var r = 1; r < arguments.length; r++) {
var c = arguments[r];
for (var l in c)
({}).hasOwnProperty.call(c, l) && (e[l] = c[l]);
}
return e;
}, C.apply(null, arguments);
}
function P(e, r) {
return r || (r = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(r) } }));
}
var L, F, Z = { small: 14, default: 16, large: 20, xlarge: 24 }, A = ["className", "size", "title", "aria-label", "aria-labelledby", "fill", "role"], z = function(e) {
var r = e.className, c = e.size, l = c === void 0 ? 16 : c, v = e.title, f = e["aria-label"], j = e["aria-labelledby"], x = e.fill, O = e.role, D = O === void 0 ? "img" : O, M = function(m, W) {
if (m == null)
return {};
var g, y, I = function(k, G) {
if (k == null)
return {};
var V = {};
for (var $ in k)
if ({}.hasOwnProperty.call(k, $)) {
if (G.indexOf($) !== -1)
continue;
V[$] = k[$];
}
return V;
}(m, W);
if (Object.getOwnPropertySymbols) {
var S = Object.getOwnPropertySymbols(m);
for (y = 0; y < S.length; y++)
g = S[y], W.indexOf(g) === -1 && {}.propertyIsEnumerable.call(m, g) && (I[g] = m[g]);
}
return I;
}(e, A), T = d.css(L || (L = P([`
color: `, `;
`])), x), H = d.css(F || (F = P([`
flex-shrink: 0;
`]))), R = function(m, W, g) {
var y, I = g["aria-label"], S = g["aria-labelledby"], k = g.title;
switch (m) {
case "img":
return I || S || k ? h(h(h({}, "aria-labelledby", S), "aria-label", I), "title", k) : { "aria-label": (y = W, "".concat(y.replace(/([a-z])([A-Z])/g, "$1 $2"), " Icon")) };
case "presentation":
return { "aria-hidden": !0, alt: "" };
}
}(D, "ImportantWithCircle", h(h({ title: v }, "aria-label", f), "aria-labelledby", j));
return p.createElement("svg", C({ className: d.cx(h({}, T, x != null), H, r), height: typeof l == "number" ? l : Z[l], width: typeof l == "number" ? l : Z[l], role: D }, R, M, { viewBox: "0 0 16 16" }), p.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 4.5C7 3.94772 7.44772 3.5 8 3.5C8.55228 3.5 9 3.94772 9 4.5V8.5C9 9.05228 8.55228 9.5 8 9.5C7.44772 9.5 7 9.05228 7 8.5V4.5ZM9 11.5C9 12.0523 8.55228 12.5 8 12.5C7.44772 12.5 7 12.0523 7 11.5C7 10.9477 7.44772 10.5 8 10.5C8.55228 10.5 9 10.9477 9 11.5Z", fill: "currentColor" }));
};
return z.displayName = "ImportantWithCircle", z.isGlyph = !0, z;
});
})($n);
var Gn = $n.exports;
const Jn = /* @__PURE__ */ Wn(Gn);
var Nn = { exports: {} };
(function(o, u) {
(function(b, d) {
o.exports = d(E, En);
})(zn, function(b, d) {
function w(e) {
if (e && typeof e == "object" && "default" in e)
return e;
var r = /* @__PURE__ */ Object.create(null);
return e && Object.keys(e).forEach(function(c) {
if (c !== "default") {
var l = Object.getOwnPropertyDescriptor(e, c);
Object.defineProperty(r, c, l.get ? l : { enumerable: !0, get: function() {
return e[c];
} });
}
}), r.default = e, Object.freeze(r);
}
var p = w(b);
function h(e, r, c) {
return (r = function(l) {
var v = function(f, j) {
if (typeof f != "object" || !f)
return f;
var x = f[Symbol.toPrimitive];
if (x !== void 0) {
var O = x.call(f, j);
if (typeof O != "object")
return O;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return String(f);
}(l, "string");
return typeof v == "symbol" ? v : v + "";
}(r)) in e ? Object.defineProperty(e, r, { value: c, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = c, e;
}
function C() {
return C = Object.assign ? Object.assign.bind() : function(e) {
for (var r = 1; r < arguments.length; r++) {
var c = arguments[r];
for (var l in c)
({}).hasOwnProperty.call(c, l) && (e[l] = c[l]);
}
return e;
}, C.apply(null, arguments);
}
function P(e, r) {
return r || (r = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(r) } }));
}
var L, F, Z = { small: 14, default: 16, large: 20, xlarge: 24 }, A = ["className", "size", "title", "aria-label", "aria-labelledby", "fill", "role"], z = function(e) {
var r = e.className, c = e.size, l = c === void 0 ? 16 : c, v = e.title, f = e["aria-label"], j = e["aria-labelledby"], x = e.fill, O = e.role, D = O === void 0 ? "img" : O, M = function(m, W) {
if (m == null)
return {};
var g, y, I = function(k, G) {
if (k == null)
return {};
var V = {};
for (var $ in k)
if ({}.hasOwnProperty.call(k, $)) {
if (G.indexOf($) !== -1)
continue;
V[$] = k[$];
}
return V;
}(m, W);
if (Object.getOwnPropertySymbols) {
var S = Object.getOwnPropertySymbols(m);
for (y = 0; y < S.length; y++)
g = S[y], W.indexOf(g) === -1 && {}.propertyIsEnumerable.call(m, g) && (I[g] = m[g]);
}
return I;
}(e, A), T = d.css(L || (L = P([`
color: `, `;
`])), x), H = d.css(F || (F = P([`
flex-shrink: 0;
`]))), R = function(m, W, g) {
var y, I = g["aria-label"], S = g["aria-labelledby"], k = g.title;
switch (m) {
case "img":
return I || S || k ? h(h(h({}, "aria-labelledby", S), "aria-label", I), "title", k) : { "aria-label": (y = W, "".concat(y.replace(/([a-z])([A-Z])/g, "$1 $2"), " Icon")) };
case "presentation":
return { "aria-hidden": !0, alt: "" };
}
}(D, "InfoWithCircle", h(h({ title: v }, "aria-label", f), "aria-labelledby", j));
return p.createElement("svg", C({ className: d.cx(h({}, T, x != null), H, r), height: typeof l == "number" ? l : Z[l], width: typeof l == "number" ? l : Z[l], role: D }, R, M, { viewBox: "0 0 16 16" }), p.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4ZM8 6C8.55228 6 9 6.44772 9 7V11H9.5C9.77614 11 10 11.2239 10 11.5C10 11.7761 9.77614 12 9.5 12H6.5C6.22386 12 6 11.7761 6 11.5C6 11.2239 6.22386 11 6.5 11H7V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8Z", fill: "currentColor" }));
};
return z.displayName = "InfoWithCircle", z.isGlyph = !0, z;
});
})(Nn);
var Yn = Nn.exports;
const _n = /* @__PURE__ */ Wn(Yn);
function t(o, u, b) {
return (u = function(d) {
var w = function(p, h) {
if (typeof p != "object" || !p)
return p;
var C = p[Symbol.toPrimitive];
if (C !== void 0) {
var P = C.call(p, h);
if (typeof P != "object")
return P;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return String(p);
}(d, "string");
return typeof w == "symbol" ? w : w + "";
}(u)) in o ? Object.defineProperty(o, u, { value: b, enumerable: !0, configurable: !0, writable: !0 }) : o[u] = b, o;
}
function J() {
return J = Object.assign ? Object.assign.bind() : function(o) {
for (var u = 1; u < arguments.length; u++) {
var b = arguments[u];
for (var d in b)
({}).hasOwnProperty.call(b, d) && (o[d] = b[d]);
}
return o;
}, J.apply(null, arguments);
}
function i(o, u) {
return u || (u = o.slice(0)), Object.freeze(Object.defineProperties(o, { raw: { value: Object.freeze(u) } }));
}
var q, K, Q, U, X, nn, en, rn, on, tn, ln, an, cn, sn, un, bn, dn, fn, gn, pn, hn, vn, xn, mn, yn, kn, wn, On, jn, Cn, Pn, In, s = { Info: "info", Warning: "warning", Danger: "danger", Success: "success" }, qn = a(q || (q = i([`
width: 24px;
height: 24px;
position: absolute;
right: 8px; // Icon is 24px(it's 24px to include hover background), in figma its 16px(does not include the hover background) (24px - 16px)/2 = 4. The space between the icon and the banner is 12px from the right, 12px - 4px = 8px
top: 8px;
flex-shrink: 0;
cursor: pointer;
`]))), Kn = a(K || (K = i([`
color: `, `;
&:active,
&:hover,
&:focus-visible {
color: `, `;
box-shadow: 0 0 0 2px `, `,
0 0 0 4px `, `;
&:before {
background-color: `, `;
}
}
`])), n.blue.light2, n.blue.light2, n.blue.dark3, n.blue.light1, n.blue.dark2), Qn = a(Q || (Q = i([`
color: `, `;
&:active,
&:hover,
&:focus-visible {
color: `, `;
box-shadow: 0 0 0 2px `, `,
0 0 0 4px `, `;
&:before {
background-color: `, `;
}
}
`])), n.yellow.light2, n.yellow.light2, n.yellow.dark3, n.blue.light1, n.yellow.dark2), Un = a(U || (U = i([`
color: `, `;
&:active,
&:hover,
&:focus-visible {
color: `, `;
box-shadow: 0 0 0 2px `, ", 0 0 0 4px ", `;
&:before {
background-color: `, `;
}
}
`])), n.red.light2, n.red.light2, n.red.dark3, n.blue.light1, n.red.dark2), Xn = a(X || (X = i([`
color: `, `;
&:active,
&:hover,
&:focus-visible {
color: `, `;
box-shadow: 0 0 0 2px `, `,
0 0 0 4px `, `;
&:before {
background-color: `, `;
}
}
`])), n.green.light2, n.green.light2, n.green.dark3, n.blue.light1, n.green.dark2), ne = a(nn || (nn = i([`
color: `, `;
&:active,
&:hover,
&:focus-visible {
color: `, `;
&:before {
background-color: `, `;
}
}
`])), n.blue.dark2, n.blue.dark2, n.blue.light2), ee = a(en || (en = i([`
color: `, `;
&:active,
&:hover,
&:focus-visible {
color: `, `;
&:before {
background-color: `, `;
}
}
`])), n.yellow.dark2, n.yellow.dark2, n.yellow.light2), re = a(rn || (rn = i([`
color: `, `;
&:active,
&:hover,
&:focus-visible {
color: `, `;
&:before {
background-color: `, `;
}
}
`])), n.red.dark2, n.red.dark2, n.red.light2), oe = a(on || (on = i([`
color: `, `;
&:active,
&:hover,
&:focus-visible {
color: `, `;
&:before {
background-color: `, `;
}
}
`])), n.green.dark2, n.green.dark2, n.green.light2), te = t(t({}, B.Dark, t(t(t(t({}, s.Info, Kn), s.Warning, Qn), s.Danger, Un), s.Success, Xn)), B.Light, t(t(t(t({}, s.Info, ne), s.Warning, ee), s.Danger, re), s.Success, oe)), le = function(o) {
var u = o.onClose, b = o.darkMode, d = o.theme, w = o.variant;
return E.createElement(An, { className: Y(qn, te[d][w]), "aria-label": "Close Message", onClick: u, darkMode: b }, E.createElement(Bn, null));
}, ae = a(tn || (tn = i([`
position: relative;
flex-shrink: 0;
`]))), ie = a(ln || (ln = i([`
// this margin is set to control text alignment with the base of the renderedImage
margin-top: 3px;
margin-bottom: 3px;
width: 32px;
height: 32px;
flex-shrink: 0;
`]))), ce = t(t({}, _.Body1, a(an || (an = i([`
top: 2px; // 18px(height in figma) - 16px(actual height of icon)
`])))), _.Body2, a(cn || (cn = i([`
top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)
`])))), se = t(t({}, B.Dark, t(t(t(t({}, s.Info, a(sn || (sn = i([`
color: `, `;
`])), n.blue.light1)), s.Warning, a(un || (un = i([`
color: `, `;
`])), n.yellow.base)), s.Danger, a(bn || (bn = i([`
color: `, `;
`])), n.red.light1)), s.Success, a(dn || (dn = i([`
color: `, `;
`])), n.green.base))), B.Light, t(t(t(t({}, s.Info, a(fn || (fn = i([`
color: `, `;
`])), n.blue.base)), s.Warning, a(gn || (gn = i([`
color: `, `;
`])), n.yellow.dark2)), s.Danger, a(pn || (pn = i([`
color: `, `;
`])), n.red.base)), s.Success, a(hn || (hn = i([`
color: `, `;
`])), n.green.dark1))), ue = t(t(t(t({}, s.Info, _n), s.Warning, Jn), s.Danger, Tn), s.Success, Vn), be = function(o) {
var u = o.image, b = o.baseFontSize, d = o.variant, w = o.theme, p = ue[d];
return u ? E.cloneElement(u, { className: ie }) : E.createElement(p, { className: Y(ae, se[w][d], ce[b]) });
}, de = a(vn || (vn = i([`
position: relative;
display: flex;
padding: 10px 12px 10px 20px;
border-width: 1px 1px 1px 0px;
border-style: solid;
border-radius: 12px;
font-family: `, `;
&:before {
content: '';
position: absolute;
width: 13px;
top: -1px;
bottom: -1px;
left: 0px;
border-radius: 12px 0px 0px 12px;
}
`])), Rn.default), fe = a(xn || (xn = i([`
color: `, `;
border-color: `, `;
background-color: `, `;
.`, `, a {
color: `, `;
&:hover {
color: `, `;
}
&:focus-visible {
box-shadow: 0 0 0 5px `, `,
0 0 0 7px `, `;
}
}
&:before {
background: linear-gradient(
to left,
transparent 6px,
`, ` 6px
);
}
`])), n.blue.light2, n.blue.dark2, n.blue.dark3, N, n.blue.light3, n.blue.light2, n.blue.dark3, n.blue.light1, n.blue.light1), ge = a(mn || (mn = i([`
color: `, `;
border-color: `, `;
background-color: `, `;
.`, `, a {
color: `, `;
&:hover {
color: `, `;
}
&:focus-visible {
box-shadow: 0 0 0 5px `, `,
0 0 0 7px `, `;
}
}
&:before {
background: linear-gradient(
to left,
transparent 6px,
`, ` 6px
);
}
`])), n.yellow.light2, n.yellow.dark2, n.yellow.dark3, N, n.yellow.light3, n.yellow.light2, n.yellow.dark3, n.blue.light1, n.yellow.dark2), pe = a(yn || (yn = i([`
color: `, `;
border-color: `, `;
background-color: `, `;
.`, `, a {
color: `, `;
&:hover {
color: `, `;
}
&:focus-visible {
box-shadow: 0 0 0 5px `, `,
0 0 0 7px `, `;
}
}
&:before {
background: linear-gradient(
to left,
transparent 6px,
`, ` 6px
);
}
`])), n.red.light2, n.red.dark2, n.red.dark3, N, n.red.light3, n.red.light2, n.red.dark3, n.blue.light1, n.red.base), he = a(kn || (kn = i([`
color: `, `;
border-color: `, `;
background-color: `, `;
.`, `, a {
color: `, `;
&:hover {
color: `, `;
}
&:focus-visible {
box-shadow: 0 0 0 5px `, `,
0 0 0 7px `, `;
}
}
&:before {
background: linear-gradient(
to left,
transparent 6px,
`, ` 6px
);
}
`])), n.green.light2, n.green.dark2, n.green.dark3, N, n.green.light3, n.green.light2, n.green.dark3, n.blue.light1, n.green.base), ve = a(wn || (wn = i([`
color: `, `;
border-color: `, `;
background-color: `, `;
.`, `, a {
color: `, `;
&:hover {
color: `, `;
}
&:focus-visible {
box-shadow: 0 0 0 3px `, ", 0 0 0 5px ", `,
0 0 0 7px `, `;
}
}
&:before {
background: linear-gradient(
to left,
transparent 6px,
`, ` 6px
);
}
`])), n.blue.dark2, n.blue.light2, n.blue.light3, N, n.blue.dark3, n.blue.dark2, n.blue.light3, n.white, n.blue.light1, n.blue.base), xe = a(On || (On = i([`
color: `, `;
border-color: `, `;
background-color: `, `;
.`, `, a {
color: `, `;
&:hover {
color: `, `;
}
&:focus-visible {
box-shadow: 0 0 0 3px `, ", 0 0 0 5px ", `,
0 0 0 7px `, `;
}
}
&:before {
background: linear-gradient(
to left,
transparent 6px,
`, ` 6px
);
}
`])), n.yellow.dark2, n.yellow.light2, n.yellow.light3, N, n.yellow.dark3, n.yellow.dark2, n.yellow.light3, n.white, n.blue.light1, n.yellow.base), me = a(jn || (jn = i([`
color: `, `;
border-color: `, `;
background-color: `, `;
.`, `, a {
color: `, `;
&:hover {
color: `, `;
}
&:focus-visible {
box-shadow: 0 0 0 3px `, ", 0 0 0 5px ", `,
0 0 0 7px `, `;
}
}
&:before {
background: linear-gradient(
to left,
transparent 6px,
`, ` 6px
);
}
`])), n.red.dark2, n.red.light2, n.red.light3, N, n.red.dark3, n.red.dark2, n.red.light3, n.white, n.blue.light1, n.red.base), ye = a(Cn || (Cn = i([`
color: `, `;
border-color: `, `;
background-color: `, `;
.`, `, a {
color: `, `;
&:hover {
color: `, `;
}
&:focus-visible {
box-shadow: 0 0 0 3px `, ", 0 0 0 5px ", `,
0 0 0 7px `, `;
}
}
&:before {
background: linear-gradient(
to left,
transparent 6px,
`, ` 6px
);
}
`])), n.green.dark2, n.green.light2, n.green.light3, N, n.green.dark3, n.green.dark2, n.green.light3, n.white, n.blue.light1, n.green.dark1), ke = t(t({}, B.Dark, t(t(t(t({}, s.Info, fe), s.Warning, ge), s.Danger, pe), s.Success, he)), B.Light, t(t(t(t({}, s.Info, ve), s.Warning, xe), s.Danger, me), s.Success, ye)), we = function(o, u) {
return a(Pn || (Pn = i([`
align-self: center;
flex-grow: 1;
margin-left: `, `;
margin-right: `, `;
.`, `, a {
font-size: inherit;
line-height: inherit;
font-weight: `, `;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
border-radius: 4px;
display: inline;
&:hover,
&:focus,
&:focus-visible {
outline: none;
span {
&::after {
display: none;
}
}
}
&:focus-visible {
position: relative;
}
}
`])), Sn(o, u).marginLeft, Sn(o, u).marginRight, N, Fn.bold);
}, Sn = function(o, u) {
var b = { marginLeft: void 0, marginRight: void 0 };
return o ? (b.marginLeft = "17px", b.marginRight = "4px", u && (b.marginRight = "".concat(28, "px"))) : (b.marginLeft = "13px", b.marginRight = "10px", u && (b.marginRight = "".concat(32, "px"))), b;
}, Oe = a(In || (In = i([`
padding-right: 36px; // add space for the icon
`]))), je = ["variant", "dismissible", "onClose", "image", "children", "className", "darkMode", "baseFontSize"], Dn = Mn(function(o, u) {
var b = o.variant, d = b === void 0 ? s.Info : b, w = o.dismissible, p = w !== void 0 && w, h = o.onClose, C = h === void 0 ? function() {
} : h, P = o.image, L = o.children, F = o.className, Z = o.darkMode, A = o.baseFontSize, z = function(v, f) {
if (v == null)
return {};
var j, x, O = function(M, T) {
if (M == null)
return {};
var H = {};
for (var R in M)
if ({}.hasOwnProperty.call(M, R)) {
if (T.indexOf(R) !== -1)
continue;
H[R] = M[R];
}
return H;
}(v, f);
if (Object.getOwnPropertySymbols) {
var D = Object.getOwnPropertySymbols(v);
for (x = 0; x < D.length; x++)
j = D[x], f.indexOf(j) === -1 && {}.propertyIsEnumerable.call(v, j) && (O[j] = v[j]);
}
return O;
}(o, je), e = Ln(Z), r = e.theme, c = e.darkMode, l = Zn(A);
return E.createElement("div", J({ role: "alert", ref: u, className: Y(de, Hn[l], ke[r][d], t({}, Oe, p), F) }, z), E.createElement(be, { image: P, theme: r, baseFontSize: l, variant: d }), E.createElement("div", { className: we(P != null, p) }, L), p && E.createElement(le, { theme: r, baseFontSize: l, variant: d, onClose: C, darkMode: c }));
}), $e = Dn;
Dn.displayName = "Banner";
export {
$e as L
};