@leaflink/stash 42.8.1 → 43.0.0

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"\n          tw-text-white\n          tw-font-semibold\n          tw-rounded-full\n          tw-text-[10px]\n          tw-text-center\n          tw-whitespace-nowrap\n          tw-leading-[0.875rem]\n          tw-inline-block\n        \"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  .badge-standard {\n    height: 15px;\n    line-height: 1.05rem;\n    vertical-align: middle;\n  }\n\n  .badge-dot {\n    border: 2px solid theme('colors.ice.100');\n    height: 10px;\n    right: 0;\n    width: 10px;\n  }\n\n  .top-right {\n    top: 0;\n    right: 0;\n    transform: translateX(50%) translateY(-48%);\n  }\n</style>\n"],"names":["classes","useCssModule","computedContent","computed","numericContent","props","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAOQA,IAAUC,KAuEVC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASC,EAAM,SAAmB,EAAE,GACrDC,IAAa,SAASD,EAAM,KAAe,EAAE;AAKnD,aAAID,KAAkBC,EAAM,WAAWC,KAAcD,EAAM,MAClDA,EAAM,UAGRD,IAAiBE,IAAa,GAAGA,CAAU,MAAMF;AAAA,IAAA,CACzD,GAEKG,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBN,EAAS,OAAO;AAAA,MAC1C,KAAKE,EAAM,OAAO,QAAQ,SAAYE,EAAuBF,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYE,EAAuBF,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIK,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACG,GAAOK,MAAa;AACf,QAACR,EAAM,WAIPQ,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"\n          tw-text-white\n          tw-font-semibold\n          tw-rounded-full\n          tw-text-[10px]\n          tw-text-center\n          tw-whitespace-nowrap\n          tw-leading-[0.875rem]\n          tw-inline-block\n        \"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  .badge-standard {\n    height: 15px;\n    line-height: 1.05rem;\n    vertical-align: middle;\n  }\n\n  .badge-dot {\n    border: 2px solid theme('colors.ice.100');\n    height: 10px;\n    right: 0;\n    width: 10px;\n  }\n\n  .top-right {\n    top: 0;\n    right: 0;\n    transform: translateX(50%) translateY(-48%);\n  }\n</style>\n"],"names":["classes","useCssModule","computedContent","computed","numericContent","props","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAOQA,IAAUC,KAuEVC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASC,EAAM,SAAmB,EAAE,GACrDC,IAAa,SAASD,EAAM,KAAe,EAAE;AAKnD,aAAID,KAAkBC,EAAM,WAAWC,KAAcD,EAAM,MAClDA,EAAM,UAGRD,IAAiBE,IAAa,GAAGA,CAAU,MAAMF;AAAA,IAAA,CACzD,GAEKG,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBN,EAAS,OAAO;AAAA,MAC1C,KAAKE,EAAM,OAAO,QAAQ,SAAYE,EAAuBF,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYE,EAAuBF,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIK,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACG,GAAOK,MAAa;AACf,QAACR,EAAM,WAIPQ,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Checkbox.js

@@ -1,6 +1,6 @@
 import { defineComponent as _, useAttrs as g, useSlots as T, computed as a, openBlock as r, createElementBlock as s, normalizeClass as d, unref as c, withDirectives as E, createElementVNode as i, mergeProps as C, vModelCheckbox as V, renderSlot as v, toDisplayString as n, createTextVNode as A, createCommentVNode as B } from "vue";
 import x from "lodash-es/uniqueId";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_0cd31c8f_lang-4ed993c7.js";
+import "./Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js";
 import { _ as I } from "./_plugin-vue_export-helper-dad06003.js";
 const N = ["data-test"], S = ["id", "aria-invalid", "aria-errormessage", "disabled", "value"], D = ["for"], $ = ["id"], q = /* @__PURE__ */ _({
   name: "ll-checkbox",
@@ -55,7 +55,7 @@ const N = ["data-test"], S = ["id", "aria-invalid", "aria-errormessage", "disabl
         "data-test": "stash-checkbox|label",
         class: d(["tw-cursor-pointer tw-inline-block tw-text-sm tw-font-normal tw-leading-6 tw-min-h-9 tw-overflow-visible tw-py-1.5 tw-pl-8 tw-relative tw-align-top", {
           "tw-text-ice-900": !l.value && !e.disabled,
-          "tw-text-red": l.value,
+          "tw-text-red-500": l.value,
           "tw-text-ice-500": e.disabled
         }]),
         for: h.value
@@ -67,7 +67,7 @@ const N = ["data-test"], S = ["id", "aria-invalid", "aria-errormessage", "disabl
       e.errorText ? (r(), s("span", {
         key: 0,
         id: p.value,
-        class: "tw-block tw-text-xs tw-text-red tw-ml-8 tw-whitespace-pre-line",
+        class: "tw-block tw-text-xs tw-text-red-500 tw-ml-8 tw-whitespace-pre-line",
         "data-test": "stash-checkbox|error"
       }, n(e.errorText), 9, $)) : e.hintText || c(f).hint ? (r(), s("span", {
         key: 1,
@@ -80,7 +80,7 @@ const N = ["data-test"], S = ["id", "aria-invalid", "aria-errormessage", "disabl
       ], 2)) : B("", !0)
     ], 10, N));
   }
-}), U = /* @__PURE__ */ I(q, [["__scopeId", "data-v-0cd31c8f"]]);
+}), U = /* @__PURE__ */ I(q, [["__scopeId", "data-v-0d7e7fd0"]]);
 export {
   U 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 uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, 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    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\n  const emit =\n    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    console.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=\"tw-relative tw-m-0 stash-checkbox\"\n    :data-test=\"attrs['data-test'] || 'stash-checkbox'\"\n    :class=\"[{ 'has-error': internalHasError }, attrs.class]\"\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      type=\"checkbox\"\n      :value=\"value\"\n      v-bind=\"inputAttrs\"\n    />\n\n    <label\n      data-test=\"stash-checkbox|label\"\n      class=\"\n        tw-cursor-pointer\n        tw-inline-block\n        tw-text-sm\n        tw-font-normal\n        tw-leading-6\n        tw-min-h-9\n        tw-overflow-visible\n        tw-py-1.5\n        tw-pl-8\n        tw-relative\n        tw-align-top\n      \"\n      :class=\"{\n        'tw-text-ice-900': !internalHasError && !props.disabled,\n        'tw-text-red': internalHasError,\n        'tw-text-ice-500': props.disabled,\n      }\"\n      :for=\"checkboxId\"\n    >\n      <slot>\n        <span>{{ label }}</span>\n      </slot>\n    </label>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"checkboxErrorId\"\n      class=\"tw-block tw-text-xs tw-text-red tw-ml-8 tw-whitespace-pre-line\"\n      data-test=\"stash-checkbox|error\"\n    >\n      {{ props.errorText }}\n    </span>\n    <span\n      v-else-if=\"props.hintText || slots.hint\"\n      class=\"tw-block tw-text-xs tw-ml-8 tw-whitespace-pre-line\"\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 scoped>\n  input:disabled + label {\n    cursor: auto;\n  }\n\n  label::before {\n    content: '';\n    border: 1px solid theme('colors.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: theme('colors.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: theme('colors.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: theme('colors.blue.500');\n    border-color: theme('colors.blue.500');\n  }\n\n  input:disabled + label::before,\n  input:disabled + label::after {\n    background: theme('colors.ice.100');\n    border: 1px solid theme('colors.ice.500');\n  }\n\n  input:disabled:is(:checked, :indeterminate) + label::after {\n    background: theme('colors.ice.500');\n  }\n\n  input:not(:disabled, :checked, :indeterminate) + label:hover::before {\n    border-color: theme('colors.blue.500');\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","props","inputAttrs","computed","tempAttrs","internalValue","value","emit","internalHasError","checkboxId","uniqueId","checkboxErrorId"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAsEQA,IAAQC,KACRC,IAAQC;AAOV,QAAAC,EAAM,eAAe;AACjB,YAAA,IAAI,MAAM,mFAAmF;AAOrG,QAJI,OAAOA,EAAM,SAAU,aACzB,QAAQ,KAAK,kGAAkG,GAG7GJ,EAAM;AACF,YAAA,IAAI,MAAM,gEAAgE;AAG5E,UAAAK,IAAaC,EAAS,MAAM;AAC1B,YAAAC,IAAY,EAAE,GAAGP;AAEvB,oBAAOO,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOF,EAAM;AAAA,MACf;AAAA,MACA,IAAIK,GAAO;AACT,QAAAC,EAAK,kBAAkBD,CAAK;AAAA,MAC9B;AAAA,IAAA,CACD,GAEKE,IAAmBL,EAAS,MAAM,CAAC,CAACF,EAAM,aAAaA,EAAM,QAAQ,GACrEQ,IAAaN,EAAS,MAAMF,EAAM,MAAMS,EAAS,WAAW,CAAC,GAC7DC,IAAkBR,EAAS,MAAOF,EAAM,YAAYS,EAAS,iBAAiB,IAAI,MAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, 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    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\n  const emit =\n    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    console.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=\"tw-relative tw-m-0 stash-checkbox\"\n    :data-test=\"attrs['data-test'] || 'stash-checkbox'\"\n    :class=\"[{ 'has-error': internalHasError }, attrs.class]\"\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      type=\"checkbox\"\n      :value=\"value\"\n      v-bind=\"inputAttrs\"\n    />\n\n    <label\n      data-test=\"stash-checkbox|label\"\n      class=\"\n        tw-cursor-pointer\n        tw-inline-block\n        tw-text-sm\n        tw-font-normal\n        tw-leading-6\n        tw-min-h-9\n        tw-overflow-visible\n        tw-py-1.5\n        tw-pl-8\n        tw-relative\n        tw-align-top\n      \"\n      :class=\"{\n        'tw-text-ice-900': !internalHasError && !props.disabled,\n        'tw-text-red-500': internalHasError,\n        'tw-text-ice-500': props.disabled,\n      }\"\n      :for=\"checkboxId\"\n    >\n      <slot>\n        <span>{{ label }}</span>\n      </slot>\n    </label>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"checkboxErrorId\"\n      class=\"tw-block tw-text-xs tw-text-red-500 tw-ml-8 tw-whitespace-pre-line\"\n      data-test=\"stash-checkbox|error\"\n    >\n      {{ props.errorText }}\n    </span>\n    <span\n      v-else-if=\"props.hintText || slots.hint\"\n      class=\"tw-block tw-text-xs tw-ml-8 tw-whitespace-pre-line\"\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 scoped>\n  input:disabled + label {\n    cursor: auto;\n  }\n\n  label::before {\n    content: '';\n    border: 1px solid theme('colors.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: theme('colors.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: theme('colors.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: theme('colors.blue.500');\n    border-color: theme('colors.blue.500');\n  }\n\n  input:disabled + label::before,\n  input:disabled + label::after {\n    background: theme('colors.ice.100');\n    border: 1px solid theme('colors.ice.500');\n  }\n\n  input:disabled:is(:checked, :indeterminate) + label::after {\n    background: theme('colors.ice.500');\n  }\n\n  input:not(:disabled, :checked, :indeterminate) + label:hover::before {\n    border-color: theme('colors.blue.500');\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","props","inputAttrs","computed","tempAttrs","internalValue","value","emit","internalHasError","checkboxId","uniqueId","checkboxErrorId"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAsEQA,IAAQC,KACRC,IAAQC;AAOV,QAAAC,EAAM,eAAe;AACjB,YAAA,IAAI,MAAM,mFAAmF;AAOrG,QAJI,OAAOA,EAAM,SAAU,aACzB,QAAQ,KAAK,kGAAkG,GAG7GJ,EAAM;AACF,YAAA,IAAI,MAAM,gEAAgE;AAG5E,UAAAK,IAAaC,EAAS,MAAM;AAC1B,YAAAC,IAAY,EAAE,GAAGP;AAEvB,oBAAOO,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOF,EAAM;AAAA,MACf;AAAA,MACA,IAAIK,GAAO;AACT,QAAAC,EAAK,kBAAkBD,CAAK;AAAA,MAC9B;AAAA,IAAA,CACD,GAEKE,IAAmBL,EAAS,MAAM,CAAC,CAACF,EAAM,aAAaA,EAAM,QAAQ,GACrEQ,IAAaN,EAAS,MAAMF,EAAM,MAAMS,EAAS,WAAW,CAAC,GAC7DC,IAAkBR,EAAS,MAAOF,EAAM,YAAYS,EAAS,iBAAiB,IAAI,MAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/{Checkbox.vue_vue_type_style_index_0_scoped_0cd31c8f_lang-4ed993c7.js → Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js}

@@ -1,2 +1,2 @@
 
-//# sourceMappingURL=Checkbox.vue_vue_type_style_index_0_scoped_0cd31c8f_lang-4ed993c7.js.map
+//# sourceMappingURL=Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js.map

package/dist/Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/Chip.js

@@ -1,16 +1,15 @@
-import { defineComponent as c, useCssModule as f, openBlock as i, createElementBlock as d, normalizeClass as a, unref as l, createElementVNode as v, renderSlot as h, withKeys as C, withModifiers as m, createVNode as b, createCommentVNode as w } from "vue";
-import { S as _ } from "./colors-13e95ebf.js";
-import y from "./utils/colorScheme.js";
-import z from "./Icon.js";
+import { defineComponent as h, useCssModule as f, openBlock as a, createElementBlock as i, normalizeClass as d, unref as l, renderSlot as u, withKeys as v, withModifiers as m, createVNode as C, createCommentVNode as b } from "vue";
+import _ from "./utils/colorScheme.js";
+import w from "./Icon.js";
 import { _ as $ } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const x = /* @__PURE__ */ c({
+const y = /* @__PURE__ */ h({
   name: "ll-chip",
   __name: "Chip",
   props: {
-    color: { default: _.Ice },
+    colorScheme: { default: "ice" },
     shade: { default: "light" },
     size: { default: "medium" },
     radius: { default: "standard" },
@@ -20,12 +19,12 @@ const x = /* @__PURE__ */ c({
     shouldOverrideColors: { type: Boolean, default: !1 }
   },
   emits: ["click", "remove"],
-  setup(u, { emit: n }) {
-    const e = u, s = f();
+  setup(c, { emit: n }) {
+    const e = c, s = f();
     function p() {
-      const { computedBgColor: t, computedTextColor: o } = y({
+      const { computedBgColor: t, computedTextColor: o } = _({
         shade: e.shade,
-        color: e.color
+        color: e.colorScheme
       }), r = `tw-text-${e.textColor || o} tw-bg-${e.bgColor || t}`;
       return {
         "tw-rounded-none": e.radius === "none",
@@ -34,47 +33,50 @@ const x = /* @__PURE__ */ c({
         [r]: !e.shouldOverrideColors
       };
     }
-    return (t, o) => (i(), d("span", {
-      class: a(["stash-chip tw-inline-flex tw-items-center tw-relative", [
-        `stash-chip--radius-${t.radius}`,
+    return (t, o) => (a(), i("span", {
+      class: d(["stash-chip tw-inline-flex tw-items-center tw-relative", [
+        `stash-chip--radius-${e.radius}`,
+        `stash-chip--size-${e.size}`,
+        `stash-chip--shade-${e.shade}`,
         l(s).root,
         l(s).removableChip,
-        l(s)[`size-${t.size}`],
+        l(s)[`size-${e.size}`],
         p()
       ]]),
       "data-test": "stash-chip",
       onClick: o[2] || (o[2] = (r) => n("click"))
     }, [
-      v("span", {
-        class: a([{ "tw-mr-6 tw-truncate": t.isRemovable }])
-      }, [
-        h(t.$slots, "default")
-      ], 2),
-      t.isRemovable ? (i(), d("button", {
+      t.isRemovable ? (a(), i("span", {
         key: 0,
+        class: d([{ "tw-mr-6 tw-truncate": e.isRemovable }])
+      }, [
+        u(t.$slots, "default")
+      ], 2)) : u(t.$slots, "default", { key: 1 }),
+      e.isRemovable ? (a(), i("button", {
+        key: 2,
         tabindex: "-1",
-        class: a(["stash-chip__remove-button", ["tw-absolute", l(s)["remove-button"]]]),
+        class: d(["stash-chip__remove-button", ["tw-absolute", l(s)["remove-button"]]]),
         "data-test": "stash-chip|remove-button",
-        onKeypress: o[0] || (o[0] = C(m((r) => n("remove"), ["prevent"]), ["enter"])),
+        onKeypress: o[0] || (o[0] = v(m((r) => n("remove"), ["prevent"]), ["enter"])),
         onMousedown: o[1] || (o[1] = m((r) => n("remove"), ["prevent", "stop"]))
       }, [
-        b(z, {
+        C(w, {
           "data-test": "icon|close",
           name: "close",
           size: "small"
         })
-      ], 34)) : w("", !0)
+      ], 34)) : b("", !0)
     ], 2));
   }
-}), k = "_root_jxnu3_2", S = {
-  root: k,
+}), z = "_root_jxnu3_2", x = {
+  root: z,
   "size-medium": "_size-medium_jxnu3_12",
   "size-small": "_size-small_jxnu3_17",
   "remove-button": "_remove-button_jxnu3_22"
-}, g = {
-  $style: S
-}, K = /* @__PURE__ */ $(x, [["__cssModules", g]]);
+}, k = {
+  $style: x
+}, N = /* @__PURE__ */ $(y, [["__cssModules", k]]);
 export {
-  K as default
+  N 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 { StashColor, StashPrimaryColor, StashPrimaryColors } from '../../../types/colors';\n  import colorScheme 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    color?: StashPrimaryColor;\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?: StashColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashColor;\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  const props = withDefaults(defineProps<ChipProps>(), {\n    size: 'medium',\n    radius: 'standard',\n    color: StashPrimaryColors.Ice,\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n    isRemovable: false,\n    shouldOverrideColors: 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 } = colorScheme({\n      shade: props.shade,\n      color: props.color,\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,\n    };\n  }\n</script>\n\n<template>\n  <span\n    class=\"stash-chip tw-inline-flex tw-items-center tw-relative\"\n    :class=\"[\n      `stash-chip--radius-${radius}`,\n      classes.root,\n      classes.removableChip,\n      classes[`size-${size}`],\n      determineConditionalStyles(),\n    ]\"\n    data-test=\"stash-chip\"\n    @click=\"emit('click')\"\n  >\n    <span :class=\"[{ 'tw-mr-6 tw-truncate': isRemovable }]\">\n      <!-- @slot Chip text -->\n      <slot></slot>\n    </span>\n\n    <button\n      v-if=\"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      @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:hover {\n    background: rgb(0 0 0 / 10%);\n  }\n</style>\n"],"names":["classes","useCssModule","determineConditionalStyles","computedBgColor","computedTextColor","colorScheme","props","colorStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBA+EQA,IAAUC;AAEhB,aAASC,IAA6B;AACpC,YAAM,EAAE,iBAAAC,GAAiB,mBAAAC,EAAkB,IAAIC,EAAY;AAAA,QACzD,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd,GAEKC,IAAc,WAAWD,EAAM,aAAaF,CAAiB,UAAUE,EAAM,WAAWH,CAAe;AAEtG,aAAA;AAAA,QACL,mBAAmBG,EAAM,WAAW;AAAA,QACpC,iBAAiBA,EAAM,WAAW;AAAA,QAClC,mBAAmBA,EAAM,WAAW;AAAA,QACpC,CAACC,CAAW,GAAG,CAACD,EAAM;AAAA,MAAA;AAAA,IAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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  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  });\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,\n    };\n  }\n</script>\n\n<template>\n  <span\n    class=\"stash-chip tw-inline-flex tw-items-center tw-relative\"\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      @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:hover {\n    background: rgb(0 0 0 / 10%);\n  }\n</style>\n"],"names":["classes","useCssModule","determineConditionalStyles","computedBgColor","computedTextColor","colorSchemeUtil","props","colorStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;iBA+EQA,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,CAAiB,UAAUE,EAAM,WAAWH,CAAe;AAEtG,aAAA;AAAA,QACL,mBAAmBG,EAAM,WAAW;AAAA,QACpC,iBAAiBA,EAAM,WAAW;AAAA,QAClC,mBAAmBA,EAAM,WAAW;AAAA,QACpC,CAACC,CAAW,GAAG,CAACD,EAAM;AAAA,MAAA;AAAA,IAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Chip.vue.d.ts

@@ -38,7 +38,7 @@ export declare interface ChipProps {
      * The color for the chip that determines both the text and bg color. Needs to
      * be one of the brand colors in our design system (not a shade).
      */
-    color?: StashPrimaryColor;
+    colorScheme?: StashPrimaryColorGroup;
     /**
      * The shade of the provided color to use for the background color. This effects the inferred
      * text color unless a specific text color is provided. Currently only `light` and `main`
@@ -56,11 +56,11 @@ export declare interface ChipProps {
     /**
      * The background color of the chip. Needs to be one of our design system colors.
      */
-    bgColor?: StashColor;
+    bgColor?: StashCommonColor;
     /**
      * The color of the chip text. Needs to be one of our design system colors.
      */
-    textColor?: StashColor;
+    textColor?: StashCommonColor;
     /**
      * Determines if a close icon is surfaced.
      */
@@ -74,7 +74,7 @@ export declare interface ChipProps {
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ChipProps>, {
     size: string;
     radius: string;
-    color: StashPrimaryColors;
+    colorScheme: string;
     shade: string;
     bgColor: undefined;
     textColor: undefined;
@@ -86,7 +86,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ChipProps>, {
     size: string;
     radius: string;
-    color: StashPrimaryColors;
+    colorScheme: string;
     shade: string;
     bgColor: undefined;
     textColor: undefined;
@@ -96,12 +96,12 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     onClick?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;
 }, {
-    color: "blue" | "red" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow";
     size: "small" | "medium";
     shade: "main" | "light";
+    colorScheme: StashPrimaryColorGroup;
     radius: "standard" | "none" | "pill";
-    bgColor: "blue" | "red" | "ice-700" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow" | "purple-900" | "purple-800" | "purple-700" | "purple-600" | "purple-500" | "purple-400" | "purple-300" | "purple-200" | "purple-100" | "royal-900" | "royal-800" | "royal-700" | "royal-600" | "royal-500" | "royal-400" | "royal-300" | "royal-200" | "royal-100" | "blue-900" | "blue-800" | "blue-700" | "blue-600" | "blue-500" | "blue-400" | "blue-300" | "blue-200" | "blue-100" | "teal-900" | "teal-800" | "teal-700" | "teal-600" | "teal-500" | "teal-400" | "teal-300" | "teal-200" | "teal-100" | "green-900" | "green-800" | "green-700" | "green-600" | "green-500" | "green-400" | "green-300" | "green-200" | "green-100" | "seafoam-900" | "seafoam-800" | "seafoam-700" | "seafoam-600" | "seafoam-500" | "seafoam-400" | "seafoam-300" | "seafoam-200" | "seafoam-100" | "yellow-900" | "yellow-800" | "yellow-700" | "yellow-600" | "yellow-500" | "yellow-400" | "yellow-300" | "yellow-200" | "yellow-100" | "orange-900" | "orange-800" | "orange-700" | "orange-600" | "orange-500" | "orange-400" | "orange-300" | "orange-200" | "orange-100" | "red-900" | "red-800" | "red-700" | "red-600" | "red-500" | "red-400" | "red-300" | "red-200" | "red-100" | "ice-900" | "ice-800" | "ice-600" | "ice-500" | "ice-400" | "ice-300" | "ice-200" | "ice-100" | "white" | "black";
-    textColor: "blue" | "red" | "ice-700" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow" | "purple-900" | "purple-800" | "purple-700" | "purple-600" | "purple-500" | "purple-400" | "purple-300" | "purple-200" | "purple-100" | "royal-900" | "royal-800" | "royal-700" | "royal-600" | "royal-500" | "royal-400" | "royal-300" | "royal-200" | "royal-100" | "blue-900" | "blue-800" | "blue-700" | "blue-600" | "blue-500" | "blue-400" | "blue-300" | "blue-200" | "blue-100" | "teal-900" | "teal-800" | "teal-700" | "teal-600" | "teal-500" | "teal-400" | "teal-300" | "teal-200" | "teal-100" | "green-900" | "green-800" | "green-700" | "green-600" | "green-500" | "green-400" | "green-300" | "green-200" | "green-100" | "seafoam-900" | "seafoam-800" | "seafoam-700" | "seafoam-600" | "seafoam-500" | "seafoam-400" | "seafoam-300" | "seafoam-200" | "seafoam-100" | "yellow-900" | "yellow-800" | "yellow-700" | "yellow-600" | "yellow-500" | "yellow-400" | "yellow-300" | "yellow-200" | "yellow-100" | "orange-900" | "orange-800" | "orange-700" | "orange-600" | "orange-500" | "orange-400" | "orange-300" | "orange-200" | "orange-100" | "red-900" | "red-800" | "red-700" | "red-600" | "red-500" | "red-400" | "red-300" | "red-200" | "red-100" | "ice-900" | "ice-800" | "ice-600" | "ice-500" | "ice-400" | "ice-300" | "ice-200" | "ice-100" | "white" | "black";
+    bgColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
+    textColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
     isRemovable: boolean;
     shouldOverrideColors: boolean;
 }, {}>, {
@@ -109,129 +109,50 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }>;
 export default _default;
 
-declare type StashColor = `${StashColors}`;
+declare type StashCommonColor = `${StashCommonColors}`;
 
-declare enum StashColors {
-    Purple = "purple",
-    Purple900 = "purple-900",
-    Purple800 = "purple-800",
+/**
+ * A limited list of stash brand colors, only including their 100, 500, and 700 shades.
+ */
+declare enum StashCommonColors {
     Purple700 = "purple-700",
-    Purple600 = "purple-600",
     Purple500 = "purple-500",
-    Purple400 = "purple-400",
-    Purple300 = "purple-300",
-    Purple200 = "purple-200",
     Purple100 = "purple-100",
-    Royal = "royal",
-    Royal900 = "royal-900",
-    Royal800 = "royal-800",
     Royal700 = "royal-700",
-    Royal600 = "royal-600",
     Royal500 = "royal-500",
-    Royal400 = "royal-400",
-    Royal300 = "royal-300",
-    Royal200 = "royal-200",
     Royal100 = "royal-100",
-    Blue = "blue",
-    Blue900 = "blue-900",
-    Blue800 = "blue-800",
     Blue700 = "blue-700",
-    Blue600 = "blue-600",
     Blue500 = "blue-500",
-    Blue400 = "blue-400",
-    Blue300 = "blue-300",
-    Blue200 = "blue-200",
     Blue100 = "blue-100",
-    Teal = "teal",
-    Teal900 = "teal-900",
-    Teal800 = "teal-800",
     Teal700 = "teal-700",
-    Teal600 = "teal-600",
     Teal500 = "teal-500",
-    Teal400 = "teal-400",
-    Teal300 = "teal-300",
-    Teal200 = "teal-200",
     Teal100 = "teal-100",
-    Green = "green",
-    Green900 = "green-900",
-    Green800 = "green-800",
     Green700 = "green-700",
-    Green600 = "green-600",
     Green500 = "green-500",
-    Green400 = "green-400",
-    Green300 = "green-300",
-    Green200 = "green-200",
     Green100 = "green-100",
-    Seafoam = "seafoam",
-    Seafoam900 = "seafoam-900",
-    Seafoam800 = "seafoam-800",
     Seafoam700 = "seafoam-700",
-    Seafoam600 = "seafoam-600",
     Seafoam500 = "seafoam-500",
-    Seafoam400 = "seafoam-400",
-    Seafoam300 = "seafoam-300",
-    Seafoam200 = "seafoam-200",
     Seafoam100 = "seafoam-100",
-    Yellow = "yellow",
-    Yellow900 = "yellow-900",
-    Yellow800 = "yellow-800",
     Yellow700 = "yellow-700",
-    Yellow600 = "yellow-600",
     Yellow500 = "yellow-500",
-    Yellow400 = "yellow-400",
-    Yellow300 = "yellow-300",
-    Yellow200 = "yellow-200",
     Yellow100 = "yellow-100",
-    Orange = "orange",
-    Orange900 = "orange-900",
-    Orange800 = "orange-800",
     Orange700 = "orange-700",
-    Orange600 = "orange-600",
     Orange500 = "orange-500",
-    Orange400 = "orange-400",
-    Orange300 = "orange-300",
-    Orange200 = "orange-200",
     Orange100 = "orange-100",
-    Red = "red",
-    Red900 = "red-900",
-    Red800 = "red-800",
     Red700 = "red-700",
-    Red600 = "red-600",
     Red500 = "red-500",
-    Red400 = "red-400",
-    Red300 = "red-300",
-    Red200 = "red-200",
     Red100 = "red-100",
-    Ice = "ice",
-    Ice900 = "ice-900",
-    Ice800 = "ice-800",
     Ice700 = "ice-700",
-    Ice600 = "ice-600",
     Ice500 = "ice-500",
-    Ice400 = "ice-400",
-    Ice300 = "ice-300",
-    Ice200 = "ice-200",
+    Ice200 = "ice-200",// This is the one outlier, but it's used purposefully in a few places
     Ice100 = "ice-100",
     White = "white",
     Black = "black"
 }
 
-declare type StashPrimaryColor = `${StashPrimaryColors}`;
-
 /**
- * A set of utility types that correlate to Stash's design system
+ * The names of the color groups.
  */
-declare enum StashPrimaryColors {
-    Blue = "blue",
-    Green = "green",
-    Ice = "ice",
-    Orange = "orange",
-    Purple = "purple",
-    Red = "red",
-    Royal = "royal",
-    Seafoam = "seafoam",
-    Teal = "teal",
-    Yellow = "yellow"
-}
+declare type StashPrimaryColorGroup = 'blue' | 'green' | 'ice' | 'orange' | 'purple' | 'red' | 'royal' | 'seafoam' | 'teal' | 'yellow';
 
 export { }

package/dist/ConfirmationCodeInput.js

@@ -1,6 +1,6 @@
-import { defineComponent as b, useCssModule as k, ref as m, watch as C, 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 { 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 j = { class: "tw-flex tw-gap-6 tw-mb-3" }, B = ["onUpdate:modelValue", "onPaste", "onKeyup", "onClick"], M = /* @__PURE__ */ b({
+const B = { class: "tw-flex tw-gap-6 tw-mb-3" }, M = ["onUpdate:modelValue", "onPaste", "onKeyup", "onClick"], K = /* @__PURE__ */ k({
   __name: "ConfirmationCodeInput",
   props: {
     digitCount: { default: 6 },
@@ -8,9 +8,9 @@ const j = { class: "tw-flex tw-gap-6 tw-mb-3" }, B = ["onUpdate:modelValue", "on
     successText: { default: void 0 }
   },
   emits: ["update:model-value"],
-  setup(h, { emit: d }) {
-    const a = h, l = k(), s = m([]), n = m();
-    function x(e) {
+  setup(x, { emit: d }) {
+    const a = x, l = C(), s = m([]), n = m();
+    function w(e) {
       e.data && e.target.nextElementSibling ? e.target.nextElementSibling.focus() : e.data == null && e.target.previousElementSibling && e.target.previousElementSibling.focus();
     }
     function g(e, o) {
@@ -23,7 +23,7 @@ const j = { class: "tw-flex tw-gap-6 tw-mb-3" }, B = ["onUpdate:modelValue", "on
         u && (t = r + 1);
       }), n.value[t].focus();
     }
-    function w(e, o) {
+    function h(e, o) {
       if (e.key !== "Backspace" && !new RegExp("^([0-9])$").test(e.key)) {
         e.preventDefault();
         return;
@@ -44,7 +44,7 @@ const j = { class: "tw-flex tw-gap-6 tw-mb-3" }, B = ["onUpdate:modelValue", "on
         return;
       }
     }
-    function y(e) {
+    function b(e) {
       var u;
       const o = (u = e.clipboardData) == null ? void 0 : u.getData("text");
       if (isNaN(Number(o))) {
@@ -56,7 +56,7 @@ const j = { class: "tw-flex tw-gap-6 tw-mb-3" }, B = ["onUpdate:modelValue", "on
         for (let r = 1; r < o.length; r++)
           t && (s.value[r] = o[r], t = t.nextElementSibling);
     }
-    return C(
+    return y(
       () => s,
       (e) => {
         if (e.value.join("") === "")
@@ -74,9 +74,9 @@ const j = { class: "tw-flex tw-gap-6 tw-mb-3" }, B = ["onUpdate:modelValue", "on
       ref: "otpCont",
       class: "stash-confirmation-code-input tw-inline-block",
       "data-test": "stash-confirmation-code-input",
-      onInput: x
+      onInput: w
     }, [
-      E("div", j, [
+      E("div", B, [
         (c(!0), i(I, null, N(a.digitCount, (t, u) => T((c(), i("input", {
           key: t,
           ref_for: !0,
@@ -92,33 +92,33 @@ const j = { class: "tw-flex tw-gap-6 tw-mb-3" }, B = ["onUpdate:modelValue", "on
             { [f(l)["has-success"]]: !!a.successText }
           ]]),
           inputmode: "numeric",
-          onPaste: (r) => t === 1 && y(r),
-          onKeyup: (r) => w(r, u),
+          onPaste: (r) => t === 1 && b(r),
+          onKeyup: (r) => h(r, u),
           onClick: (r) => g(r, u)
-        }, null, 42, B)), [
+        }, null, 42, M)), [
           [D, s.value[t - 1]]
         ])), 128))
       ]),
       a.errorText ? (c(), i("small", {
         key: 0,
-        class: p(["tw-block tw-text-red tw-text-center", f(l).error]),
+        class: p(["tw-block tw-text-red-500 tw-text-center", 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-green tw-text-center", f(l).error]),
+        class: p(["tw-block tw-text-green-500 tw-text-center", f(l).error]),
         "data-test": "field-error"
       }, v(a.successText), 3)) : _("", !0)
     ], 544));
   }
-}), K = "_otpCodeInput_myvhj_2", P = "_error_myvhj_21", U = {
-  otpCodeInput: K,
-  "has-error": "_has-error_myvhj_9",
-  "has-success": "_has-success_myvhj_13",
-  error: P
-}, $ = {
-  $style: U
-}, V = /* @__PURE__ */ S(M, [["__cssModules", $]]);
+}), P = "_otpCodeInput_1wm2s_2", U = "_error_1wm2s_21", $ = {
+  otpCodeInput: P,
+  "has-error": "_has-error_1wm2s_9",
+  "has-success": "_has-success_1wm2s_13",
+  error: U
+}, j = {
+  $style: $
+}, V = /* @__PURE__ */ S(K, [["__cssModules", j]]);
 export {
   V 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 { 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-flex tw-gap-6 tw-mb-3\">\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-p-2 tw-border focus:tw-border-blue-500 tw-text-center tw-text-ice-900 tw-font-medium tw-text-base\"\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-red tw-text-center\"\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-green tw-text-center\"\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: theme(colors.red.DEFAULT);\n  }\n\n  .otpCodeInput.has-success:not(:focus) {\n    border-color: theme(colors.green.DEFAULT);\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,MACF;AAEA,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,MACF;AAEA,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,QACF;AAEI,YAAAT,EAAK,MAAMS,CAAK;AAClB;AAGG,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,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,MACF;AAAA,IACF;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,MACF;AAEA,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,UACF;AACA,UAAAkB,EAAK,sBAAsB,OAAOD,EAAO,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA,QAC1D;AAAA,MACF;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 { 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-flex tw-gap-6 tw-mb-3\">\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-p-2 tw-border focus:tw-border-blue-500 tw-text-center tw-text-ice-900 tw-font-medium tw-text-base\"\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-red-500 tw-text-center\"\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-green-500 tw-text-center\"\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: theme('colors.red.500');\n  }\n\n  .otpCodeInput.has-success:not(:focus) {\n    border-color: theme('colors.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,MACF;AAEA,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,MACF;AAEA,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,QACF;AAEI,YAAAT,EAAK,MAAMS,CAAK;AAClB;AAGG,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,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,MACF;AAAA,IACF;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,MACF;AAEA,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,UACF;AACA,UAAAkB,EAAK,sBAAsB,OAAOD,EAAO,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}