@leaflink/stash 52.0.2 → 53.0.0

package/dist/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../src/components/Chip/Chip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-chip',\n  });\n\n  export interface ChipProps {\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The size of the chip.\n     */\n    size?: 'small' | 'medium';\n\n    /**\n     * The type of border radius to use.\n     */\n    radius?: 'none' | 'standard' | 'pill';\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n\n    /**\n     * Determines if a close icon is surfaced.\n     */\n    isRemovable?: boolean;\n\n    /**\n     * Determines if background and text color in Chip should be overidden.\n     */\n    shouldOverrideColors?: boolean;\n\n    /**\n     * Determines if the chip is disabled.\n     */\n    disabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ChipProps>(), {\n    size: 'medium',\n    radius: 'standard',\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n    isRemovable: false,\n    shouldOverrideColors: false,\n    disabled: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Fires on click of the chip.\n     */\n    (e: 'click'): void;\n    /**\n     * If `is-removable` is true, fires on click of the close button.\n     */\n    (e: 'remove'): void;\n  }>();\n\n  const classes = useCssModule();\n\n  function determineConditionalStyles() {\n    const { computedBgColor, computedTextColor } = colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    });\n\n    const colorStyles = `tw-text-${props.textColor || computedTextColor} tw-bg-${props.bgColor || computedBgColor}`;\n\n    return {\n      'tw-rounded-none': props.radius === 'none',\n      'tw-rounded-sm': props.radius === 'standard',\n      'tw-rounded-full': props.radius === 'pill',\n      [colorStyles]: !props.shouldOverrideColors && !props.disabled,\n      'tw-bg-ice-500 tw-text-white': props.disabled,\n    };\n  }\n</script>\n\n<template>\n  <span\n    class=\"stash-chip tw-relative tw-inline-flex tw-items-center\"\n    :class=\"[\n      `stash-chip--radius-${props.radius}`,\n      `stash-chip--size-${props.size}`,\n      `stash-chip--shade-${props.shade}`,\n      classes.root,\n      classes.removableChip,\n      classes[`size-${props.size}`],\n      determineConditionalStyles(),\n    ]\"\n    data-test=\"stash-chip\"\n    @click=\"emit('click')\"\n  >\n    <span v-if=\"isRemovable\" :class=\"[{ 'tw-mr-6 tw-truncate': props.isRemovable }]\">\n      <!-- @slot Chip text -->\n      <slot></slot>\n    </span>\n\n    <!-- Allows easier testing and DOM quering when the chip text isn't nested in an inner span -->\n    <!-- @slot Chip text -->\n    <slot v-else></slot>\n\n    <button\n      v-if=\"props.isRemovable\"\n      tabindex=\"-1\"\n      class=\"stash-chip__remove-button\"\n      :class=\"['tw-absolute', classes['remove-button']]\"\n      data-test=\"stash-chip|remove-button\"\n      :disabled=\"props.disabled\"\n      @keypress.enter.prevent=\"emit('remove')\"\n      @mousedown.prevent.stop=\"emit('remove')\"\n    >\n      <Icon data-test=\"icon|close\" name=\"close\" size=\"small\" />\n    </button>\n  </span>\n</template>\n\n<style module>\n  .root {\n    /**\n     * Applying these styles this way because the rule of thumb is that tailwind classes should\n     * always end up taking precedence, so we're converted these specific styles to be generated\n     * in a custom class instead, giving `FilterChip` (which wraps `Chip`) the ability to easily\n     * override them.\n     */\n    @apply tw-leading-none tw-font-semibold tw-uppercase tw-text-[10px];\n  }\n\n  .size-medium {\n    height: 20px;\n    padding: 2px 8px 0 8px;\n  }\n\n  .size-small {\n    height: 16px;\n    padding: 2px 8px 0 8px;\n  }\n\n  .remove-button {\n    border-radius: inherit;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    height: inherit;\n    margin-top: -2px; /* used to offset 2px top padding from .size-medium and size-small */\n    padding: 0 4px;\n    right: 0;\n  }\n\n  .remove-button:not(:disabled):hover {\n    background: rgb(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","determineConditionalStyles","computedBgColor","computedTextColor","colorSchemeUtil","colorStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6DE,UAAMA,IAAQC,GAYRC,IAAOC,GAWPC,IAAUC,EAAA;AAEhB,aAASC,IAA6B;AACpC,YAAM,EAAE,iBAAAC,GAAiB,mBAAAC,EAAA,IAAsBC,EAAgB;AAAA,QAC7D,OAAOT,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd,GAEKU,IAAc,WAAWV,EAAM,aAAaQ,CAAiB,UAAUR,EAAM,WAAWO,CAAe;AAE7G,aAAO;AAAA,QACL,mBAAmBP,EAAM,WAAW;AAAA,QACpC,iBAAiBA,EAAM,WAAW;AAAA,QAClC,mBAAmBA,EAAM,WAAW;AAAA,QACpC,CAACU,CAAW,GAAG,CAACV,EAAM,wBAAwB,CAACA,EAAM;AAAA,QACrD,+BAA+BA,EAAM;AAAA,MAAA;AAAA,IAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Chip.js","sources":["../src/components/Chip/Chip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-chip',\n  });\n\n  export interface ChipProps {\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The size of the chip.\n     */\n    size?: 'small' | 'medium';\n\n    /**\n     * The type of border radius to use.\n     */\n    radius?: 'none' | 'standard' | 'pill';\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n\n    /**\n     * Determines if a close icon is surfaced.\n     */\n    isRemovable?: boolean;\n\n    /**\n     * Determines if background and text color in Chip should be overidden.\n     */\n    shouldOverrideColors?: boolean;\n\n    /**\n     * Determines if the chip is disabled.\n     */\n    disabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ChipProps>(), {\n    size: 'medium',\n    radius: 'standard',\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n    isRemovable: false,\n    shouldOverrideColors: false,\n    disabled: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Fires on click of the chip.\n     */\n    (e: 'click'): void;\n    /**\n     * If `is-removable` is true, fires on click of the close button.\n     */\n    (e: 'remove'): void;\n  }>();\n\n  const classes = useCssModule();\n\n  function determineConditionalStyles() {\n    const { computedBgColor, computedTextColor } = colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    });\n\n    const colorStyles = `text-${props.textColor || computedTextColor} bg-${props.bgColor || computedBgColor}`;\n\n    return {\n      'rounded-none': props.radius === 'none',\n      'rounded-xs': props.radius === 'standard',\n      'rounded-full': props.radius === 'pill',\n      [colorStyles]: !props.shouldOverrideColors && !props.disabled,\n      'bg-ice-500 text-white': props.disabled,\n    };\n  }\n</script>\n\n<template>\n  <span\n    class=\"stash-chip relative inline-flex items-center\"\n    :class=\"[\n      `stash-chip--radius-${props.radius}`,\n      `stash-chip--size-${props.size}`,\n      `stash-chip--shade-${props.shade}`,\n      classes.root,\n      classes.removableChip,\n      classes[`size-${props.size}`],\n      determineConditionalStyles(),\n    ]\"\n    data-test=\"stash-chip\"\n    @click=\"emit('click')\"\n  >\n    <span v-if=\"isRemovable\" :class=\"[{ 'mr-6 truncate': props.isRemovable }]\">\n      <!-- @slot Chip text -->\n      <slot></slot>\n    </span>\n\n    <!-- Allows easier testing and DOM quering when the chip text isn't nested in an inner span -->\n    <!-- @slot Chip text -->\n    <slot v-else></slot>\n\n    <button\n      v-if=\"props.isRemovable\"\n      tabindex=\"-1\"\n      class=\"stash-chip__remove-button\"\n      :class=\"['absolute', classes['remove-button']]\"\n      data-test=\"stash-chip|remove-button\"\n      :disabled=\"props.disabled\"\n      @keypress.enter.prevent=\"emit('remove')\"\n      @mousedown.prevent.stop=\"emit('remove')\"\n    >\n      <Icon data-test=\"icon|close\" name=\"close\" size=\"small\" />\n    </button>\n  </span>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      /**\n       * Applying these styles this way because the rule of thumb is that tailwind classes should\n       * always end up taking precedence, so we're converted these specific styles to be generated\n       * in a custom class instead, giving `FilterChip` (which wraps `Chip`) the ability to easily\n       * override them.\n       */\n      @apply leading-none font-semibold uppercase text-[10px];\n    }\n\n    .size-medium {\n      height: 20px;\n      padding: 2px 8px 0 8px;\n    }\n\n    .size-small {\n      height: 16px;\n      padding: 2px 8px 0 8px;\n    }\n\n    .remove-button {\n      border-radius: inherit;\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      height: inherit;\n      margin-top: -2px; /* used to offset 2px top padding from .size-medium and size-small */\n      padding: 0 4px;\n      right: 0;\n    }\n\n    .remove-button:not(:disabled):hover {\n      background: rgb(0 0 0 / 10%);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","determineConditionalStyles","computedBgColor","computedTextColor","colorSchemeUtil","colorStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6DE,UAAMA,IAAQC,GAYRC,IAAOC,GAWPC,IAAUC,EAAA;AAEhB,aAASC,IAA6B;AACpC,YAAM,EAAE,iBAAAC,GAAiB,mBAAAC,EAAA,IAAsBC,EAAgB;AAAA,QAC7D,OAAOT,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd,GAEKU,IAAc,QAAQV,EAAM,aAAaQ,CAAiB,OAAOR,EAAM,WAAWO,CAAe;AAEvG,aAAO;AAAA,QACL,gBAAgBP,EAAM,WAAW;AAAA,QACjC,cAAcA,EAAM,WAAW;AAAA,QAC/B,gBAAgBA,EAAM,WAAW;AAAA,QACjC,CAACU,CAAW,GAAG,CAACV,EAAM,wBAAwB,CAACA,EAAM;AAAA,QACrD,yBAAyBA,EAAM;AAAA,MAAA;AAAA,IAEnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ConfirmationCodeInput.js

@@ -1,16 +1,16 @@
-import { defineComponent as I, useCssVars as v, useCssModule as E, ref as V, onMounted as B, watch as P, createElementBlock as a, openBlock as r, normalizeClass as x, unref as l, createElementVNode as z, createCommentVNode as p, Fragment as A, renderList as M, toDisplayString as f } from "vue";
-import { _ as F } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const K = { class: "tw-mb-3 tw-flex tw-gap-6" }, S = ["value", "onInput"], U = {
+import { defineComponent as I, useCssVars as v, useCssModule as E, ref as V, onMounted as B, watch as P, createElementBlock as a, openBlock as r, normalizeClass as g, unref as l, createElementVNode as A, createCommentVNode as p, Fragment as M, renderList as F, toDisplayString as f } from "vue";
+import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const S = { class: "mb-3 flex gap-6" }, U = ["value", "onInput"], j = {
   key: 0,
-  class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-red-500",
+  class: "mt-1 block whitespace-pre-line pr-6 text-center text-red-500",
   "data-test": "field-error"
-}, j = {
+}, L = {
   key: 1,
-  class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-green-500",
+  class: "mt-1 block whitespace-pre-line pr-6 text-center text-green-500",
   "data-test": "field-success"
-}, L = {
+}, z = {
   key: 2,
-  class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-ice-700",
+  class: "mt-1 block whitespace-pre-line pr-6 text-center text-ice-700",
   "data-test": "field-hint"
 }, R = /* @__PURE__ */ I({
   __name: "ConfirmationCodeInput",
@@ -22,96 +22,96 @@ const K = { class: "tw-mb-3 tw-flex tw-gap-6" }, S = ["value", "onInput"], U = {
     modelValue: { default: void 0 }
   },
   emits: ["update:model-value", "change", "focus", "blur"],
-  setup(g, { emit: b }) {
-    v((t) => ({
-      b1b2f1d6: t.digitCount
+  setup(b, { emit: k }) {
+    v((e) => ({
+      "18a4a680": e.digitCount
     }));
-    const c = E(), o = g, i = b, s = V([]);
+    const c = E(), o = b, i = k, s = V([]);
     B(() => {
-      var t;
-      o.modelValue && (s.value = (t = o.modelValue) == null ? void 0 : t.split(""));
+      var e;
+      o.modelValue && (s.value = (e = o.modelValue) == null ? void 0 : e.split(""));
     });
-    function k(t, e) {
+    function T(e, t) {
       var n;
-      s.value[e] = (n = t.target) == null ? void 0 : n.value, m(t), t.inputType === "deleteContentBackward" ? d(t) : (t.inputType === "insertText" || t.inputType === "deleteContentForward") && w(t);
+      s.value[t] = (n = e.target) == null ? void 0 : n.value, m(e), e.inputType === "deleteContentBackward" ? d(e) : (e.inputType === "insertText" || e.inputType === "deleteContentForward") && h(e);
     }
-    function m(t) {
-      const e = s.value.join("");
-      i("update:model-value", e), i("change", { originalEvent: t, value: e });
+    function m(e) {
+      const t = s.value.join("");
+      i("update:model-value", t), i("change", { originalEvent: e, value: t });
     }
-    function d(t) {
-      const e = h(t.target);
-      e && (e.focus(), e.select());
+    function d(e) {
+      const t = _(e.target);
+      t && (t.focus(), t.select());
     }
-    function w(t) {
-      const e = _(t.target);
-      e && (e.focus(), e.select());
+    function h(e) {
+      const t = x(e.target);
+      t && (t.focus(), t.select());
     }
-    function h(t) {
-      const e = t.previousElementSibling;
-      if (e)
-        return e.nodeName === "INPUT" ? e : h(e);
+    function _(e) {
+      const t = e.previousElementSibling;
+      if (t)
+        return t.nodeName === "INPUT" ? t : _(t);
     }
-    function _(t) {
-      const e = t.nextElementSibling;
-      if (e)
-        return e.nodeName === "INPUT" ? e : _(e);
+    function x(e) {
+      const t = e.nextElementSibling;
+      if (t)
+        return t.nodeName === "INPUT" ? t : x(t);
     }
-    function T(t) {
-      t.target.select(), i("focus", t);
+    function y(e) {
+      e.target.select(), i("focus", e);
     }
-    function y(t) {
-      i("blur", t);
+    function C(e) {
+      i("blur", e);
     }
-    function C(t) {
-      var e;
-      if (!(t.ctrlKey || t.metaKey))
-        switch (t.code) {
+    function w(e) {
+      var t;
+      if (!(e.ctrlKey || e.metaKey))
+        switch (e.code) {
           case "ArrowLeft":
-            d(t), t.preventDefault();
+            d(e), e.preventDefault();
             break;
           case "ArrowUp":
           case "ArrowDown":
-            t.preventDefault();
+            e.preventDefault();
             break;
           case "Backspace":
-            ((e = t.target) == null ? void 0 : e.value.length) === 0 && (d(t), t.preventDefault());
+            ((t = e.target) == null ? void 0 : t.value.length) === 0 && (d(e), e.preventDefault());
             break;
           case "ArrowRight":
-            w(t), t.preventDefault();
+            h(e), e.preventDefault();
             break;
           case "Enter":
           case "NumpadEnter":
           case "Tab":
             break;
           default:
-            (!(t.code !== "Space" && Number(t.key) >= 0 && Number(t.key) <= 9) || s.value.join("").length >= o.digitCount && t.code !== "Delete") && t.preventDefault();
+            (!(e.code !== "Space" && Number(e.key) >= 0 && Number(e.key) <= 9) || s.value.join("").length >= o.digitCount && e.code !== "Delete") && e.preventDefault();
             break;
         }
     }
-    function N(t) {
+    function N(e) {
       var n;
-      const e = (n = t.clipboardData) == null ? void 0 : n.getData("text");
-      if (e != null && e.length) {
-        const u = e == null ? void 0 : e.substring(0, o.digitCount), D = parseInt(u);
-        isNaN(D) || (s.value = u.split(""), m(t));
+      const t = (n = e.clipboardData) == null ? void 0 : n.getData("text");
+      if (t != null && t.length) {
+        const u = t == null ? void 0 : t.substring(0, o.digitCount), D = parseInt(u);
+        isNaN(D) || (s.value = u.split(""), m(e));
       }
-      t.preventDefault();
+      e.preventDefault();
     }
     return P(
       () => o.modelValue,
-      (t) => {
-        s.value = t ? t.split("") : new Array(o.digitCount);
+      (e) => {
+        s.value = e ? e.split("") : new Array(o.digitCount);
       }
-    ), (t, e) => (r(), a("div", {
-      class: x(["stash-confirmation-code-input tw-inline-block", [l(c)["stash-confirmation-code-input-container"]]]),
+    ), (e, t) => (r(), a("div", {
+      class: g(["stash-confirmation-code-input inline-block", [l(c)["stash-confirmation-code-input-container"]]]),
       "data-test": "stash-confirmation-code-input"
     }, [
-      z("div", K, [
-        (r(!0), a(A, null, M(o.digitCount, (n) => (r(), a("input", {
+      A("div", S, [
+        (r(!0), a(M, null, F(o.digitCount, (n) => (r(), a("input", {
           key: n,
           "data-test": "stash-confirmation-code-input__otp",
-          class: x(["tw-border tw-bg-white tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500", [
+          class: g(["border bg-white p-2 text-center text-base font-medium text-ice-900 focus:border-blue-500", [
             l(c)["otp-code-input"],
             { [l(c)["has-error"]]: !!o.errorText },
             { [l(c)["has-success"]]: !!o.successText }
@@ -122,26 +122,26 @@ const K = { class: "tw-mb-3 tw-flex tw-gap-6" }, S = ["value", "onInput"], U = {
           value: s.value[n - 1],
           pattern: "[0-9]",
           autocomplete: "one-time-code",
-          onInput: (u) => k(u, n - 1),
-          onKeydown: C,
+          onInput: (u) => T(u, n - 1),
+          onKeydown: w,
           onPaste: N,
-          onFocus: T,
-          onBlur: y
-        }, null, 42, S))), 128))
+          onFocus: y,
+          onBlur: C
+        }, null, 42, U))), 128))
       ]),
-      o.errorText ? (r(), a("small", U, f(o.errorText), 1)) : p("", !0),
-      o.successText ? (r(), a("small", j, f(o.successText), 1)) : p("", !0),
-      o.hintText ? (r(), a("small", L, f(o.hintText), 1)) : p("", !0)
+      o.errorText ? (r(), a("small", j, f(o.errorText), 1)) : p("", !0),
+      o.successText ? (r(), a("small", L, f(o.successText), 1)) : p("", !0),
+      o.hintText ? (r(), a("small", z, f(o.hintText), 1)) : p("", !0)
     ], 2));
   }
 }), $ = {
-  "stash-confirmation-code-input-container": "_stash-confirmation-code-input-container_kwgaz_2",
-  "otp-code-input": "_otp-code-input_kwgaz_9",
-  "has-error": "_has-error_kwgaz_16",
-  "has-success": "_has-success_kwgaz_20"
+  "stash-confirmation-code-input-container": "_stash-confirmation-code-input-container_r8c1g_3",
+  "otp-code-input": "_otp-code-input_r8c1g_10",
+  "has-error": "_has-error_r8c1g_17",
+  "has-success": "_has-success_r8c1g_21"
 }, q = {
   $style: $
-}, J = /* @__PURE__ */ F(R, [["__cssModules", q]]);
+}, J = /* @__PURE__ */ K(R, [["__cssModules", q]]);
 export {
   J as default
 };

package/dist/ConfirmationCodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationCodeInput.js","sources":["../src/components/ConfirmationCodeInput/ConfirmationCodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, Ref, ref, useCssModule, watch } from 'vue';\n\n  const classes = useCssModule();\n\n  export interface VerificationCodeInputProps {\n    digitCount?: number;\n    /**\n     * Error text to display.\n     */\n    errorText?: string;\n    /**\n     * Success text to display.\n     */\n    successText?: string;\n    /**\n     * Hint text to display.\n     */\n    hintText?: string;\n    /**\n     * One time password/code\n     */\n    modelValue?: string;\n  }\n\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n    hintText: undefined,\n    modelValue: undefined,\n  });\n\n  const emit = defineEmits<{\n    (e: 'update:model-value', value: string | null): void;\n    (e: 'change', params: { originalEvent: Event; value: string | null }): void;\n    (e: 'focus', params: Event): void;\n    (e: 'blur', params: Event): void;\n  }>();\n\n  const data: Ref<Array<string>> = ref([]);\n\n  onMounted(() => {\n    if (props.modelValue) {\n      data.value = props.modelValue?.split('');\n    }\n  });\n\n  function handleInput(event: InputEvent, index) {\n    data.value[index] = event.target?.['value'];\n    updateModel(event);\n\n    if (event.inputType === 'deleteContentBackward') {\n      moveToPrev(event);\n    } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {\n      moveToNext(event);\n    }\n  }\n\n  function updateModel(event: Event) {\n    const newValue = data.value.join('');\n    emit('update:model-value', newValue);\n    emit('change', { originalEvent: event, value: newValue });\n  }\n\n  function moveToPrev(event: InputEvent | KeyboardEvent) {\n    const prevInput: HTMLInputElement = findPrevInput(event.target as HTMLInputElement);\n\n    if (prevInput) {\n      prevInput.focus();\n      prevInput.select();\n    }\n  }\n\n  function moveToNext(event: InputEvent | KeyboardEvent) {\n    const nextInput: HTMLInputElement = findNextInput(event.target as HTMLInputElement);\n\n    if (nextInput) {\n      nextInput.focus();\n      nextInput.select();\n    }\n  }\n\n  function findPrevInput(element: HTMLInputElement) {\n    const prevElement = element.previousElementSibling;\n\n    if (!prevElement) return;\n\n    return prevElement.nodeName === 'INPUT' ? prevElement : findPrevInput(prevElement as HTMLInputElement);\n  }\n\n  function findNextInput(element: HTMLInputElement) {\n    const nextElement = element.nextElementSibling;\n\n    if (!nextElement) return;\n\n    return nextElement.nodeName === 'INPUT' ? nextElement : findNextInput(nextElement as HTMLInputElement);\n  }\n\n  function handleFocus(event) {\n    event.target.select();\n    emit('focus', event);\n  }\n\n  function handleBlur(event: Event) {\n    emit('blur', event);\n  }\n\n  function handleKeyDown(event: KeyboardEvent) {\n    if (event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowLeft':\n        moveToPrev(event);\n        event.preventDefault();\n        break;\n\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n\n      case 'Backspace':\n        if (event.target?.['value'].length === 0) {\n          moveToPrev(event);\n          event.preventDefault();\n        }\n        break;\n\n      case 'ArrowRight':\n        moveToNext(event);\n        event.preventDefault();\n\n        break;\n\n      case 'Enter':\n      case 'NumpadEnter':\n      case 'Tab':\n        break;\n\n      default:\n        if (\n          !(event.code !== 'Space' && Number(event.key) >= 0 && Number(event.key) <= 9) ||\n          (data.value.join('').length >= props.digitCount && event.code !== 'Delete')\n        ) {\n          event.preventDefault();\n        }\n\n        break;\n    }\n  }\n\n  function handlePaste(event: ClipboardEvent) {\n    const paste = event.clipboardData?.getData('text');\n\n    if (paste?.length) {\n      const pastedCode = paste?.substring(0, props.digitCount);\n\n      const parsed = parseInt(pastedCode);\n\n      if (!isNaN(parsed)) {\n        data.value = pastedCode.split('');\n        updateModel(event);\n      }\n    }\n\n    event.preventDefault();\n  }\n\n  watch(\n    () => props.modelValue,\n    (newValue) => {\n      data.value = newValue ? newValue.split('') : new Array(props.digitCount);\n    },\n  );\n</script>\n\n<template>\n  <div\n    class=\"stash-confirmation-code-input tw-inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    :class=\"[classes['stash-confirmation-code-input-container']]\"\n  >\n    <div class=\"tw-mb-3 tw-flex tw-gap-6\">\n      <template v-for=\"field in props.digitCount\" :key=\"field\">\n        <input\n          data-test=\"stash-confirmation-code-input__otp\"\n          class=\"tw-border tw-bg-white tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500\"\n          :class=\"[\n            classes['otp-code-input'],\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          maxlength=\"1\"\n          :value=\"data[field - 1]\"\n          pattern=\"[0-9]\"\n          autocomplete=\"one-time-code\"\n          @input=\"handleInput($event as InputEvent, field - 1)\"\n          @keydown=\"handleKeyDown\"\n          @paste=\"handlePaste\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-red-500\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-green-500\"\n      data-test=\"field-success\"\n    >\n      {{ props.successText }}\n    </small>\n    <small\n      v-if=\"props.hintText\"\n      class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-ice-700\"\n      data-test=\"field-hint\"\n    >\n      {{ props.hintText }}\n    </small>\n  </div>\n</template>\n\n<style module>\n  .stash-confirmation-code-input-container {\n    --otp-digits: v-bind(digitCount);\n    --otp-container-width: calc(var(--otp-digits) * 60px);\n\n    width: var(--otp-container-width);\n  }\n\n  .otp-code-input {\n    border-radius: 4px;\n    caret-color: transparent;\n    height: 36px;\n    width: 36px;\n  }\n\n  .otp-code-input.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .otp-code-input.has-success:not(:focus) {\n    border-color: var(--color-green-500);\n  }\n\n  .otp-code-input:focus {\n    box-shadow: 0 0 0 3px rgb(0 114 240 / 15%);\n    outline: none;\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","emit","__emit","data","ref","onMounted","_a","handleInput","event","index","updateModel","moveToPrev","moveToNext","newValue","prevInput","findPrevInput","nextInput","findNextInput","element","prevElement","nextElement","handleFocus","handleBlur","handleKeyDown","handlePaste","paste","pastedCode","parsed","watch"],"mappings":"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"}
+{"version":3,"file":"ConfirmationCodeInput.js","sources":["../src/components/ConfirmationCodeInput/ConfirmationCodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, Ref, ref, useCssModule, watch } from 'vue';\n\n  const classes = useCssModule();\n\n  export interface VerificationCodeInputProps {\n    digitCount?: number;\n    /**\n     * Error text to display.\n     */\n    errorText?: string;\n    /**\n     * Success text to display.\n     */\n    successText?: string;\n    /**\n     * Hint text to display.\n     */\n    hintText?: string;\n    /**\n     * One time password/code\n     */\n    modelValue?: string;\n  }\n\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n    hintText: undefined,\n    modelValue: undefined,\n  });\n\n  const emit = defineEmits<{\n    (e: 'update:model-value', value: string | null): void;\n    (e: 'change', params: { originalEvent: Event; value: string | null }): void;\n    (e: 'focus', params: Event): void;\n    (e: 'blur', params: Event): void;\n  }>();\n\n  const data: Ref<Array<string>> = ref([]);\n\n  onMounted(() => {\n    if (props.modelValue) {\n      data.value = props.modelValue?.split('');\n    }\n  });\n\n  function handleInput(event: InputEvent, index) {\n    data.value[index] = event.target?.['value'];\n    updateModel(event);\n\n    if (event.inputType === 'deleteContentBackward') {\n      moveToPrev(event);\n    } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {\n      moveToNext(event);\n    }\n  }\n\n  function updateModel(event: Event) {\n    const newValue = data.value.join('');\n    emit('update:model-value', newValue);\n    emit('change', { originalEvent: event, value: newValue });\n  }\n\n  function moveToPrev(event: InputEvent | KeyboardEvent) {\n    const prevInput: HTMLInputElement = findPrevInput(event.target as HTMLInputElement);\n\n    if (prevInput) {\n      prevInput.focus();\n      prevInput.select();\n    }\n  }\n\n  function moveToNext(event: InputEvent | KeyboardEvent) {\n    const nextInput: HTMLInputElement = findNextInput(event.target as HTMLInputElement);\n\n    if (nextInput) {\n      nextInput.focus();\n      nextInput.select();\n    }\n  }\n\n  function findPrevInput(element: HTMLInputElement) {\n    const prevElement = element.previousElementSibling;\n\n    if (!prevElement) return;\n\n    return prevElement.nodeName === 'INPUT' ? prevElement : findPrevInput(prevElement as HTMLInputElement);\n  }\n\n  function findNextInput(element: HTMLInputElement) {\n    const nextElement = element.nextElementSibling;\n\n    if (!nextElement) return;\n\n    return nextElement.nodeName === 'INPUT' ? nextElement : findNextInput(nextElement as HTMLInputElement);\n  }\n\n  function handleFocus(event) {\n    event.target.select();\n    emit('focus', event);\n  }\n\n  function handleBlur(event: Event) {\n    emit('blur', event);\n  }\n\n  function handleKeyDown(event: KeyboardEvent) {\n    if (event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowLeft':\n        moveToPrev(event);\n        event.preventDefault();\n        break;\n\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n\n      case 'Backspace':\n        if (event.target?.['value'].length === 0) {\n          moveToPrev(event);\n          event.preventDefault();\n        }\n        break;\n\n      case 'ArrowRight':\n        moveToNext(event);\n        event.preventDefault();\n\n        break;\n\n      case 'Enter':\n      case 'NumpadEnter':\n      case 'Tab':\n        break;\n\n      default:\n        if (\n          !(event.code !== 'Space' && Number(event.key) >= 0 && Number(event.key) <= 9) ||\n          (data.value.join('').length >= props.digitCount && event.code !== 'Delete')\n        ) {\n          event.preventDefault();\n        }\n\n        break;\n    }\n  }\n\n  function handlePaste(event: ClipboardEvent) {\n    const paste = event.clipboardData?.getData('text');\n\n    if (paste?.length) {\n      const pastedCode = paste?.substring(0, props.digitCount);\n\n      const parsed = parseInt(pastedCode);\n\n      if (!isNaN(parsed)) {\n        data.value = pastedCode.split('');\n        updateModel(event);\n      }\n    }\n\n    event.preventDefault();\n  }\n\n  watch(\n    () => props.modelValue,\n    (newValue) => {\n      data.value = newValue ? newValue.split('') : new Array(props.digitCount);\n    },\n  );\n</script>\n\n<template>\n  <div\n    class=\"stash-confirmation-code-input inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    :class=\"[classes['stash-confirmation-code-input-container']]\"\n  >\n    <div class=\"mb-3 flex gap-6\">\n      <template v-for=\"field in props.digitCount\" :key=\"field\">\n        <input\n          data-test=\"stash-confirmation-code-input__otp\"\n          class=\"border bg-white p-2 text-center text-base font-medium text-ice-900 focus:border-blue-500\"\n          :class=\"[\n            classes['otp-code-input'],\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          maxlength=\"1\"\n          :value=\"data[field - 1]\"\n          pattern=\"[0-9]\"\n          autocomplete=\"one-time-code\"\n          @input=\"handleInput($event as InputEvent, field - 1)\"\n          @keydown=\"handleKeyDown\"\n          @paste=\"handlePaste\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"mt-1 block whitespace-pre-line pr-6 text-center text-red-500\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"mt-1 block whitespace-pre-line pr-6 text-center text-green-500\"\n      data-test=\"field-success\"\n    >\n      {{ props.successText }}\n    </small>\n    <small\n      v-if=\"props.hintText\"\n      class=\"mt-1 block whitespace-pre-line pr-6 text-center text-ice-700\"\n      data-test=\"field-hint\"\n    >\n      {{ props.hintText }}\n    </small>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .stash-confirmation-code-input-container {\n      --otp-digits: v-bind(digitCount);\n      --otp-container-width: calc(var(--otp-digits) * 60px);\n\n      width: var(--otp-container-width);\n    }\n\n    .otp-code-input {\n      border-radius: 4px;\n      caret-color: transparent;\n      height: 36px;\n      width: 36px;\n    }\n\n    .otp-code-input.has-error:not(:focus) {\n      border-color: var(--color-red-500);\n    }\n\n    .otp-code-input.has-success:not(:focus) {\n      border-color: var(--color-green-500);\n    }\n\n    .otp-code-input:focus {\n      box-shadow: 0 0 0 3px rgb(0 114 240 / 15%);\n      outline: none;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","emit","__emit","data","ref","onMounted","_a","handleInput","event","index","updateModel","moveToPrev","moveToNext","newValue","prevInput","findPrevInput","nextInput","findNextInput","element","prevElement","nextElement","handleFocus","handleBlur","handleKeyDown","handlePaste","paste","pastedCode","parsed","watch"],"mappings":"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"}

package/dist/ContextSwitcher.js

@@ -1,10 +1,10 @@
-import { defineComponent as _, computed as C, resolveComponent as g, createElementBlock as l, openBlock as s, Fragment as u, renderList as x, createBlock as E, normalizeClass as d, toDisplayString as f, withCtx as S, createTextVNode as b } from "vue";
+import { defineComponent as _, computed as C, resolveComponent as g, createElementBlock as l, openBlock as s, Fragment as d, renderList as x, createBlock as E, normalizeClass as f, toDisplayString as h, withCtx as S, createTextVNode as b } from "vue";
 import { APPS as a } from "./constants.js";
 import { setPersistentItem as T, getPersistentItem as v, removePersistentItem as R } from "./utils/storage.js";
 const N = {
-  class: "stash-context-switcher tw-mx-auto tw-flex tw-w-64 tw-rounded-full tw-border tw-border-white/10 tw-bg-purple-700 tw-p-1.5 tw-text-center",
+  class: "stash-context-switcher mx-auto flex w-64 rounded-full border border-white/10 bg-purple-700 p-1.5 text-center",
   "data-test": "stash-context-switcher"
-}, B = ["href", "onClick"], h = "-last-session", L = /* @__PURE__ */ _({
+}, B = ["href", "onClick"], A = "-last-session", L = /* @__PURE__ */ _({
   name: "ll-context-switcher",
   __name: "ContextSwitcher",
   props: {
@@ -17,52 +17,52 @@ const N = {
     routeQuery: { default: () => ({}) }
   },
   emits: ["click", "switch"],
-  setup(A, { emit: y }) {
-    const e = A, p = y, P = C(() => [
+  setup(y, { emit: w }) {
+    const t = y, p = w, P = C(() => [
       {
         app: a.MARKETPLACE,
-        name: e.portalAccess.commercePortal ? "dashboard" : e.limitedAccessUrl,
-        hasBaseRoute: e.portalAccess.commercePortal
+        name: t.portalAccess.commercePortal ? "dashboard" : t.limitedAccessUrl,
+        hasBaseRoute: t.portalAccess.commercePortal
       },
       {
         app: a.PAYMENTS,
-        name: e.portalAccess.paymentsPortal ? "payments" : e.limitedAccessUrl,
+        name: t.portalAccess.paymentsPortal ? "payments" : t.limitedAccessUrl,
         hasBaseRoute: !1
       }
     ]);
     function m(o, n) {
-      if (n === e.activeApp)
+      if (n === t.activeApp)
         return;
       const r = window.location.href;
-      let t = o.target.href;
-      if (e.portalAccess.paymentsPortal && e.portalAccess.commercePortal) {
-        const k = `${n === a.PAYMENTS ? a.MARKETPLACE : a.PAYMENTS}${h}`, w = `${n}${h}`;
+      let e = o.target.href;
+      if (t.portalAccess.paymentsPortal && t.portalAccess.commercePortal) {
+        const k = `${n === a.PAYMENTS ? a.MARKETPLACE : a.PAYMENTS}${A}`, u = `${n}${A}`;
         T(k, r, { global: !0 });
-        const i = v(w, { global: !0 });
-        i && (o.preventDefault(), t = i, window.location.href = i, R(w, { global: !0 }));
+        const i = v(u, { global: !0 });
+        i && (o.preventDefault(), e = i, window.location.href = i, R(u, { global: !0 }));
       }
-      p("click", { from: r, to: t }), p("switch", o, { from: r, to: t });
+      p("click", { from: r, to: e }), p("switch", o, { from: r, to: e });
     }
     return (o, n) => {
       const r = g("router-link");
       return s(), l("div", N, [
-        (s(!0), l(u, null, x(P.value, (t) => (s(), l(u, {
-          key: t.app
+        (s(!0), l(d, null, x(P.value, (e) => (s(), l(d, {
+          key: e.app
         }, [
-          t.hasBaseRoute ? (s(), l("a", {
+          e.hasBaseRoute ? (s(), l("a", {
             key: 0,
-            class: d(["tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold !tw-capitalize tw-leading-none !tw-no-underline", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
-            href: `/${t.name}`,
-            onClick: (c) => m(c, t.app)
-          }, f(t.app), 11, B)) : (s(), E(r, {
+            class: f(["w-1/2 cursor-pointer rounded-full py-2.5 font-semibold !capitalize leading-none !no-underline", t.activeApp === e.app ? "text-white bg-royal-500" : "text-ice-500"]),
+            href: `/${e.name}`,
+            onClick: (c) => m(c, e.app)
+          }, h(e.app), 11, B)) : (s(), E(r, {
             key: 1,
-            class: d(["tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold !tw-capitalize tw-leading-none !tw-no-underline", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
-            to: { name: t.name, query: o.routeQuery },
-            "data-test-route": JSON.stringify({ name: t.name, query: o.routeQuery }),
-            onClick: (c) => m(c, t.app)
+            class: f(["w-1/2 cursor-pointer rounded-full py-2.5 font-semibold !capitalize leading-none !no-underline", t.activeApp === e.app ? "text-white bg-royal-500" : "text-ice-500"]),
+            to: { name: e.name, query: o.routeQuery },
+            "data-test-route": JSON.stringify({ name: e.name, query: o.routeQuery }),
+            onClick: (c) => m(c, e.app)
           }, {
             default: S(() => [
-              b(f(t.app), 1)
+              b(h(e.app), 1)
             ]),
             _: 2
           }, 1032, ["class", "to", "data-test-route", "onClick"]))

package/dist/ContextSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextSwitcher.js","sources":["../src/components/ContextSwitcher/ContextSwitcher.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import type { LocationQuery } from 'vue-router';\n\n  import { APPS } from '../../constants';\n  import { getPersistentItem, removePersistentItem, setPersistentItem } from '../../utils/storage';\n\n  defineOptions({\n    name: 'll-context-switcher',\n  });\n\n  type AppValues = (typeof APPS)[keyof typeof APPS];\n\n  export interface ContextSwitcherProps {\n    /**\n     * The current app that is active. Choices are 'marketplace' | 'payments'.\n     */\n    activeApp: AppValues;\n\n    /**\n     * Portal access to both marketplace and payments.\n     */\n    portalAccess?: {\n      commercePortal: boolean;\n      paymentsPortal: boolean;\n    };\n\n    /**\n     * Url to replace the other app if current user does not have portal access.\n     */\n    limitedAccessUrl: string;\n\n    routeQuery?: LocationQuery;\n  }\n\n  const props = withDefaults(defineProps<ContextSwitcherProps>(), {\n    portalAccess: () => ({\n      commercePortal: false,\n      paymentsPortal: false,\n    }),\n    routeQuery: () => ({}),\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Fires on click of the context switcher.\n     * @deprecated Use `switch` instead.\n     */\n    (e: 'click', urlInfo: { from: string; to: string }): void;\n    /**\n     * Fires on click of the context switcher.\n     */\n    (e: 'switch', evt: MouseEvent, urlInfo: { from: string; to: string }): void;\n  }>();\n\n  interface ContextItem {\n    app: AppValues;\n    name: string;\n    hasBaseRoute: boolean;\n  }\n\n  const CONTEXT_SWITCHER_STORAGE_KEY = '-last-session';\n\n  const routes = computed<ContextItem[]>(() => {\n    return [\n      {\n        app: APPS.MARKETPLACE,\n        name: props.portalAccess.commercePortal ? 'dashboard' : props.limitedAccessUrl,\n        hasBaseRoute: props.portalAccess.commercePortal,\n      },\n      {\n        app: APPS.PAYMENTS,\n        name: props.portalAccess.paymentsPortal ? 'payments' : props.limitedAccessUrl,\n        hasBaseRoute: false,\n      },\n    ];\n  });\n\n  /**\n   * Saves the current url in local storage before leaving the current app, if user has access to both apps\n   * If a previous session url exists, redirect users there instead then remove the local storage item afterward.\n   *\n   * @param event - Event from user click.\n   * @param app - App name of the clicked link, is a key of `APPS`.\n   */\n  function handleClick(event: MouseEvent, app: AppValues) {\n    if (app === props.activeApp) {\n      return;\n    }\n\n    const currentLocation = window.location.href;\n    let destination = (event.target as HTMLAnchorElement).href;\n\n    if (props.portalAccess.paymentsPortal && props.portalAccess.commercePortal) {\n      const appRoute = app === APPS.PAYMENTS ? APPS.MARKETPLACE : APPS.PAYMENTS;\n      const currentSessionName = `${appRoute}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n      const prevSessionName = `${app}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n\n      // save the current url in local storage\n      setPersistentItem(currentSessionName, currentLocation, { global: true });\n\n      // get the other app's url from local storage\n      const prevSessionUrl = getPersistentItem(prevSessionName, { global: true });\n\n      // if it exists, redirect users to such location and remove the item from local storage\n      if (prevSessionUrl) {\n        event.preventDefault();\n        destination = prevSessionUrl;\n        window.location.href = prevSessionUrl;\n        removePersistentItem(prevSessionName, { global: true });\n      }\n    }\n\n    emit('click', { from: currentLocation, to: destination });\n    emit('switch', event, { from: currentLocation, to: destination });\n  }\n</script>\n\n<template>\n  <div\n    class=\"stash-context-switcher tw-mx-auto tw-flex tw-w-64 tw-rounded-full tw-border tw-border-white/10 tw-bg-purple-700 tw-p-1.5 tw-text-center\"\n    data-test=\"stash-context-switcher\"\n  >\n    <template v-for=\"route in routes\" :key=\"route.app\">\n      <!-- render anchor tag to override base route in Payments -->\n      <a\n        v-if=\"route.hasBaseRoute\"\n        class=\"tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold !tw-capitalize tw-leading-none !tw-no-underline\"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :href=\"`/${route.name}`\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </a>\n\n      <router-link\n        v-else\n        class=\"tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold !tw-capitalize tw-leading-none !tw-no-underline\"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :to=\"{ name: route.name, query: routeQuery }\"\n        :data-test-route=\"JSON.stringify({ name: route.name, query: routeQuery })\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </router-link>\n    </template>\n  </div>\n</template>\n"],"names":["CONTEXT_SWITCHER_STORAGE_KEY","props","__props","emit","__emit","routes","computed","APPS","handleClick","event","app","currentLocation","destination","currentSessionName","prevSessionName","setPersistentItem","prevSessionUrl","getPersistentItem","removePersistentItem"],"mappings":";;;;;;4BA6DQA,IAA+B;;;;;;;;;;;;;;AA1BrC,UAAMC,IAAQC,GAQRC,IAAOC,GAoBPC,IAASC,EAAwB,MAC9B;AAAA,MACL;AAAA,QACE,KAAKC,EAAK;AAAA,QACV,MAAMN,EAAM,aAAa,iBAAiB,cAAcA,EAAM;AAAA,QAC9D,cAAcA,EAAM,aAAa;AAAA,MAAA;AAAA,MAEnC;AAAA,QACE,KAAKM,EAAK;AAAA,QACV,MAAMN,EAAM,aAAa,iBAAiB,aAAaA,EAAM;AAAA,QAC7D,cAAc;AAAA,MAAA;AAAA,IAChB,CAEH;AASD,aAASO,EAAYC,GAAmBC,GAAgB;AACtD,UAAIA,MAAQT,EAAM;AAChB;AAGF,YAAMU,IAAkB,OAAO,SAAS;AACxC,UAAIC,IAAeH,EAAM,OAA6B;AAEtD,UAAIR,EAAM,aAAa,kBAAkBA,EAAM,aAAa,gBAAgB;AAE1E,cAAMY,IAAqB,GADVH,MAAQH,EAAK,WAAWA,EAAK,cAAcA,EAAK,QAC3B,GAAGP,CAA4B,IAC/Dc,IAAkB,GAAGJ,CAAG,GAAGV,CAA4B;AAG7D,QAAAe,EAAkBF,GAAoBF,GAAiB,EAAE,QAAQ,IAAM;AAGvE,cAAMK,IAAiBC,EAAkBH,GAAiB,EAAE,QAAQ,IAAM;AAG1E,QAAIE,MACFP,EAAM,eAAA,GACNG,IAAcI,GACd,OAAO,SAAS,OAAOA,GACvBE,EAAqBJ,GAAiB,EAAE,QAAQ,GAAA,CAAM;AAAA,MAE1D;AAEA,MAAAX,EAAK,SAAS,EAAE,MAAMQ,GAAiB,IAAIC,GAAa,GACxDT,EAAK,UAAUM,GAAO,EAAE,MAAME,GAAiB,IAAIC,GAAa;AAAA,IAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ContextSwitcher.js","sources":["../src/components/ContextSwitcher/ContextSwitcher.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import type { LocationQuery } from 'vue-router';\n\n  import { APPS } from '../../constants';\n  import { getPersistentItem, removePersistentItem, setPersistentItem } from '../../utils/storage';\n\n  defineOptions({\n    name: 'll-context-switcher',\n  });\n\n  type AppValues = (typeof APPS)[keyof typeof APPS];\n\n  export interface ContextSwitcherProps {\n    /**\n     * The current app that is active. Choices are 'marketplace' | 'payments'.\n     */\n    activeApp: AppValues;\n\n    /**\n     * Portal access to both marketplace and payments.\n     */\n    portalAccess?: {\n      commercePortal: boolean;\n      paymentsPortal: boolean;\n    };\n\n    /**\n     * Url to replace the other app if current user does not have portal access.\n     */\n    limitedAccessUrl: string;\n\n    routeQuery?: LocationQuery;\n  }\n\n  const props = withDefaults(defineProps<ContextSwitcherProps>(), {\n    portalAccess: () => ({\n      commercePortal: false,\n      paymentsPortal: false,\n    }),\n    routeQuery: () => ({}),\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Fires on click of the context switcher.\n     * @deprecated Use `switch` instead.\n     */\n    (e: 'click', urlInfo: { from: string; to: string }): void;\n    /**\n     * Fires on click of the context switcher.\n     */\n    (e: 'switch', evt: MouseEvent, urlInfo: { from: string; to: string }): void;\n  }>();\n\n  interface ContextItem {\n    app: AppValues;\n    name: string;\n    hasBaseRoute: boolean;\n  }\n\n  const CONTEXT_SWITCHER_STORAGE_KEY = '-last-session';\n\n  const routes = computed<ContextItem[]>(() => {\n    return [\n      {\n        app: APPS.MARKETPLACE,\n        name: props.portalAccess.commercePortal ? 'dashboard' : props.limitedAccessUrl,\n        hasBaseRoute: props.portalAccess.commercePortal,\n      },\n      {\n        app: APPS.PAYMENTS,\n        name: props.portalAccess.paymentsPortal ? 'payments' : props.limitedAccessUrl,\n        hasBaseRoute: false,\n      },\n    ];\n  });\n\n  /**\n   * Saves the current url in local storage before leaving the current app, if user has access to both apps\n   * If a previous session url exists, redirect users there instead then remove the local storage item afterward.\n   *\n   * @param event - Event from user click.\n   * @param app - App name of the clicked link, is a key of `APPS`.\n   */\n  function handleClick(event: MouseEvent, app: AppValues) {\n    if (app === props.activeApp) {\n      return;\n    }\n\n    const currentLocation = window.location.href;\n    let destination = (event.target as HTMLAnchorElement).href;\n\n    if (props.portalAccess.paymentsPortal && props.portalAccess.commercePortal) {\n      const appRoute = app === APPS.PAYMENTS ? APPS.MARKETPLACE : APPS.PAYMENTS;\n      const currentSessionName = `${appRoute}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n      const prevSessionName = `${app}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n\n      // save the current url in local storage\n      setPersistentItem(currentSessionName, currentLocation, { global: true });\n\n      // get the other app's url from local storage\n      const prevSessionUrl = getPersistentItem(prevSessionName, { global: true });\n\n      // if it exists, redirect users to such location and remove the item from local storage\n      if (prevSessionUrl) {\n        event.preventDefault();\n        destination = prevSessionUrl;\n        window.location.href = prevSessionUrl;\n        removePersistentItem(prevSessionName, { global: true });\n      }\n    }\n\n    emit('click', { from: currentLocation, to: destination });\n    emit('switch', event, { from: currentLocation, to: destination });\n  }\n</script>\n\n<template>\n  <div\n    class=\"stash-context-switcher mx-auto flex w-64 rounded-full border border-white/10 bg-purple-700 p-1.5 text-center\"\n    data-test=\"stash-context-switcher\"\n  >\n    <template v-for=\"route in routes\" :key=\"route.app\">\n      <!-- render anchor tag to override base route in Payments -->\n      <a\n        v-if=\"route.hasBaseRoute\"\n        class=\"w-1/2 cursor-pointer rounded-full py-2.5 font-semibold !capitalize leading-none !no-underline\"\n        :class=\"props.activeApp === route.app ? 'text-white bg-royal-500' : 'text-ice-500'\"\n        :href=\"`/${route.name}`\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </a>\n\n      <router-link\n        v-else\n        class=\"w-1/2 cursor-pointer rounded-full py-2.5 font-semibold !capitalize leading-none !no-underline\"\n        :class=\"props.activeApp === route.app ? 'text-white bg-royal-500' : 'text-ice-500'\"\n        :to=\"{ name: route.name, query: routeQuery }\"\n        :data-test-route=\"JSON.stringify({ name: route.name, query: routeQuery })\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </router-link>\n    </template>\n  </div>\n</template>\n"],"names":["CONTEXT_SWITCHER_STORAGE_KEY","props","__props","emit","__emit","routes","computed","APPS","handleClick","event","app","currentLocation","destination","currentSessionName","prevSessionName","setPersistentItem","prevSessionUrl","getPersistentItem","removePersistentItem"],"mappings":";;;;;;4BA6DQA,IAA+B;;;;;;;;;;;;;;AA1BrC,UAAMC,IAAQC,GAQRC,IAAOC,GAoBPC,IAASC,EAAwB,MAC9B;AAAA,MACL;AAAA,QACE,KAAKC,EAAK;AAAA,QACV,MAAMN,EAAM,aAAa,iBAAiB,cAAcA,EAAM;AAAA,QAC9D,cAAcA,EAAM,aAAa;AAAA,MAAA;AAAA,MAEnC;AAAA,QACE,KAAKM,EAAK;AAAA,QACV,MAAMN,EAAM,aAAa,iBAAiB,aAAaA,EAAM;AAAA,QAC7D,cAAc;AAAA,MAAA;AAAA,IAChB,CAEH;AASD,aAASO,EAAYC,GAAmBC,GAAgB;AACtD,UAAIA,MAAQT,EAAM;AAChB;AAGF,YAAMU,IAAkB,OAAO,SAAS;AACxC,UAAIC,IAAeH,EAAM,OAA6B;AAEtD,UAAIR,EAAM,aAAa,kBAAkBA,EAAM,aAAa,gBAAgB;AAE1E,cAAMY,IAAqB,GADVH,MAAQH,EAAK,WAAWA,EAAK,cAAcA,EAAK,QAC3B,GAAGP,CAA4B,IAC/Dc,IAAkB,GAAGJ,CAAG,GAAGV,CAA4B;AAG7D,QAAAe,EAAkBF,GAAoBF,GAAiB,EAAE,QAAQ,IAAM;AAGvE,cAAMK,IAAiBC,EAAkBH,GAAiB,EAAE,QAAQ,IAAM;AAG1E,QAAIE,MACFP,EAAM,eAAA,GACNG,IAAcI,GACd,OAAO,SAAS,OAAOA,GACvBE,EAAqBJ,GAAiB,EAAE,QAAQ,GAAA,CAAM;AAAA,MAE1D;AAEA,MAAAX,EAAK,SAAS,EAAE,MAAMQ,GAAiB,IAAIC,GAAa,GACxDT,EAAK,UAAUM,GAAO,EAAE,MAAME,GAAiB,IAAIC,GAAa;AAAA,IAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Copy.js

@@ -1,11 +1,11 @@
-import { defineComponent as m, useCssModule as _, ref as f, computed as h, createElementBlock as p, openBlock as e, normalizeClass as i, unref as s, renderSlot as v, withDirectives as x, createBlock as c, withCtx as C, createTextVNode as k, toDisplayString as w } from "vue";
+import { defineComponent as _, useCssModule as m, ref as f, computed as h, createElementBlock as x, openBlock as o, normalizeClass as l, unref as p, renderSlot as v, createVNode as C, withCtx as i, createBlock as s, createTextVNode as k, toDisplayString as b } from "vue";
 import { UI_TIMEOUT as T } from "./constants.js";
-import b from "./directives/tooltip.js";
 import { t as n } from "./locale.js";
 import g from "./Button.js";
 import r from "./Icon.js";
+import { _ as z } from "./Tooltip.vue_vue_type_script_setup_true_lang-mzBLSXy3.js";
 import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const M = /* @__PURE__ */ m({
+const M = /* @__PURE__ */ _({
   __name: "Copy",
   props: {
     text: { default: void 0 },
@@ -13,60 +13,59 @@ const M = /* @__PURE__ */ m({
     visible: { type: Boolean, default: !1 }
   },
   setup(d) {
-    const t = d, a = _(), o = f(!1), y = h(() => o.value ? n("ll.copy.copied") : t.text ? null : n("ll.copy.copyToClipboard"));
-    function l() {
-      navigator.clipboard.writeText(t.value), o.value = !0, setTimeout(() => {
-        o.value = !1;
+    const t = d, c = m(), e = f(!1), y = h(() => e.value ? n("ll.copy.copied") : t.text ? null : n("ll.copy.copyToClipboard"));
+    function a() {
+      navigator.clipboard.writeText(t.value), e.value = !0, setTimeout(() => {
+        e.value = !1;
       }, T);
     }
-    return (u, S) => (e(), p("div", {
-      class: i(["stash-copy tw-flex tw-items-center", { [s(a).hidden]: !t.visible }]),
+    return (u, N) => (o(), x("div", {
+      class: l(["stash-copy flex items-center", { [p(c).hidden]: !t.visible }]),
       "data-test": "stash-copy"
     }, [
       v(u.$slots, "default"),
-      x((e(), p("div", {
-        class: i(["stash-copy__copy-zone tw-ml-3 tw-cursor-pointer", s(a).copy]),
+      C(z, {
+        side: "top",
+        text: y.value,
+        "is-disabled": !!t.text,
+        class: l(["stash-copy__copy-zone ml-3 cursor-pointer", p(c).copy]),
         "data-test": "stash-copy|copy-zone"
-      }, [
-        o.value ? (e(), c(r, {
-          key: 0,
-          class: "stash-copy__success-icon tw-text-green-500",
-          name: "circle-check",
-          "data-test": "stash-copy|success-icon"
-        })) : t.text ? (e(), c(g, {
-          key: 1,
-          class: "stash-copy__copy-text",
-          inline: "",
-          "data-test": "stash-copy|copy-target",
-          onClick: l
-        }, {
-          default: C(() => [
-            k(w(t.text), 1)
-          ]),
-          _: 1
-        })) : (e(), c(r, {
-          key: 2,
-          class: "stash-copy__copy-icon",
-          name: "copy",
-          title: "Copy to clipboard",
-          "data-test": "stash-copy|copy-target",
-          onClick: l
-        }))
-      ], 2)), [
-        [
-          s(b),
-          y.value,
-          void 0,
-          { top: !0 }
-        ]
-      ])
+      }, {
+        default: i(() => [
+          e.value ? (o(), s(r, {
+            key: 0,
+            class: "stash-copy__success-icon text-green-500",
+            name: "circle-check",
+            "data-test": "stash-copy|success-icon"
+          })) : t.text ? (o(), s(g, {
+            key: 1,
+            class: "stash-copy__copy-text",
+            inline: "",
+            "data-test": "stash-copy|copy-target",
+            onClick: a
+          }, {
+            default: i(() => [
+              k(b(t.text), 1)
+            ]),
+            _: 1
+          })) : (o(), s(r, {
+            key: 2,
+            class: "stash-copy__copy-icon",
+            name: "copy",
+            title: "Copy to clipboard",
+            "data-test": "stash-copy|copy-target",
+            onClick: a
+          }))
+        ]),
+        _: 1
+      }, 8, ["text", "is-disabled", "class"])
     ], 2));
   }
-}), z = "_hidden_lkmi6_2", I = "_copy_lkmi6_3", D = {
-  hidden: z,
-  copy: I
+}), I = "_hidden_z4re6_3", $ = "_copy_z4re6_4", w = {
+  hidden: I,
+  copy: $
 }, E = {
-  $style: D
+  $style: w
 }, A = /* @__PURE__ */ B(M, [["__cssModules", E]]);
 export {
   A as default

package/dist/Copy.js.map

@@ -1 +1 @@
-{"version":3,"file":"Copy.js","sources":["../src/components/Copy/Copy.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useCssModule } from 'vue';\n\n  import { UI_TIMEOUT } from '../../constants';\n  import vTooltip from '../../directives/tooltip/tooltip';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface CopyProps {\n    /**\n     * Optional text to display instead of icon.\n     */\n    text?: string;\n\n    /**\n     * The value to copy to clipboard.\n     */\n    value?: string;\n\n    /**\n     * Sets the copy icon or text to always be visible. By default, icon/text only appears when hovering over slot content.\n     */\n    visible?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CopyProps>(), {\n    text: undefined,\n    value: '', // Todo - We should default this to the content of the default slot so you can do <Copy>631f67a</Copy>.\n    visible: false,\n  });\n  const classes = useCssModule();\n\n  // Flag to indicate whether a user successfully copied the text to their clipboard.\n  // Note: We reset this flag after a timeout to allow the user to copy the text multiple times.\n  const isCopied = ref(false);\n\n  const tooltip = computed(() => {\n    return isCopied.value ? t('ll.copy.copied') : !props.text ? t('ll.copy.copyToClipboard') : null;\n  });\n\n  function handleCopy() {\n    navigator.clipboard.writeText(props.value);\n    isCopied.value = true;\n\n    setTimeout(() => {\n      isCopied.value = false;\n    }, UI_TIMEOUT);\n  }\n</script>\n\n<template>\n  <div class=\"stash-copy tw-flex tw-items-center\" :class=\"{ [classes.hidden]: !props.visible }\" data-test=\"stash-copy\">\n    <!-- @slot Anything you want to render. This is not what will be copied to the clipboard. -->\n    <slot></slot>\n    <div\n      v-tooltip.top=\"tooltip\"\n      class=\"stash-copy__copy-zone tw-ml-3 tw-cursor-pointer\"\n      :class=\"classes.copy\"\n      data-test=\"stash-copy|copy-zone\"\n    >\n      <Icon\n        v-if=\"isCopied\"\n        class=\"stash-copy__success-icon tw-text-green-500\"\n        name=\"circle-check\"\n        data-test=\"stash-copy|success-icon\"\n      />\n      <Button\n        v-else-if=\"props.text\"\n        class=\"stash-copy__copy-text\"\n        inline\n        data-test=\"stash-copy|copy-target\"\n        @click=\"handleCopy\"\n      >\n        {{ props.text }}\n      </Button>\n      <Icon\n        v-else\n        class=\"stash-copy__copy-icon\"\n        name=\"copy\"\n        title=\"Copy to clipboard\"\n        data-test=\"stash-copy|copy-target\"\n        @click=\"handleCopy\"\n      />\n    </div>\n  </div>\n</template>\n\n<style module>\n  .hidden {\n    .copy {\n      visibility: hidden;\n    }\n\n    &:hover {\n      .copy {\n        visibility: visible;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","isCopied","ref","tooltip","computed","t","handleCopy","UI_TIMEOUT"],"mappings":";;;;;;;;;;;;;;;AA0BE,UAAMA,IAAQC,GAKRC,IAAUC,EAAA,GAIVC,IAAWC,EAAI,EAAK,GAEpBC,IAAUC,EAAS,MAChBH,EAAS,QAAQI,EAAE,gBAAgB,IAAKR,EAAM,OAAsC,OAA/BQ,EAAE,yBAAyB,CACxF;AAED,aAASC,IAAa;AACpB,gBAAU,UAAU,UAAUT,EAAM,KAAK,GACzCI,EAAS,QAAQ,IAEjB,WAAW,MAAM;AACf,QAAAA,EAAS,QAAQ;AAAA,MACnB,GAAGM,CAAU;AAAA,IACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Copy.js","sources":["../src/components/Copy/Copy.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useCssModule } from 'vue';\n\n  import { UI_TIMEOUT } from '../../constants';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Tooltip from '../Tooltip/Tooltip.vue';\n\n  export interface CopyProps {\n    /**\n     * Optional text to display instead of icon.\n     */\n    text?: string;\n\n    /**\n     * The value to copy to clipboard.\n     */\n    value?: string;\n\n    /**\n     * Sets the copy icon or text to always be visible. By default, icon/text only appears when hovering over slot content.\n     */\n    visible?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CopyProps>(), {\n    text: undefined,\n    value: '', // Todo - We should default this to the content of the default slot so you can do <Copy>631f67a</Copy>.\n    visible: false,\n  });\n  const classes = useCssModule();\n\n  // Flag to indicate whether a user successfully copied the text to their clipboard.\n  // Note: We reset this flag after a timeout to allow the user to copy the text multiple times.\n  const isCopied = ref(false);\n\n  const tooltip = computed(() => {\n    return isCopied.value ? t('ll.copy.copied') : !props.text ? t('ll.copy.copyToClipboard') : null;\n  });\n\n  function handleCopy() {\n    navigator.clipboard.writeText(props.value);\n    isCopied.value = true;\n\n    setTimeout(() => {\n      isCopied.value = false;\n    }, UI_TIMEOUT);\n  }\n</script>\n\n<template>\n  <div class=\"stash-copy flex items-center\" :class=\"{ [classes.hidden]: !props.visible }\" data-test=\"stash-copy\">\n    <!-- @slot Anything you want to render. This is not what will be copied to the clipboard. -->\n    <slot></slot>\n    <Tooltip\n      side=\"top\"\n      :text=\"tooltip\"\n      :is-disabled=\"!!props.text\"\n      class=\"stash-copy__copy-zone ml-3 cursor-pointer\"\n      :class=\"classes.copy\"\n      data-test=\"stash-copy|copy-zone\"\n    >\n      <Icon\n        v-if=\"isCopied\"\n        class=\"stash-copy__success-icon text-green-500\"\n        name=\"circle-check\"\n        data-test=\"stash-copy|success-icon\"\n      />\n      <Button\n        v-else-if=\"props.text\"\n        class=\"stash-copy__copy-text\"\n        inline\n        data-test=\"stash-copy|copy-target\"\n        @click=\"handleCopy\"\n      >\n        {{ props.text }}\n      </Button>\n      <Icon\n        v-else\n        class=\"stash-copy__copy-icon\"\n        name=\"copy\"\n        title=\"Copy to clipboard\"\n        data-test=\"stash-copy|copy-target\"\n        @click=\"handleCopy\"\n      />\n    </Tooltip>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .hidden {\n      .copy {\n        visibility: hidden;\n      }\n\n      &:hover {\n        .copy {\n          visibility: visible;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","isCopied","ref","tooltip","computed","t","handleCopy","UI_TIMEOUT"],"mappings":";;;;;;;;;;;;;;;AA0BE,UAAMA,IAAQC,GAKRC,IAAUC,EAAA,GAIVC,IAAWC,EAAI,EAAK,GAEpBC,IAAUC,EAAS,MAChBH,EAAS,QAAQI,EAAE,gBAAgB,IAAKR,EAAM,OAAsC,OAA/BQ,EAAE,yBAAyB,CACxF;AAED,aAASC,IAAa;AACpB,gBAAU,UAAU,UAAUT,EAAM,KAAK,GACzCI,EAAS,QAAQ,IAEjB,WAAW,MAAM;AACf,QAAAA,EAAS,QAAQ;AAAA,MACnB,GAAGM,CAAU;AAAA,IACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/CurrencyInput.js

@@ -317,7 +317,7 @@ const ti = /* @__PURE__ */ C({
   __name: "CurrencyInput",
   props: {
     inputOptions: { default: void 0 },
-    modelValue: { default: "" },
+    modelValue: { default: null },
     hidePrepend: { type: Boolean, default: !1 },
     autocomplete: {},
     value: {},