@leaflink/stash 48.16.1 → 48.17.0

package/dist/{ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js → ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js}

@@ -1,22 +1,22 @@
-import { defineComponent as r, computed as a, openBlock as s, createBlock as i, withCtx as l, createVNode as m } from "vue";
-import p from "./Button.js";
-import d from "./Icon.js";
-const _ = /* @__PURE__ */ r({
+import { defineComponent as a, computed as i, openBlock as s, createBlock as l, withCtx as m, createVNode as p } from "vue";
+import d from "./Button.js";
+import u from "./Icon.js";
+const k = /* @__PURE__ */ a({
   __name: "ChevronToggle",
   props: {
     direction: { default: "down" }
   },
   emits: ["click"],
   setup(o, { emit: n }) {
-    const c = o, t = a(() => `chevron-${c.direction}`);
-    return (u, e) => (s(), i(p, {
+    const c = o, r = n, t = i(() => `chevron-${c.direction}`);
+    return (f, e) => (s(), l(d, {
       class: "stash-chevron-toggle",
       icon: "",
       "data-test": "stash-chevron-toggle",
-      onClick: e[0] || (e[0] = (f) => n("click"))
+      onClick: e[0] || (e[0] = (v) => r("click"))
     }, {
-      default: l(() => [
-        m(d, {
+      default: m(() => [
+        p(u, {
           name: t.value,
           "data-test": `icon|${t.value}`
         }, null, 8, ["name", "data-test"])
@@ -26,6 +26,6 @@ const _ = /* @__PURE__ */ r({
   }
 });
 export {
-  _
+  k as _
 };
-//# sourceMappingURL=ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js.map
+//# sourceMappingURL=ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js.map

package/dist/{ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js.map → ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js","sources":["../src/components/ChevronToggle/ChevronToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  enum ChevronToggleDirections {\n    Up = 'up',\n    Down = 'down',\n    Left = 'left',\n    Right = 'right',\n  }\n\n  export type ChevronToggleDirection = `${ChevronToggleDirections}`;\n\n  export interface ChevronToggleProps {\n    direction?: ChevronToggleDirection;\n  }\n\n  const props = withDefaults(defineProps<ChevronToggleProps>(), {\n    direction: 'down',\n  });\n\n  const emit = defineEmits<{ (e: 'click'): void }>();\n\n  const icon = computed<IconName>(() => `chevron-${props.direction}`);\n</script>\n\n<template>\n  <Button class=\"stash-chevron-toggle\" icon data-test=\"stash-chevron-toggle\" @click=\"emit('click')\">\n    <Icon :name=\"icon\" :data-test=\"`icon|${icon}`\" />\n  </Button>\n</template>\n"],"names":["icon","computed","props"],"mappings":";;;;;;;;;;iBA0BQA,IAAOC,EAAmB,MAAM,WAAWC,EAAM,WAAW;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js","sources":["../src/components/ChevronToggle/ChevronToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  enum ChevronToggleDirections {\n    Up = 'up',\n    Down = 'down',\n    Left = 'left',\n    Right = 'right',\n  }\n\n  export type ChevronToggleDirection = `${ChevronToggleDirections}`;\n\n  export interface ChevronToggleProps {\n    direction?: ChevronToggleDirection;\n  }\n\n  const props = withDefaults(defineProps<ChevronToggleProps>(), {\n    direction: 'down',\n  });\n\n  const emit = defineEmits<{ (e: 'click'): void }>();\n\n  const icon = computed<IconName>(() => `chevron-${props.direction}`);\n</script>\n\n<template>\n  <Button class=\"stash-chevron-toggle\" icon data-test=\"stash-chevron-toggle\" @click=\"emit('click')\">\n    <Icon :name=\"icon\" :data-test=\"`icon|${icon}`\" />\n  </Button>\n</template>\n"],"names":["props","__props","emit","__emit","icon","computed"],"mappings":";;;;;;;;;;AAoBE,UAAMA,IAAQC,GAIRC,IAAOC,GAEPC,IAAOC,EAAmB,MAAM,WAAWL,EAAM,WAAW;;;;;;;;;;;;;;;;;"}

package/dist/Chip.js

@@ -1,11 +1,11 @@
-import { defineComponent as h, useCssModule as f, openBlock as i, createElementBlock as d, normalizeClass as n, unref as r, renderSlot as u, withKeys as b, withModifiers as m, createVNode as v, createCommentVNode as _ } from "vue";
-import w from "./utils/colorScheme.js";
-import C from "./Icon.js";
-import { _ as y } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as f, useCssModule as b, openBlock as a, createElementBlock as d, normalizeClass as n, unref as i, renderSlot as m, withKeys as v, withModifiers as u, createVNode as _, createCommentVNode as w } from "vue";
+import C from "./utils/colorScheme.js";
+import y from "./Icon.js";
+import { _ as $ } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const $ = ["disabled"], z = /* @__PURE__ */ h({
+const z = ["disabled"], k = /* @__PURE__ */ f({
   name: "ll-chip",
   __name: "Chip",
   props: {
@@ -20,10 +20,10 @@ const $ = ["disabled"], z = /* @__PURE__ */ h({
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["click", "remove"],
-  setup(c, { emit: a }) {
-    const e = c, s = f();
-    function p() {
-      const { computedBgColor: o, computedTextColor: t } = w({
+  setup(c, { emit: p }) {
+    const e = c, r = p, s = b();
+    function h() {
+      const { computedBgColor: o, computedTextColor: t } = C({
         shade: e.shade,
         color: e.colorScheme
       }), l = `tw-text-${e.textColor || t} tw-bg-${e.bgColor || o}`;
@@ -35,51 +35,51 @@ const $ = ["disabled"], z = /* @__PURE__ */ h({
         "tw-bg-ice-500 tw-text-white": e.disabled
       };
     }
-    return (o, t) => (i(), d("span", {
+    return (o, t) => (a(), d("span", {
       class: n(["stash-chip tw-relative tw-inline-flex tw-items-center", [
         `stash-chip--radius-${e.radius}`,
         `stash-chip--size-${e.size}`,
         `stash-chip--shade-${e.shade}`,
-        r(s).root,
-        r(s).removableChip,
-        r(s)[`size-${e.size}`],
-        p()
+        i(s).root,
+        i(s).removableChip,
+        i(s)[`size-${e.size}`],
+        h()
       ]]),
       "data-test": "stash-chip",
-      onClick: t[2] || (t[2] = (l) => a("click"))
+      onClick: t[2] || (t[2] = (l) => r("click"))
     }, [
-      o.isRemovable ? (i(), d("span", {
+      o.isRemovable ? (a(), d("span", {
         key: 0,
         class: n([{ "tw-mr-6 tw-truncate": e.isRemovable }])
       }, [
-        u(o.$slots, "default")
-      ], 2)) : u(o.$slots, "default", { key: 1 }),
-      e.isRemovable ? (i(), d("button", {
+        m(o.$slots, "default")
+      ], 2)) : m(o.$slots, "default", { key: 1 }),
+      e.isRemovable ? (a(), d("button", {
         key: 2,
         tabindex: "-1",
-        class: n(["stash-chip__remove-button", ["tw-absolute", r(s)["remove-button"]]]),
+        class: n(["stash-chip__remove-button", ["tw-absolute", i(s)["remove-button"]]]),
         "data-test": "stash-chip|remove-button",
         disabled: e.disabled,
-        onKeypress: t[0] || (t[0] = b(m((l) => a("remove"), ["prevent"]), ["enter"])),
-        onMousedown: t[1] || (t[1] = m((l) => a("remove"), ["prevent", "stop"]))
+        onKeypress: t[0] || (t[0] = v(u((l) => r("remove"), ["prevent"]), ["enter"])),
+        onMousedown: t[1] || (t[1] = u((l) => r("remove"), ["prevent", "stop"]))
       }, [
-        v(C, {
+        _(y, {
           "data-test": "icon|close",
           name: "close",
           size: "small"
         })
-      ], 42, $)) : _("", !0)
+      ], 42, z)) : w("", !0)
     ], 2));
   }
-}), k = "_root_1u8h2_2", x = {
-  root: k,
+}), x = "_root_1u8h2_2", g = {
+  root: x,
   "size-medium": "_size-medium_1u8h2_12",
   "size-small": "_size-small_1u8h2_17",
   "remove-button": "_remove-button_1u8h2_22"
-}, g = {
-  $style: x
-}, V = /* @__PURE__ */ y(z, [["__cssModules", g]]);
+}, B = {
+  $style: g
+}, E = /* @__PURE__ */ $(k, [["__cssModules", B]]);
 export {
-  V as default
+  E as default
 };
 //# sourceMappingURL=Chip.js.map

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 =\n    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":["classes","useCssModule","determineConditionalStyles","computedBgColor","computedTextColor","colorSchemeUtil","props","colorStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAqFQA,IAAUC;AAEhB,aAASC,IAA6B;AACpC,YAAM,EAAE,iBAAAC,GAAiB,mBAAAC,EAAkB,IAAIC,EAAgB;AAAA,QAC7D,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd,GAEKC,IAAc,WAAWD,EAAM,aAAaF,WAA2BE,EAAM,WAAWH;AAEvF,aAAA;AAAA,QACL,mBAAmBG,EAAM,WAAW;AAAA,QACpC,iBAAiBA,EAAM,WAAW;AAAA,QAClC,mBAAmBA,EAAM,WAAW;AAAA,QACpC,CAACC,CAAW,GAAG,CAACD,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 = `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;AAEhB,aAASC,IAA6B;AACpC,YAAM,EAAE,iBAAAC,GAAiB,mBAAAC,EAAkB,IAAIC,EAAgB;AAAA,QAC7D,OAAOT,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd,GAEKU,IAAc,WAAWV,EAAM,aAAaQ,WAA2BR,EAAM,WAAWO;AAEvF,aAAA;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Chip.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -75,7 +74,7 @@ export declare interface ChipProps {
     disabled?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ChipProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ChipProps>, {
     size: string;
     radius: string;
     colorScheme: string;
@@ -85,10 +84,10 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     isRemovable: boolean;
     shouldOverrideColors: boolean;
     disabled: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     click: () => void;
     remove: () => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ChipProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ChipProps>, {
     size: string;
     radius: string;
     colorScheme: string;
@@ -98,12 +97,12 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     isRemovable: boolean;
     shouldOverrideColors: boolean;
     disabled: boolean;
-}>>> & {
+}>>> & Readonly<{
     onClick?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;
-}, {
-    size: "small" | "medium";
+}>, {
     disabled: boolean;
+    size: "small" | "medium";
     shade: "main" | "light";
     colorScheme: StashPrimaryColorGroup;
     radius: "standard" | "none" | "pill";
@@ -111,7 +110,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     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, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/ConfirmationCodeInput.js

@@ -1,125 +1,148 @@
-import { defineComponent as k, useCssModule as C, ref as m, watch as y, openBlock as c, createElementBlock as i, createElementVNode as E, Fragment as I, renderList as N, withDirectives as T, normalizeClass as p, unref as f, vModelText as D, toDisplayString as v, createCommentVNode as _ } from "vue";
-import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
-const z = { class: "tw-mb-3 tw-flex tw-gap-6" }, q = ["onUpdate:modelValue", "onPaste", "onKeyup", "onClick"], B = /* @__PURE__ */ k({
+import { defineComponent as I, useCssVars as v, useCssModule as E, ref as V, onMounted as B, watch as P, openBlock as a, createElementBlock as r, normalizeClass as x, unref as l, createElementVNode as z, Fragment as A, renderList as M, toDisplayString as p, createCommentVNode as f } from "vue";
+import { _ as F } from "./_plugin-vue_export-helper-dad06003.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"
+}, 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"
+}, 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"
+}, R = /* @__PURE__ */ I({
   __name: "ConfirmationCodeInput",
   props: {
     digitCount: { default: 6 },
     errorText: { default: void 0 },
-    successText: { default: void 0 }
+    successText: { default: void 0 },
+    hintText: { default: void 0 },
+    modelValue: { default: void 0 }
   },
-  emits: ["update:model-value"],
-  setup(x, { emit: d }) {
-    const a = x, l = C(), s = m([]), n = m();
-    function g(e) {
-      e.data && e.target.nextElementSibling ? e.target.nextElementSibling.focus() : e.data == null && e.target.previousElementSibling && e.target.previousElementSibling.focus();
+  emits: ["update:model-value", "change", "focus", "blur"],
+  setup(g, { emit: b }) {
+    v((t) => ({
+      b1b2f1d6: t.digitCount
+    }));
+    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) {
+      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 h(e, o) {
-      if (e.preventDefault(), s.value[o]) {
-        n.value[o].focus();
-        return;
-      }
-      let t = 0;
-      s.value.forEach((u, r) => {
-        u && (t = r + 1);
-      }), n.value[t].focus();
+    function m(t) {
+      const e = s.value.join("");
+      i("update:model-value", e), i("change", { originalEvent: t, value: e });
     }
-    function w(e, o) {
-      if (e.key !== "Backspace" && !new RegExp("^([0-9])$").test(e.key)) {
-        e.preventDefault();
-        return;
-      }
-      let t = 0;
-      if (o !== 0 ? t = o - 1 : t = 0, e.key === "Backspace") {
-        if (o + 1 === s.value.length - 1 && s.value[o]) {
-          n.value[o + 1].focus();
-          return;
+    function d(t) {
+      const e = h(t.target);
+      e && (e.focus(), e.select());
+    }
+    function w(t) {
+      const e = _(t.target);
+      e && (e.focus(), e.select());
+    }
+    function h(t) {
+      const e = t.previousElementSibling;
+      if (e)
+        return e.nodeName === "INPUT" ? e : h(e);
+    }
+    function _(t) {
+      const e = t.nextElementSibling;
+      if (e)
+        return e.nodeName === "INPUT" ? e : _(e);
+    }
+    function T(t) {
+      t.target.select(), i("focus", t);
+    }
+    function y(t) {
+      i("blur", t);
+    }
+    function C(t) {
+      var e;
+      if (!(t.ctrlKey || t.metaKey))
+        switch (t.code) {
+          case "ArrowLeft":
+            d(t), t.preventDefault();
+            break;
+          case "ArrowUp":
+          case "ArrowDown":
+            t.preventDefault();
+            break;
+          case "Backspace":
+            ((e = t.target) == null ? void 0 : e.value.length) === 0 && (d(t), t.preventDefault());
+            break;
+          case "ArrowRight":
+            w(t), t.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();
+            break;
         }
-        if (s.value[o])
-          return;
-        s.value[t] = "", n.value[t].focus();
-        return;
-      }
-      if (!new RegExp("^([0-9])$").test(e.key) && !s.value[o]) {
-        s.value[t] = "", n.value[t].focus();
-        return;
-      }
     }
-    function b(e) {
-      var u;
-      const o = (u = e.clipboardData) == null ? void 0 : u.getData("text");
-      if (isNaN(Number(o))) {
-        n.value[0].focus();
-        return;
+    function N(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));
       }
-      let t = n.value[0].nextElementSibling;
-      if (o)
-        for (let r = 1; r < o.length; r++)
-          t && (s.value[r] = o[r], t = t.nextElementSibling);
+      t.preventDefault();
     }
-    return y(
-      () => s,
-      (e) => {
-        if (e.value.join("") === "")
-          d("update:model-value", null);
-        else {
-          if (isNaN(Number(e.value[0]))) {
-            s.value[0] = "";
-            return;
-          }
-          d("update:model-value", Number(e.value.join("")));
-        }
-      },
-      { deep: !0 }
-    ), (e, o) => (c(), i("form", {
-      ref: "otpCont",
-      class: "stash-confirmation-code-input tw-inline-block",
-      "data-test": "stash-confirmation-code-input",
-      onInput: g
+    return P(
+      () => o.modelValue,
+      (t) => {
+        s.value = t ? t.split("") : new Array(o.digitCount);
+      }
+    ), (t, e) => (a(), r("div", {
+      class: x(["stash-confirmation-code-input tw-inline-block", [l(c)["stash-confirmation-code-input-container"]]]),
+      "data-test": "stash-confirmation-code-input"
     }, [
-      E("div", z, [
-        (c(!0), i(I, null, N(a.digitCount, (t, u) => T((c(), i("input", {
-          key: t,
-          ref_for: !0,
-          ref_key: "inputEl",
-          ref: n,
-          "onUpdate:modelValue": (r) => s.value[t - 1] = r,
+      z("div", K, [
+        (a(!0), r(A, null, M(o.digitCount, (n) => (a(), r("input", {
+          key: n,
           "data-test": "stash-confirmation-code-input__otp",
-          type: "text",
-          maxlength: "1",
-          class: p(["tw-border tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500", [
-            f(l).otpCodeInput,
-            { [f(l)["has-error"]]: !!a.errorText },
-            { [f(l)["has-success"]]: !!a.successText }
+          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", [
+            l(c)["otp-code-input"],
+            { [l(c)["has-error"]]: !!o.errorText },
+            { [l(c)["has-success"]]: !!o.successText }
           ]]),
+          type: "text",
           inputmode: "numeric",
-          onPaste: (r) => t === 1 && b(r),
-          onKeyup: (r) => w(r, u),
-          onClick: (r) => h(r, u)
-        }, null, 42, q)), [
-          [D, s.value[t - 1]]
-        ])), 128))
+          maxlength: "1",
+          value: s.value[n - 1],
+          pattern: "[0-9]",
+          autocomplete: "one-time-code",
+          onInput: (u) => k(u, n - 1),
+          onKeydown: C,
+          onPaste: N,
+          onFocus: T,
+          onBlur: y
+        }, null, 42, S))), 128))
       ]),
-      a.errorText ? (c(), i("small", {
-        key: 0,
-        class: p(["tw-block tw-text-center tw-text-red-500", f(l).error]),
-        "data-test": "field-error"
-      }, v(a.errorText), 3)) : _("", !0),
-      a.successText ? (c(), i("small", {
-        key: 1,
-        class: p(["tw-block tw-text-center tw-text-green-500", f(l).error]),
-        "data-test": "field-error"
-      }, v(a.successText), 3)) : _("", !0)
-    ], 544));
+      o.errorText ? (a(), r("small", U, p(o.errorText), 1)) : f("", !0),
+      o.successText ? (a(), r("small", j, p(o.successText), 1)) : f("", !0),
+      o.hintText ? (a(), r("small", L, p(o.hintText), 1)) : f("", !0)
+    ], 2));
   }
-}), M = "_otpCodeInput_1qtz8_2", K = "_error_1qtz8_21", P = {
-  otpCodeInput: M,
-  "has-error": "_has-error_1qtz8_9",
-  "has-success": "_has-success_1qtz8_13",
-  error: K
-}, U = {
-  $style: P
-}, F = /* @__PURE__ */ S(B, [["__cssModules", U]]);
+}), $ = {
+  "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"
+}, q = {
+  $style: $
+}, J = /* @__PURE__ */ F(R, [["__cssModules", q]]);
 export {
-  F 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 { 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\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'update:model-value', value: number | null): void;\n    }>();\n\n  const data: Ref<Array<string>> = ref([]);\n  const inputEl = ref();\n\n  function handleOtpInput(e) {\n    if (e.data && e.target.nextElementSibling) {\n      e.target.nextElementSibling.focus();\n    } else if (e.data == null && e.target.previousElementSibling) {\n      e.target.previousElementSibling.focus();\n    }\n  }\n\n  function handleFocus(event, elementIndex: number) {\n    event.preventDefault();\n\n    if (data.value[elementIndex]) {\n      inputEl.value[elementIndex].focus();\n\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    data.value.forEach((value, index) => {\n      if (value) {\n        focusedIndex = index + 1;\n      }\n    });\n\n    inputEl.value[focusedIndex].focus();\n  }\n\n  function handleKeyUp(e: KeyboardEvent, index: number) {\n    if (e.key !== 'Backspace' && !new RegExp('^([0-9])$').test(e.key)) {\n      e.preventDefault();\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    if (index !== 0) {\n      focusedIndex = index - 1;\n    } else {\n      focusedIndex = 0;\n    }\n\n    if (e.key === 'Backspace') {\n      if (index + 1 === data.value.length - 1 && data.value[index]) {\n        inputEl.value[index + 1].focus();\n        return;\n      }\n\n      if (data.value[index]) {\n        return;\n      }\n\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n\n      return;\n    }\n\n    if (!new RegExp('^([0-9])$').test(e.key) && !data.value[index]) {\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n      return;\n    }\n  }\n\n  function handlePaste(e: ClipboardEvent) {\n    const pasteData = e.clipboardData?.getData('text');\n\n    if (isNaN(Number(pasteData))) {\n      inputEl.value[0].focus();\n      return;\n    }\n\n    let nextEl = inputEl.value[0].nextElementSibling;\n    if (pasteData) {\n      for (let i = 1; i < pasteData.length; i++) {\n        if (nextEl) {\n          data.value[i] = pasteData[i];\n          nextEl = nextEl.nextElementSibling;\n        }\n      }\n    }\n  }\n\n  watch(\n    () => data,\n    (newVal) => {\n      if (newVal.value.join('') === '') {\n        emit('update:model-value', null);\n      } else {\n        if (isNaN(Number(newVal.value[0]))) {\n          data.value[0] = '';\n          return;\n        }\n        emit('update:model-value', Number(newVal.value.join('')));\n      }\n    },\n    { deep: true },\n  );\n</script>\n\n<template>\n  <form\n    ref=\"otpCont\"\n    class=\"stash-confirmation-code-input tw-inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    @input=\"handleOtpInput\"\n  >\n    <div class=\"tw-mb-3 tw-flex tw-gap-6\">\n      <template v-for=\"(field, index) in props.digitCount\" :key=\"field\">\n        <input\n          ref=\"inputEl\"\n          v-model=\"data[field - 1]\"\n          data-test=\"stash-confirmation-code-input__otp\"\n          type=\"text\"\n          maxlength=\"1\"\n          class=\"tw-border 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.otpCodeInput,\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          inputmode=\"numeric\"\n          @paste=\"field === 1 && handlePaste($event)\"\n          @keyup=\"handleKeyUp($event, index)\"\n          @click=\"(evt) => handleFocus(evt, index)\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"tw-block tw-text-center tw-text-red-500\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"tw-block tw-text-center tw-text-green-500\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.successText }}\n    </small>\n  </form>\n</template>\n\n<style module>\n  .otpCodeInput {\n    border-radius: 4px;\n    caret-color: transparent;\n    height: 36px;\n    width: 36px;\n  }\n\n  .otpCodeInput.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .otpCodeInput.has-success:not(:focus) {\n    border-color: var(--color-green-500);\n  }\n\n  .otpCodeInput:focus {\n    outline: none;\n  }\n\n  .error {\n    margin-top: 4px;\n    white-space: pre-line;\n  }\n</style>\n"],"names":["classes","useCssModule","data","ref","inputEl","handleOtpInput","handleFocus","event","elementIndex","focusedIndex","value","index","handleKeyUp","handlePaste","pasteData","_a","nextEl","i","watch","newVal","emit"],"mappings":";;;;;;;;;;;iBAGQA,IAAUC,KAyBVC,IAA2BC,EAAI,CAAA,CAAE,GACjCC,IAAUD;AAEhB,aAASE,EAAe,GAAG;AACzB,MAAI,EAAE,QAAQ,EAAE,OAAO,qBACnB,EAAA,OAAO,mBAAmB,UACnB,EAAE,QAAQ,QAAQ,EAAE,OAAO,0BAClC,EAAA,OAAO,uBAAuB;IAEpC;AAES,aAAAC,EAAYC,GAAOC,GAAsB;AAG5C,UAFJD,EAAM,eAAe,GAEjBL,EAAK,MAAMM,CAAY,GAAG;AACpB,QAAAJ,EAAA,MAAMI,CAAY,EAAE,MAAM;AAElC;AAAA;AAGF,UAAIC,IAAe;AAEnB,MAAAP,EAAK,MAAM,QAAQ,CAACQ,GAAOC,MAAU;AACnC,QAAID,MACFD,IAAeE,IAAQ;AAAA,MACzB,CACD,GAEOP,EAAA,MAAMK,CAAY,EAAE,MAAM;AAAA,IACpC;AAES,aAAAG,EAAY,GAAkBD,GAAe;AAChD,UAAA,EAAE,QAAQ,eAAe,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,GAAG;AACjE,UAAE,eAAe;AACjB;AAAA;AAGF,UAAIF,IAAe;AAQf,UANAE,MAAU,IACZF,IAAeE,IAAQ,IAERF,IAAA,GAGb,EAAE,QAAQ,aAAa;AACrB,YAAAE,IAAQ,MAAMT,EAAK,MAAM,SAAS,KAAKA,EAAK,MAAMS,CAAK,GAAG;AAC5D,UAAAP,EAAQ,MAAMO,IAAQ,CAAC,EAAE,MAAM;AAC/B;AAAA;AAGE,YAAAT,EAAK,MAAMS,CAAK;AAClB;AAGG,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAElC;AAAA;AAGF,UAAI,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAACP,EAAK,MAAMS,CAAK,GAAG;AACzD,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAClC;AAAA;AAAA,IAEJ;AAEA,aAASI,EAAY,GAAmB;;AACtC,YAAMC,KAAYC,IAAA,EAAE,kBAAF,gBAAAA,EAAiB,QAAQ;AAE3C,UAAI,MAAM,OAAOD,CAAS,CAAC,GAAG;AACpB,QAAAV,EAAA,MAAM,CAAC,EAAE,MAAM;AACvB;AAAA;AAGF,UAAIY,IAASZ,EAAQ,MAAM,CAAC,EAAE;AAC9B,UAAIU;AACF,iBAASG,IAAI,GAAGA,IAAIH,EAAU,QAAQG;AACpC,UAAID,MACFd,EAAK,MAAMe,CAAC,IAAIH,EAAUG,CAAC,GAC3BD,IAASA,EAAO;AAAA,IAIxB;AAEA,WAAAE;AAAA,MACE,MAAMhB;AAAA,MACN,CAACiB,MAAW;AACV,YAAIA,EAAO,MAAM,KAAK,EAAE,MAAM;AAC5B,UAAAC,EAAK,sBAAsB,IAAI;AAAA,aAC1B;AACL,cAAI,MAAM,OAAOD,EAAO,MAAM,CAAC,CAAC,CAAC,GAAG;AAC7B,YAAAjB,EAAA,MAAM,CAAC,IAAI;AAChB;AAAA;AAEF,UAAAkB,EAAK,sBAAsB,OAAOD,EAAO,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA;AAAA,MAE5D;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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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"}