@leaflink/stash 42.8.1 → 43.0.0

package/dist/SelectStatus.js

@@ -1,7 +1,7 @@
-import { defineComponent as k, useAttrs as S, useCssModule as b, computed as n, openBlock as o, createBlock as C, normalizeClass as l, unref as g, withCtx as d, createElementBlock as i, createElementVNode as a, toDisplayString as c, createVNode as u, normalizeStyle as m } from "vue";
-import p from "./Icon.js";
-import O from "./Select.js";
-import { _ as V } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as S, useAttrs as b, useCssModule as g, computed as u, openBlock as o, createBlock as C, normalizeClass as l, unref as O, withCtx as d, createElementBlock as i, createElementVNode as a, toDisplayString as c, createVNode as m, normalizeStyle as p } from "vue";
+import f from "./Icon.js";
+import V from "./Select.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";
@@ -20,7 +20,6 @@ import "./constants.js";
 import "./clickoutside.js";
 import "./MenusPlugin-5e93f0a5.js";
 import "./Chip.js";
-import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
 import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
@@ -29,7 +28,7 @@ const E = { class: "tw-truncate tw-mr-6" }, N = {
   key: 1,
   class: "tw-flex tw-items-center",
   "data-test": "select-status|value"
-}, $ = { class: "tw-truncate tw-ml-1.5 tw-mr-6" }, D = { class: "tw-flex tw-min-w-0" }, I = /* @__PURE__ */ k({
+}, D = { class: "tw-truncate tw-ml-1.5 tw-mr-6" }, I = { class: "tw-flex tw-min-w-0" }, L = /* @__PURE__ */ S({
   name: "ll-select-status",
   __name: "SelectStatus",
   props: {
@@ -44,89 +43,92 @@ const E = { class: "tw-truncate tw-mr-6" }, N = {
     value: { type: [Number, String, Boolean, null], default: null }
   },
   emits: ["update:model-value"],
-  setup(f, { emit: w }) {
-    const t = f, y = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], _ = S(), h = b();
-    if (t.value)
+  setup(w, { emit: y }) {
+    const e = w, _ = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], h = b(), v = g();
+    if (e.value)
       throw new Error("ll-select-status: use :model-value or v-model instead of :value.");
-    if (_.onInput)
+    if (h.onInput)
       throw new Error("ll-select-status: use the @update:model-value event instead of @input");
-    const r = n(() => t.statusOptions.find((s) => s[t.trackBy] === t.modelValue)), v = n(() => {
-      const { color: s = "" } = r.value || {};
-      return y.includes(s);
+    const r = u(() => e.statusOptions.find((t) => t[e.trackBy] === e.modelValue)), x = u(() => {
+      const { color: t = "" } = r.value || {};
+      return _.includes(t);
     });
-    function B(s) {
-      return `tw-bg-${s}`;
+    function B(t) {
+      return t != null && t.includes("-") ? `tw-bg-${t}` : `tw-bg-${t}-500`;
     }
-    function x(s) {
-      w("update:model-value", (s == null ? void 0 : s[t.trackBy]) ?? "");
+    function n(t) {
+      return t != null && t.includes("-") ? `tw-text-${t}` : `tw-text-${t}-500`;
     }
-    return (s, A) => (o(), C(O, {
+    function k(t) {
+      y("update:model-value", (t == null ? void 0 : t[e.trackBy]) ?? "");
+    }
+    return (t, A) => (o(), C(V, {
       ref: "select",
       "hide-search": "",
       single: "",
       class: l([[
-        g(h).select,
+        O(v).select,
         {
-          "stash-select-status--filled": t.secondary,
-          "stash-select-status--filled-dark": t.secondary && v.value
+          "stash-select-status--filled": e.secondary,
+          "stash-select-status--filled-dark": e.secondary && x.value
         }
       ], "stash-select-status"]),
-      disabled: t.disabled,
-      icon: !t.disabled && "caret-down",
-      options: t.statusOptions,
-      placeholder: t.placeholder,
-      "track-by": t.trackBy,
+      disabled: e.disabled,
+      icon: !e.disabled && "caret-down",
+      options: e.statusOptions,
+      placeholder: e.placeholder,
+      "track-by": e.trackBy,
       "model-value": r.value,
       "data-test": "stash-select-status",
-      "onUpdate:modelValue": x
+      "onUpdate:modelValue": k
     }, {
-      selected: d(({ option: e }) => [
-        t.secondary ? (o(), i("div", {
+      selected: d(({ option: s }) => [
+        e.secondary ? (o(), i("div", {
           key: 0,
-          class: l(["stash-select-status--selected tw-absolute tw-flex tw-items-center tw-pl-3 tw-rounded tw-h-full tw-inset-0 tw-w-full", [B(e.color)]]),
+          class: l(["stash-select-status--selected tw-absolute tw-flex tw-items-center tw-pl-3 tw-rounded tw-h-full tw-inset-0 tw-w-full", [B(s.color)]]),
           "data-test": "select-status|value"
         }, [
-          a("span", E, c(e[t.displayBy]), 1)
+          a("span", E, c(s[e.displayBy]), 1)
         ], 2)) : (o(), i("div", N, [
-          u(p, {
+          m(f, {
             "data-test": "select-status|value-icon",
-            name: e.icon || "circle-status",
+            name: s.icon || "circle-status",
             class: l([
-              { [`tw-text-${e.color}`]: e.color },
-              { "tw-text-ice-700": !e.color && !e.hexCode }
+              { [n(s.color)]: s.color },
+              { "tw-text-ice-700": !s.color && !s.hexCode }
             ]),
-            style: m({ color: e.hexCode })
+            style: p({ color: s.hexCode })
           }, null, 8, ["name", "class", "style"]),
-          a("span", $, c(e[t.displayBy]), 1)
+          a("span", D, c(s[e.displayBy]), 1)
         ]))
       ]),
-      option: d(({ option: e }) => [
-        a("div", D, [
-          u(p, {
+      option: d(({ option: s }) => [
+        a("div", I, [
+          m(f, {
             "data-test": "svg|status-color",
-            name: e.icon || "circle-status",
+            name: s.icon || "circle-status",
             class: l([[
-              { [`tw-text-${e.color}`]: e.color },
-              { "tw-text-ice-700": !e.color && !e.hexCode }
+              { [n(s.color)]: s.color },
+              { "tw-text-ice-700": !s.color && !s.hexCode }
             ], "!tw-shrink-0"]),
-            style: m({ color: e.hexCode })
+            style: p({ color: s.hexCode })
           }, null, 8, ["name", "class", "style"]),
           a("span", {
             "data-test": "span|option-text",
-            class: l(["tw-ml-1.5", !t.noTruncate && "tw-truncate"])
-          }, c(e[t.displayBy]), 3)
+            class: l(["tw-ml-1.5", !e.noTruncate && "tw-truncate"])
+          }, c(s[e.displayBy]), 3)
         ])
       ]),
       _: 1
     }, 8, ["class", "disabled", "icon", "options", "placeholder", "track-by", "model-value"]));
   }
-}), L = "_select_1wypi_25", M = {
-  select: L,
+}), M = "_select_1wypi_25", T = {
+  select: M,
   "stash-select__chips": "_stash-select__chips_1wypi_30"
 }, z = {
-  $style: M
-}, ut = /* @__PURE__ */ V(I, [["__cssModules", z]]);
+  $style: T
+}, it = /* @__PURE__ */ $(L, [["__cssModules", z]]);
 export {
-  ut as default
+  it as default
 };
 //# sourceMappingURL=SelectStatus.js.map

package/dist/SelectStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string;\n    name: string;\n    color?: string;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the model value changes\n       */\n      (e: 'update:model-value', value: unknown): void;\n    }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: string): string {\n    return `tw-bg-${color}`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"\n          stash-select-status--selected\n          tw-absolute tw-flex tw-items-center tw-pl-3 tw-rounded tw-h-full tw-inset-0 tw-w-full\n        \"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-truncate tw-mr-6\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [`tw-text-${option.color}`]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-truncate tw-ml-1.5 tw-mr-6\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"tw-flex tw-min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [`tw-text-${option.color}`]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!tw-shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  :global(.stash-select-status--filled .stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  :global(.stash-select-status--filled\n      .stash-select--active\n      .stash-select__content:focus-within\n      .stash-select__border-selector) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  :global(.stash-select-status--filled .stash-select-status--selected),\n  :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.white');\n  }\n\n  :global(.stash-select-status--filled-dark .stash-select-status--selected),\n  :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.ice.900');\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .select :deep(.stash-select__chips) {\n    margin: 0;\n  }\n\n  .select :global(.stash-select__options) {\n    margin: 0;\n    padding: 0;\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","valueOption","computed","status","hasDarkFill","color","getBgColor","onSelect","value","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2DQA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC;AAYhB,QAAIC,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAWnF,UAAAK,IAAcC,EAAS,MACpBF,EAAM,cAAc,KAAK,CAACG,MAAWA,EAAOH,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKI,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAN,EAAiB,SAASU,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAAuB;AACzC,aAAO,SAASA,CAAK;AAAA,IACvB;AAEA,aAASE,EAASC,GAAkC;AAClD,MAAAC,EAAK,uBAAsBD,KAAA,gBAAAA,EAAQR,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the model value changes\n       */\n      (e: 'update:model-value', value: unknown): void;\n    }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"\n          stash-select-status--selected\n          tw-absolute tw-flex tw-items-center tw-pl-3 tw-rounded tw-h-full tw-inset-0 tw-w-full\n        \"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-truncate tw-mr-6\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-truncate tw-ml-1.5 tw-mr-6\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"tw-flex tw-min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!tw-shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  :global(.stash-select-status--filled .stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  :global(.stash-select-status--filled\n      .stash-select--active\n      .stash-select__content:focus-within\n      .stash-select__border-selector) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  :global(.stash-select-status--filled .stash-select-status--selected),\n  :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.white');\n  }\n\n  :global(.stash-select-status--filled-dark .stash-select-status--selected),\n  :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.ice.900');\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .select :deep(.stash-select__chips) {\n    margin: 0;\n  }\n\n  .select :global(.stash-select__options) {\n    margin: 0;\n    padding: 0;\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8DQA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC;AAYhB,QAAIC,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAWnF,UAAAK,IAAcC,EAAS,MACpBF,EAAM,cAAc,KAAK,CAACG,MAAWA,EAAOH,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKI,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAN,EAAiB,SAASU,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAEvD,aAAAA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,CAAK,KAAK,SAASA,CAAK;AAAA,IACjE;AAMA,aAASE,EAAaF,GAA4C;AAEzD,aAAAA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,CAAK,KAAK,WAAWA,CAAK;AAAA,IACrE;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAC,EAAK,uBAAsBD,KAAA,gBAAAA,EAAQT,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/SelectStatus.vue.d.ts

@@ -58,10 +58,15 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
 }, {}>;
 export default _default;
 
+declare type IconName = typeof iconNames[number];
+
+declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "cart-active", "cart-plus", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-items", "loading-big", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
+
 export declare type SelectStatusOption = {
     id: number | string;
     name: string;
-    color?: string;
+    color?: StashPrimaryColorGroup | StashCommonColor;
+    icon?: IconName;
 };
 
 export declare interface SelectStatusProps {
@@ -104,4 +109,50 @@ export declare interface SelectStatusProps {
     value?: number | string | boolean | null;
 }
 
+declare type StashCommonColor = `${StashCommonColors}`;
+
+/**
+ * A limited list of stash brand colors, only including their 100, 500, and 700 shades.
+ */
+declare enum StashCommonColors {
+    Purple700 = "purple-700",
+    Purple500 = "purple-500",
+    Purple100 = "purple-100",
+    Royal700 = "royal-700",
+    Royal500 = "royal-500",
+    Royal100 = "royal-100",
+    Blue700 = "blue-700",
+    Blue500 = "blue-500",
+    Blue100 = "blue-100",
+    Teal700 = "teal-700",
+    Teal500 = "teal-500",
+    Teal100 = "teal-100",
+    Green700 = "green-700",
+    Green500 = "green-500",
+    Green100 = "green-100",
+    Seafoam700 = "seafoam-700",
+    Seafoam500 = "seafoam-500",
+    Seafoam100 = "seafoam-100",
+    Yellow700 = "yellow-700",
+    Yellow500 = "yellow-500",
+    Yellow100 = "yellow-100",
+    Orange700 = "orange-700",
+    Orange500 = "orange-500",
+    Orange100 = "orange-100",
+    Red700 = "red-700",
+    Red500 = "red-500",
+    Red100 = "red-100",
+    Ice700 = "ice-700",
+    Ice500 = "ice-500",
+    Ice200 = "ice-200",// This is the one outlier, but it's used purposefully in a few places
+    Ice100 = "ice-100",
+    White = "white",
+    Black = "black"
+}
+
+/**
+ * The names of the color groups.
+ */
+declare type StashPrimaryColorGroup = 'blue' | 'green' | 'ice' | 'orange' | 'purple' | 'red' | 'royal' | 'seafoam' | 'teal' | 'yellow';
+
 export { }

package/dist/Step.js

@@ -1,4 +1,4 @@
-import { defineComponent as f, useSlots as v, useCssModule as h, inject as x, computed as _, onBeforeMount as y, openBlock as a, createElementBlock as r, normalizeClass as c, unref as t, createElementVNode as i, createBlock as B, toDisplayString as m, createCommentVNode as u, renderSlot as k } from "vue";
+import { defineComponent as f, useSlots as v, useCssModule as y, inject as h, computed as _, onBeforeMount as x, openBlock as a, createElementBlock as d, normalizeClass as o, unref as t, createElementVNode as i, createBlock as B, toDisplayString as m, createCommentVNode as u, renderSlot as k } from "vue";
 import b from "./Icon.js";
 import { S as g } from "./keys-7ecef029.js";
 import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
@@ -20,19 +20,19 @@ const C = {
     disabled: { type: Boolean, default: !1 }
   },
   setup(w) {
-    const e = w, n = v(), l = h(), s = x(g), o = _(() => (s == null ? void 0 : s.orientation) === "horizontal"), d = _(() => (s == null ? void 0 : s.theme) === "light");
-    return y(() => {
+    const e = w, r = v(), l = y(), s = h(g), c = _(() => (s == null ? void 0 : s.orientation) === "horizontal"), n = _(() => (s == null ? void 0 : s.theme) === "light");
+    return x(() => {
       s && s.registerStep(e.nested);
-    }), (p, D) => (a(), r("li", {
-      class: c(["stash-step tw-flex tw-relative tw-w-full", [
+    }), (p, D) => (a(), d("li", {
+      class: o(["stash-step tw-flex tw-relative tw-w-full", [
         t(l).step,
-        { [t(l)["nested-step--active"]]: e.nested && e.active, "last:tw-w-auto": o.value }
+        { [t(l)["nested-step--active"]]: e.nested && e.active, "last:tw-w-auto": c.value }
       ]]),
       "data-test": "stash-step"
     }, [
-      e.nested ? u("", !0) : (a(), r("div", C, [
+      e.nested ? u("", !0) : (a(), d("div", C, [
         i("div", {
-          class: c([
+          class: o([
             t(l).circle,
             {
               [t(l)["circle--todo"]]: !e.error && !e.active && !e.completed,
@@ -46,44 +46,44 @@ const C = {
             key: 0,
             name: e.completed ? "circle-check" : "circle-info",
             size: "dense"
-          }, null, 8, ["name"])) : (a(), r("span", S, m(e.step), 1))
+          }, null, 8, ["name"])) : (a(), d("span", S, m(e.step), 1))
         ], 2),
         i("div", {
-          class: c(["tw-my-1.5 tw-bg-ice tw-w-[1px]", [
+          class: o(["tw-my-1.5 tw-bg-ice-500 tw-w-[1px]", [
             t(l).line,
-            { [t(l)["line--expanded"]]: e.completed || e.active, "tw-hidden": o.value }
+            { [t(l)["line--expanded"]]: e.completed || e.active, "tw-hidden": c.value }
           ]])
         }, null, 2)
       ])),
       i("div", {
-        class: c(["tw-flex", [
+        class: o(["tw-flex", [
           {
-            "tw-flex-row tw-items-center tw-w-full": o.value,
-            "tw-flex-col": !o.value
+            "tw-flex-row tw-items-center tw-w-full": c.value,
+            "tw-flex-col": !c.value
           }
         ]])
       }, [
         i("div", {
-          class: c(["tw-whitespace-nowrap", [
+          class: o(["tw-whitespace-nowrap", [
             t(l).title,
             {
               "tw-cursor-pointer": !e.active && (e.completed || e.error),
               "tw-cursor-not-allowed": e.disabled,
-              "tw-text-ice-900": d.value,
+              "tw-text-ice-900": n.value,
               "!tw-font-semibold": e.active,
-              "tw-text-white": !e.disabled && !d.value
+              "tw-text-white": !e.disabled && !n.value
             }
           ]])
         }, m(e.text), 3),
-        o.value ? (a(), r("div", {
+        c.value ? (a(), d("div", {
           key: 0,
-          class: c(["tw-border-t tw-mx-1.5 group-last:tw-hidden", [t(l).line, { [t(l)["line--expanded"]]: e.completed || e.active }]])
+          class: o(["tw-border-t tw-mx-1.5 group-last:tw-hidden", [t(l).line, { [t(l)["line--expanded"]]: e.completed || e.active }]])
         }, null, 2)) : u("", !0),
         i("div", {
-          class: c({ "tw-pb-9": !p.nested && !t(n).default, "tw-hidden": o.value })
+          class: o({ "tw-pb-9": !p.nested && !t(r).default, "tw-hidden": c.value })
         }, [
           i("ul", {
-            class: c([t(l).nested, { "tw-hidden": !t(n).default }])
+            class: o([t(l).nested, { "tw-hidden": !t(r).default }])
           }, [
             k(p.$slots, "default")
           ], 2)
@@ -91,17 +91,17 @@ const C = {
       ], 2)
     ], 2));
   }
-}), M = "_step_1t7l4_2", N = "_title_1t7l4_11", I = "_line_1t7l4_22", T = "_circle_1t7l4_35", P = "_nested_1t7l4_18", V = {
+}), M = "_step_s5dyo_2", N = "_title_s5dyo_11", I = "_line_s5dyo_22", T = "_circle_s5dyo_35", P = "_nested_s5dyo_18", V = {
   step: M,
   title: N,
-  "nested-step--active": "_nested-step--active_1t7l4_18",
+  "nested-step--active": "_nested-step--active_s5dyo_18",
   line: I,
-  "line--expanded": "_line--expanded_1t7l4_31",
+  "line--expanded": "_line--expanded_s5dyo_31",
   circle: T,
-  "circle--todo": "_circle--todo_1t7l4_46",
-  "circle--active": "_circle--active_1t7l4_52",
-  "circle--completed": "_circle--completed_1t7l4_58",
-  "circle--error": "_circle--error_1t7l4_65",
+  "circle--todo": "_circle--todo_s5dyo_46",
+  "circle--active": "_circle--active_s5dyo_52",
+  "circle--completed": "_circle--completed_s5dyo_58",
+  "circle--error": "_circle--error_s5dyo_65",
   nested: P
 }, $ = {
   $style: V

package/dist/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n  export interface StepProps {\n    /**\n     * Indicates if the step is currently active.\n     * This takes precedence over `completed` and `error`\n     */\n    active?: boolean;\n    /**\n     * Indicates if the step is completed\n     */\n    completed?: boolean;\n    /**\n     * Indicates if the step has an error\n     * This takes precedence over `completed`\n     */\n    error?: boolean;\n    /**\n     * The text to display in the step\n     */\n    text: string;\n    /**\n     * Indicates if the step is nested\n     */\n    nested?: boolean;\n    /**\n     * The text to display in the step circle\n     */\n    step?: string;\n    /**\n     * Indicates if the step is disabled\n     */\n    disabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<StepProps>(), {\n    active: false,\n    completed: false,\n    error: false,\n    nested: false,\n    step: undefined,\n    disabled: false,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n  const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n  const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n  // OnBeforeMount ensures that steps and substeps are registered in the correct order\n  onBeforeMount(() => {\n    if (injectedStepper) {\n      injectedStepper.registerStep(props.nested);\n    }\n  });\n</script>\n\n<template>\n  <li\n    class=\"stash-step tw-flex tw-relative tw-w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      { [classes['nested-step--active']]: props.nested && props.active, 'last:tw-w-auto': isHorizontal },\n    ]\"\n  >\n    <div v-if=\"!props.nested\" class=\"tw-flex tw-flex-col tw-items-center tw-mr-3\">\n      <div\n        :class=\"[\n          classes.circle,\n          {\n            [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n            [classes['circle--error']]: props.error && !props.active,\n            [classes['circle--completed']]: props.completed && !props.active,\n            [classes['circle--active']]: props.active,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error) && !props.active\"\n          :name=\"props.completed ? 'circle-check' : 'circle-info'\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"tw-my-1.5 tw-bg-ice tw-w-[1px]\"\n        :class=\"[\n          classes.line,\n          { [classes['line--expanded']]: props.completed || props.active, 'tw-hidden': isHorizontal },\n        ]\"\n      />\n    </div>\n    <div\n      class=\"tw-flex\"\n      :class=\"[\n        {\n          'tw-flex-row tw-items-center tw-w-full': isHorizontal,\n          'tw-flex-col': !isHorizontal,\n        },\n      ]\"\n    >\n      <div\n        class=\"tw-whitespace-nowrap\"\n        :class=\"[\n          classes.title,\n          {\n            'tw-cursor-pointer': !props.active && (props.completed || props.error),\n            'tw-cursor-not-allowed': props.disabled,\n            'tw-text-ice-900': isLightThemed,\n            '!tw-font-semibold': props.active,\n            'tw-text-white': !props.disabled && !isLightThemed,\n          },\n        ]\"\n      >\n        {{ props.text }}\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        class=\"tw-border-t tw-mx-1.5 group-last:tw-hidden\"\n        :class=\"[classes.line, { [classes['line--expanded']]: props.completed || props.active }]\"\n      />\n      <div :class=\"{ 'tw-pb-9': !nested && !slots.default, 'tw-hidden': isHorizontal }\">\n        <ul :class=\"[classes.nested, { 'tw-hidden': !slots.default }]\">\n          <!-- @slot Default slot to compose multiple nested steps -->\n          <slot></slot>\n        </ul>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .step::before {\n    content: '●';\n    position: absolute;\n    color: theme('colors.white');\n    left: -28px;\n    opacity: 0;\n    transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n  }\n\n  .title {\n    font-weight: theme('fontWeight.medium');\n    font-size: 1rem;\n    margin-top: 1px;\n    user-select: none;\n  }\n\n  .nested-step--active::before {\n    opacity: 1;\n  }\n\n  .line {\n    flex-grow: 0;\n    transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n  }\n\n  .step:last-child .line {\n    display: none;\n  }\n\n  .line--expanded {\n    flex-grow: 1;\n  }\n\n  .circle {\n    width: theme('spacing.6');\n    height: theme('spacing.6');\n    line-height: theme('spacing.6');\n    border-radius: theme('borderRadius.full');\n    display: grid;\n    place-items: center;\n    font-weight: theme('fontWeight.medium');\n    transition: background-color 500ms, color 500ms;\n  }\n\n  .circle--todo {\n    background-color: rgb(255 255 255 / 50%);\n    color: #4d4a69;\n    border: 1px solid #747293;\n  }\n\n  .circle--active {\n    background-color: theme('colors.blue.DEFAULT');\n    color: theme('colors.white');\n    border: 1px solid transparent;\n  }\n\n  .circle--completed {\n    background-color: theme('colors.white');\n    border: 1px solid theme('colors.ice.DEFAULT');\n    color: theme('colors.green.DEFAULT');\n    cursor: pointer;\n  }\n\n  .circle--error {\n    background-color: theme('colors.white');\n    border: 1px solid theme('colors.ice.DEFAULT');\n    color: theme('colors.red.DEFAULT');\n    cursor: pointer;\n  }\n\n  .nested {\n    padding: calc(theme('spacing.3') + theme('spacing[1.5]')) 0;\n  }\n\n  .nested li + li {\n    margin-top: theme('spacing.3');\n  }\n\n  .nested .title {\n    font-weight: theme('fontWeight.normal');\n    font-size: 0.9rem;\n  }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","onBeforeMount","props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAQC,KACRC,IAAUC,KAEVC,IAAkBC,EAAOC,CAAqB,GAE9CC,IAAeC,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,iBAAgB,YAAY,GAE3EK,IAAgBD,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,WAAU,OAAO;AAGvE,WAAAM,EAAc,MAAM;AAClB,MAAIN,KACcA,EAAA,aAAaO,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n  export interface StepProps {\n    /**\n     * Indicates if the step is currently active.\n     * This takes precedence over `completed` and `error`\n     */\n    active?: boolean;\n    /**\n     * Indicates if the step is completed\n     */\n    completed?: boolean;\n    /**\n     * Indicates if the step has an error\n     * This takes precedence over `completed`\n     */\n    error?: boolean;\n    /**\n     * The text to display in the step\n     */\n    text: string;\n    /**\n     * Indicates if the step is nested\n     */\n    nested?: boolean;\n    /**\n     * The text to display in the step circle\n     */\n    step?: string;\n    /**\n     * Indicates if the step is disabled\n     */\n    disabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<StepProps>(), {\n    active: false,\n    completed: false,\n    error: false,\n    nested: false,\n    step: undefined,\n    disabled: false,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n  const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n  const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n  // OnBeforeMount ensures that steps and substeps are registered in the correct order\n  onBeforeMount(() => {\n    if (injectedStepper) {\n      injectedStepper.registerStep(props.nested);\n    }\n  });\n</script>\n\n<template>\n  <li\n    class=\"stash-step tw-flex tw-relative tw-w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      { [classes['nested-step--active']]: props.nested && props.active, 'last:tw-w-auto': isHorizontal },\n    ]\"\n  >\n    <div v-if=\"!props.nested\" class=\"tw-flex tw-flex-col tw-items-center tw-mr-3\">\n      <div\n        :class=\"[\n          classes.circle,\n          {\n            [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n            [classes['circle--error']]: props.error && !props.active,\n            [classes['circle--completed']]: props.completed && !props.active,\n            [classes['circle--active']]: props.active,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error) && !props.active\"\n          :name=\"props.completed ? 'circle-check' : 'circle-info'\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"tw-my-1.5 tw-bg-ice-500 tw-w-[1px]\"\n        :class=\"[\n          classes.line,\n          { [classes['line--expanded']]: props.completed || props.active, 'tw-hidden': isHorizontal },\n        ]\"\n      />\n    </div>\n    <div\n      class=\"tw-flex\"\n      :class=\"[\n        {\n          'tw-flex-row tw-items-center tw-w-full': isHorizontal,\n          'tw-flex-col': !isHorizontal,\n        },\n      ]\"\n    >\n      <div\n        class=\"tw-whitespace-nowrap\"\n        :class=\"[\n          classes.title,\n          {\n            'tw-cursor-pointer': !props.active && (props.completed || props.error),\n            'tw-cursor-not-allowed': props.disabled,\n            'tw-text-ice-900': isLightThemed,\n            '!tw-font-semibold': props.active,\n            'tw-text-white': !props.disabled && !isLightThemed,\n          },\n        ]\"\n      >\n        {{ props.text }}\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        class=\"tw-border-t tw-mx-1.5 group-last:tw-hidden\"\n        :class=\"[classes.line, { [classes['line--expanded']]: props.completed || props.active }]\"\n      />\n      <div :class=\"{ 'tw-pb-9': !nested && !slots.default, 'tw-hidden': isHorizontal }\">\n        <ul :class=\"[classes.nested, { 'tw-hidden': !slots.default }]\">\n          <!-- @slot Default slot to compose multiple nested steps -->\n          <slot></slot>\n        </ul>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .step::before {\n    content: '●';\n    position: absolute;\n    color: theme('colors.white');\n    left: -28px;\n    opacity: 0;\n    transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n  }\n\n  .title {\n    font-weight: theme('fontWeight.medium');\n    font-size: 1rem;\n    margin-top: 1px;\n    user-select: none;\n  }\n\n  .nested-step--active::before {\n    opacity: 1;\n  }\n\n  .line {\n    flex-grow: 0;\n    transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n  }\n\n  .step:last-child .line {\n    display: none;\n  }\n\n  .line--expanded {\n    flex-grow: 1;\n  }\n\n  .circle {\n    width: theme('spacing.6');\n    height: theme('spacing.6');\n    line-height: theme('spacing.6');\n    border-radius: theme('borderRadius.full');\n    display: grid;\n    place-items: center;\n    font-weight: theme('fontWeight.medium');\n    transition: background-color 500ms, color 500ms;\n  }\n\n  .circle--todo {\n    background-color: rgb(255 255 255 / 50%);\n    color: #4d4a69;\n    border: 1px solid #747293;\n  }\n\n  .circle--active {\n    background-color: theme('colors.blue.500');\n    color: theme('colors.white');\n    border: 1px solid transparent;\n  }\n\n  .circle--completed {\n    background-color: theme('colors.white');\n    border: 1px solid theme('colors.ice.500');\n    color: theme('colors.green.500');\n    cursor: pointer;\n  }\n\n  .circle--error {\n    background-color: theme('colors.white');\n    border: 1px solid theme('colors.ice.500');\n    color: theme('colors.red.500');\n    cursor: pointer;\n  }\n\n  .nested {\n    padding: calc(theme('spacing.3') + theme('spacing[1.5]')) 0;\n  }\n\n  .nested li + li {\n    margin-top: theme('spacing.3');\n  }\n\n  .nested .title {\n    font-weight: theme('fontWeight.normal');\n    font-size: 0.9rem;\n  }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","onBeforeMount","props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAQC,KACRC,IAAUC,KAEVC,IAAkBC,EAAOC,CAAqB,GAE9CC,IAAeC,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,iBAAgB,YAAY,GAE3EK,IAAgBD,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,WAAU,OAAO;AAGvE,WAAAM,EAAc,MAAM;AAClB,MAAIN,KACcA,EAAA,aAAaO,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tab.js

@@ -1,6 +1,6 @@
 import { defineComponent as x, inject as T, computed as n, onMounted as k, nextTick as y, toRefs as u, openBlock as c, createElementBlock as _, normalizeClass as g, unref as a, withKeys as C, createBlock as P, resolveDynamicComponent as B, mergeProps as E, withCtx as p, createElementVNode as $, createVNode as N, renderSlot as A } from "vue";
 import I from "./Badge.js";
-import { T as j } from "./Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js";
+import { T as j } from "./Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/debounce";
 import "lodash-es/uniqueId";

package/dist/Table.js

@@ -3,7 +3,7 @@ import "lodash-es/cloneDeep";
 import { M as v } from "./Module.keys-2cc7d830.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
 import { D as g } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import N from "./EmptyState.js";
 import D from "./Loading.js";
@@ -16,7 +16,7 @@ import "lodash-es/get";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
-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 "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
 import "./Checkbox.js";
 import "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";

package/dist/TableCell.js

@@ -2,13 +2,13 @@ import { defineComponent as p, useCssModule as d, inject as u, openBlock as r, c
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
 import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "lodash-es/get";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
 import { T as y, s as C } from "./Table.keys-1ebe4ecb.js";
-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 "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
 import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
 const T = {

package/dist/TableHeaderCell.js

@@ -1,14 +1,14 @@
 import { defineComponent as k, useCssModule as T, inject as p, computed as m, openBlock as r, createElementBlock as _, normalizeClass as s, unref as t, createElementVNode as x, renderSlot as E, createBlock as w, createCommentVNode as l } from "vue";
 import "lodash-es/cloneDeep";
 import f from "./Icon.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
 import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "lodash-es/get";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
 import { T as q } from "./Table.keys-1ebe4ecb.js";
 import "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 "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
 import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
 import "./index-79ce320f.js";

package/dist/TableHeaderRow.js

@@ -4,7 +4,7 @@ import C from "./Checkbox.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
 import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
@@ -13,7 +13,7 @@ import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
 import m from "./TableHeaderCell.js";
 import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-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 "./Icon.js";
 import "./index-79ce320f.js";
 const B = {

package/dist/TableRow.js

@@ -6,7 +6,7 @@ import { _ as O } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591
 import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
 import "lodash-es/cloneDeep";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
 import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
@@ -14,7 +14,7 @@ import T from "./TableCell.js";
 import { T as G, a as H } from "./Table.keys-1ebe4ecb.js";
 import { _ as K } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-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 "./Button.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
 import "./Icon.js";

package/dist/Tabs.js

@@ -1,5 +1,5 @@
-import { _ as o } from "./Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js";
-import { T as A, a as B } from "./Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js";
+import { _ as o } from "./Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js";
+import { T as A, a as B } from "./Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js";
 import "vue";
 import "lodash-es/debounce";
 import "lodash-es/uniqueId";

package/dist/{Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js → Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js}

@@ -60,7 +60,7 @@ const oe = {
         e.className = "";
         const o = e.firstChild;
         if (o.className = "", e.setAttribute("aria-selected", "false"), e.addEventListener("click", () => {
-          e.getAttribute("aria-selected") && e.classList.add("tw-bg-blue", "tw-text-white");
+          e.getAttribute("aria-selected") && e.classList.add("tw-bg-blue-500", "tw-text-white");
         }), r.value.has(e.getAttribute("id")))
           e.classList.remove("tw-hidden"), e.classList.add(
             "tw-rounded",
@@ -68,7 +68,7 @@ const oe = {
             "tw-text-sm",
             "tw-cursor-pointer",
             "tw-p-1.5",
-            "hover:tw-bg-blue",
+            "hover:tw-bg-blue-500",
             "hover:tw-text-white"
           );
         else {
@@ -151,4 +151,4 @@ export {
   ve as _,
   N as a
 };
-//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js.map
+//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js.map

package/dist/Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js","sources":["../src/components/Tabs/keys.ts","../src/components/Tabs/models.ts","../src/components/Tabs/Tabs.vue"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TabsInjection } from './models';\n\nexport const TABS_INJECTION: Injection<TabsInjection> = Object.freeze({\n  key: Symbol('TABS_INJECTION_KEY'),\n});\n","import { ComputedRef } from 'vue';\n\nexport enum TabVariant {\n  Line = 'line',\n  Enclosed = 'enclosed',\n}\n\nexport type TabVariants = `${TabVariant}`;\n\nexport interface TabsInjection {\n  activeTab: ComputedRef<string>;\n  variant: ComputedRef<TabVariants>;\n  setActiveTab: (newTabValue: string) => void;\n}\n","<script lang=\"ts\">\n  import { TabVariant, TabVariants } from './models';\n\n  export * from './keys';\n  export * from './models';\n\n  export interface TabsProps {\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * Tabs variant\n     */\n    variant?: TabVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, Ref, ref } from 'vue';\n\n  import { DEBOUNCE } from '../../constants';\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABS_INJECTION } from './keys';\n\n  const emit =\n    defineEmits<{\n      (e: 'update:activeTab', newTabValue: TabsProps['activeTab']): void;\n    }>();\n\n  const props = withDefaults(defineProps<TabsProps>(), {\n    variant: TabVariant.Line,\n  });\n\n  const tabListEl = ref();\n  const moreDropdownMenuEl = ref();\n  const observer: Ref<IntersectionObserver | undefined> = ref(undefined);\n  const hasIntersectionObserver = 'IntersectionObserver' in window;\n  const overflowIds = ref<Set<string>>(new Set());\n  const moreDropdownWidth = ref(0);\n  const moreDropdownEl = ref<InstanceType<typeof Dropdown>>();\n  const moreMenuId = uniqueId('more-dropdown-menu-');\n  const isMoreMenuOpen = ref(false);\n\n  const currentActiveTab = computed({\n    get() {\n      return props.activeTab;\n    },\n    set(nv: TabsProps['activeTab']) {\n      emit('update:activeTab', nv);\n    },\n  });\n\n  function setActiveTab(newTabValue: TabsProps['activeTab']) {\n    currentActiveTab.value = newTabValue;\n  }\n\n  provide(TABS_INJECTION.key, {\n    activeTab: computed(() => currentActiveTab.value),\n    variant: computed(() => props.variant),\n    setActiveTab,\n  });\n\n  function initObserve() {\n    if (!hasIntersectionObserver) {\n      return;\n    }\n\n    if (!tabListEl.value) {\n      return;\n    }\n\n    const tabs = Array.from(tabListEl.value?.children as HTMLLIElement[]);\n    const options = {\n      root: tabListEl.value,\n      rootMargin: '0px',\n      threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n    };\n\n    observer.value = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        const dataId = entry.target.getAttribute('id') as string;\n        /**\n         * Check for partial intersection.\n         * Zooming out can result in ratio of approx 0.984\n         * Anything higher will result in nav items disappearing\n         */\n        if (entry.intersectionRatio > 0.94) {\n          // show tab, hide in dropdown\n          if (overflowIds.value.has(dataId)) {\n            overflowIds.value.delete(dataId);\n          }\n        } else {\n          // hide tab, show in dropdown\n          if (dataId && !overflowIds.value.has(dataId)) {\n            overflowIds.value.add(dataId);\n          }\n        }\n      });\n    }, options);\n\n    tabs.forEach((element) => {\n      observer.value?.observe(element);\n      if (overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-invisible');\n      } else {\n        element.classList.remove('tw-invisible');\n      }\n    });\n\n    moreDropdownWidth.value = moreDropdownEl.value?.$el?.getBoundingClientRect().width;\n\n    if (!moreDropdownMenuEl.value) {\n      return;\n    }\n\n    const dropdownList = Array.from(moreDropdownMenuEl.value.children as HTMLLIElement[]);\n    dropdownList.forEach((element) => {\n      element.className = '';\n      const el = element.firstChild as Element;\n      el.className = '';\n      element.setAttribute('aria-selected', 'false');\n\n      element.addEventListener('click', () => {\n        if (element.getAttribute('aria-selected')) {\n          element.classList.add('tw-bg-blue-500', 'tw-text-white');\n        }\n      });\n\n      if (!overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-hidden');\n        const el = element.firstChild as Element;\n        el.className = '';\n      } else {\n        element.classList.remove('tw-hidden');\n        element.classList.add(\n          'tw-rounded',\n          'dropdown-link',\n          'tw-text-sm',\n          'tw-cursor-pointer',\n          'tw-p-1.5',\n          'hover:tw-bg-blue-500',\n          'hover:tw-text-white',\n        );\n      }\n\n      element.removeEventListener('click', () => {});\n    });\n  }\n\n  const debouncedInitObserve = debounce(initObserve, DEBOUNCE.FAST, { leading: true });\n\n  function destroyObserver() {\n    if (observer.value) {\n      observer.value.disconnect();\n      observer.value = undefined;\n    }\n  }\n\n  onMounted(() => {\n    initObserve();\n  });\n\n  onUpdated(() => {\n    destroyObserver();\n    debouncedInitObserve();\n  });\n\n  onDeactivated(() => {\n    destroyObserver();\n  });\n\n  onBeforeUnmount(() => {\n    destroyObserver();\n  });\n\n  function onMoreClick(toggleMoreDropdown) {\n    toggleMoreDropdown();\n    isMoreMenuOpen.value = !isMoreMenuOpen.value;\n  }\n</script>\n\n<template>\n  <div class=\"root stash-tabs tw-relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <ul\n      ref=\"tabListEl\"\n      :style=\"{\n        width: `calc(100% - ${moreDropdownWidth}px)`,\n      }\"\n      class=\"stash-tabs-list tw-flex tw-items-end tw-overflow-hidden\"\n      :class=\"{\n        'stash-tabs-list--line': variant === 'line',\n        'stash-tabs-list--enclosed': variant === 'enclosed',\n        'tw-gap-6': variant === 'line',\n      }\"\n    >\n      <slot></slot>\n\n      <Dropdown v-if=\"overflowIds.size\" ref=\"moreDropdownEl\" class=\"!tw-absolute tw-right-0 tw-top-0\">\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"menu\"\n            :aria-controls=\"moreMenuId\"\n            :aria-expanded=\"isMoreMenuOpen\"\n            class=\"\n              tw-font-medium\n              tw-text-sm\n              tw-border-solid\n              tw-py-1.5\n              tw-flex\n              tw-items-center\n              tw-justify-center\n              tw-cursor-pointer\n              tw-px-6\n              tw-text-blue-500\n              hover:tw-text-blue-700\n            \"\n            :class=\"{ 'tw-border-t-4 tw-border-transparent': props.variant === 'enclosed' }\"\n            type=\"button\"\n            @click=\"onMoreClick(toggle)\"\n          >\n            {{ t('ll.more') }}\n            <Icon name=\"caret-down\" />\n          </button>\n        </template>\n        <template #default>\n          <ul\n            :id=\"moreMenuId\"\n            ref=\"moreDropdownMenuEl\"\n            class=\"dropdown-list tw-px-1.5 tw-pb-1.5 tw-space-y-1.5\"\n            role=\"menu\"\n          >\n            <slot></slot>\n          </ul>\n        </template>\n      </Dropdown>\n    </ul>\n  </div>\n</template>\n"],"names":["TABS_INJECTION","TabVariant","tabListEl","ref","moreDropdownMenuEl","observer","hasIntersectionObserver","overflowIds","moreDropdownWidth","moreDropdownEl","moreMenuId","uniqueId","isMoreMenuOpen","currentActiveTab","computed","props","nv","emit","setActiveTab","newTabValue","provide","initObserve","tabs","_a","options","v","i","entries","entry","dataId","element","_c","_b","el","debouncedInitObserve","debounce","DEBOUNCE","destroyObserver","onMounted","onUpdated","onDeactivated","onBeforeUnmount","onMoreClick","toggleMoreDropdown"],"mappings":";;;;;;;AAGa,MAAAA,KAA2C,OAAO,OAAO;AAAA,EACpE,KAAK,OAAO,oBAAoB;AAClC,CAAC;ACHW,IAAAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YAFDA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;iBCqCJC,IAAYC,KACZC,IAAqBD,KACrBE,IAAkDF,EAAI,MAAS,GAC/DG,IAA0B,0BAA0B,QACpDC,IAAcJ,EAAqB,oBAAA,IAAK,CAAA,GACxCK,IAAoBL,EAAI,CAAC,GACzBM,IAAiBN,KACjBO,IAAaC,EAAS,qBAAqB,GAC3CC,IAAiBT,EAAI,EAAK,GAE1BU,IAAmBC,EAAS;AAAA,MAChC,MAAM;AACJ,eAAOC,EAAM;AAAA,MACf;AAAA,MACA,IAAIC,GAA4B;AAC9B,QAAAC,EAAK,oBAAoBD,CAAE;AAAA,MAC7B;AAAA,IAAA,CACD;AAED,aAASE,EAAaC,GAAqC;AACzD,MAAAN,EAAiB,QAAQM;AAAA,IAC3B;AAEA,IAAAC,EAAQpB,GAAe,KAAK;AAAA,MAC1B,WAAWc,EAAS,MAAMD,EAAiB,KAAK;AAAA,MAChD,SAASC,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,cAAAG;AAAA,IAAA,CACD;AAED,aAASG,IAAc;;AAKjB,UAJA,CAACf,KAID,CAACJ,EAAU;AACb;AAGF,YAAMoB,IAAO,MAAM,MAAKC,IAAArB,EAAU,UAAV,gBAAAqB,EAAiB,QAA2B,GAC9DC,IAAU;AAAA,QACd,MAAMtB,EAAU;AAAA,QAChB,YAAY;AAAA,QACZ,WAAW,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,EAAE,IAAI,CAACuB,GAAGC,OAAOA,IAAI,KAAK,GAAG;AAAA,MAAA;AAoChE,UAjCJrB,EAAS,QAAQ,IAAI,qBAAqB,CAACsB,MAAY;AAC7C,QAAAA,EAAA,QAAQ,CAACC,MAAU;AACzB,gBAAMC,IAASD,EAAM,OAAO,aAAa,IAAI;AAMzC,UAAAA,EAAM,oBAAoB,OAExBrB,EAAY,MAAM,IAAIsB,CAAM,KAClBtB,EAAA,MAAM,OAAOsB,CAAM,IAI7BA,KAAU,CAACtB,EAAY,MAAM,IAAIsB,CAAM,KAC7BtB,EAAA,MAAM,IAAIsB,CAAM;AAAA,QAEhC,CACD;AAAA,SACAL,CAAO,GAELF,EAAA,QAAQ,CAACQ,MAAY;;AACf,SAAAP,IAAAlB,EAAA,UAAA,QAAAkB,EAAO,QAAQO,IACpBvB,EAAY,MAAM,IAAIuB,EAAQ,aAAa,IAAI,CAAW,IACpDA,EAAA,UAAU,IAAI,cAAc,IAE5BA,EAAA,UAAU,OAAO,cAAc;AAAA,MACzC,CACD,GAEDtB,EAAkB,SAAQuB,KAAAC,IAAAvB,EAAe,UAAf,gBAAAuB,EAAsB,QAAtB,gBAAAD,EAA2B,wBAAwB,OAEzE,CAAC3B,EAAmB;AACtB;AAIW,MADQ,MAAM,KAAKA,EAAmB,MAAM,QAA2B,EACvE,QAAQ,CAAC0B,MAAY;AAChC,QAAAA,EAAQ,YAAY;AACpB,cAAMG,IAAKH,EAAQ;AAUf,YATJG,EAAG,YAAY,IACPH,EAAA,aAAa,iBAAiB,OAAO,GAErCA,EAAA,iBAAiB,SAAS,MAAM;AAClC,UAAAA,EAAQ,aAAa,eAAe,KAC9BA,EAAA,UAAU,IAAI,kBAAkB,eAAe;AAAA,QACzD,CACD,GAEIvB,EAAY,MAAM,IAAIuB,EAAQ,aAAa,IAAI,CAAW;AAKrD,UAAAA,EAAA,UAAU,OAAO,WAAW,GACpCA,EAAQ,UAAU;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,aAb8D;AACxD,UAAAA,EAAA,UAAU,IAAI,WAAW;AACjC,gBAAMG,IAAKH,EAAQ;AACnBG,UAAAA,EAAG,YAAY;AAAA,QAAA;AAcT,QAAAH,EAAA,oBAAoB,SAAS,MAAM;AAAA,QAAA,CAAE;AAAA,MAAA,CAC9C;AAAA,IACH;AAEM,UAAAI,IAAuBC,EAASd,GAAae,EAAS,MAAM,EAAE,SAAS,IAAM;AAEnF,aAASC,IAAkB;AACzB,MAAIhC,EAAS,UACXA,EAAS,MAAM,cACfA,EAAS,QAAQ;AAAA,IAErB;AAEA,IAAAiC,EAAU,MAAM;AACF,MAAAjB;IAAA,CACb,GAEDkB,EAAU,MAAM;AACE,MAAAF,KACKH;IAAA,CACtB,GAEDM,EAAc,MAAM;AACF,MAAAH;IAAA,CACjB,GAEDI,EAAgB,MAAM;AACJ,MAAAJ;IAAA,CACjB;AAED,aAASK,EAAYC,GAAoB;AACpB,MAAAA,KACJ/B,EAAA,QAAQ,CAACA,EAAe;AAAA,IACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Textarea.js

@@ -103,7 +103,7 @@ const L = ["id", "value"], N = /* @__PURE__ */ R({
     ]), 1040, ["id", "class"]));
   }
 });
-const X = /* @__PURE__ */ F(N, [["__scopeId", "data-v-41bcfee5"]]);
+const X = /* @__PURE__ */ F(N, [["__scopeId", "data-v-cb24d278"]]);
 export {
   X as default
 };