@leaflink/stash 49.5.0 → 50.0.0

package/dist/Stepper.js

@@ -1,15 +1,11 @@
-import { defineComponent as I, ref as g, computed as r, watch as o, watchEffect as y, provide as N, nextTick as E, openBlock as i, createElementBlock as z, createElementVNode as B, normalizeClass as p, renderSlot as R, createBlock as u, unref as d, withCtx as v, createVNode as m, createCommentVNode as f } from "vue";
-import T from "./useMediaQuery.js";
-import A from "./useStepper.js";
-import h from "./Button.js";
-import w from "./Icon.js";
-import { S as V } from "./keys-7ecef029.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
-import "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/uniqueId";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const L = { class: "tw-relative" }, G = /* @__PURE__ */ I({
+import { defineComponent as I, ref as N, computed as i, watch as o, watchEffect as g, provide as y, nextTick as E, openBlock as n, createElementBlock as R, createElementVNode as T, normalizeClass as p, renderSlot as z, createBlock as d, unref as v, withCtx as f, createVNode as m, createCommentVNode as h } from "vue";
+import A from "./useMediaQuery.js";
+import B from "./useStepper.js";
+import w from "./Button.js";
+import x from "./Icon.js";
+import { S as L } from "./keys-C8Zfr_By.js";
+var V = /* @__PURE__ */ ((r) => (r.VERTICAL = "vertical", r.HORIZONTAL = "horizontal", r))(V || {});
+const P = { class: "tw-relative" }, Y = /* @__PURE__ */ I({
   __name: "Stepper",
   props: {
     step: { default: -1 },
@@ -20,15 +16,15 @@ const L = { class: "tw-relative" }, G = /* @__PURE__ */ I({
     theme: { default: "dark" }
   },
   emits: ["update:step", "update:substep"],
-  setup(x, { expose: _, emit: S }) {
-    const t = x, n = S, l = g(), e = A({
+  setup(r, { expose: S, emit: b }) {
+    const t = r, l = b, c = N(), e = B({
       linear: t.linear,
       activeStep: t.step,
       activeSubstep: t.substep,
-      ref: l
-    }), b = T("screen and (min-width: 961px)"), a = r(
-      () => t.orientation === "horizontal" && (!b.value || t.useResponsiveNav)
-    ), k = r(() => e.activeStepIndex.value <= 0), C = r(
+      ref: c
+    }), _ = A("screen and (min-width: 961px)"), a = i(
+      () => t.orientation === "horizontal" && (!_.value || t.useResponsiveNav)
+    ), k = i(() => e.activeStepIndex.value <= 0), C = i(
       () => !e.isStepCompleted(e.activeStepIndex.value) || e.activeStepIndex.value === e.steps.value.length - 1
     );
     o(
@@ -40,37 +36,37 @@ const L = { class: "tw-relative" }, G = /* @__PURE__ */ I({
     ), o(
       () => e.activeStepIndex.value,
       (s) => {
-        n("update:step", s), c();
+        l("update:step", s), u();
       }
     ), o(
       () => e.activeSubstepIndex.value,
-      (s) => n("update:substep", s)
-    ), y(() => {
-      a.value && c();
-    }), N(V, {
+      (s) => l("update:substep", s)
+    ), g(() => {
+      a.value && u();
+    }), y(L, {
       registerStep: e.registerStep,
       orientation: t.orientation,
       stepCount: e.stepCount,
       theme: t.theme,
       showResponsiveNav: a
-    }), _({
+    }), S({
       back: e.back,
       next: e.next,
       goTo: e.goTo,
       isStepCompleted: e.isStepCompleted,
       isStepActive: e.isStepActive
     });
-    async function c() {
+    async function u() {
       if (!a.value)
         return;
       await E();
       const s = e.activeStepElement.value;
       s && s.scrollIntoView({ behavior: "instant", inline: "start", block: "nearest" });
     }
-    return (s, P) => (i(), z("div", L, [
-      B("ul", {
+    return (s, D) => (n(), R("div", P, [
+      T("ul", {
         ref_key: "stepperListRef",
-        ref: l,
+        ref: c,
         class: p(["stash-stepper tw-flex", {
           "tw-flex-col": t.orientation === "vertical",
           "stash-stepper--vertical": t.orientation === "vertical",
@@ -79,44 +75,45 @@ const L = { class: "tw-relative" }, G = /* @__PURE__ */ I({
         }]),
         "data-test": "stash-stepper"
       }, [
-        R(s.$slots, "default")
+        z(s.$slots, "default")
       ], 2),
-      a.value ? (i(), u(h, {
+      a.value ? (n(), d(w, {
         key: 0,
         class: p(["stash-stepper__arrow stash-stepper__arrow--prev", t.theme === "light" ? "tw-text-blue-500" : "tw-text-white"]),
         "data-test": "stash-stepper|prev-arrow",
         disabled: k.value,
         icon: "",
-        onClick: d(e).back
+        onClick: v(e).back
       }, {
-        default: v(() => [
-          m(w, {
+        default: f(() => [
+          m(x, {
             name: "chevron-left",
             size: "dense"
           })
         ]),
         _: 1
-      }, 8, ["class", "disabled", "onClick"])) : f("", !0),
-      a.value ? (i(), u(h, {
+      }, 8, ["class", "disabled", "onClick"])) : h("", !0),
+      a.value ? (n(), d(w, {
         key: 1,
         class: p(["stash-stepper__arrow stash-stepper__arrow--next", t.theme === "light" ? "tw-text-blue-500" : "tw-text-white"]),
         "data-test": "stash-stepper|next-arrow",
         disabled: C.value,
         icon: "",
-        onClick: d(e).next
+        onClick: v(e).next
       }, {
-        default: v(() => [
-          m(w, {
+        default: f(() => [
+          m(x, {
             name: "chevron-right",
             size: "dense"
           })
         ]),
         _: 1
-      }, 8, ["class", "disabled", "onClick"])) : f("", !0)
+      }, 8, ["class", "disabled", "onClick"])) : h("", !0)
     ]));
   }
 });
 export {
-  G as default
+  V as StepperOrientationEnum,
+  Y as default
 };
 //# sourceMappingURL=Stepper.js.map

package/dist/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { StepperOrientation, StepperTheme } from './Stepper.types';\n  export * from './Stepper.types';\n\n  export interface StepperProps {\n    /**\n     * The current step index\n     */\n    step?: number;\n    /**\n     * The current substep index\n     */\n    substep?: number;\n    /**\n     * A linear stepper prevents navigation to steps that are ahead of the completed ones\n     */\n    linear?: boolean;\n    /**\n     * Determines whether the stepper is horizontal or vertical\n     */\n    orientation?: StepperOrientation;\n    /**\n     * Force responsive view on horizontal orientation\n     */\n    useResponsiveNav?: boolean;\n    /**\n     * Determines the theme of the stepper\n     */\n    theme?: StepperTheme;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, nextTick, provide, ref, watch, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import useStepper from '../../composables/useStepper/useStepper';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from './keys';\n\n  const props = withDefaults(defineProps<StepperProps>(), {\n    step: -1,\n    substep: -1,\n    linear: false,\n    orientation: 'vertical',\n    theme: 'dark',\n    useResponsiveNav: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the step changes\n     */\n    (e: 'update:step', step: number): void;\n    /**\n     * Emitted when the substep changes\n     */\n    (e: 'update:substep', substep: number): void;\n  }>();\n\n  const stepperListRef = ref();\n  const stepper = useStepper({\n    linear: props.linear,\n    activeStep: props.step,\n    activeSubstep: props.substep,\n    ref: stepperListRef,\n  });\n\n  const isLargeScreen = useMediaQuery('screen and (min-width: 961px)');\n  const showResponsiveNav = computed(\n    () => props.orientation === 'horizontal' && (!isLargeScreen.value || props.useResponsiveNav),\n  );\n  const isPrevArrowDisabled = computed(() => stepper.activeStepIndex.value <= 0);\n  const isNextArrowDisabled = computed(\n    () =>\n      !stepper.isStepCompleted(stepper.activeStepIndex.value) ||\n      stepper.activeStepIndex.value === stepper.steps.value.length - 1,\n  );\n\n  watch(\n    () => props.step,\n    (value) => (stepper.activeStepIndex.value = value),\n  );\n\n  watch(\n    () => props.substep,\n    (value) => (stepper.activeSubstepIndex.value = value),\n  );\n\n  watch(\n    () => stepper.activeStepIndex.value,\n    (value) => {\n      emit('update:step', value);\n      scrollToStep();\n    },\n  );\n\n  watch(\n    () => stepper.activeSubstepIndex.value,\n    (value) => emit('update:substep', value),\n  );\n\n  /**\n   * Watches for media query changes to determine if the mobile horizontal stepper is active.\n   * This is done to ensure the mobile stepper remains in sync with any step changes at the desktop view.\n   */\n  watchEffect(() => {\n    if (showResponsiveNav.value) {\n      scrollToStep();\n    }\n  });\n\n  provide(STEPPER_INJECTION_KEY, {\n    registerStep: stepper.registerStep,\n    orientation: props.orientation,\n    stepCount: stepper.stepCount,\n    theme: props.theme,\n    showResponsiveNav,\n  });\n\n  defineExpose({\n    back: stepper.back,\n    next: stepper.next,\n    goTo: stepper.goTo,\n    isStepCompleted: stepper.isStepCompleted,\n    isStepActive: stepper.isStepActive,\n  });\n\n  /**\n   * Scrolls to the active step when the horizontal stepper is active.\n   * This limited to top-level steps only.\n   */\n  async function scrollToStep() {\n    if (!showResponsiveNav.value) {\n      return;\n    }\n\n    // allows the DOM to update before scrolling to the active step.\n    await nextTick();\n\n    const step = stepper.activeStepElement.value;\n\n    if (step) {\n      step.scrollIntoView({ behavior: 'instant', inline: 'start', block: 'nearest' });\n    }\n  }\n</script>\n\n<template>\n  <div class=\"tw-relative\">\n    <ul\n      ref=\"stepperListRef\"\n      class=\"stash-stepper tw-flex\"\n      :class=\"{\n        'tw-flex-col': props.orientation === 'vertical',\n        'stash-stepper--vertical': props.orientation === 'vertical',\n        'stash-stepper--horizontal': props.orientation === 'horizontal',\n        'tw-mx-9 tw-snap-x tw-snap-mandatory tw-overflow-x-hidden': showResponsiveNav,\n      }\"\n      data-test=\"stash-stepper\"\n    >\n      <!-- @slot Default slot to compose multiple steps -->\n      <slot></slot>\n    </ul>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--prev\"\n      :class=\"props.theme === 'light' ? 'tw-text-blue-500' : 'tw-text-white'\"\n      data-test=\"stash-stepper|prev-arrow\"\n      :disabled=\"isPrevArrowDisabled\"\n      icon\n      @click=\"stepper.back\"\n    >\n      <Icon name=\"chevron-left\" size=\"dense\" />\n    </Button>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--next\"\n      :class=\"props.theme === 'light' ? 'tw-text-blue-500' : 'tw-text-white'\"\n      data-test=\"stash-stepper|next-arrow\"\n      :disabled=\"isNextArrowDisabled\"\n      icon\n      @click=\"stepper.next\"\n    >\n      <Icon name=\"chevron-right\" size=\"dense\" />\n    </Button>\n  </div>\n</template>\n\n<style>\n  .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n    @apply tw-hidden;\n  }\n\n  .stash-stepper__arrow {\n    @apply tw-absolute\n      tw-top-0\n      tw-flex\n      tw-h-6\n      tw-w-6\n      tw-min-w-auto\n      tw-items-center\n      tw-justify-center\n      tw-rounded-full\n      tw-border\n      tw-border-solid\n      tw-border-ice-500\n      tw-text-center\n      disabled:tw-text-ice-500 disabled:tw-opacity-50;\n  }\n\n  .stash-stepper__arrow--prev {\n    @apply tw-left-0;\n  }\n\n  .stash-stepper__arrow--next {\n    @apply tw-right-0;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","stepperListRef","ref","stepper","useStepper","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyCE,UAAMA,IAAQC,GASRC,IAAOC,GAWPC,IAAiBC,KACjBC,IAAUC,EAAW;AAAA,MACzB,QAAQP,EAAM;AAAA,MACd,YAAYA,EAAM;AAAA,MAClB,eAAeA,EAAM;AAAA,MACrB,KAAKI;AAAA,IAAA,CACN,GAEKI,IAAgBC,EAAc,+BAA+B,GAC7DC,IAAoBC;AAAA,MACxB,MAAMX,EAAM,gBAAgB,iBAAiB,CAACQ,EAAc,SAASR,EAAM;AAAA,IAAA,GAEvEY,IAAsBD,EAAS,MAAML,EAAQ,gBAAgB,SAAS,CAAC,GACvEO,IAAsBF;AAAA,MAC1B,MACE,CAACL,EAAQ,gBAAgBA,EAAQ,gBAAgB,KAAK,KACtDA,EAAQ,gBAAgB,UAAUA,EAAQ,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnE,IAAAQ;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,gBAAgB,QAAQS;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,mBAAmB,QAAQS;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMR,EAAQ,gBAAgB;AAAA,MAC9B,CAACS,MAAU;AACT,QAAAb,EAAK,eAAea,CAAK,GACZC;MACf;AAAA,IAAA,GAGFF;AAAA,MACE,MAAMR,EAAQ,mBAAmB;AAAA,MACjC,CAACS,MAAUb,EAAK,kBAAkBa,CAAK;AAAA,IAAA,GAOzCE,EAAY,MAAM;AAChB,MAAIP,EAAkB,SACPM;IACf,CACD,GAEDE,EAAQC,GAAuB;AAAA,MAC7B,cAAcb,EAAQ;AAAA,MACtB,aAAaN,EAAM;AAAA,MACnB,WAAWM,EAAQ;AAAA,MACnB,OAAON,EAAM;AAAA,MACb,mBAAAU;AAAA,IAAA,CACD,GAEYU,EAAA;AAAA,MACX,MAAMd,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;AAMD,mBAAeU,IAAe;AACxB,UAAA,CAACN,EAAkB;AACrB;AAIF,YAAMW,EAAS;AAET,YAAAC,IAAOhB,EAAQ,kBAAkB;AAEvC,MAAIgB,KACGA,EAAA,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.types.ts","../src/components/Stepper/Stepper.vue"],"sourcesContent":["import type { Ref } from 'vue';\n\nimport Stepper from './Stepper.vue';\n\n/**\n * Helper type for the template ref (the \"ref\" attribute) on a Stepper instance\n * @see: https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs\n */\nexport type StepperRef = Ref<InstanceType<typeof Stepper> | null>;\n\nexport enum StepperOrientationEnum {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\nexport type StepperOrientation = `${StepperOrientationEnum}`;\n\nexport type StepperTheme = 'dark' | 'light';\n","<script lang=\"ts\">\n  import { StepperOrientation, StepperTheme } from './Stepper.types';\n  export * from './Stepper.types';\n\n  export interface StepperProps {\n    /**\n     * The current step index\n     */\n    step?: number;\n    /**\n     * The current substep index\n     */\n    substep?: number;\n    /**\n     * A linear stepper prevents navigation to steps that are ahead of the completed ones\n     */\n    linear?: boolean;\n    /**\n     * Determines whether the stepper is horizontal or vertical\n     */\n    orientation?: StepperOrientation;\n    /**\n     * Force responsive view on horizontal orientation\n     */\n    useResponsiveNav?: boolean;\n    /**\n     * Determines the theme of the stepper\n     */\n    theme?: StepperTheme;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, nextTick, provide, ref, watch, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import useStepper from '../../composables/useStepper/useStepper';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from './keys';\n\n  const props = withDefaults(defineProps<StepperProps>(), {\n    step: -1,\n    substep: -1,\n    linear: false,\n    orientation: 'vertical',\n    theme: 'dark',\n    useResponsiveNav: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the step changes\n     */\n    (e: 'update:step', step: number): void;\n    /**\n     * Emitted when the substep changes\n     */\n    (e: 'update:substep', substep: number): void;\n  }>();\n\n  const stepperListRef = ref();\n  const stepper = useStepper({\n    linear: props.linear,\n    activeStep: props.step,\n    activeSubstep: props.substep,\n    ref: stepperListRef,\n  });\n\n  const isLargeScreen = useMediaQuery('screen and (min-width: 961px)');\n  const showResponsiveNav = computed(\n    () => props.orientation === 'horizontal' && (!isLargeScreen.value || props.useResponsiveNav),\n  );\n  const isPrevArrowDisabled = computed(() => stepper.activeStepIndex.value <= 0);\n  const isNextArrowDisabled = computed(\n    () =>\n      !stepper.isStepCompleted(stepper.activeStepIndex.value) ||\n      stepper.activeStepIndex.value === stepper.steps.value.length - 1,\n  );\n\n  watch(\n    () => props.step,\n    (value) => (stepper.activeStepIndex.value = value),\n  );\n\n  watch(\n    () => props.substep,\n    (value) => (stepper.activeSubstepIndex.value = value),\n  );\n\n  watch(\n    () => stepper.activeStepIndex.value,\n    (value) => {\n      emit('update:step', value);\n      scrollToStep();\n    },\n  );\n\n  watch(\n    () => stepper.activeSubstepIndex.value,\n    (value) => emit('update:substep', value),\n  );\n\n  /**\n   * Watches for media query changes to determine if the mobile horizontal stepper is active.\n   * This is done to ensure the mobile stepper remains in sync with any step changes at the desktop view.\n   */\n  watchEffect(() => {\n    if (showResponsiveNav.value) {\n      scrollToStep();\n    }\n  });\n\n  provide(STEPPER_INJECTION_KEY, {\n    registerStep: stepper.registerStep,\n    orientation: props.orientation,\n    stepCount: stepper.stepCount,\n    theme: props.theme,\n    showResponsiveNav,\n  });\n\n  defineExpose({\n    back: stepper.back,\n    next: stepper.next,\n    goTo: stepper.goTo,\n    isStepCompleted: stepper.isStepCompleted,\n    isStepActive: stepper.isStepActive,\n  });\n\n  /**\n   * Scrolls to the active step when the horizontal stepper is active.\n   * This limited to top-level steps only.\n   */\n  async function scrollToStep() {\n    if (!showResponsiveNav.value) {\n      return;\n    }\n\n    // allows the DOM to update before scrolling to the active step.\n    await nextTick();\n\n    const step = stepper.activeStepElement.value;\n\n    if (step) {\n      step.scrollIntoView({ behavior: 'instant', inline: 'start', block: 'nearest' });\n    }\n  }\n</script>\n\n<template>\n  <div class=\"tw-relative\">\n    <ul\n      ref=\"stepperListRef\"\n      class=\"stash-stepper tw-flex\"\n      :class=\"{\n        'tw-flex-col': props.orientation === 'vertical',\n        'stash-stepper--vertical': props.orientation === 'vertical',\n        'stash-stepper--horizontal': props.orientation === 'horizontal',\n        'tw-mx-9 tw-snap-x tw-snap-mandatory tw-overflow-x-hidden': showResponsiveNav,\n      }\"\n      data-test=\"stash-stepper\"\n    >\n      <!-- @slot Default slot to compose multiple steps -->\n      <slot></slot>\n    </ul>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--prev\"\n      :class=\"props.theme === 'light' ? 'tw-text-blue-500' : 'tw-text-white'\"\n      data-test=\"stash-stepper|prev-arrow\"\n      :disabled=\"isPrevArrowDisabled\"\n      icon\n      @click=\"stepper.back\"\n    >\n      <Icon name=\"chevron-left\" size=\"dense\" />\n    </Button>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--next\"\n      :class=\"props.theme === 'light' ? 'tw-text-blue-500' : 'tw-text-white'\"\n      data-test=\"stash-stepper|next-arrow\"\n      :disabled=\"isNextArrowDisabled\"\n      icon\n      @click=\"stepper.next\"\n    >\n      <Icon name=\"chevron-right\" size=\"dense\" />\n    </Button>\n  </div>\n</template>\n\n<style>\n  .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n    @apply tw-hidden;\n  }\n\n  .stash-stepper__arrow {\n    @apply tw-absolute\n      tw-top-0\n      tw-flex\n      tw-h-6\n      tw-w-6\n      tw-min-w-auto\n      tw-items-center\n      tw-justify-center\n      tw-rounded-full\n      tw-border\n      tw-border-solid\n      tw-border-ice-500\n      tw-text-center\n      disabled:tw-text-ice-500 disabled:tw-opacity-50;\n  }\n\n  .stash-stepper__arrow--prev {\n    @apply tw-left-0;\n  }\n\n  .stash-stepper__arrow--next {\n    @apply tw-right-0;\n  }\n</style>\n"],"names":["StepperOrientationEnum","props","__props","emit","__emit","stepperListRef","ref","stepper","useStepper","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step"],"mappings":";;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,aAAa,cAFHA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;AC+BV,UAAMC,IAAQC,GASRC,IAAOC,GAWPC,IAAiBC,KACjBC,IAAUC,EAAW;AAAA,MACzB,QAAQP,EAAM;AAAA,MACd,YAAYA,EAAM;AAAA,MAClB,eAAeA,EAAM;AAAA,MACrB,KAAKI;AAAA,IAAA,CACN,GAEKI,IAAgBC,EAAc,+BAA+B,GAC7DC,IAAoBC;AAAA,MACxB,MAAMX,EAAM,gBAAgB,iBAAiB,CAACQ,EAAc,SAASR,EAAM;AAAA,IAAA,GAEvEY,IAAsBD,EAAS,MAAML,EAAQ,gBAAgB,SAAS,CAAC,GACvEO,IAAsBF;AAAA,MAC1B,MACE,CAACL,EAAQ,gBAAgBA,EAAQ,gBAAgB,KAAK,KACtDA,EAAQ,gBAAgB,UAAUA,EAAQ,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnE,IAAAQ;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,gBAAgB,QAAQS;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,mBAAmB,QAAQS;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMR,EAAQ,gBAAgB;AAAA,MAC9B,CAACS,MAAU;AACT,QAAAb,EAAK,eAAea,CAAK,GACZC;MACf;AAAA,IAAA,GAGFF;AAAA,MACE,MAAMR,EAAQ,mBAAmB;AAAA,MACjC,CAACS,MAAUb,EAAK,kBAAkBa,CAAK;AAAA,IAAA,GAOzCE,EAAY,MAAM;AAChB,MAAIP,EAAkB,SACPM;IACf,CACD,GAEDE,EAAQC,GAAuB;AAAA,MAC7B,cAAcb,EAAQ;AAAA,MACtB,aAAaN,EAAM;AAAA,MACnB,WAAWM,EAAQ;AAAA,MACnB,OAAON,EAAM;AAAA,MACb,mBAAAU;AAAA,IAAA,CACD,GAEYU,EAAA;AAAA,MACX,MAAMd,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;AAMD,mBAAeU,IAAe;AACxB,UAAA,CAACN,EAAkB;AACrB;AAIF,YAAMW,EAAS;AAET,YAAAC,IAAOhB,EAAQ,kBAAkB;AAEvC,MAAIgB,KACGA,EAAA,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Stepper.vue.d.ts

@@ -4,7 +4,7 @@ import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
-import type { Ref } from 'vue';
+import { Ref } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -34,44 +34,49 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepperProps>, {
-    step: number;
-    substep: number;
-    linear: boolean;
-    orientation: string;
-    theme: string;
-    useResponsiveNav: boolean;
+step: number;
+substep: number;
+linear: boolean;
+orientation: string;
+theme: string;
+useResponsiveNav: boolean;
 }>>, {
-    back: () => void;
-    next: () => void;
-    goTo: (stepIndex: number, substepIndex?: number) => void;
-    isStepCompleted: (stepIndex: number, substepIndex?: number) => boolean;
-    isStepActive: (stepIndex: number, substepIndex?: number) => boolean;
+back: () => void;
+next: () => void;
+goTo: (stepIndex: number, substepIndex?: number) => void;
+isStepCompleted: (stepIndex: number, substepIndex?: number) => boolean;
+isStepActive: (stepIndex: number, substepIndex?: number) => boolean;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "update:step": (step: number) => void;
-    "update:substep": (substep: number) => void;
+"update:step": (step: number) => void;
+"update:substep": (substep: number) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepperProps>, {
-    step: number;
-    substep: number;
-    linear: boolean;
-    orientation: string;
-    theme: string;
-    useResponsiveNav: boolean;
+step: number;
+substep: number;
+linear: boolean;
+orientation: string;
+theme: string;
+useResponsiveNav: boolean;
 }>>> & Readonly<{
-    "onUpdate:step"?: ((step: number) => any) | undefined;
-    "onUpdate:substep"?: ((substep: number) => any) | undefined;
+"onUpdate:step"?: ((step: number) => any) | undefined;
+"onUpdate:substep"?: ((substep: number) => any) | undefined;
 }>, {
-    step: number;
-    theme: StepperTheme;
-    substep: number;
-    linear: boolean;
-    orientation: StepperOrientation;
-    useResponsiveNav: boolean;
+step: number;
+theme: StepperTheme;
+substep: number;
+linear: boolean;
+orientation: "vertical" | "horizontal";
+useResponsiveNav: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;
 
-export declare type StepperOrientation = 'vertical' | 'horizontal';
+export declare type StepperOrientation = `${StepperOrientationEnum}`;
+
+export declare enum StepperOrientationEnum {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
 
 export declare interface StepperProps {
     /**

package/dist/Switch.js

@@ -1,7 +1,7 @@
 import { defineComponent as v, useAttrs as g, useSlots as y, useCssModule as C, computed as o, openBlock as i, createElementBlock as d, normalizeClass as s, unref as a, createElementVNode as c, mergeProps as S, withDirectives as A, vModelCheckbox as V, toDisplayString as u, createCommentVNode as _, renderSlot as B, createTextVNode as M } from "vue";
 import T from "@leaflink/snitch";
 import E from "lodash-es/uniqueId";
-import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const D = ["data-test"], I = ["for"], $ = ["id", "disabled", "name", "value"], q = /* @__PURE__ */ v({
   name: "ll-switch",
   inheritAttrs: !1,

package/dist/Switch.vue.d.ts

@@ -33,33 +33,33 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SwitchProps>, {
-    checked: boolean;
-    disabled: boolean;
-    hintText: string;
-    id: undefined;
-    label: string;
-    name: string;
-    value: string;
+checked: boolean;
+disabled: boolean;
+hintText: string;
+id: undefined;
+label: string;
+name: string;
+value: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "update:checked": (value: boolean | (string | number)[] | undefined) => void;
+"update:checked": (value: boolean | (string | number)[] | undefined) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SwitchProps>, {
-    checked: boolean;
-    disabled: boolean;
-    hintText: string;
-    id: undefined;
-    label: string;
-    name: string;
-    value: string;
+checked: boolean;
+disabled: boolean;
+hintText: string;
+id: undefined;
+label: string;
+name: string;
+value: string;
 }>>> & Readonly<{
-    "onUpdate:checked"?: ((value: boolean | (string | number)[] | undefined) => any) | undefined;
+"onUpdate:checked"?: ((value: boolean | (string | number)[] | undefined) => any) | undefined;
 }>, {
-    name: string;
-    disabled: boolean;
-    label: string;
-    id: string;
-    hintText: string;
-    value: string | number;
-    checked: boolean | (string | number)[];
+name: string;
+disabled: boolean;
+label: string;
+id: string;
+hintText: string;
+value: string | number;
+checked: boolean | (string | number)[];
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     hint?(_: {}): any;
 }>;

package/dist/Tab.js

@@ -1,23 +1,8 @@
-import { defineComponent as x, useCssModule as T, inject as y, computed as s, onMounted as k, nextTick as g, toRefs as c, openBlock as u, createElementBlock as C, normalizeClass as P, unref as o, withKeys as $, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as j } from "vue";
+import { defineComponent as x, useCssModule as T, inject as y, computed as r, onMounted as k, nextTick as g, toRefs as c, openBlock as u, createElementBlock as C, normalizeClass as P, unref as a, withKeys as $, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as j } from "vue";
 import M from "@leaflink/snitch";
 import D from "./Badge.js";
-import { T as L } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-d7530989.js";
-import { _ as V } from "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/debounce";
-import "lodash-es/uniqueId";
-import "./constants.js";
-import "./locale.js";
-import "lodash-es/get";
-import "./Dropdown.js";
-import "./directives/clickoutside.js";
-import "./utils/calculateElementOverflow.js";
-import "./utils/helpers.js";
-import "lodash-es/camelCase";
-import "lodash-es/isFinite";
-import "lodash-es/isPlainObject";
-import "./Icon.js";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-l41hWkV4.js";
+import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class: "tw-mt-0.5" }, S = /* @__PURE__ */ x({
   __name: "Tab",
   props: {
@@ -30,21 +15,21 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
     routerLinkProps: {}
   },
   setup(p) {
-    const e = p, m = T(), l = y(L.key);
+    const e = p, v = T(), l = y(L.key);
     if (!l)
       throw Error("The Tab component must be a child of the Tabs component.");
-    const { setActiveTab: v, activeTab: w, variant: r } = l, t = s(() => e.value === w.value), f = s(() => e.to ? "router-link" : e.href ? "a" : "button");
+    const { setActiveTab: w, activeTab: f, variant: o } = l, t = r(() => e.value === f.value), m = r(() => e.to ? "router-link" : e.href ? "a" : "button");
     function d(i) {
-      e.disabled || v(i);
+      e.disabled || w(i);
     }
-    const n = s(() => `tabpanel-${e.value}`);
+    const n = r(() => `tabpanel-${e.value}`);
     k(async () => {
       await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(n.value) && M.warn(
         `The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${n.value}" and a "role" attribute with value "tabpanel".`
       );
     });
-    const h = s(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
-    return (i, a) => (u(), C("li", {
+    const h = r(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
+    return (i, s) => (u(), C("li", {
       id: `tab-${e.value}`,
       role: "tab",
       "aria-selected": t.value,
@@ -54,22 +39,22 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
         {
           "stash-tab--active is-active": t.value,
           "stash-tab--disabled": e.disabled,
-          "stash-tab--variant-line": o(r) === "line",
-          "stash-tab--variant-enclosed": o(r) === "enclosed"
+          "stash-tab--variant-line": a(o) === "line",
+          "stash-tab--variant-enclosed": a(o) === "enclosed"
         }
       ]]),
-      onClick: a[0] || (a[0] = (_) => d(e.value)),
-      onKeypress: a[1] || (a[1] = $((_) => d(e.value), ["enter"]))
+      onClick: s[0] || (s[0] = (_) => d(e.value)),
+      onKeypress: s[1] || (s[1] = $((_) => d(e.value), ["enter"]))
     }, [
-      (u(), B(E(f.value), N(h.value, {
+      (u(), B(E(m.value), N(h.value, {
         to: e.to,
         href: e.href,
         class: ["tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline", [
           {
-            "tw-border-b-2": o(r) === "line",
-            "tw-border-t-4 tw-px-6": o(r) === "enclosed",
-            "tw-rounded-t tw-border-b tw-border-b-ice-200 tw-bg-white": t.value && o(r) === "enclosed",
-            [o(m)["custom-shadow"]]: t.value && o(r) === "enclosed",
+            "tw-border-b-2": a(o) === "line",
+            "tw-border-t-4 tw-px-6": a(o) === "enclosed",
+            "tw-rounded-t tw-border-b tw-border-b-ice-200 tw-bg-white": t.value && a(o) === "enclosed",
+            [a(v)["custom-shadow"]]: t.value && a(o) === "enclosed",
             "focus:tw-no-underline": e.href,
             "tw-pointer-events-none tw-text-ice-500": e.disabled,
             "tw-text-ice-700": !e.disabled && !t.value
@@ -92,7 +77,7 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
                 j(i.$slots, "default", {
                   isActive: t.value,
                   isDisabled: e.disabled,
-                  variant: o(r)
+                  variant: a(o)
                 })
               ]),
               _: 3
@@ -107,8 +92,8 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
   "custom-shadow": "_custom-shadow_j326c_3"
 }, J = {
   $style: z
-}, de = /* @__PURE__ */ V(S, [["__cssModules", J]]);
+}, Q = /* @__PURE__ */ V(S, [["__cssModules", J]]);
 export {
-  de as default
+  Q as default
 };
 //# sourceMappingURL=Tab.js.map

package/dist/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-border-b tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  /* this removes the bottom shadow from the active tab */\n  .custom-shadow {\n    box-shadow: 0 -4px 4px rgba(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,KAEVC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,OAAO;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEzFG,EAAA;AAAA,QACL,yBAAyBlB,EAAM,uJAAuJe,EAAQ;AAAA,MAAA;AAAA,IAElM,CACD;AAEK,UAAAI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-border-b tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  /* this removes the bottom shadow from the active tab */\n  .custom-shadow {\n    box-shadow: 0 -4px 4px rgba(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,KAEVC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEzFG,EAAA;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MAAA;AAAA,IAEvM,CACD;AAEK,UAAAI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}