@7pmlabs/design-system 0.5.11 → 0.6.0

package/dist/design-system19.mjs

@@ -1,259 +1,127 @@
-import { defineComponent as se, ref as m, computed as h, watch as B, nextTick as E, onMounted as le, onBeforeUnmount as te, openBlock as d, createElementBlock as o, createElementVNode as i, createVNode as S, normalizeClass as r, unref as x, Fragment as z, renderList as P, toDisplayString as y, createBlock as D, createCommentVNode as T, createTextVNode as de, withDirectives as ae, withModifiers as oe, vShow as ne } from "vue";
-import { useValidationField as ue } from "./design-system3.mjs";
-import { lockScrollBody as ie, unlockScrollBody as F, ensureVisiblePosition as re, resetPosition as ce } from "./design-system6.mjs";
-import { useI18n as ve } from "./design-system52.mjs";
-import pe from "./design-system29.mjs";
-import fe from "./design-system31.mjs";
-import me from "./design-system32.mjs";
-import he from "./design-system42.mjs";
-import ge from "./design-system103.mjs";
-const be = { class: "ds-absolute ds-right-3 ds-z-[1]" }, we = /* @__PURE__ */ i("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1), ke = [
-  we
-], xe = ["onClick"], ye = /* @__PURE__ */ i("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" }, null, -1), Ce = [
-  ye
-], _e = ["id", "disabled"], $e = /* @__PURE__ */ i("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1), Me = [
-  $e
-], Be = ["id", "data-cy", "data-ut"], Ee = { class: "ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow" }, Ie = { class: "ds-py-1 ds-text-sm ds-text-black/[0.85]" }, Ve = ["onClick"], Oe = /* @__PURE__ */ se({
-  __name: "BMultiSelect",
+import { defineComponent as L, ref as f, computed as l, openBlock as d, createElementBlock as k, createElementVNode as S, Fragment as W, renderList as z, createBlock as C, normalizeClass as U, unref as G, createCommentVNode as H } from "vue";
+import J from "./design-system15.mjs";
+import { useValidationField as Q } from "./design-system3.mjs";
+import { useI18n as T } from "./design-system50.mjs";
+import X from "./design-system102.mjs";
+import Y from "./design-system101.mjs";
+import Z from "./design-system103.mjs";
+const ee = { class: "ds-flex ds-items-center ds-justify-center ds-space-x-2" }, re = /* @__PURE__ */ L({
+  __name: "BOtpField",
   props: {
     inputId: { default: "" },
-    modelValue: {},
-    label: { default: "" },
-    items: {},
+    modelValue: { default: "" },
+    numInputs: { default: 6 },
+    focusIndex: { default: void 0 },
     disabled: { type: Boolean, default: !1 },
-    placeholder: { default: "" },
-    valueCssClass: { default: "" },
-    menuCssClass: { default: "" },
+    inputCssClass: { default: "" },
     validationRules: { default: void 0 },
     required: { type: Boolean, default: !1 },
     requiredErrorMessage: { default: "" },
-    hideDetails: { type: Boolean, default: !1 },
-    showSelectedItemCount: { type: Boolean, default: !1 },
-    allowInput: { type: Boolean, default: !1 }
+    hideDetails: { type: Boolean, default: !1 }
   },
-  emits: ["change", "open", "close", "change:input", "update:modelValue"],
-  setup(N, { expose: O, emit: U }) {
-    const t = N, v = U, g = m(null), C = m(null), b = m(null), n = m(!1), { t: I } = ve(), j = {
-      validateRule: (e) => !!e && e.length > 0,
-      errorMessage: () => t.requiredErrorMessage || I("ds.global.field_required")
-    }, _ = m(""), c = m([]), w = h(() => t.inputId || `id-${ge()}`), a = h({
+  emits: ["complete", "change", "update:focusIndex", "update:modelValue"],
+  setup(D, { expose: _, emit: y }) {
+    const t = D, o = y, { t: V } = T(), B = {
+      validateRule: (e) => !!e,
+      errorMessage: () => t.requiredErrorMessage || V("ds.global.field_required")
+    }, p = f(0), m = f([]), v = f(null), R = (e) => {
+      a.value = e;
+    }, j = () => {
+      a.value = -1;
+    }, F = l(() => t.inputId || `id-${Y()}`), s = l({
       get() {
-        return t.modelValue;
+        return t.modelValue.split("");
       },
       set(e) {
-        v("update:modelValue", e);
+        o("update:modelValue", e.join(""));
       }
-    }), W = h(() => {
-      let e = "ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between ";
-      return e += t.disabled ? "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] " : "ds-bg-white ds-text-black/[0.85] ", e += p.value.valid ? "ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus " : "ds-border-error focus:ds-ring-1 focus:ds-ring-error ", e;
-    }), A = h(() => {
-      let e = [];
-      return t.required && e.push(j), t.validationRules && (e = e.concat(t.validationRules)), e.length ? e : void 0;
-    }), G = h(
-      () => {
-        var e, s;
-        return ((e = a.value) == null ? void 0 : e.length) > 1 ? ` (${I("ds.components.base.multi_select.selected_item_count", {
-          count: (s = a.value) == null ? void 0 : s.length
-        })})` : "";
-      }
-    ), H = h(
-      () => t.showSelectedItemCount ? `${t.label}${G.value}` : t.label
-    ), { validate: $, validationResult: p } = ue(
-      w.value,
-      a,
-      A.value
-    );
-    B(n, (e) => {
-      e ? (ie(), Y(), v("open")) : (F(), L(), v("close"));
-    }), B(
-      a,
-      () => {
-        M();
+    }), q = l(() => t.modelValue), a = l({
+      get() {
+        return t.focusIndex !== void 0 ? t.focusIndex : p.value;
       },
-      {
-        deep: !0
+      set(e) {
+        t.focusIndex !== void 0 ? o("update:focusIndex", e) : p.value = e;
       }
-    ), B(
-      () => t.items,
-      () => {
-        a.value.length !== 0 && c.value.length === 0 && M();
-      },
-      {
-        deep: !0
+    }), w = l(() => {
+      let e = [];
+      return t.required && e.push(B), t.validationRules && (e = e.concat(t.validationRules)), e.length ? e : void 0;
+    }), M = l(() => [
+      t.disabled ? "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]" : "ds-text-black/[0.85]",
+      g.value.valid ? "ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus" : "ds-border-error focus:ds-ring-1 focus:ds-ring-error",
+      t.inputCssClass
+    ]), { validate: h, validationResult: g } = Q(
+      F.value,
+      q,
+      w.value
+    ), E = () => {
+      v.value[a.value].focus();
+    }, I = () => s.value.join("").length === t.numInputs ? o("complete", s.value.join("")) : "Wait until the user enters the required number of characters", c = (e) => {
+      a.value = Math.max(Math.min(t.numInputs - 1, e), 0);
+    }, b = () => {
+      c(a.value + 1);
+    }, O = () => {
+      c(a.value - 1);
+    }, i = (e) => {
+      m.value = [...s.value], s.value[a.value] = e, s.value = Z(s.value);
+      const u = m.value.join(""), r = s.value.join("");
+      u !== r && (o("change", r), I());
+    }, $ = (e) => {
+      e.preventDefault();
+      const u = e.clipboardData.getData("text/plain").slice(0, t.numInputs - a.value).split("");
+      if (!u.join("").match(/^\d+$/))
+        return "Invalid pasted data";
+      const n = s.value.slice(0, a.value).concat(u);
+      return n.slice(0, t.numInputs).forEach((x, N) => {
+        s.value[N] = x;
+      }), c(n.slice(0, t.numInputs).length), o("update:modelValue", s.value.join("")), I();
+    }, A = (e) => {
+      i(e), b();
+    }, K = (e) => {
+      switch (e.key) {
+        case "Backspace":
+          e.preventDefault(), i(""), O();
+          break;
+        case "Delete":
+          e.preventDefault(), i("");
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), O();
+          break;
+        case "ArrowRight":
+          e.preventDefault(), b();
+          break;
       }
-    );
-    const M = () => {
-      c.value = a.value.map((e) => {
-        let s = c.value.find((u) => u.value === e);
-        return s || (s = t.items.find((u) => u.value === e)), { text: s == null ? void 0 : s.text, value: e, cssClass: s == null ? void 0 : s.cssClass };
-      });
-    }, J = () => {
-      document.addEventListener("keydown", V);
-    }, V = (e) => {
-      e.key === "Escape" && R();
-    }, K = () => {
-      document.addEventListener("click", q);
-    }, q = (e) => {
-      [g.value, b.value].some((l) => e.composedPath().includes(l)) || R();
-    }, Q = (e) => {
-      const s = a.value.findIndex((u) => u === e.value);
-      s !== -1 ? a.value.splice(s, 1) : a.value.push(e.value), v("change", e.value), E(() => {
-        $();
-      });
-    }, X = (e, s) => {
-      s.style.width = `${e.offsetWidth}px`;
-    }, Y = () => {
-      E(() => {
-        re(g.value, b.value), X(g.value, b.value);
-      });
-    }, L = () => {
-      ce(g.value, b.value);
-    }, Z = (e) => {
-      v("change:input", e);
-    }, R = () => {
-      var e;
-      n.value = !1, (e = C.value) == null || e.blur(), _.value = "";
-    }, ee = (e) => {
-      const s = a.value.findIndex((u) => u === e.value);
-      s !== -1 && (a.value.splice(s, 1), v("change", e.value), E(() => {
-        $();
-      }));
-    };
-    return (() => {
-      var e;
-      ((e = t.items) == null ? void 0 : e.length) > 0 && M();
-    })(), le(() => {
-      J(), K();
-    }), te(() => {
-      document.removeEventListener("keydown", V), document.removeEventListener("click", q), F(), L();
-    }), O({ validate: $, selectMenu: n }), (e, s) => {
-      var u;
-      return d(), o("div", null, [
-        i("div", {
-          ref_key: "selectEl",
-          ref: g
-        }, [
-          S(me, {
-            id: w.value,
-            label: H.value,
-            required: e.required
-          }, null, 8, ["id", "label", "required"]),
-          t.allowInput ? (d(), o("div", {
-            key: 0,
-            class: r([{
-              "ds-border-focus ds-ring-1 ds-ring-focus": n.value && x(p).valid,
-              "ds-ring-1 ds-ring-error": n.value && !x(p).valid,
-              "ds-border-black/10": x(p).valid,
-              "ds-border-error": !x(p).valid
-            }, "ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light"])
-          }, [
-            i("div", be, [
-              (d(), o("svg", {
-                class: r([[n.value ? "ds-rotate-180" : ""], "ds-h-4 ds-w-4 ds-transition-transform"]),
-                viewBox: "0 0 320 512",
-                xmlns: "http://www.w3.org/2000/svg",
-                onClick: s[0] || (s[0] = (l) => {
-                  var f;
-                  return (f = C.value) == null ? void 0 : f.focus();
-                })
-              }, ke, 2))
-            ]),
-            (d(!0), o(z, null, P(c.value, (l, f) => (d(), o("div", {
-              key: `item${f}`,
-              class: "ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2"
-            }, [
-              i("span", null, y(l.text), 1),
-              (d(), o("svg", {
-                class: "ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40",
-                viewBox: "0 0 512 512",
-                xmlns: "http://www.w3.org/2000/svg",
-                onClick: (k) => ee(l)
-              }, Ce, 8, xe))
-            ]))), 128)),
-            t.allowInput ? (d(), D(he, {
-              key: 0,
-              id: w.value,
-              ref_key: "inputRef",
-              ref: C,
-              modelValue: _.value,
-              "onUpdate:modelValue": [
-                s[1] || (s[1] = (l) => _.value = l),
-                Z
-              ],
-              disabled: t.disabled,
-              class: "ds-flex-auto",
-              "hide-details": "",
-              "input-css-class": "ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0",
-              onFocus: s[2] || (s[2] = (l) => n.value = !0)
-            }, null, 8, ["id", "modelValue", "disabled"])) : T("", !0)
-          ], 2)) : (d(), o("button", {
-            key: 1,
-            id: w.value,
-            class: r(W.value),
-            disabled: e.disabled,
-            type: "button",
-            onClick: s[3] || (s[3] = (l) => n.value = !n.value)
-          }, [
-            c.value.length > 0 ? (d(), o("span", {
-              key: 0,
-              class: r([e.valueCssClass, "ds-truncate ds-text-sm"])
-            }, y((u = c.value) == null ? void 0 : u.map((l) => l.text).join(", ")), 3)) : (d(), o("span", {
-              key: 1,
-              class: r([e.valueCssClass, "ds-truncate ds-text-sm ds-text-black/[0.4]"])
-            }, y(t.placeholder), 3)),
-            de("   "),
-            (d(), o("svg", {
-              class: r([[n.value ? "ds-rotate-180" : ""], "ds-h-4 ds-w-4 ds-transition-transform"]),
-              viewBox: "0 0 320 512",
-              xmlns: "http://www.w3.org/2000/svg"
-            }, Me, 2))
-          ], 10, _e)),
-          ae(i("div", {
-            id: `${w.value}Menu`,
-            ref_key: "selectMenuEl",
-            ref: b,
-            class: r([e.menuCssClass, "ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1"]),
-            "data-cy": e.$attrs["data-cy"] ? `${e.$attrs["data-cy"]}Menu` : void 0,
-            "data-ut": e.$attrs["data-ut"] ? `${e.$attrs["data-ut"]}Menu` : void 0
-          }, [
-            i("div", Ee, [
-              i("ul", Ie, [
-                (d(!0), o(z, null, P(e.items, (l, f) => (d(), o("li", {
-                  key: `item${f}`,
-                  class: "ds-cursor-pointer",
-                  onClick: oe((k) => Q(l), ["prevent"])
-                }, [
-                  i("a", {
-                    class: r([
-                      l.cssClass + `${c.value.some((k) => k.value === l.value) ? " ds-bg-slate-100" : ""}`,
-                      "ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-100"
-                    ])
-                  }, [
-                    S(pe, {
-                      modelValue: a.value,
-                      "onUpdate:modelValue": s[4] || (s[4] = (k) => a.value = k),
-                      value: l.value,
-                      size: "sm"
-                    }, null, 8, ["modelValue", "value"]),
-                    i("span", null, y(l == null ? void 0 : l.text), 1)
-                  ], 2)
-                ], 8, Ve))), 128))
-              ])
-            ])
-          ], 10, Be), [
-            [ne, n.value]
-          ])
-        ], 512),
-        e.hideDetails ? T("", !0) : (d(), D(fe, {
-          key: 0,
-          "error-message": x(p).errorMessage(),
-          class: "ds-mt-1"
-        }, null, 8, ["error-message"]))
-      ]);
+    }, P = () => {
+      h();
     };
+    return _({ validate: h, focus: E }), (e, u) => (d(), k("div", null, [
+      S("div", ee, [
+        (d(!0), k(W, null, z(e.numInputs, (r, n) => (d(), C(X, {
+          key: n,
+          ref_for: !0,
+          ref_key: "boxRefs",
+          ref: v,
+          class: U(M.value),
+          focus: a.value === n,
+          "is-disabled": e.disabled,
+          value: s.value[n],
+          onOnChange: A,
+          onOnKeydown: K,
+          onOnKeyup: P,
+          onOnPaste: $,
+          onOnFocus: (x) => R(n),
+          onOnBlur: j
+        }, null, 8, ["class", "focus", "is-disabled", "value", "onOnFocus"]))), 128))
+      ]),
+      e.hideDetails ? H("", !0) : (d(), C(J, {
+        key: 0,
+        "error-message": G(g).errorMessage(),
+        class: "ds-mt-1"
+      }, null, 8, ["error-message"]))
+    ]));
   }
 });
 export {
-  Oe as default
+  re as default
 };
 //# sourceMappingURL=design-system19.mjs.map

package/dist/design-system19.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system19.mjs","sources":["../src/components/BMultiSelect.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withModifiers as _withModifiers, vShow as _vShow, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-absolute ds-right-3 ds-z-[1]\" }\nconst _hoisted_2 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\nconst _hoisted_3 = [\n  _hoisted_2\n]\nconst _hoisted_4 = [\"onClick\"]\nconst _hoisted_5 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" }, null, -1)\nconst _hoisted_6 = [\n  _hoisted_5\n]\nconst _hoisted_7 = [\"id\", \"disabled\"]\nconst _hoisted_8 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\nconst _hoisted_9 = [\n  _hoisted_8\n]\nconst _hoisted_10 = [\"id\", \"data-cy\", \"data-ut\"]\nconst _hoisted_11 = { class: \"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow\" }\nconst _hoisted_12 = { class: \"ds-py-1 ds-text-sm ds-text-black/[0.85]\" }\nconst _hoisted_13 = [\"onClick\"]\n\nimport {\n  useValidationField,\n  type ValidationRule,\n} from '@/composables/Validation';\nimport {\n  ensureVisiblePosition,\n  lockScrollBody,\n  resetPosition,\n  unlockScrollBody,\n} from '@/helpers/ComponentHelper';\nimport { v4 as uuid } from 'uuid';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n} from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BCheckbox from './BCheckbox.vue';\nimport BErrorMessage from './BErrorMessage.vue';\nimport BLabel from './BLabel.vue';\nimport BTextField from './BTextField.vue';\nimport type { DisplayItem } from '@/types';\n\n//#region Props\nexport interface BMultiSelectProps {\n  inputId?: string;\n  modelValue: Array<string | number>;\n  label?: string;\n  items: DisplayItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  valueCssClass?: string;\n  menuCssClass?: string;\n  /**\n   * Array of custom validation rules.\n   */\n  validationRules?: ValidationRule[];\n  /**\n   * Validate if the field is left empty.\n   */\n  required?: boolean;\n  requiredErrorMessage?: string;\n  /**\n   * Hide the validation error message.\n   */\n  hideDetails?: boolean;\n  /**\n   * Show number of selected items.\n   */\n  showSelectedItemCount?: boolean;\n  /**\n   * Allow to type to search.\n   */\n  allowInput?: boolean;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BMultiSelect',\n  props: {\n    inputId: { default: '' },\n    modelValue: {},\n    label: { default: '' },\n    items: {},\n    disabled: { type: Boolean, default: false },\n    placeholder: { default: '' },\n    valueCssClass: { default: '' },\n    menuCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false },\n    showSelectedItemCount: { type: Boolean, default: false },\n    allowInput: { type: Boolean, default: false }\n  },\n  emits: [\"change\", \"open\", \"close\", \"change:input\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n// https://vuejs.org/guide/essentials/event-handling.html#event-modifiers\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\n//#endregion\n\n//#region Data\nconst selectEl = ref<HTMLElement | null>(null);\nconst inputRef = ref<InstanceType<typeof BTextField> | null>(null);\nconst selectMenuEl = ref<HTMLElement | null>(null);\nconst selectMenu = ref(false);\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n  validateRule: (val: Array<string | number>) => !!val && val.length > 0,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst inputText = ref('');\nconst selectedItems = ref<DisplayItem[]>([]);\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed({\n  get() {\n    return props.modelValue;\n  },\n  set(val) {\n    emit('update:modelValue', val);\n  },\n});\nconst btnCssClass = computed(() => {\n  let result = `ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between `;\n  result += props.disabled\n    ? `ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] `\n    : `ds-bg-white ds-text-black/[0.85] `;\n  result += !validationResult.value.valid\n    ? `ds-border-error focus:ds-ring-1 focus:ds-ring-error `\n    : `ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus `;\n\n  return result;\n});\nconst vRules = computed(() => {\n  let result: ValidationRule[] = [];\n\n  if (props.required) {\n    result.push(validateRequired);\n  }\n  if (props.validationRules) {\n    result = result.concat(props.validationRules);\n  }\n\n  return result.length ? result : undefined;\n});\nconst selectedItemCount = computed(() =>\n  value.value?.length > 1\n    ? ` (${t('ds.components.base.multi_select.selected_item_count', {\n        count: value.value?.length,\n      })})`\n    : '',\n);\nconst labelDisplay = computed(() =>\n  props.showSelectedItemCount\n    ? `${props.label}${selectedItemCount.value}`\n    : props.label,\n);\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  value,\n  vRules.value,\n);\n//#endregion\n\n//#region Watchers\nwatch(selectMenu, (val) => {\n  if (val) {\n    lockScrollBody();\n    ensureMenuPosition();\n    emit('open');\n  } else {\n    unlockScrollBody();\n    resetMenuPosition();\n    emit('close');\n  }\n});\nwatch(\n  value,\n  () => {\n    ensureSelectedItems();\n  },\n  {\n    deep: true,\n  },\n);\nwatch(\n  () => props.items,\n  () => {\n    if (value.value.length !== 0 && selectedItems.value.length === 0) {\n      ensureSelectedItems();\n    }\n  },\n  {\n    deep: true,\n  },\n);\n//#endregion\n\n//#region Methods\nconst ensureSelectedItems = () => {\n  selectedItems.value = value.value.map((v) => {\n    let item = selectedItems.value.find((i) => i.value === v);\n    if (!item) {\n      item = props.items.find((i) => i.value === v);\n    }\n    return { text: item?.text, value: v, cssClass: item?.cssClass };\n  });\n};\nconst initPressEscapeEventListener = () => {\n  document.addEventListener('keydown', closeOnEscapePressed);\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    closeSelectMenu();\n  }\n};\nconst initClickOutsideEventListener = () => {\n  document.addEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: any) => {\n  const refs = [selectEl.value, selectMenuEl.value];\n  const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n  if (!withinBoundaries) {\n    closeSelectMenu();\n  }\n};\nconst onClickItem = (item: DisplayItem) => {\n  const index = value.value.findIndex((v) => v === item.value);\n  if (index !== -1) {\n    value.value.splice(index, 1);\n  } else {\n    value.value.push(item.value);\n  }\n  emit('change', item.value);\n  nextTick(() => {\n    validate();\n  });\n};\nconst ensureMenuWidth = (parentEl: HTMLElement, menuEl: HTMLElement) => {\n  menuEl.style.width = `${parentEl.offsetWidth}px`;\n};\nconst ensureMenuPosition = () => {\n  nextTick(() => {\n    ensureVisiblePosition(selectEl.value!, selectMenuEl.value!);\n    ensureMenuWidth(selectEl.value!, selectMenuEl.value!);\n  });\n};\nconst resetMenuPosition = () => {\n  resetPosition(selectEl.value!, selectMenuEl.value!);\n};\nconst onChangeInputText = (text: string) => {\n  emit('change:input', text);\n};\nconst closeSelectMenu = () => {\n  selectMenu.value = false;\n  inputRef.value?.blur();\n  inputText.value = '';\n};\nconst deselectItem = (item: DisplayItem) => {\n  const index = value.value.findIndex((v) => v === item.value);\n  if (index !== -1) {\n    value.value.splice(index, 1);\n    emit('change', item.value);\n    nextTick(() => {\n      validate();\n    });\n  }\n};\nconst init = () => {\n  if (props.items?.length > 0) {\n    ensureSelectedItems();\n  }\n};\ninit();\n//#endregion\n\n//#region Lifecycle Hooks\nonMounted(() => {\n  initPressEscapeEventListener();\n  initClickOutsideEventListener();\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', closeOnEscapePressed);\n  document.removeEventListener('click', closeOnClickOutside);\n  unlockScrollBody();\n  // Make sure dropdown menu unmounted with itself\n  resetMenuPosition();\n});\n//#endregion\n\n__expose({ validate, selectMenu });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", {\n      ref_key: \"selectEl\",\n      ref: selectEl\n    }, [\n      _createVNode(BLabel, {\n        id: id.value,\n        label: labelDisplay.value,\n        required: _ctx.required\n      }, null, 8, [\"id\", \"label\", \"required\"]),\n      (props.allowInput)\n        ? (_openBlock(), _createElementBlock(\"div\", {\n            key: 0,\n            class: _normalizeClass([{\n          'ds-border-focus ds-ring-1 ds-ring-focus':\n            selectMenu.value && _unref(validationResult).valid,\n          'ds-ring-1 ds-ring-error': selectMenu.value && !_unref(validationResult).valid,\n          'ds-border-black/10': _unref(validationResult).valid,\n          'ds-border-error': !_unref(validationResult).valid,\n        }, \"ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light\"])\n          }, [\n            _createElementVNode(\"div\", _hoisted_1, [\n              (_openBlock(), _createElementBlock(\"svg\", {\n                class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-w-4 ds-transition-transform\"]),\n                viewBox: \"0 0 320 512\",\n                xmlns: \"http://www.w3.org/2000/svg\",\n                onClick: _cache[0] || (_cache[0] = ($event: any) => (inputRef.value?.focus()))\n              }, _hoisted_3, 2))\n            ]),\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(selectedItems.value, (item, i) => {\n              return (_openBlock(), _createElementBlock(\"div\", {\n                key: `item${i}`,\n                class: \"ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2\"\n              }, [\n                _createElementVNode(\"span\", null, _toDisplayString(item.text), 1),\n                (_openBlock(), _createElementBlock(\"svg\", {\n                  class: \"ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40\",\n                  viewBox: \"0 0 512 512\",\n                  xmlns: \"http://www.w3.org/2000/svg\",\n                  onClick: ($event: any) => (deselectItem(item))\n                }, _hoisted_6, 8, _hoisted_4))\n              ]))\n            }), 128)),\n            (props.allowInput)\n              ? (_openBlock(), _createBlock(BTextField, {\n                  key: 0,\n                  id: id.value,\n                  ref_key: \"inputRef\",\n                  ref: inputRef,\n                  modelValue: inputText.value,\n                  \"onUpdate:modelValue\": [\n                    _cache[1] || (_cache[1] = ($event: any) => ((inputText).value = $event)),\n                    onChangeInputText\n                  ],\n                  disabled: props.disabled,\n                  class: \"ds-flex-auto\",\n                  \"hide-details\": \"\",\n                  \"input-css-class\": \"ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0\",\n                  onFocus: _cache[2] || (_cache[2] = ($event: any) => (selectMenu.value = true))\n                }, null, 8, [\"id\", \"modelValue\", \"disabled\"]))\n              : _createCommentVNode(\"\", true)\n          ], 2))\n        : (_openBlock(), _createElementBlock(\"button\", {\n            key: 1,\n            id: id.value,\n            class: _normalizeClass(btnCssClass.value),\n            disabled: _ctx.disabled,\n            type: \"button\",\n            onClick: _cache[3] || (_cache[3] = ($event: any) => (selectMenu.value = !selectMenu.value))\n          }, [\n            (selectedItems.value.length > 0)\n              ? (_openBlock(), _createElementBlock(\"span\", {\n                  key: 0,\n                  class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm\"])\n                }, _toDisplayString(selectedItems.value?.map((s) => s.text).join(', ')), 3))\n              : (_openBlock(), _createElementBlock(\"span\", {\n                  key: 1,\n                  class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm ds-text-black/[0.4]\"])\n                }, _toDisplayString(props.placeholder), 3)),\n            _createTextVNode(\"   \"),\n            (_openBlock(), _createElementBlock(\"svg\", {\n              class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-w-4 ds-transition-transform\"]),\n              viewBox: \"0 0 320 512\",\n              xmlns: \"http://www.w3.org/2000/svg\"\n            }, _hoisted_9, 2))\n          ], 10, _hoisted_7)),\n      _withDirectives(_createElementVNode(\"div\", {\n        id: `${id.value}Menu`,\n        ref_key: \"selectMenuEl\",\n        ref: selectMenuEl,\n        class: _normalizeClass([_ctx.menuCssClass, \"ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1\"]),\n        \"data-cy\": _ctx.$attrs['data-cy'] ? `${_ctx.$attrs['data-cy']}Menu` : undefined,\n        \"data-ut\": _ctx.$attrs['data-ut'] ? `${_ctx.$attrs['data-ut']}Menu` : undefined\n      }, [\n        _createElementVNode(\"div\", _hoisted_11, [\n          _createElementVNode(\"ul\", _hoisted_12, [\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.items, (item, index) => {\n              return (_openBlock(), _createElementBlock(\"li\", {\n                key: `item${index}`,\n                class: \"ds-cursor-pointer\",\n                onClick: _withModifiers(($event: any) => (onClickItem(item)), [\"prevent\"])\n              }, [\n                _createElementVNode(\"a\", {\n                  class: _normalizeClass([\n                  item.cssClass +\n                  `${\n                    selectedItems.value.some((s) => s.value === item.value)\n                      ? ' ds-bg-slate-100'\n                      : ''\n                  }`\n                , \"ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-100\"])\n                }, [\n                  _createVNode(BCheckbox, {\n                    modelValue: value.value,\n                    \"onUpdate:modelValue\": _cache[4] || (_cache[4] = ($event: any) => ((value).value = $event)),\n                    value: item.value,\n                    size: \"sm\"\n                  }, null, 8, [\"modelValue\", \"value\"]),\n                  _createElementVNode(\"span\", null, _toDisplayString(item?.text), 1)\n                ], 2)\n              ], 8, _hoisted_13))\n            }), 128))\n          ])\n        ])\n      ], 10, _hoisted_10), [\n        [_vShow, selectMenu.value]\n      ])\n    ], 512),\n    (!_ctx.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"ds-mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true)\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_sfc_main","_defineComponent","__props","__expose","__emit","props","emit","selectEl","ref","inputRef","selectMenuEl","selectMenu","t","useI18n","validateRequired","val","inputText","selectedItems","id","computed","uuid","value","btnCssClass","result","validationResult","vRules","selectedItemCount","_a","_b","labelDisplay","validate","useValidationField","watch","lockScrollBody","ensureMenuPosition","unlockScrollBody","resetMenuPosition","ensureSelectedItems","v","item","i","initPressEscapeEventListener","closeOnEscapePressed","event","closeSelectMenu","initClickOutsideEventListener","closeOnClickOutside","r","onClickItem","index","nextTick","ensureMenuWidth","parentEl","menuEl","ensureVisiblePosition","resetPosition","onChangeInputText","text","deselectItem","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_createVNode","BLabel","_normalizeClass","_unref","$event","_Fragment","_renderList","_toDisplayString","_createBlock","BTextField","_createCommentVNode","s","_createTextVNode","_withDirectives","_withModifiers","BCheckbox","_vShow","BErrorMessage"],"mappings":"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"}
+{"version":3,"file":"design-system19.mjs","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\nimport {\n  useValidationField,\n  type ValidationRule,\n} from '@/composables/Validation';\nimport { cloneDeep } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BOtpFieldBox from './BOtpFieldBox.vue';\n\n//#region Props\nexport interface BOtpFieldProps {\n  inputId?: string;\n  modelValue: string;\n  /**\n   * Number of input boxes.\n   */\n  numInputs?: number;\n  /**\n   * Index of input box to be focused.\n   */\n  focusIndex?: number;\n  disabled?: boolean;\n  inputCssClass?: string | {};\n  /**\n   * Array of custom validation rules.\n   */\n  validationRules?: ValidationRule[];\n  /**\n   * Validate if the field is left empty.\n   */\n  required?: boolean;\n  requiredErrorMessage?: string;\n  /**\n   * Hide the validation error message.\n   */\n  hideDetails?: boolean;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpField',\n  props: {\n    inputId: { default: '' },\n    modelValue: { default: '' },\n    numInputs: { default: 6 },\n    focusIndex: { default: undefined },\n    disabled: { type: Boolean, default: false },\n    inputCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false }\n  },\n  emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n  validateRule: (val: string) => !!val,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst fIndex = ref(0);\nconst oldOtp = ref<any[]>([]);\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\nconst handleOnFocus = (index: number) => {\n  focusIndexValue.value = index;\n};\nconst handleOnBlur = () => {\n  focusIndexValue.value = -1;\n};\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed<any[]>({\n  get() {\n    return props.modelValue.split('');\n  },\n  set(val: any) {\n    emit('update:modelValue', val.join(''));\n  },\n});\nconst originalValue = computed(() => props.modelValue);\nconst focusIndexValue = computed({\n  get() {\n    return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\n  },\n  set(val: number) {\n    if (props.focusIndex !== undefined) {\n      emit('update:focusIndex', val);\n    } else {\n      fIndex.value = val;\n    }\n  },\n});\nconst vRules = computed(() => {\n  let result: ValidationRule[] = [];\n\n  if (props.required) {\n    result.push(validateRequired);\n  }\n  if (props.validationRules) {\n    result = result.concat(props.validationRules);\n  }\n\n  return result.length ? result : undefined;\n});\nconst inputCssClassValue = computed(() => [\n  ...[\n    props.disabled\n      ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\n      : 'ds-text-black/[0.85]',\n    validationResult.value.valid\n      ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\n      : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\n  ],\n  props.inputCssClass,\n]);\n\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  originalValue,\n  vRules.value,\n);\n//#endregion\n\n//#region Methods\nconst focus = () => {\n  boxRefs.value![focusIndexValue.value].focus();\n};\nconst checkFilledAllInputs = () => {\n  if (value.value.join('').length === props.numInputs) {\n    return emit('complete', value.value.join(''));\n  }\n  return 'Wait until the user enters the required number of characters';\n};\n// Focus on input by index\nconst focusInput = (input: number) => {\n  focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\n};\n// Focus on next input\nconst focusNextInput = () => {\n  focusInput(focusIndexValue.value + 1);\n};\n// Focus on previous input\nconst focusPrevInput = () => {\n  focusInput(focusIndexValue.value - 1);\n};\n// Change OTP value at focused input\nconst changeCodeAtFocus = (val: number | string) => {\n  oldOtp.value = [...value.value];\n\n  value.value[focusIndexValue.value] = val;\n  value.value = cloneDeep(value.value);\n\n  const oldOtpStr = oldOtp.value.join('');\n  const otpStr = value.value.join('');\n  if (oldOtpStr !== otpStr) {\n    emit('change', otpStr);\n    checkFilledAllInputs();\n  }\n};\n// Handle pasted OTP\nconst handleOnPaste = (event: any) => {\n  event.preventDefault();\n  const pastedData = event.clipboardData\n    .getData('text/plain')\n    .slice(0, props.numInputs - focusIndexValue.value)\n    .split('');\n  if (!pastedData.join('').match(/^\\d+$/)) {\n    return 'Invalid pasted data';\n  }\n\n  // Paste data from focused input onwards\n  const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\n  const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\n\n  combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\n    value.value[i] = val;\n  });\n\n  focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\n\n  // Update modelValue when data is pasted from keyboard\n  emit('update:modelValue', value.value.join(''));\n  // Check if `complete`\n  return checkFilledAllInputs();\n};\nconst handleOnChange = (val: string) => {\n  changeCodeAtFocus(val);\n  focusNextInput();\n};\n// Handle cases of backspace, delete, left arrow, right arrow\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  switch (event.key) {\n    case 'Backspace':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      focusPrevInput();\n      break;\n    case 'Delete':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      focusPrevInput();\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      focusNextInput();\n      break;\n    default:\n      break;\n  }\n};\nconst handleOnKeyUp = () => {\n  validate();\n};\n//#endregion\n\n__expose({ validate, focus });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", _hoisted_1, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n        return (_openBlock(), _createBlock(BOtpFieldBox, {\n          key: i,\n          ref_for: true,\n          ref_key: \"boxRefs\",\n          ref: boxRefs,\n          class: _normalizeClass(inputCssClassValue.value),\n          focus: focusIndexValue.value === i,\n          \"is-disabled\": _ctx.disabled,\n          value: value.value[i],\n          onOnChange: handleOnChange,\n          onOnKeydown: handleOnKeyDown,\n          onOnKeyup: handleOnKeyUp,\n          onOnPaste: handleOnPaste,\n          onOnFocus: ($event: any) => (handleOnFocus(i)),\n          onOnBlur: handleOnBlur\n        }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n      }), 128))\n    ]),\n    (!_ctx.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"ds-mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true)\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","__emit","props","emit","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":";;;;;;;AAGA,MAAMA,KAAa,EAAE,OAAO,4DA2CAC,KAAiBC,gBAAAA,EAAA;AAAA,EAC3C,QAAQ;AAAA,EACR,OAAO;AAAA,IACL,SAAS,EAAE,SAAS,GAAG;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG;AAAA,IAC1B,WAAW,EAAE,SAAS,EAAE;AAAA,IACxB,YAAY,EAAE,SAAS,OAAU;AAAA,IACjC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA,IAC1C,eAAe,EAAE,SAAS,GAAG;AAAA,IAC7B,iBAAiB,EAAE,SAAS,OAAU;AAAA,IACtC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA,IAC1C,sBAAsB,EAAE,SAAS,GAAG;AAAA,IACpC,aAAa,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA,EAC/C;AAAA,EACA,OAAO,CAAC,YAAY,UAAU,qBAAqB,mBAAmB;AAAA,EACtE,MAAMC,GAAc,EAAE,QAAQC,GAAU,MAAMC,KAAU;AAG1D,UAAMC,IAAQH,GAIRI,IAAOF,GAIP,EAAE,GAAAG,MAAMC,KACRC,IAAmC;AAAA,MACvC,cAAc,CAACC,MAAgB,CAAC,CAACA;AAAA,MACjC,cAAc,MACZL,EAAM,wBAAwBE,EAAE,0BAA0B;AAAA,IAAA,GAExDI,IAASC,EAAI,CAAC,GACdC,IAASD,EAAW,CAAA,CAAE,GACtBE,IAAUF,EAAqD,IAAI,GACnEG,IAAgB,CAACC,MAAkB;AACvC,MAAAC,EAAgB,QAAQD;AAAA,IAAA,GAEpBE,IAAe,MAAM;AACzB,MAAAD,EAAgB,QAAQ;AAAA,IAAA,GAEpBE,IAAKC,EAAS,MAAMf,EAAM,WAAW,MAAMgB,GAAM,EAAE,GACnDC,IAAQF,EAAgB;AAAA,MAC5B,MAAM;AACG,eAAAf,EAAM,WAAW,MAAM,EAAE;AAAA,MAClC;AAAA,MACA,IAAIK,GAAU;AACZ,QAAAJ,EAAK,qBAAqBI,EAAI,KAAK,EAAE,CAAC;AAAA,MACxC;AAAA,IAAA,CACD,GACKa,IAAgBH,EAAS,MAAMf,EAAM,UAAU,GAC/CY,IAAkBG,EAAS;AAAA,MAC/B,MAAM;AACJ,eAAOf,EAAM,eAAe,SAAYA,EAAM,aAAaM,EAAO;AAAA,MACpE;AAAA,MACA,IAAID,GAAa;AACX,QAAAL,EAAM,eAAe,SACvBC,EAAK,qBAAqBI,CAAG,IAE7BC,EAAO,QAAQD;AAAA,MAEnB;AAAA,IAAA,CACD,GACKc,IAASJ,EAAS,MAAM;AAC5B,UAAIK,IAA2B,CAAA;AAE/B,aAAIpB,EAAM,YACRoB,EAAO,KAAKhB,CAAgB,GAE1BJ,EAAM,oBACCoB,IAAAA,EAAO,OAAOpB,EAAM,eAAe,IAGvCoB,EAAO,SAASA,IAAS;AAAA,IAAA,CACjC,GACKC,IAAqBN,EAAS,MAAM;AAAA,MAEtCf,EAAM,WACF,8DACA;AAAA,MACJsB,EAAiB,MAAM,QACnB,oFACA;AAAA,MAENtB,EAAM;AAAA,IAAA,CACP,GAEK,EAAE,UAAAuB,GAAU,kBAAAD,EAAA,IAAqBE;AAAA,MACrCV,EAAG;AAAA,MACHI;AAAA,MACAC,EAAO;AAAA,IAAA,GAKHM,IAAQ,MAAM;AAClB,MAAAhB,EAAQ,MAAOG,EAAgB,KAAK,EAAE,MAAM;AAAA,IAAA,GAExCc,IAAuB,MACvBT,EAAM,MAAM,KAAK,EAAE,EAAE,WAAWjB,EAAM,YACjCC,EAAK,YAAYgB,EAAM,MAAM,KAAK,EAAE,CAAC,IAEvC,gEAGHU,IAAa,CAACC,MAAkB;AACpB,MAAAhB,EAAA,QAAQ,KAAK,IAAI,KAAK,IAAIZ,EAAM,YAAY,GAAG4B,CAAK,GAAG,CAAC;AAAA,IAAA,GAGpEC,IAAiB,MAAM;AAChB,MAAAF,EAAAf,EAAgB,QAAQ,CAAC;AAAA,IAAA,GAGhCkB,IAAiB,MAAM;AAChB,MAAAH,EAAAf,EAAgB,QAAQ,CAAC;AAAA,IAAA,GAGhCmB,IAAoB,CAAC1B,MAAyB;AAClD,MAAAG,EAAO,QAAQ,CAAC,GAAGS,EAAM,KAAK,GAExBA,EAAA,MAAML,EAAgB,KAAK,IAAIP,GAC/BY,EAAA,QAAQe,EAAUf,EAAM,KAAK;AAEnC,YAAMgB,IAAYzB,EAAO,MAAM,KAAK,EAAE,GAChC0B,IAASjB,EAAM,MAAM,KAAK,EAAE;AAClC,MAAIgB,MAAcC,MAChBjC,EAAK,UAAUiC,CAAM,GACAR;IACvB,GAGIS,IAAgB,CAACC,MAAe;AACpC,MAAAA,EAAM,eAAe;AACrB,YAAMC,IAAaD,EAAM,cACtB,QAAQ,YAAY,EACpB,MAAM,GAAGpC,EAAM,YAAYY,EAAgB,KAAK,EAChD,MAAM,EAAE;AACX,UAAI,CAACyB,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO;AAC7B,eAAA;AAKH,YAAAC,IADoBrB,EAAM,MAAM,MAAM,GAAGL,EAAgB,KAAK,EACnB,OAAOyB,CAAU;AAE3C,aAAAC,EAAA,MAAM,GAAGtC,EAAM,SAAS,EAAE,QAAQ,CAACK,GAAKkC,MAAM;AAC7D,QAAAtB,EAAA,MAAMsB,CAAC,IAAIlC;AAAA,MAAA,CAClB,GAEDsB,EAAWW,EAAuB,MAAM,GAAGtC,EAAM,SAAS,EAAE,MAAM,GAGlEC,EAAK,qBAAqBgB,EAAM,MAAM,KAAK,EAAE,CAAC,GAEvCS,EAAqB;AAAA,IAAA,GAExBc,IAAiB,CAACnC,MAAgB;AACtC,MAAA0B,EAAkB1B,CAAG,GACNwB;IAAA,GAGXY,IAAkB,CAACL,MAAyB;AAChD,cAAQA,EAAM,KAAK;AAAA,QACjB,KAAK;AACH,UAAAA,EAAM,eAAe,GACrBL,EAAkB,EAAE,GACLD;AACf;AAAA,QACF,KAAK;AACH,UAAAM,EAAM,eAAe,GACrBL,EAAkB,EAAE;AACpB;AAAA,QACF,KAAK;AACH,UAAAK,EAAM,eAAe,GACNN;AACf;AAAA,QACF,KAAK;AACH,UAAAM,EAAM,eAAe,GACNP;AACf;AAAA,MAGJ;AAAA,IAAA,GAEIa,IAAgB,MAAM;AACjB,MAAAnB;IAAA;AAIF,WAAAzB,EAAA,EAAE,UAAAyB,GAAU,OAAAE,EAAA,CAAO,GAErB,CAACkB,GAAUC,OACRC,EAAW,GAAGC,EAAoB,OAAO,MAAM;AAAA,MACrDC,EAAoB,OAAOrD,IAAY;AAAA,SACpCmD,EAAW,EAAI,GAAGC,EAAoBE,GAAW,MAAMC,EAAYN,EAAK,WAAW,CAACO,GAAGX,OAC9EM,EAAA,GAAcM,EAAaC,GAAc;AAAA,UAC/C,KAAKb;AAAA,UACL,SAAS;AAAA,UACT,SAAS;AAAA,UACT,KAAK9B;AAAA,UACL,OAAO4C,EAAgBhC,EAAmB,KAAK;AAAA,UAC/C,OAAOT,EAAgB,UAAU2B;AAAA,UACjC,eAAeI,EAAK;AAAA,UACpB,OAAO1B,EAAM,MAAMsB,CAAC;AAAA,UACpB,YAAYC;AAAA,UACZ,aAAaC;AAAA,UACb,WAAWC;AAAA,UACX,WAAWP;AAAA,UACX,WAAW,CAACmB,MAAiB5C,EAAc6B,CAAC;AAAA,UAC5C,UAAU1B;AAAA,QAAA,GACT,MAAM,GAAG,CAAC,SAAS,SAAS,eAAe,SAAS,WAAW,CAAC,EACpE,GAAG,GAAG;AAAA,MAAA,CACR;AAAA,MACC8B,EAAK,cAMHY,EAAoB,IAAI,EAAI,KAL3BV,EAAW,GAAGM,EAAaK,GAAe;AAAA,QACzC,KAAK;AAAA,QACL,iBAAiBC,EAAOnC,CAAgB,EAAE,aAAa;AAAA,QACvD,OAAO;AAAA,MAAA,GACN,MAAM,GAAG,CAAC,eAAe,CAAC;AAAA,IACD,CACjC;AAAA,EAEH;AAEA,CAAC;"}

package/dist/design-system190.js

@@ -1,2 +1,2 @@
-"use strict";const p=require("./design-system191.js"),c=require("./design-system192.js"),h=require("./design-system193.js"),s=require("./design-system194.js"),l=require("./design-system195.js");function e(t){var a=-1,o=t==null?0:t.length;for(this.clear();++a<o;){var r=t[a];this.set(r[0],r[1])}}e.prototype.clear=p;e.prototype.delete=c;e.prototype.get=h;e.prototype.has=s;e.prototype.set=l;module.exports=e;
+"use strict";const e=require("./design-system209.js"),r=require("./design-system143.js");var o=e(r,"Promise");const s=o;module.exports=s;
 //# sourceMappingURL=design-system190.js.map

package/dist/design-system190.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system190.js","sources":["../node_modules/lodash-es/_MapCache.js"],"sourcesContent":["import mapCacheClear from './_mapCacheClear.js';\nimport mapCacheDelete from './_mapCacheDelete.js';\nimport mapCacheGet from './_mapCacheGet.js';\nimport mapCacheHas from './_mapCacheHas.js';\nimport mapCacheSet from './_mapCacheSet.js';\n\n/**\n * Creates a map cache object to store key-value pairs.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\nfunction MapCache(entries) {\n  var index = -1,\n      length = entries == null ? 0 : entries.length;\n\n  this.clear();\n  while (++index < length) {\n    var entry = entries[index];\n    this.set(entry[0], entry[1]);\n  }\n}\n\n// Add methods to `MapCache`.\nMapCache.prototype.clear = mapCacheClear;\nMapCache.prototype['delete'] = mapCacheDelete;\nMapCache.prototype.get = mapCacheGet;\nMapCache.prototype.has = mapCacheHas;\nMapCache.prototype.set = mapCacheSet;\n\nexport default MapCache;\n"],"names":["MapCache","entries","index","length","entry","mapCacheClear","mapCacheDelete","mapCacheGet","mapCacheHas","mapCacheSet"],"mappings":"kMAaA,SAASA,EAASC,EAAS,CACzB,IAAIC,EAAQ,GACRC,EAASF,GAAW,KAAO,EAAIA,EAAQ,OAG3C,IADA,KAAK,MAAK,EACH,EAAEC,EAAQC,GAAQ,CACvB,IAAIC,EAAQH,EAAQC,CAAK,EACzB,KAAK,IAAIE,EAAM,CAAC,EAAGA,EAAM,CAAC,CAAC,CAC5B,CACH,CAGAJ,EAAS,UAAU,MAAQK,EAC3BL,EAAS,UAAU,OAAYM,EAC/BN,EAAS,UAAU,IAAMO,EACzBP,EAAS,UAAU,IAAMQ,EACzBR,EAAS,UAAU,IAAMS","x_google_ignoreList":[0]}
+{"version":3,"file":"design-system190.js","sources":["../node_modules/lodash-es/_Promise.js"],"sourcesContent":["import getNative from './_getNative.js';\nimport root from './_root.js';\n\n/* Built-in method references that are verified to be native. */\nvar Promise = getNative(root, 'Promise');\n\nexport default Promise;\n"],"names":["Promise","getNative","root","Promise$2"],"mappings":"yFAIA,IAAIA,EAAUC,EAAUC,EAAM,SAAS,EAEvC,MAAAC,EAAeH","x_google_ignoreList":[0]}

package/dist/design-system190.mjs

@@ -1,21 +1,8 @@
-import r from "./design-system191.mjs";
-import m from "./design-system192.mjs";
-import h from "./design-system193.mjs";
-import l from "./design-system194.mjs";
-import c from "./design-system195.mjs";
-function e(t) {
-  var o = -1, a = t == null ? 0 : t.length;
-  for (this.clear(); ++o < a; ) {
-    var p = t[o];
-    this.set(p[0], p[1]);
-  }
-}
-e.prototype.clear = r;
-e.prototype.delete = m;
-e.prototype.get = h;
-e.prototype.has = l;
-e.prototype.set = c;
+import o from "./design-system209.mjs";
+import r from "./design-system143.mjs";
+var t = o(r, "Promise");
+const i = t;
 export {
-  e as default
+  i as default
 };
 //# sourceMappingURL=design-system190.mjs.map

package/dist/design-system190.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system190.mjs","sources":["../node_modules/lodash-es/_MapCache.js"],"sourcesContent":["import mapCacheClear from './_mapCacheClear.js';\nimport mapCacheDelete from './_mapCacheDelete.js';\nimport mapCacheGet from './_mapCacheGet.js';\nimport mapCacheHas from './_mapCacheHas.js';\nimport mapCacheSet from './_mapCacheSet.js';\n\n/**\n * Creates a map cache object to store key-value pairs.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\nfunction MapCache(entries) {\n  var index = -1,\n      length = entries == null ? 0 : entries.length;\n\n  this.clear();\n  while (++index < length) {\n    var entry = entries[index];\n    this.set(entry[0], entry[1]);\n  }\n}\n\n// Add methods to `MapCache`.\nMapCache.prototype.clear = mapCacheClear;\nMapCache.prototype['delete'] = mapCacheDelete;\nMapCache.prototype.get = mapCacheGet;\nMapCache.prototype.has = mapCacheHas;\nMapCache.prototype.set = mapCacheSet;\n\nexport default MapCache;\n"],"names":["MapCache","entries","index","length","entry","mapCacheClear","mapCacheDelete","mapCacheGet","mapCacheHas","mapCacheSet"],"mappings":";;;;;AAaA,SAASA,EAASC,GAAS;AACzB,MAAIC,IAAQ,IACRC,IAASF,KAAW,OAAO,IAAIA,EAAQ;AAG3C,OADA,KAAK,MAAK,GACH,EAAEC,IAAQC,KAAQ;AACvB,QAAIC,IAAQH,EAAQC,CAAK;AACzB,SAAK,IAAIE,EAAM,CAAC,GAAGA,EAAM,CAAC,CAAC;AAAA,EAC5B;AACH;AAGAJ,EAAS,UAAU,QAAQK;AAC3BL,EAAS,UAAU,SAAYM;AAC/BN,EAAS,UAAU,MAAMO;AACzBP,EAAS,UAAU,MAAMQ;AACzBR,EAAS,UAAU,MAAMS;","x_google_ignoreList":[0]}
+{"version":3,"file":"design-system190.mjs","sources":["../node_modules/lodash-es/_Promise.js"],"sourcesContent":["import getNative from './_getNative.js';\nimport root from './_root.js';\n\n/* Built-in method references that are verified to be native. */\nvar Promise = getNative(root, 'Promise');\n\nexport default Promise;\n"],"names":["Promise","getNative","root","Promise$2"],"mappings":";;AAIA,IAAIA,IAAUC,EAAUC,GAAM,SAAS;AAEvC,MAAAC,IAAeH;","x_google_ignoreList":[0]}

package/dist/design-system191.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system212.js"),s=require("./design-system199.js"),t=require("./design-system178.js");function a(){this.size=0,this.__data__={hash:new e,map:new(t||s),string:new e}}module.exports=a;
+"use strict";const t=require("./design-system209.js"),e=require("./design-system143.js");var r=t(e,"Set");const o=r;module.exports=o;
 //# sourceMappingURL=design-system191.js.map

package/dist/design-system191.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system191.js","sources":["../node_modules/lodash-es/_mapCacheClear.js"],"sourcesContent":["import Hash from './_Hash.js';\nimport ListCache from './_ListCache.js';\nimport Map from './_Map.js';\n\n/**\n * Removes all key-value entries from the map.\n *\n * @private\n * @name clear\n * @memberOf MapCache\n */\nfunction mapCacheClear() {\n  this.size = 0;\n  this.__data__ = {\n    'hash': new Hash,\n    'map': new (Map || ListCache),\n    'string': new Hash\n  };\n}\n\nexport default mapCacheClear;\n"],"names":["mapCacheClear","Hash","Map","ListCache"],"mappings":"4HAWA,SAASA,GAAgB,CACvB,KAAK,KAAO,EACZ,KAAK,SAAW,CACd,KAAQ,IAAIC,EACZ,IAAO,IAAKC,GAAOC,GACnB,OAAU,IAAIF,CAClB,CACA","x_google_ignoreList":[0]}
+{"version":3,"file":"design-system191.js","sources":["../node_modules/lodash-es/_Set.js"],"sourcesContent":["import getNative from './_getNative.js';\nimport root from './_root.js';\n\n/* Built-in method references that are verified to be native. */\nvar Set = getNative(root, 'Set');\n\nexport default Set;\n"],"names":["Set","getNative","root","Set$1"],"mappings":"yFAIA,IAAIA,EAAMC,EAAUC,EAAM,KAAK,EAE/B,MAAAC,EAAeH","x_google_ignoreList":[0]}

package/dist/design-system191.mjs

@@ -1,14 +1,8 @@
-import a from "./design-system212.mjs";
-import t from "./design-system199.mjs";
-import e from "./design-system178.mjs";
-function o() {
-  this.size = 0, this.__data__ = {
-    hash: new a(),
-    map: new (e || t)(),
-    string: new a()
-  };
-}
+import t from "./design-system209.mjs";
+import o from "./design-system143.mjs";
+var e = t(o, "Set");
+const m = e;
 export {
-  o as default
+  m as default
 };
 //# sourceMappingURL=design-system191.mjs.map

package/dist/design-system191.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system191.mjs","sources":["../node_modules/lodash-es/_mapCacheClear.js"],"sourcesContent":["import Hash from './_Hash.js';\nimport ListCache from './_ListCache.js';\nimport Map from './_Map.js';\n\n/**\n * Removes all key-value entries from the map.\n *\n * @private\n * @name clear\n * @memberOf MapCache\n */\nfunction mapCacheClear() {\n  this.size = 0;\n  this.__data__ = {\n    'hash': new Hash,\n    'map': new (Map || ListCache),\n    'string': new Hash\n  };\n}\n\nexport default mapCacheClear;\n"],"names":["mapCacheClear","Hash","Map","ListCache"],"mappings":";;;AAWA,SAASA,IAAgB;AACvB,OAAK,OAAO,GACZ,KAAK,WAAW;AAAA,IACd,MAAQ,IAAIC;AAAA,IACZ,KAAO,KAAKC,KAAOC;AAAA,IACnB,QAAU,IAAIF;AAAA,EAClB;AACA;","x_google_ignoreList":[0]}
+{"version":3,"file":"design-system191.mjs","sources":["../node_modules/lodash-es/_Set.js"],"sourcesContent":["import getNative from './_getNative.js';\nimport root from './_root.js';\n\n/* Built-in method references that are verified to be native. */\nvar Set = getNative(root, 'Set');\n\nexport default Set;\n"],"names":["Set","getNative","root","Set$1"],"mappings":";;AAIA,IAAIA,IAAMC,EAAUC,GAAM,KAAK;AAE/B,MAAAC,IAAeH;","x_google_ignoreList":[0]}

package/dist/design-system192.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("./design-system213.js");function s(e){var t=r(this,e).delete(e);return this.size-=t?1:0,t}module.exports=s;
+"use strict";const e=require("./design-system209.js"),t=require("./design-system143.js");var a=e(t,"WeakMap");const r=a;module.exports=r;
 //# sourceMappingURL=design-system192.js.map

package/dist/design-system192.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system192.js","sources":["../node_modules/lodash-es/_mapCacheDelete.js"],"sourcesContent":["import getMapData from './_getMapData.js';\n\n/**\n * Removes `key` and its value from the map.\n *\n * @private\n * @name delete\n * @memberOf MapCache\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\nfunction mapCacheDelete(key) {\n  var result = getMapData(this, key)['delete'](key);\n  this.size -= result ? 1 : 0;\n  return result;\n}\n\nexport default mapCacheDelete;\n"],"names":["mapCacheDelete","key","result","getMapData"],"mappings":"sDAWA,SAASA,EAAeC,EAAK,CAC3B,IAAIC,EAASC,EAAW,KAAMF,CAAG,EAAE,OAAUA,CAAG,EAChD,YAAK,MAAQC,EAAS,EAAI,EACnBA,CACT","x_google_ignoreList":[0]}
+{"version":3,"file":"design-system192.js","sources":["../node_modules/lodash-es/_WeakMap.js"],"sourcesContent":["import getNative from './_getNative.js';\nimport root from './_root.js';\n\n/* Built-in method references that are verified to be native. */\nvar WeakMap = getNative(root, 'WeakMap');\n\nexport default WeakMap;\n"],"names":["WeakMap","getNative","root","WeakMap$1"],"mappings":"yFAIA,IAAIA,EAAUC,EAAUC,EAAM,SAAS,EAEvC,MAAAC,EAAeH","x_google_ignoreList":[0]}

package/dist/design-system192.mjs

@@ -1,9 +1,8 @@
-import a from "./design-system213.mjs";
-function i(e) {
-  var t = a(this, e).delete(e);
-  return this.size -= t ? 1 : 0, t;
-}
+import a from "./design-system209.mjs";
+import o from "./design-system143.mjs";
+var t = a(o, "WeakMap");
+const p = t;
 export {
-  i as default
+  p as default
 };
 //# sourceMappingURL=design-system192.mjs.map

package/dist/design-system192.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system192.mjs","sources":["../node_modules/lodash-es/_mapCacheDelete.js"],"sourcesContent":["import getMapData from './_getMapData.js';\n\n/**\n * Removes `key` and its value from the map.\n *\n * @private\n * @name delete\n * @memberOf MapCache\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\nfunction mapCacheDelete(key) {\n  var result = getMapData(this, key)['delete'](key);\n  this.size -= result ? 1 : 0;\n  return result;\n}\n\nexport default mapCacheDelete;\n"],"names":["mapCacheDelete","key","result","getMapData"],"mappings":";AAWA,SAASA,EAAeC,GAAK;AAC3B,MAAIC,IAASC,EAAW,MAAMF,CAAG,EAAE,OAAUA,CAAG;AAChD,cAAK,QAAQC,IAAS,IAAI,GACnBA;AACT;","x_google_ignoreList":[0]}
+{"version":3,"file":"design-system192.mjs","sources":["../node_modules/lodash-es/_WeakMap.js"],"sourcesContent":["import getNative from './_getNative.js';\nimport root from './_root.js';\n\n/* Built-in method references that are verified to be native. */\nvar WeakMap = getNative(root, 'WeakMap');\n\nexport default WeakMap;\n"],"names":["WeakMap","getNative","root","WeakMap$1"],"mappings":";;AAIA,IAAIA,IAAUC,EAAUC,GAAM,SAAS;AAEvC,MAAAC,IAAeH;","x_google_ignoreList":[0]}

package/dist/design-system193.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system213.js");function r(t){return e(this,t).get(t)}module.exports=r;
+"use strict";var o=Function.prototype,n=o.toString;function c(t){if(t!=null){try{return n.call(t)}catch{}try{return t+""}catch{}}return""}module.exports=c;
 //# sourceMappingURL=design-system193.js.map

package/dist/design-system193.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system193.js","sources":["../node_modules/lodash-es/_mapCacheGet.js"],"sourcesContent":["import getMapData from './_getMapData.js';\n\n/**\n * Gets the map value for `key`.\n *\n * @private\n * @name get\n * @memberOf MapCache\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\nfunction mapCacheGet(key) {\n  return getMapData(this, key).get(key);\n}\n\nexport default mapCacheGet;\n"],"names":["mapCacheGet","key","getMapData"],"mappings":"sDAWA,SAASA,EAAYC,EAAK,CACxB,OAAOC,EAAW,KAAMD,CAAG,EAAE,IAAIA,CAAG,CACtC","x_google_ignoreList":[0]}
+{"version":3,"file":"design-system193.js","sources":["../node_modules/lodash-es/_toSource.js"],"sourcesContent":["/** Used for built-in method references. */\nvar funcProto = Function.prototype;\n\n/** Used to resolve the decompiled source of functions. */\nvar funcToString = funcProto.toString;\n\n/**\n * Converts `func` to its source code.\n *\n * @private\n * @param {Function} func The function to convert.\n * @returns {string} Returns the source code.\n */\nfunction toSource(func) {\n  if (func != null) {\n    try {\n      return funcToString.call(func);\n    } catch (e) {}\n    try {\n      return (func + '');\n    } catch (e) {}\n  }\n  return '';\n}\n\nexport default toSource;\n"],"names":["funcProto","funcToString","toSource","func"],"mappings":"aACA,IAAIA,EAAY,SAAS,UAGrBC,EAAeD,EAAU,SAS7B,SAASE,EAASC,EAAM,CACtB,GAAIA,GAAQ,KAAM,CAChB,GAAI,CACF,OAAOF,EAAa,KAAKE,CAAI,CACnC,MAAgB,CAAE,CACd,GAAI,CACF,OAAQA,EAAO,EACrB,MAAgB,CAAE,CACf,CACD,MAAO,EACT","x_google_ignoreList":[0]}