@leaflink/stash 51.11.0 → 51.11.1

package/dist/Chip.vue.d.ts

@@ -1,15 +1,38 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare interface ChipProps {
+export declare interface ChipProps {
     /**
      * The color for the chip that determines both the text and bg color. Needs to
      * be one of the brand colors in our design system (not a shade).
@@ -51,24 +74,43 @@ declare interface ChipProps {
     disabled?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ChipProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-click: () => any;
-remove: () => any;
-}, string, PublicProps, Readonly<ChipProps> & Readonly<{
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ChipProps>, {
+size: string;
+radius: string;
+colorScheme: string;
+shade: string;
+bgColor: undefined;
+textColor: undefined;
+isRemovable: boolean;
+shouldOverrideColors: boolean;
+disabled: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: () => void;
+remove: () => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ChipProps>, {
+size: string;
+radius: string;
+colorScheme: string;
+shade: string;
+bgColor: undefined;
+textColor: undefined;
+isRemovable: boolean;
+shouldOverrideColors: boolean;
+disabled: boolean;
+}>>> & Readonly<{
 onClick?: (() => any) | undefined;
 onRemove?: (() => any) | undefined;
 }>, {
-textColor: "ice-700" | "white" | "black" | "red-500" | "orange-500" | "blue-500" | "green-500" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-100" | "red-700" | "red-100" | "ice-500" | "ice-200" | "ice-100";
-size: "small" | "medium";
 disabled: boolean;
+size: "small" | "medium";
 shade: "main" | "light";
 colorScheme: StashPrimaryColorGroup;
 radius: "standard" | "none" | "pill";
-bgColor: "ice-700" | "white" | "black" | "red-500" | "orange-500" | "blue-500" | "green-500" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-100" | "red-700" | "red-100" | "ice-500" | "ice-200" | "ice-100";
+bgColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
+textColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
 isRemovable: boolean;
 shouldOverrideColors: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>, {
-    default?(_: {}): any;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/ConfirmationCodeInput.js

@@ -1,18 +1,18 @@
-import { defineComponent as D, useCssVars as I, useCssModule as v, ref as E, onMounted as V, watch as B, createElementBlock as a, openBlock as r, normalizeClass as x, unref as u, createElementVNode as P, createCommentVNode as p, Fragment as z, renderList as A, toDisplayString as f } from "vue";
-import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const F = { class: "tw-mb-3 tw-flex tw-gap-6" }, K = ["value", "onInput"], S = {
+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 = {
   key: 0,
   class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-red-500",
   "data-test": "field-error"
-}, U = {
+}, j = {
   key: 1,
   class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-green-500",
   "data-test": "field-success"
-}, j = {
+}, L = {
   key: 2,
   class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-ice-700",
   "data-test": "field-hint"
-}, L = /* @__PURE__ */ D({
+}, R = /* @__PURE__ */ I({
   __name: "ConfirmationCodeInput",
   props: {
     digitCount: { default: 6 },
@@ -23,21 +23,23 @@ const F = { class: "tw-mb-3 tw-flex tw-gap-6" }, K = ["value", "onInput"], S = {
   },
   emits: ["update:model-value", "change", "focus", "blur"],
   setup(g, { emit: b }) {
-    I((t) => ({
+    v((t) => ({
       b1b2f1d6: t.digitCount
     }));
-    const c = v(), o = g, i = b, n = E([]);
-    V(() => {
-      o.modelValue && (n.value = o.modelValue?.split(""));
+    const c = E(), o = g, i = b, s = V([]);
+    B(() => {
+      var t;
+      o.modelValue && (s.value = (t = o.modelValue) == null ? void 0 : t.split(""));
     });
     function k(t, e) {
-      n.value[e] = t.target?.value, m(t), t.inputType === "deleteContentBackward" ? l(t) : (t.inputType === "insertText" || t.inputType === "deleteContentForward") && w(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);
     }
     function m(t) {
-      const e = n.value.join("");
+      const e = s.value.join("");
       i("update:model-value", e), i("change", { originalEvent: t, value: e });
     }
-    function l(t) {
+    function d(t) {
       const e = h(t.target);
       e && (e.focus(), e.select());
     }
@@ -62,17 +64,18 @@ const F = { class: "tw-mb-3 tw-flex tw-gap-6" }, K = ["value", "onInput"], S = {
       i("blur", t);
     }
     function C(t) {
+      var e;
       if (!(t.ctrlKey || t.metaKey))
         switch (t.code) {
           case "ArrowLeft":
-            l(t), t.preventDefault();
+            d(t), t.preventDefault();
             break;
           case "ArrowUp":
           case "ArrowDown":
             t.preventDefault();
             break;
           case "Backspace":
-            t.target?.value.length === 0 && (l(t), t.preventDefault());
+            ((e = t.target) == null ? void 0 : e.value.length) === 0 && (d(t), t.preventDefault());
             break;
           case "ArrowRight":
             w(t), t.preventDefault();
@@ -82,63 +85,64 @@ const F = { class: "tw-mb-3 tw-flex tw-gap-6" }, K = ["value", "onInput"], S = {
           case "Tab":
             break;
           default:
-            (!(t.code !== "Space" && Number(t.key) >= 0 && Number(t.key) <= 9) || n.value.join("").length >= o.digitCount && t.code !== "Delete") && t.preventDefault();
+            (!(t.code !== "Space" && Number(t.key) >= 0 && Number(t.key) <= 9) || s.value.join("").length >= o.digitCount && t.code !== "Delete") && t.preventDefault();
             break;
         }
     }
     function N(t) {
-      const e = t.clipboardData?.getData("text");
-      if (e?.length) {
-        const s = e?.substring(0, o.digitCount), d = parseInt(s);
-        isNaN(d) || (n.value = s.split(""), m(t));
+      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));
       }
       t.preventDefault();
     }
-    return B(
+    return P(
       () => o.modelValue,
       (t) => {
-        n.value = t ? t.split("") : new Array(o.digitCount);
+        s.value = t ? t.split("") : new Array(o.digitCount);
       }
     ), (t, e) => (r(), a("div", {
-      class: x(["stash-confirmation-code-input tw-inline-block", [u(c)["stash-confirmation-code-input-container"]]]),
+      class: x(["stash-confirmation-code-input tw-inline-block", [l(c)["stash-confirmation-code-input-container"]]]),
       "data-test": "stash-confirmation-code-input"
     }, [
-      P("div", F, [
-        (r(!0), a(z, null, A(o.digitCount, (s) => (r(), a("input", {
-          key: s,
+      z("div", K, [
+        (r(!0), a(A, null, M(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", [
-            u(c)["otp-code-input"],
-            { [u(c)["has-error"]]: !!o.errorText },
-            { [u(c)["has-success"]]: !!o.successText }
+            l(c)["otp-code-input"],
+            { [l(c)["has-error"]]: !!o.errorText },
+            { [l(c)["has-success"]]: !!o.successText }
           ]]),
           type: "text",
           inputmode: "numeric",
           maxlength: "1",
-          value: n.value[s - 1],
+          value: s.value[n - 1],
           pattern: "[0-9]",
           autocomplete: "one-time-code",
-          onInput: (d) => k(d, s - 1),
+          onInput: (u) => k(u, n - 1),
           onKeydown: C,
           onPaste: N,
           onFocus: T,
           onBlur: y
-        }, null, 42, K))), 128))
+        }, null, 42, S))), 128))
       ]),
-      o.errorText ? (r(), a("small", S, f(o.errorText), 1)) : p("", !0),
-      o.successText ? (r(), a("small", U, f(o.successText), 1)) : p("", !0),
-      o.hintText ? (r(), a("small", j, f(o.hintText), 1)) : p("", !0)
+      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)
     ], 2));
   }
-}), R = {
+}), $ = {
   "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"
-}, $ = {
-  $style: R
-}, H = /* @__PURE__ */ M(L, [["__cssModules", $]]);
+}, q = {
+  $style: $
+}, J = /* @__PURE__ */ F(R, [["__cssModules", q]]);
 export {
-  H as default
+  J as default
 };
 //# sourceMappingURL=ConfirmationCodeInput.js.map

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","handleInput","event","index","updateModel","moveToPrev","moveToNext","newValue","prevInput","findPrevInput","nextInput","findNextInput","element","prevElement","nextElement","handleFocus","handleBlur","handleKeyDown","handlePaste","paste","pastedCode","parsed","watch","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_openBlock","_Fragment","_renderList","field","$event","_hoisted_3","_toDisplayString","_hoisted_4","_hoisted_5"],"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 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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"}

package/dist/ConfirmationCodeInput.vue.d.ts

@@ -1,17 +1,52 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare const _default: DefineComponent<VerificationCodeInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-blur: (params: Event) => any;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VerificationCodeInputProps>, {
+digitCount: number;
+errorText: undefined;
+successText: undefined;
+hintText: undefined;
+modelValue: undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:model-value": (value: string | null) => void;
 change: (params: {
 originalEvent: Event;
 value: string | null;
-}) => any;
-focus: (params: Event) => any;
-"update:model-value": (value: string | null) => any;
-}, string, PublicProps, Readonly<VerificationCodeInputProps> & Readonly<{
+}) => void;
+focus: (params: Event) => void;
+blur: (params: Event) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VerificationCodeInputProps>, {
+digitCount: number;
+errorText: undefined;
+successText: undefined;
+hintText: undefined;
+modelValue: undefined;
+}>>> & Readonly<{
 onBlur?: ((params: Event) => any) | undefined;
 onChange?: ((params: {
 originalEvent: Event;
@@ -25,10 +60,10 @@ hintText: string;
 modelValue: string;
 digitCount: number;
 successText: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
-declare interface VerificationCodeInputProps {
+export declare interface VerificationCodeInputProps {
     digitCount?: number;
     /**
      * Error text to display.

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","_openBlock","_createElementBlock","_hoisted_1","_Fragment","_renderList","route","_normalizeClass","evt","_toDisplayString","_hoisted_2","_createBlock","_component_router_link","routeQuery","_createTextVNode"],"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;;;AAIA,aAAAO,EAAA,GAAAC,EA2BM,OA3BNC,GA2BM;AAAA,gBAvBJD,EAsBWE,GAAA,MAAAC,EAtBelB,EAAA,OAAM,CAAfmB;UAAuB,KAAAA,EAAM;AAAA,QAAA;UAGpCA,EAAM,qBADdJ,EAQI,KAAA;AAAA;YANF,OAAKK,EAAA,CAAC,yHACExB,EAAM,cAAcuB,EAAM,MAAG,kCAAA,iBAAA,CAAA;AAAA,YACpC,MAAI,IAAMA,EAAM,IAAI;AAAA,YACpB,SAAK,CAAGE,MAAQlB,EAAYkB,GAAKF,EAAM,GAAG;AAAA,UAAA,GAExCG,EAAAH,EAAM,GAAG,GAAA,IAAAI,CAAA,WAGdC,EAScC,GAAA;AAAA;YAPZ,OAAKL,EAAA,CAAC,yHACExB,EAAM,cAAcuB,EAAM,MAAG,kCAAA,iBAAA,CAAA;AAAA,YACpC,IAAE,EAAA,MAAUA,EAAM,aAAaO,EAAAA,WAAAA;AAAAA,YAC/B,mBAAiB,KAAK,kBAAkBP,EAAM,MAAI,OAASO,EAAAA,YAAU;AAAA,YACrE,SAAK,CAAGL,MAAQlB,EAAYkB,GAAKF,EAAM,GAAG;AAAA,UAAA;uBAE3C,MAAe;AAAA,cAAZQ,EAAAL,EAAAH,EAAM,GAAG,GAAA,CAAA;AAAA,YAAA;;;;;;;;"}
+{"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,MACnC;AAAA,MACA;AAAA,QACE,KAAKM,EAAK;AAAA,QACV,MAAMN,EAAM,aAAa,iBAAiB,aAAaA,EAAM;AAAA,QAC7D,cAAc;AAAA,MAAA;AAAA,IAElB,CACD;AASQ,aAAAO,EAAYC,GAAmBC,GAAgB;AAClD,UAAAA,MAAQT,EAAM;AAChB;AAGI,YAAAU,IAAkB,OAAO,SAAS;AACpC,UAAAC,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,eAAe,GACPG,IAAAI,GACd,OAAO,SAAS,OAAOA,GACvBE,EAAqBJ,GAAiB,EAAE,QAAQ,GAAA,CAAM;AAAA,MACxD;AAGF,MAAAX,EAAK,SAAS,EAAE,MAAMQ,GAAiB,IAAIC,GAAa,GACxDT,EAAK,UAAUM,GAAO,EAAE,MAAME,GAAiB,IAAIC,GAAa;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ContextSwitcher.vue.d.ts

@@ -1,9 +1,32 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
 import { LocationQuery } from 'vue-router';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 /**
  * LeafLink app names
  */
@@ -14,7 +37,7 @@ declare const APPS: {
 
 declare type AppValues = (typeof APPS)[keyof typeof APPS];
 
-declare interface ContextSwitcherProps {
+export declare interface ContextSwitcherProps {
     /**
      * The current app that is active. Choices are 'marketplace' | 'payments'.
      */
@@ -33,16 +56,28 @@ declare interface ContextSwitcherProps {
     routeQuery?: LocationQuery;
 }
 
-declare const _default: DefineComponent<ContextSwitcherProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ContextSwitcherProps>, {
+portalAccess: () => {
+commercePortal: boolean;
+paymentsPortal: boolean;
+};
+routeQuery: () => {};
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: (urlInfo: {
 from: string;
 to: string;
-}) => any;
+}) => void;
 switch: (evt: MouseEvent, urlInfo: {
 from: string;
 to: string;
-}) => any;
-}, string, PublicProps, Readonly<ContextSwitcherProps> & Readonly<{
+}) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ContextSwitcherProps>, {
+portalAccess: () => {
+commercePortal: boolean;
+paymentsPortal: boolean;
+};
+routeQuery: () => {};
+}>>> & Readonly<{
 onClick?: ((urlInfo: {
 from: string;
 to: string;
@@ -57,7 +92,7 @@ commercePortal: boolean;
 paymentsPortal: boolean;
 };
 routeQuery: LocationQuery;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export { }

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","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_createBlock","Icon","Button","_createTextVNode","_toDisplayString"],"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;2BAIAC,EAiCM,OAAA;AAAA,MAjCD,OAAKC,EAAA,CAAC,sCAAoC,EAAA,CAAYC,EAAAX,CAAA,EAAQ,MAAM,GAAA,CAAIF,EAAM,QAAA,CAAO,CAAA;AAAA,MAAI,aAAU;AAAA,IAAA;MAEtGc,EAAaC,EAAA,QAAA,SAAA;AAAA,cACbJ,EA6BM,OAAA;AAAA,QA3BJ,OAAKC,EAAA,CAAC,mDACEC,EAAAX,CAAA,EAAQ,IAAI,CAAA;AAAA,QACpB,aAAU;AAAA,MAAA;QAGFE,EAAA,cADRY,EAKEC,GAAA;AAAA;UAHA,OAAM;AAAA,UACN,MAAK;AAAA,UACL,aAAU;AAAA,QAAA,MAGCjB,EAAM,aADnBgB,EAQSE,GAAA;AAAA;UANP,OAAM;AAAA,UACN,QAAA;AAAA,UACA,aAAU;AAAA,UACT,SAAOT;AAAA,QAAA;qBAER,MAAgB;AAAA,YAAbU,EAAAC,EAAApB,EAAM,IAAI,GAAA,CAAA;AAAA,UAAA;;oBAEfgB,EAOEC,GAAA;AAAA;UALA,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAM;AAAA,UACN,aAAU;AAAA,UACT,SAAOR;AAAA,QAAA;;;;UA1BKH,EAAA;AAAA;UAAL,EAAA,KAAV,GAAA;AAAA,QAAuB;AAAA;;;;;;;;;"}
+{"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,GAIvBC,IAAWC,EAAI,EAAK,GAEpBC,IAAUC,EAAS,MAChBH,EAAS,QAAQI,EAAE,gBAAgB,IAAKR,EAAM,OAAsC,OAA/BQ,EAAE,yBAAyB,CACxF;AAED,aAASC,IAAa;AACV,gBAAA,UAAU,UAAUT,EAAM,KAAK,GACzCI,EAAS,QAAQ,IAEjB,WAAW,MAAM;AACf,QAAAA,EAAS,QAAQ;AAAA,SAChBM,CAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Copy.vue.d.ts

@@ -1,15 +1,38 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare interface CopyProps {
+export declare interface CopyProps {
     /**
      * Optional text to display instead of icon.
      */
@@ -24,11 +47,19 @@ declare interface CopyProps {
     visible?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<CopyProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CopyProps> & Readonly<{}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CopyProps>, {
+text: undefined;
+value: string;
+visible: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CopyProps>, {
+text: undefined;
+value: string;
+visible: boolean;
+}>>> & Readonly<{}>, {
 text: string;
 value: string;
 visible: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;