@leaflink/stash 47.1.0 → 47.2.0

package/dist/Step.js

@@ -1,14 +1,13 @@
-import { defineComponent as v, useSlots as h, useCssModule as x, inject as g, computed as r, onBeforeMount as y, openBlock as a, createElementBlock as n, normalizeClass as o, unref as t, createElementVNode as i, createBlock as B, toDisplayString as _, createCommentVNode as m, renderSlot as k } from "vue";
-import b from "./Icon.js";
-import { S as E } from "./keys-7ecef029.js";
-import { _ as C } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as x, useSlots as b, useCssModule as g, inject as y, computed as d, onBeforeMount as k, openBlock as i, createElementBlock as r, normalizeClass as a, unref as t, createElementVNode as n, createBlock as B, toDisplayString as w, createCommentVNode as u, createTextVNode as N, renderSlot as C } from "vue";
+import { t as E } from "./locale.js";
+import T from "./Icon.js";
+import { S as z } from "./keys-7ecef029.js";
+import { _ as M } from "./_plugin-vue_export-helper-dad06003.js";
+import "lodash-es/get";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const N = {
-  key: 0,
-  class: "tw-mr-3 tw-flex tw-flex-col tw-items-center"
-}, S = { key: 1 }, z = /* @__PURE__ */ v({
+const S = { key: 1 }, I = /* @__PURE__ */ x({
   __name: "Step",
   props: {
     active: { type: Boolean, default: !1 },
@@ -21,96 +20,124 @@ const N = {
     loading: { type: Boolean, default: !1 }
   },
   setup(f) {
-    const e = f, d = h(), l = x(), s = g(E), c = r(() => (s == null ? void 0 : s.orientation) === "horizontal"), p = r(() => (s == null ? void 0 : s.theme) === "light"), w = r(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info");
-    return y(() => {
-      s && s.registerStep(e.nested);
-    }), (u, H) => (a(), n("li", {
-      class: o(["stash-step tw-relative tw-flex tw-w-full", [
-        t(l).step,
-        { [t(l)["nested-step--active"]]: e.nested && e.active, "last:tw-w-auto": c.value }
+    const e = f, _ = b(), s = g(), l = y(z), c = d(() => (l == null ? void 0 : l.orientation) === "horizontal"), p = d(() => (l == null ? void 0 : l.theme) === "light"), o = l == null ? void 0 : l.showResponsiveNav, h = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), v = d(
+      () => E("ll.stepper.currentStep", { num: e.step, total: String(l == null ? void 0 : l.stepCount.value) })
+    );
+    return k(() => {
+      l && l.registerStep(e.nested);
+    }), (m, K) => (i(), r("li", {
+      class: a(["stash-step tw-relative tw-flex tw-w-full", [
+        t(s).step,
+        {
+          [t(s)["nested-step--active"]]: e.nested && e.active,
+          "last:tw-w-auto": c.value && !t(o),
+          [t(s)["stash-step--singular"]]: t(o),
+          "tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center": t(o)
+        }
       ]]),
       "data-test": "stash-step"
     }, [
-      e.nested ? m("", !0) : (a(), n("div", N, [
-        i("div", {
-          class: o([
-            t(l).circle,
+      e.nested ? u("", !0) : (i(), r("div", {
+        key: 0,
+        class: a(["stash-step__indicator tw-flex tw-flex-col tw-items-center", { "tw-mr-3": !t(o) }]),
+        "data-test": "stash-step|indicator"
+      }, [
+        n("div", {
+          class: a([
+            t(s).circle,
             {
-              [t(l)["circle--todo"]]: !e.error && !e.active && !e.completed,
-              [t(l)["circle--error"]]: e.error && !e.active,
-              [t(l)["circle--completed"]]: e.completed && !e.active,
-              [t(l)["circle--active"]]: e.active,
-              [t(l)["circle--loading"]]: e.loading
+              [t(s)["circle--todo"]]: !e.error && !e.active && !e.completed,
+              [t(s)["circle--error"]]: e.error && !e.active,
+              [t(s)["circle--completed"]]: e.completed && !e.active,
+              [t(s)["circle--active"]]: e.active,
+              [t(s)["circle--loading"]]: e.loading
             }
           ])
         }, [
-          (e.completed || e.error || e.loading) && !e.active ? (a(), B(b, {
+          (e.completed || e.error || e.loading) && !e.active ? (i(), B(T, {
             key: 0,
-            name: w.value,
-            class: o({ "fx-spin": e.loading }),
+            name: h.value,
+            class: a({ "fx-spin": e.loading }),
             size: "dense"
-          }, null, 8, ["name", "class"])) : (a(), n("span", S, _(e.step), 1))
+          }, null, 8, ["name", "class"])) : (i(), r("span", S, w(e.step), 1))
         ], 2),
-        i("div", {
-          class: o(["tw-my-1.5 tw-w-px tw-bg-ice-500", [
-            t(l).line,
-            { [t(l)["line--expanded"]]: e.completed || e.active, "tw-hidden": c.value }
+        n("div", {
+          class: a(["tw-my-1.5 tw-w-px tw-bg-ice-500", [
+            t(s).line,
+            { [t(s)["line--expanded"]]: e.completed || e.active, "tw-hidden": c.value }
           ]])
         }, null, 2)
-      ])),
-      i("div", {
-        class: o(["tw-flex", [
+      ], 2)),
+      n("div", {
+        class: a(["tw-flex", [
           {
             "tw-w-full tw-flex-row tw-items-center": c.value,
-            "tw-flex-col": !c.value
+            "tw-mt-1.5 tw-justify-center": t(o),
+            "tw-flex-col": !c.value || t(o)
           }
         ]])
       }, [
-        i("div", {
-          class: o(["tw-whitespace-nowrap", [
-            t(l).title,
+        n("div", {
+          class: a(["stash-step__title tw-whitespace-nowrap", [
+            t(s).title,
             {
               "tw-cursor-pointer": !e.active && (e.completed || e.error),
               "tw-cursor-not-allowed": e.disabled,
               "tw-text-ice-900": p.value,
               "!tw-font-semibold": e.active,
-              "tw-text-white": !e.disabled && !p.value
+              "tw-text-white": !e.disabled && !p.value,
+              "tw-place-self-center": t(o)
             }
-          ]])
-        }, _(e.text), 3),
-        c.value ? (a(), n("div", {
+          ]]),
+          "data-test": "stash-step|title"
+        }, [
+          N(w(e.text) + " ", 1),
+          t(o) ? (i(), r("p", {
+            key: 0,
+            class: a(["stash-step__pagination-label tw-mb-0 tw-whitespace-nowrap tw-text-center tw-text-xs", p.value ? "tw-text-ice-700" : "tw-text-white"]),
+            "data-test": "stash-step|pagination-label"
+          }, w(v.value), 3)) : u("", !0)
+        ], 2),
+        c.value ? (i(), r("div", {
           key: 0,
-          class: o(["tw-mx-1.5 tw-border-t group-last:tw-hidden", [t(l).line, { [t(l)["line--expanded"]]: e.completed || e.active }]])
-        }, null, 2)) : m("", !0),
-        i("div", {
-          class: o(["stash-step--nested-steps", { "tw-pb-9": !u.nested && !t(d).default, "tw-hidden": c.value }])
+          class: a([
+            t(s).line,
+            {
+              [t(s)["line--expanded"]]: e.completed || e.active,
+              "tw-mx-1.5 tw-border-t group-last:tw-hidden": !t(o)
+            }
+          ])
+        }, null, 2)) : u("", !0),
+        n("div", {
+          class: a(["stash-step--nested-steps", { "tw-pb-9": !m.nested && !t(_).default, "tw-hidden": c.value }])
         }, [
-          i("ul", {
-            class: o([t(l).nested, { "tw-hidden": !t(d).default }])
+          n("ul", {
+            class: a([t(s).nested, { "tw-hidden": !t(_).default }])
           }, [
-            k(u.$slots, "default")
+            C(m.$slots, "default")
           ], 2)
         ], 2)
       ], 2)
     ], 2));
   }
-}), M = "_step_1o76u_2", I = "_title_1o76u_11", T = "_line_1o76u_22", P = "_circle_1o76u_35", V = "_nested_1o76u_18", $ = {
-  step: M,
-  title: I,
-  "nested-step--active": "_nested-step--active_1o76u_18",
-  line: T,
-  "line--expanded": "_line--expanded_1o76u_31",
-  circle: P,
-  "circle--todo": "_circle--todo_1o76u_46",
-  "circle--active": "_circle--active_1o76u_52",
-  "circle--loading": "_circle--loading_1o76u_58",
-  "circle--completed": "_circle--completed_1o76u_65",
-  "circle--error": "_circle--error_1o76u_72",
-  nested: V
-}, D = {
-  $style: $
-}, A = /* @__PURE__ */ C(z, [["__cssModules", D]]);
+}), R = "_step_1h5eb_2", V = "_title_1h5eb_11", P = "_line_1h5eb_22", $ = "_circle_1h5eb_62", D = "_nested_1h5eb_18", H = {
+  step: R,
+  title: V,
+  "nested-step--active": "_nested-step--active_1h5eb_18",
+  line: P,
+  "line--expanded": "_line--expanded_1h5eb_27",
+  "stash-step--singular": "_stash-step--singular_1h5eb_31",
+  circle: $,
+  "circle--todo": "_circle--todo_1h5eb_73",
+  "circle--active": "_circle--active_1h5eb_79",
+  "circle--loading": "_circle--loading_1h5eb_85",
+  "circle--completed": "_circle--completed_1h5eb_92",
+  "circle--error": "_circle--error_1h5eb_99",
+  nested: D
+}, J = {
+  $style: H
+}, W = /* @__PURE__ */ M(I, [["__cssModules", J]]);
 export {
-  A as default
+  W as default
 };
 //# sourceMappingURL=Step.js.map

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     * Indicates if the step is in a loading state\n     */\n    loading?: 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    loading: 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  const iconName = computed(() => {\n    if (props.loading) {\n      return 'working';\n    }\n    return props.completed ? 'circle-check' : 'circle-info';\n  });\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-relative tw-flex 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-mr-3 tw-flex tw-flex-col tw-items-center\">\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            [classes['circle--loading']]: props.loading,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n          :name=\"iconName\"\n          :class=\"{ 'fx-spin': props.loading }\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"tw-my-1.5 tw-w-px tw-bg-ice-500\"\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-w-full tw-flex-row tw-items-center': 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-mx-1.5 tw-border-t group-last:tw-hidden\"\n        :class=\"[classes.line, { [classes['line--expanded']]: props.completed || props.active }]\"\n      />\n      <div\n        class=\"stash-step--nested-steps\"\n        :class=\"{ 'tw-pb-9': !nested && !slots.default, 'tw-hidden': isHorizontal }\"\n      >\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: var(--color-blue-500);\n    color: theme('colors.white');\n    border: 1px solid transparent;\n  }\n\n  .circle--loading {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-ice-700);\n    cursor: pointer;\n  }\n\n  .circle--completed {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-green-500);\n    cursor: pointer;\n  }\n\n  .circle--error {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-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","iconName","props","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAqDQA,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,GAEjEM,IAAWF,EAAS,MACpBG,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C;AAGD,WAAAC,EAAc,MAAM;AAClB,MAAIR,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 { t } from '../../locale';\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     * Indicates if the step is in a loading state\n     */\n    loading?: 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    loading: 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  const showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n  const iconName = computed(() => {\n    if (props.loading) {\n      return 'working';\n    }\n    return props.completed ? 'circle-check' : 'circle-info';\n  });\n\n  const currentStepText = computed(() =>\n    t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\n  );\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-relative tw-flex tw-w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      {\n        [classes['nested-step--active']]: props.nested && props.active,\n        'last:tw-w-auto': isHorizontal && !showResponsiveNav,\n        [classes['stash-step--singular']]: showResponsiveNav,\n        'tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center': showResponsiveNav,\n      },\n    ]\"\n  >\n    <div\n      v-if=\"!props.nested\"\n      class=\"stash-step__indicator tw-flex tw-flex-col tw-items-center\"\n      :class=\"{ 'tw-mr-3': !showResponsiveNav }\"\n      data-test=\"stash-step|indicator\"\n    >\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            [classes['circle--loading']]: props.loading,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n          :name=\"iconName\"\n          :class=\"{ 'fx-spin': props.loading }\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"tw-my-1.5 tw-w-px tw-bg-ice-500\"\n        :class=\"[\n          classes.line,\n          { [classes['line--expanded']]: props.completed || props.active, 'tw-hidden': isHorizontal },\n        ]\"\n      />\n    </div>\n    <!-- step title, line(s), and nested steps -->\n    <div\n      class=\"tw-flex\"\n      :class=\"[\n        {\n          'tw-w-full tw-flex-row tw-items-center': isHorizontal,\n          'tw-mt-1.5 tw-justify-center': showResponsiveNav,\n          'tw-flex-col': !isHorizontal || showResponsiveNav,\n        },\n      ]\"\n    >\n      <div\n        class=\"stash-step__title tw-whitespace-nowrap\"\n        data-test=\"stash-step|title\"\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            'tw-place-self-center': showResponsiveNav,\n          },\n        ]\"\n      >\n        {{ props.text }}\n        <p\n          v-if=\"showResponsiveNav\"\n          class=\"stash-step__pagination-label tw-mb-0 tw-whitespace-nowrap tw-text-center tw-text-xs\"\n          data-test=\"stash-step|pagination-label\"\n          :class=\"isLightThemed ? 'tw-text-ice-700' : 'tw-text-white'\"\n        >\n          {{ currentStepText }}\n        </p>\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        :class=\"[\n          classes.line,\n          {\n            [classes['line--expanded']]: props.completed || props.active,\n            'tw-mx-1.5 tw-border-t group-last:tw-hidden': !showResponsiveNav,\n          },\n        ]\"\n      />\n      <div\n        class=\"stash-step--nested-steps\"\n        :class=\"{ 'tw-pb-9': !nested && !slots.default, 'tw-hidden': isHorizontal }\"\n      >\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  .line--expanded {\n    flex-grow: 1;\n  }\n\n  .stash-step--singular .line {\n    @apply tw-absolute\n      tw-inset-x-0\n      tw-top-3\n      tw-h-px\n      tw-border-t-0\n      before:tw-absolute\n      before:tw-left-0\n      before:tw-right-2/4\n      before:tw-mr-16\n      before:tw-block\n      before:tw-h-px\n      before:tw-bg-ice-500\n      after:tw-absolute\n      after:tw-left-2/4\n      after:tw-right-0\n      after:tw-ml-16\n      after:tw-block\n      after:tw-h-px\n      after:tw-bg-ice-500;\n  }\n\n  .stash-step--singular .line::after,\n  .stash-step--singular .line::before {\n    content: '';\n  }\n\n  .step:not(.stash-step--singular):last-child .line {\n    display: none;\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: var(--color-blue-500);\n    color: theme('colors.white');\n    border: 1px solid transparent;\n  }\n\n  .circle--loading {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-ice-700);\n    cursor: pointer;\n  }\n\n  .circle--completed {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-green-500);\n    cursor: pointer;\n  }\n\n  .circle--error {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-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","showResponsiveNav","iconName","props","currentStepText","t","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;iBAsDQA,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,GAEjEM,IAAoBN,KAAA,gBAAAA,EAAiB,mBAErCO,IAAWH,EAAS,MACpBI,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C,GAEKC,IAAkBL;AAAA,MAAS,MAC/BM,EAAE,0BAA0B,EAAE,KAAKF,EAAM,MAAM,OAAO,OAAOR,KAAA,gBAAAA,EAAiB,UAAU,KAAK,GAAG;AAAA,IAAA;AAIlG,WAAAW,EAAc,MAAM;AAClB,MAAIX,KACcA,EAAA,aAAaQ,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Stepper.js

@@ -1,7 +1,15 @@
-import { defineComponent as i, watch as s, provide as n, openBlock as l, createElementBlock as u, normalizeClass as c, renderSlot as d } from "vue";
-import v from "./useStepper.js";
-import { S } from "./keys-7ecef029.js";
-const x = /* @__PURE__ */ i({
+import { defineComponent as C, ref as I, computed as o, watch as r, watchEffect as g, provide as y, nextTick as E, openBlock as i, createElementBlock as N, createElementVNode as z, normalizeClass as p, renderSlot as T, createBlock as u, unref as d, withCtx as v, createVNode as m, createCommentVNode as f } from "vue";
+import B from "./useMediaQuery.js";
+import A from "./useStepper.js";
+import h from "./Button.js";
+import w from "./Icon.js";
+import { S as R } from "./keys-7ecef029.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
+import "./_plugin-vue_export-helper-dad06003.js";
+import "lodash-es/uniqueId";
+import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
   __name: "Stepper",
   props: {
     step: { default: -1 },
@@ -11,43 +19,101 @@ const x = /* @__PURE__ */ i({
     theme: { default: "dark" }
   },
   emits: ["update:step", "update:substep"],
-  setup(o, { expose: r, emit: a }) {
-    const e = o, t = v({ linear: e.linear, activeStep: e.step, activeSubstep: e.substep });
-    return s(
-      () => e.step,
-      (p) => t.activeStepIndex.value = p
-    ), s(
-      () => e.substep,
-      (p) => t.activeSubstepIndex.value = p
-    ), s(
-      () => t.activeStepIndex.value,
-      (p) => a("update:step", p)
-    ), s(
-      () => t.activeSubstepIndex.value,
-      (p) => a("update:substep", p)
-    ), n(S, {
-      registerStep: t.registerStep,
-      orientation: e.orientation,
-      theme: e.theme
-    }), r({
-      back: t.back,
-      next: t.next,
-      goTo: t.goTo,
-      isStepCompleted: t.isStepCompleted,
-      isStepActive: t.isStepActive
-    }), (p, m) => (l(), u("ul", {
-      class: c(["stash-stepper tw-flex", {
-        "tw-flex-col": e.orientation === "vertical",
-        "stash-stepper--vertical": e.orientation === "vertical",
-        "stash-stepper--horizontal": e.orientation === "horizontal"
-      }]),
-      "data-test": "stash-stepper"
-    }, [
-      d(p.$slots, "default")
-    ], 2));
+  setup(x, { expose: _, emit: n }) {
+    const t = x, l = I(), e = A({
+      linear: t.linear,
+      activeStep: t.step,
+      activeSubstep: t.substep,
+      ref: l
+    }), S = B("screen and (min-width: 961px)"), a = o(() => t.orientation === "horizontal" && !S.value), b = o(() => e.activeStepIndex.value <= 0), k = o(
+      () => !e.isStepCompleted(e.activeStepIndex.value) || e.activeStepIndex.value === e.steps.value.length - 1
+    );
+    r(
+      () => t.step,
+      (s) => e.activeStepIndex.value = s
+    ), r(
+      () => t.substep,
+      (s) => e.activeSubstepIndex.value = s
+    ), r(
+      () => e.activeStepIndex.value,
+      (s) => {
+        n("update:step", s), c();
+      }
+    ), r(
+      () => e.activeSubstepIndex.value,
+      (s) => n("update:substep", s)
+    ), g(() => {
+      a.value && c();
+    }), y(R, {
+      registerStep: e.registerStep,
+      orientation: t.orientation,
+      stepCount: e.stepCount,
+      theme: t.theme,
+      showResponsiveNav: a
+    }), _({
+      back: e.back,
+      next: e.next,
+      goTo: e.goTo,
+      isStepCompleted: e.isStepCompleted,
+      isStepActive: e.isStepActive
+    });
+    async function c() {
+      if (!a.value)
+        return;
+      await E();
+      const s = e.activeStepElement.value;
+      s && s.scrollIntoView({ behavior: "instant", inline: "start", block: "nearest" });
+    }
+    return (s, L) => (i(), N("div", V, [
+      z("ul", {
+        ref_key: "stepperListRef",
+        ref: l,
+        class: p(["stash-stepper tw-flex", {
+          "tw-flex-col": t.orientation === "vertical",
+          "stash-stepper--vertical": t.orientation === "vertical",
+          "stash-stepper--horizontal": t.orientation === "horizontal",
+          "tw-mx-9 tw-snap-x tw-snap-mandatory tw-overflow-x-hidden": a.value
+        }]),
+        "data-test": "stash-stepper"
+      }, [
+        T(s.$slots, "default")
+      ], 2),
+      a.value ? (i(), u(h, {
+        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: b.value,
+        icon: "",
+        onClick: d(e).back
+      }, {
+        default: v(() => [
+          m(w, {
+            name: "chevron-left",
+            size: "dense"
+          })
+        ]),
+        _: 1
+      }, 8, ["class", "disabled", "onClick"])) : f("", !0),
+      a.value ? (i(), u(h, {
+        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: k.value,
+        icon: "",
+        onClick: d(e).next
+      }, {
+        default: v(() => [
+          m(w, {
+            name: "chevron-right",
+            size: "dense"
+          })
+        ]),
+        _: 1
+      }, 8, ["class", "disabled", "onClick"])) : f("", !0)
+    ]));
   }
 });
 export {
-  x as default
+  F 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     * Determines the theme of the stepper\n     */\n    theme?: StepperTheme;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { provide, watch } from 'vue';\n\n  import useStepper from '../../composables/useStepper/useStepper';\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  });\n\n  const emit =\n    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 stepper = useStepper({ linear: props.linear, activeStep: props.step, activeSubstep: props.substep });\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) => emit('update:step', value),\n  );\n\n  watch(\n    () => stepper.activeSubstepIndex.value,\n    (value) => emit('update:substep', value),\n  );\n\n  provide(STEPPER_INJECTION_KEY, {\n    registerStep: stepper.registerStep,\n    orientation: props.orientation,\n    theme: props.theme,\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</script>\n\n<template>\n  <ul\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    }\"\n    data-test=\"stash-stepper\"\n  >\n    <!-- @slot Default slot to compose multiple steps -->\n    <slot></slot>\n  </ul>\n</template>\n\n<style>\n  .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n    @apply tw-hidden;\n  }\n</style>\n"],"names":["stepper","useStepper","props","watch","value","emit","provide","STEPPER_INJECTION_KEY","__expose"],"mappings":";;;;;;;;;;;;;;iBAsDQA,IAAUC,EAAW,EAAE,QAAQC,EAAM,QAAQ,YAAYA,EAAM,MAAM,eAAeA,EAAM,QAAS,CAAA;AAEzG,WAAAC;AAAA,MACE,MAAMD,EAAM;AAAA,MACZ,CAACE,MAAWJ,EAAQ,gBAAgB,QAAQI;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMD,EAAM;AAAA,MACZ,CAACE,MAAWJ,EAAQ,mBAAmB,QAAQI;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMH,EAAQ,gBAAgB;AAAA,MAC9B,CAACI,MAAUC,EAAK,eAAeD,CAAK;AAAA,IAAA,GAGtCD;AAAA,MACE,MAAMH,EAAQ,mBAAmB;AAAA,MACjC,CAACI,MAAUC,EAAK,kBAAkBD,CAAK;AAAA,IAAA,GAGzCE,EAAQC,GAAuB;AAAA,MAC7B,cAAcP,EAAQ;AAAA,MACtB,aAAaE,EAAM;AAAA,MACnB,OAAOA,EAAM;AAAA,IAAA,CACd,GAEYM,EAAA;AAAA,MACX,MAAMR,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;;;;;;;;;;;;"}
+{"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     * 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  });\n\n  const emit =\n    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(() => props.orientation === 'horizontal' && !isLargeScreen.value);\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":["stepperListRef","ref","stepper","useStepper","props","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","emit","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step"],"mappings":";;;;;;;;;;;;;;;;;;;;;;iBAyDQA,IAAiBC,KACjBC,IAAUC,EAAW;AAAA,MACzB,QAAQC,EAAM;AAAA,MACd,YAAYA,EAAM;AAAA,MAClB,eAAeA,EAAM;AAAA,MACrB,KAAKJ;AAAA,IAAA,CACN,GAEKK,IAAgBC,EAAc,+BAA+B,GAC7DC,IAAoBC,EAAS,MAAMJ,EAAM,gBAAgB,gBAAgB,CAACC,EAAc,KAAK,GAC7FI,IAAsBD,EAAS,MAAMN,EAAQ,gBAAgB,SAAS,CAAC,GACvEQ,IAAsBF;AAAA,MAC1B,MACE,CAACN,EAAQ,gBAAgBA,EAAQ,gBAAgB,KAAK,KACtDA,EAAQ,gBAAgB,UAAUA,EAAQ,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnE,IAAAS;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAWV,EAAQ,gBAAgB,QAAQU;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAWV,EAAQ,mBAAmB,QAAQU;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMT,EAAQ,gBAAgB;AAAA,MAC9B,CAACU,MAAU;AACT,QAAAC,EAAK,eAAeD,CAAK,GACZE;MACf;AAAA,IAAA,GAGFH;AAAA,MACE,MAAMT,EAAQ,mBAAmB;AAAA,MACjC,CAACU,MAAUC,EAAK,kBAAkBD,CAAK;AAAA,IAAA,GAOzCG,EAAY,MAAM;AAChB,MAAIR,EAAkB,SACPO;IACf,CACD,GAEDE,EAAQC,GAAuB;AAAA,MAC7B,cAAcf,EAAQ;AAAA,MACtB,aAAaE,EAAM;AAAA,MACnB,WAAWF,EAAQ;AAAA,MACnB,OAAOE,EAAM;AAAA,MACb,mBAAAG;AAAA,IAAA,CACD,GAEYW,EAAA;AAAA,MACX,MAAMhB,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;AAMD,mBAAeY,IAAe;AACxB,UAAA,CAACP,EAAkB;AACrB;AAIF,YAAMY,EAAS;AAET,YAAAC,IAAOlB,EAAQ,kBAAkB;AAEvC,MAAIkB,KACGA,EAAA,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}