@leaflink/stash 52.0.3 → 53.0.0

package/dist/Checkbox.js

@@ -1,13 +1,13 @@
-import { defineComponent as C, useAttrs as E, useSlots as V, useCssModule as A, computed as s, createElementBlock as d, openBlock as i, unref as o, normalizeClass as n, withDirectives as B, createElementVNode as x, createCommentVNode as z, mergeProps as M, vModelCheckbox as $, renderSlot as k, createTextVNode as w, toDisplayString as h } from "vue";
-import I from "@leaflink/snitch";
+import { defineComponent as C, useAttrs as E, useSlots as V, useCssModule as A, computed as s, createElementBlock as d, openBlock as i, unref as o, normalizeClass as n, withDirectives as B, createElementVNode as x, createCommentVNode as M, mergeProps as $, vModelCheckbox as I, renderSlot as k, createTextVNode as v, toDisplayString as h } from "vue";
+import N from "@leaflink/snitch";
 import m from "lodash-es/uniqueId";
-import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const S = ["data-test"], D = ["id", "aria-invalid", "aria-errormessage", "disabled", "value"], q = ["for"], H = ["id"], P = /* @__PURE__ */ C({
+import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const D = ["data-test"], q = ["id", "aria-invalid", "aria-errormessage", "disabled", "value"], z = ["for"], H = ["id"], P = /* @__PURE__ */ C({
   name: "ll-checkbox",
   inheritAttrs: !1,
   __name: "Checkbox",
   props: {
-    checked: { type: [Boolean, Array], default: !1 },
+    checked: { type: [Boolean, Array] },
     hasError: { type: Boolean, default: !1 },
     id: { default: void 0 },
     label: { default: void 0 },
@@ -18,13 +18,13 @@ const S = ["data-test"], D = ["id", "aria-invalid", "aria-errormessage", "disabl
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:checked"],
-  setup(v, { emit: f }) {
-    const e = v, a = E(), _ = V(), l = A(), y = f;
+  setup(f, { emit: _ }) {
+    const e = f, a = E(), y = V(), l = A(), g = _;
     if (e.modelValue !== void 0)
       throw new Error("ll-checkbox: use :checked or v-model:checked instead of :model-value and v-model.");
-    if (typeof e.value == "boolean" && I.warn("ll-checkbox: use `checked` to toggle the state; `value` is what will be set if `checked` is true"), a.onChange)
+    if (typeof e.value == "boolean" && N.warn("ll-checkbox: use `checked` to toggle the state; `value` is what will be set if `checked` is true"), a.onChange)
       throw new Error("ll-checkbox: use the @update:checked event instead of @change.");
-    const g = s(() => {
+    const w = s(() => {
       const t = { ...a };
       return delete t["data-test"], delete t.class, t;
     }), r = s({
@@ -32,11 +32,11 @@ const S = ["data-test"], D = ["id", "aria-invalid", "aria-errormessage", "disabl
         return e.checked;
       },
       set(t) {
-        y("update:checked", t);
+        g("update:checked", t);
       }
     }), c = s(() => !!e.errorText || e.hasError), u = s(() => e.id || m("checkbox-")), b = s(() => e.errorText ? m("checkbox-error-") : void 0);
     return (t, p) => (i(), d("div", {
-      class: n(["stash-checkbox tw-relative tw-m-0", [
+      class: n(["stash-checkbox relative m-0", [
         o(a).class,
         {
           "stash-checkbox--checked": !!r.value,
@@ -45,57 +45,57 @@ const S = ["data-test"], D = ["id", "aria-invalid", "aria-errormessage", "disabl
       ]]),
       "data-test": o(a)["data-test"] || "stash-checkbox"
     }, [
-      B(x("input", M({
+      B(x("input", $({
         id: u.value,
         "onUpdate:modelValue": p[0] || (p[0] = (T) => r.value = T),
         "aria-invalid": !!e.errorText,
         "aria-errormessage": b.value,
         disabled: e.disabled,
-        class: ["tw-sr-only lg:tw-m-0", o(l).input],
+        class: ["sr-only lg:m-0", o(l).input],
         type: "checkbox",
         value: t.value
-      }, g.value), null, 16, D), [
-        [$, r.value]
+      }, w.value), null, 16, q), [
+        [I, r.value]
       ]),
       x("label", {
         "data-test": "stash-checkbox|label",
-        class: n(["stash-checkbox__label tw-relative tw-inline-block tw-min-h-9 tw-cursor-pointer tw-overflow-visible tw-py-1.5 tw-pl-8 tw-align-top tw-text-sm tw-font-normal tw-leading-6", [
+        class: n(["stash-checkbox__label relative inline-block min-h-9 cursor-pointer overflow-visible py-1.5 pl-8 align-top text-sm font-normal leading-6", [
           o(l).label,
           {
-            "tw-text-ice-900": !c.value && !e.disabled,
-            "tw-text-red-500": c.value,
-            "tw-text-ice-500": e.disabled
+            "text-ice-900": !c.value && !e.disabled,
+            "text-red-500": c.value,
+            "text-ice-500": e.disabled
           }
         ]]),
         for: u.value
       }, [
         k(t.$slots, "default", {}, () => [
-          w(h(t.label), 1)
+          v(h(t.label), 1)
         ])
-      ], 10, q),
+      ], 10, z),
       e.errorText ? (i(), d("span", {
         key: 0,
         id: b.value,
-        class: "stash-checkbox__error-text tw-ml-8 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500",
+        class: "stash-checkbox__error-text ml-8 block whitespace-pre-line text-xs text-red-500",
         "data-test": "stash-checkbox|error"
-      }, h(e.errorText), 9, H)) : e.hintText || o(_).hint ? (i(), d("span", {
+      }, h(e.errorText), 9, H)) : e.hintText || o(y).hint ? (i(), d("span", {
         key: 1,
-        class: n(["stash-checkbox__hint-text tw-ml-8 tw-block tw-whitespace-pre-line tw-text-xs", { "tw-text-ice-500": e.disabled }]),
+        class: n(["stash-checkbox__hint-text ml-8 block whitespace-pre-line text-xs", { "text-ice-500": e.disabled }]),
         "data-test": "stash-checkbox|hint"
       }, [
         k(t.$slots, "hint", {}, () => [
-          w(h(e.hintText), 1)
+          v(h(e.hintText), 1)
         ])
-      ], 2)) : z("", !0)
-    ], 10, S));
+      ], 2)) : M("", !0)
+    ], 10, D));
   }
-}), U = "_input_bhz1o_2", j = "_label_bhz1o_2", F = {
+}), U = "_input_1v4by_5", j = "_label_1v4by_5", F = {
   input: U,
   label: j,
-  "has-error": "_has-error_bhz1o_23"
+  "has-error": "_has-error_1v4by_26"
 }, G = {
   $style: F
-}, Q = /* @__PURE__ */ N(P, [["__cssModules", G]]);
+}, Q = /* @__PURE__ */ S(P, [["__cssModules", G]]);
 export {
   Q as default
 };

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useCssModule, useSlots } from 'vue';\n\n  export interface CheckboxProps {\n    /**\n     * Whether the checkbox is currently checked based on the current value.\n     * Either defined by a boolean, or whether `checked` as an array includes `value`.\n     */\n    checked: boolean | Array<string | number>;\n\n    /**\n     * Whether the checkbox is in an error state (optional). For error styling without error text.\n     *\n     * @deprecated Just pass `error-text` instead.\n     */\n    hasError?: boolean;\n\n    /**\n     * Unique ID for the checkbox, required for accessibility purposes\n     */\n    id?: string;\n\n    /**\n     * Label text to display with checkbox\n     */\n    label?: string;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) and adds error styling (overrides `hasError`).\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * @deprecated use the `checked` prop instead\n     */\n    modelValue?: boolean | Array<string | number>;\n\n    /**\n     * The value of the checkbox.\n     */\n    value?: string | number;\n\n    /**\n     * Whether the checkbox is disabled.\n     */\n    disabled?: boolean;\n  }\n\n  defineOptions({\n    name: 'll-checkbox',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<CheckboxProps>(), {\n    checked: false,\n    errorId: undefined,\n    errorText: '',\n    hasError: false,\n    hintText: '',\n    id: undefined,\n    label: undefined,\n    modelValue: undefined,\n    value: undefined,\n    disabled: false,\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'update:checked', value: CheckboxProps['checked']): void;\n  }>();\n\n  if (props.modelValue !== undefined) {\n    throw new Error('ll-checkbox: use :checked or v-model:checked instead of :model-value and v-model.');\n  }\n\n  if (typeof props.value === 'boolean') {\n    logger.warn('ll-checkbox: use `checked` to toggle the state; `value` is what will be set if `checked` is true');\n  }\n\n  if (attrs.onChange) {\n    throw new Error('ll-checkbox: use the @update:checked event instead of @change.');\n  }\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs['data-test'];\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const internalValue = computed({\n    get() {\n      return props.checked;\n    },\n    set(value) {\n      emit('update:checked', value);\n    },\n  });\n\n  const internalHasError = computed(() => !!props.errorText || props.hasError);\n  const checkboxId = computed(() => props.id || uniqueId('checkbox-'));\n  const checkboxErrorId = computed(() => (props.errorText ? uniqueId('checkbox-error-') : undefined));\n</script>\n\n<template>\n  <div\n    class=\"stash-checkbox tw-relative tw-m-0\"\n    :class=\"[\n      attrs.class,\n      {\n        'stash-checkbox--checked': !!internalValue,\n        [`stash-checkbox--has-error ${classes['has-error']}`]: internalHasError,\n      },\n    ]\"\n    :data-test=\"attrs['data-test'] || 'stash-checkbox'\"\n  >\n    <input\n      :id=\"checkboxId\"\n      v-model=\"internalValue\"\n      :aria-invalid=\"!!props.errorText\"\n      :aria-errormessage=\"checkboxErrorId\"\n      :disabled=\"props.disabled\"\n      class=\"tw-sr-only lg:tw-m-0\"\n      :class=\"classes.input\"\n      type=\"checkbox\"\n      :value=\"value\"\n      v-bind=\"inputAttrs\"\n    />\n\n    <label\n      data-test=\"stash-checkbox|label\"\n      class=\"stash-checkbox__label tw-relative tw-inline-block tw-min-h-9 tw-cursor-pointer tw-overflow-visible tw-py-1.5 tw-pl-8 tw-align-top tw-text-sm tw-font-normal tw-leading-6\"\n      :class=\"[\n        classes.label,\n        {\n          'tw-text-ice-900': !internalHasError && !props.disabled,\n          'tw-text-red-500': internalHasError,\n          'tw-text-ice-500': props.disabled,\n        },\n      ]\"\n      :for=\"checkboxId\"\n    >\n      <slot>\n        {{ label }}\n      </slot>\n    </label>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"checkboxErrorId\"\n      class=\"stash-checkbox__error-text tw-ml-8 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-checkbox|error\"\n    >\n      {{ props.errorText }}\n    </span>\n    <span\n      v-else-if=\"props.hintText || slots.hint\"\n      class=\"stash-checkbox__hint-text tw-ml-8 tw-block tw-whitespace-pre-line tw-text-xs\"\n      :class=\"{ 'tw-text-ice-500': props.disabled }\"\n      data-test=\"stash-checkbox|hint\"\n    >\n      <!-- @slot for displaying hint text -->\n      <slot name=\"hint\">{{ props.hintText }}</slot>\n    </span>\n  </div>\n</template>\n\n<style module>\n  .input:disabled + .label {\n    cursor: auto;\n  }\n\n  .label::before {\n    content: '';\n    border: 1px solid var(--color-ice-500);\n    display: inline-block;\n    vertical-align: top;\n  }\n\n  .label::before,\n  .label::after {\n    border-radius: theme('borderRadius.DEFAULT');\n    height: 20px;\n    left: 0;\n    position: absolute;\n    top: theme('spacing[1.5]');\n    width: 20px;\n  }\n\n  .has-error .label::before,\n  .has-error .input {\n    border-color: var(--color-red-500);\n  }\n\n  .input:indeterminate + .label::after {\n    content: url('data:image/svg+xml; utf8, <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 10.4C6 10.1791 6.17909 10 6.4 10H17.6C17.8209 10 18 10.1791 18 10.4V12.6C18 12.8209 17.8209 13 17.6 13H6.4C6.17909 13 6 12.8209 6 12.6V10.4Z\" fill=\"white\"/></svg>');\n  }\n\n  .input:checked + .label::after {\n    content: url('data:image/svg+xml; utf8, <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17.89 8.281a.723.723 0 0 1 .22.531.723.723 0 0 1-.22.532l-6.718 6.719a.723.723 0 0 1-.531.218.723.723 0 0 1-.532-.218l-3.89-3.891A.723.723 0 0 1 6 11.64c0-.209.073-.386.219-.532l1.062-1.062a.723.723 0 0 1 .532-.219.72.72 0 0 1 .53.219l2.298 2.305 5.125-5.133a.723.723 0 0 1 .53-.219c.21 0 .386.073.532.219l1.063 1.062z\" fill=\"white\"/></svg>');\n    background: var(--color-blue-500);\n    height: 20px;\n    width: 20px;\n    top: theme('spacing[1.5]');\n  }\n\n  .input:checked + .label::before,\n  .input:indeterminate + .label::before {\n    background: var(--color-blue-500);\n    border-color: var(--color-blue-500);\n  }\n\n  .input:disabled + .label::before,\n  .input:disabled + .label::after {\n    background: var(--color-ice-100);\n    border: 1px solid var(--color-ice-500);\n  }\n\n  .input:disabled:is(:checked, :indeterminate) + .label::after {\n    background: var(--color-ice-500);\n  }\n\n  .input:not(:disabled, :checked, :indeterminate) + .label:hover::before {\n    border-color: var(--color-blue-500);\n  }\n</style>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","classes","useCssModule","emit","__emit","logger","inputAttrs","computed","tempAttrs","internalValue","value","internalHasError","checkboxId","uniqueId","checkboxErrorId"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4DE,UAAMA,IAAQC,GAaRC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAOC;AAIb,QAAIT,EAAM,eAAe;AACvB,YAAM,IAAI,MAAM,mFAAmF;AAOrG,QAJI,OAAOA,EAAM,SAAU,aACzBU,EAAO,KAAK,kGAAkG,GAG5GR,EAAM;AACR,YAAM,IAAI,MAAM,gEAAgE;AAGlF,UAAMS,IAAaC,EAAS,MAAM;AAChC,YAAMC,IAAY,EAAE,GAAGX,EAAA;AAEvB,oBAAOW,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IACT,CAAC,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOZ,EAAM;AAAA,MACf;AAAA,MACA,IAAIe,GAAO;AACT,QAAAP,EAAK,kBAAkBO,CAAK;AAAA,MAC9B;AAAA,IAAA,CACD,GAEKC,IAAmBJ,EAAS,MAAM,CAAC,CAACZ,EAAM,aAAaA,EAAM,QAAQ,GACrEiB,IAAaL,EAAS,MAAMZ,EAAM,MAAMkB,EAAS,WAAW,CAAC,GAC7DC,IAAkBP,EAAS,MAAOZ,EAAM,YAAYkB,EAAS,iBAAiB,IAAI,MAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useCssModule, useSlots } from 'vue';\n\n  export interface CheckboxProps {\n    /**\n     * Whether the checkbox is currently checked based on the current value.\n     * Either defined by a boolean, or whether `checked` as an array includes `value`.\n     */\n    checked: boolean | Array<string | number>;\n\n    /**\n     * Whether the checkbox is in an error state (optional). For error styling without error text.\n     *\n     * @deprecated Just pass `error-text` instead.\n     */\n    hasError?: boolean;\n\n    /**\n     * Unique ID for the checkbox, required for accessibility purposes\n     */\n    id?: string;\n\n    /**\n     * Label text to display with checkbox\n     */\n    label?: string;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) and adds error styling (overrides `hasError`).\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * @deprecated use the `checked` prop instead\n     */\n    modelValue?: boolean | Array<string | number>;\n\n    /**\n     * The value of the checkbox.\n     */\n    value?: string | number;\n\n    /**\n     * Whether the checkbox is disabled.\n     */\n    disabled?: boolean;\n  }\n\n  defineOptions({\n    name: 'll-checkbox',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<CheckboxProps>(), {\n    errorId: undefined,\n    errorText: '',\n    hasError: false,\n    hintText: '',\n    id: undefined,\n    label: undefined,\n    modelValue: undefined,\n    value: undefined,\n    disabled: false,\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'update:checked', value: CheckboxProps['checked']): void;\n  }>();\n\n  if (props.modelValue !== undefined) {\n    throw new Error('ll-checkbox: use :checked or v-model:checked instead of :model-value and v-model.');\n  }\n\n  if (typeof props.value === 'boolean') {\n    logger.warn('ll-checkbox: use `checked` to toggle the state; `value` is what will be set if `checked` is true');\n  }\n\n  if (attrs.onChange) {\n    throw new Error('ll-checkbox: use the @update:checked event instead of @change.');\n  }\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs['data-test'];\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const internalValue = computed({\n    get() {\n      return props.checked;\n    },\n    set(value) {\n      emit('update:checked', value);\n    },\n  });\n\n  const internalHasError = computed(() => !!props.errorText || props.hasError);\n  const checkboxId = computed(() => props.id || uniqueId('checkbox-'));\n  const checkboxErrorId = computed(() => (props.errorText ? uniqueId('checkbox-error-') : undefined));\n</script>\n\n<template>\n  <div\n    class=\"stash-checkbox relative m-0\"\n    :class=\"[\n      attrs.class,\n      {\n        'stash-checkbox--checked': !!internalValue,\n        [`stash-checkbox--has-error ${classes['has-error']}`]: internalHasError,\n      },\n    ]\"\n    :data-test=\"attrs['data-test'] || 'stash-checkbox'\"\n  >\n    <input\n      :id=\"checkboxId\"\n      v-model=\"internalValue\"\n      :aria-invalid=\"!!props.errorText\"\n      :aria-errormessage=\"checkboxErrorId\"\n      :disabled=\"props.disabled\"\n      class=\"sr-only lg:m-0\"\n      :class=\"classes.input\"\n      type=\"checkbox\"\n      :value=\"value\"\n      v-bind=\"inputAttrs\"\n    />\n\n    <label\n      data-test=\"stash-checkbox|label\"\n      class=\"stash-checkbox__label relative inline-block min-h-9 cursor-pointer overflow-visible py-1.5 pl-8 align-top text-sm font-normal leading-6\"\n      :class=\"[\n        classes.label,\n        {\n          'text-ice-900': !internalHasError && !props.disabled,\n          'text-red-500': internalHasError,\n          'text-ice-500': props.disabled,\n        },\n      ]\"\n      :for=\"checkboxId\"\n    >\n      <slot>\n        {{ label }}\n      </slot>\n    </label>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"checkboxErrorId\"\n      class=\"stash-checkbox__error-text ml-8 block whitespace-pre-line text-xs text-red-500\"\n      data-test=\"stash-checkbox|error\"\n    >\n      {{ props.errorText }}\n    </span>\n    <span\n      v-else-if=\"props.hintText || slots.hint\"\n      class=\"stash-checkbox__hint-text ml-8 block whitespace-pre-line text-xs\"\n      :class=\"{ 'text-ice-500': props.disabled }\"\n      data-test=\"stash-checkbox|hint\"\n    >\n      <!-- @slot for displaying hint text -->\n      <slot name=\"hint\">{{ props.hintText }}</slot>\n    </span>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .input:disabled + .label {\n      cursor: auto;\n    }\n\n    .label::before {\n      content: '';\n      border: 1px solid var(--color-ice-500);\n      display: inline-block;\n      vertical-align: top;\n    }\n\n    .label::before,\n    .label::after {\n      border-radius: var(--radius-sm);\n      height: 20px;\n      left: 0;\n      position: absolute;\n      top: --spacing(1.5);\n      width: 20px;\n    }\n\n    .has-error .label::before,\n    .has-error .input {\n      border-color: var(--color-red-500);\n    }\n\n    .input:indeterminate + .label::after {\n      content: url('data:image/svg+xml; utf8, <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 10.4C6 10.1791 6.17909 10 6.4 10H17.6C17.8209 10 18 10.1791 18 10.4V12.6C18 12.8209 17.8209 13 17.6 13H6.4C6.17909 13 6 12.8209 6 12.6V10.4Z\" fill=\"white\"/></svg>');\n    }\n\n    .input:checked + .label::after {\n      content: url('data:image/svg+xml; utf8, <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17.89 8.281a.723.723 0 0 1 .22.531.723.723 0 0 1-.22.532l-6.718 6.719a.723.723 0 0 1-.531.218.723.723 0 0 1-.532-.218l-3.89-3.891A.723.723 0 0 1 6 11.64c0-.209.073-.386.219-.532l1.062-1.062a.723.723 0 0 1 .532-.219.72.72 0 0 1 .53.219l2.298 2.305 5.125-5.133a.723.723 0 0 1 .53-.219c.21 0 .386.073.532.219l1.063 1.062z\" fill=\"white\"/></svg>');\n      background: var(--color-blue-500);\n      height: 20px;\n      width: 20px;\n      top: --spacing(1.5);\n    }\n\n    .input:checked + .label::before,\n    .input:indeterminate + .label::before {\n      background: var(--color-blue-500);\n      border-color: var(--color-blue-500);\n    }\n\n    .input:disabled + .label::before,\n    .input:disabled + .label::after {\n      background: var(--color-ice-100);\n      border: 1px solid var(--color-ice-500);\n    }\n\n    .input:disabled:is(:checked, :indeterminate) + .label::after {\n      background: var(--color-ice-500);\n    }\n\n    .input:not(:disabled, :checked, :indeterminate) + .label:hover::before {\n      border-color: var(--color-blue-500);\n    }\n  }\n</style>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","classes","useCssModule","emit","__emit","logger","inputAttrs","computed","tempAttrs","internalValue","value","internalHasError","checkboxId","uniqueId","checkboxErrorId"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4DE,UAAMA,IAAQC,GAYRC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAOC;AAIb,QAAIT,EAAM,eAAe;AACvB,YAAM,IAAI,MAAM,mFAAmF;AAOrG,QAJI,OAAOA,EAAM,SAAU,aACzBU,EAAO,KAAK,kGAAkG,GAG5GR,EAAM;AACR,YAAM,IAAI,MAAM,gEAAgE;AAGlF,UAAMS,IAAaC,EAAS,MAAM;AAChC,YAAMC,IAAY,EAAE,GAAGX,EAAA;AAEvB,oBAAOW,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IACT,CAAC,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOZ,EAAM;AAAA,MACf;AAAA,MACA,IAAIe,GAAO;AACT,QAAAP,EAAK,kBAAkBO,CAAK;AAAA,MAC9B;AAAA,IAAA,CACD,GAEKC,IAAmBJ,EAAS,MAAM,CAAC,CAACZ,EAAM,aAAaA,EAAM,QAAQ,GACrEiB,IAAaL,EAAS,MAAMZ,EAAM,MAAMkB,EAAS,WAAW,CAAC,GAC7DC,IAAkBP,EAAS,MAAOZ,EAAM,YAAYkB,EAAS,iBAAiB,IAAI,MAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Checkbox.vue.d.ts

@@ -75,7 +75,6 @@ export declare interface CheckboxProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CheckboxProps>, {
-checked: boolean;
 errorId: undefined;
 errorText: string;
 hasError: boolean;
@@ -88,7 +87,6 @@ disabled: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:checked": (value: boolean | (string | number)[]) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CheckboxProps>, {
-checked: boolean;
 errorId: undefined;
 errorText: string;
 hasError: boolean;
@@ -109,7 +107,6 @@ errorText: string;
 hintText: string;
 modelValue: boolean | (string | number)[];
 value: string | number;
-checked: boolean | (string | number)[];
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     hint?(_: {}): any;

package/dist/Chip.js

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

package/dist/ConfirmationCodeInput.js

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

package/dist/ConfirmationCodeInput.js.map

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