@leaflink/stash 52.0.2 → 53.0.0

package/dist/Paginate.js

@@ -1,15 +1,15 @@
-import { defineComponent as L, useCssModule as M, computed as N, toRef as u, createElementBlock as i, openBlock as l, createElementVNode as d, normalizeClass as o, unref as n, createVNode as _, toDisplayString as m, Fragment as v, renderList as D, createCommentVNode as p } from "vue";
-import { u as E } from "./usePaginationStats-d_q39naC.js";
+import { defineComponent as M, useCssModule as N, computed as D, toRef as u, createElementBlock as i, openBlock as l, createElementVNode as p, normalizeClass as o, unref as n, createVNode as _, toDisplayString as v, Fragment as m, renderList as E, createCommentVNode as d } from "vue";
+import { u as $ } from "./usePaginationStats-d_q39naC.js";
 import { t as g } from "./locale.js";
 import h from "./Icon.js";
-import { _ as $ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const B = {
-  class: "stash-paginate tw-flex tw-justify-center",
+  class: "stash-paginate flex justify-center",
   "data-test": "stash-paginate"
 }, V = ["aria-label", "disabled"], F = {
   key: 0,
-  class: "tw-mx-3 tw-text-ice-900"
-}, I = ["onClick"], j = ["aria-label", "disabled"], R = /* @__PURE__ */ L({
+  class: "mx-3 text-ice-900"
+}, I = ["onClick"], j = ["aria-label", "disabled"], R = /* @__PURE__ */ M({
   name: "ll-paginate",
   __name: "Paginate",
   props: {
@@ -21,91 +21,91 @@ const B = {
   },
   emits: ["set-page"],
   setup(P, { emit: b }) {
-    const t = P, x = b, r = M(), a = N(() => Math.ceil(t.listLength / t.pageSize)), w = t.variant === "stats" ? E({
-      currentPage: u(() => t.currentPage),
-      pageSize: u(() => t.pageSize),
-      totalItems: u(() => t.listLength)
+    const e = P, x = b, r = N(), a = D(() => Math.ceil(e.listLength / e.pageSize)), k = e.variant === "stats" ? $({
+      currentPage: u(() => e.currentPage),
+      pageSize: u(() => e.pageSize),
+      totalItems: u(() => e.listLength)
     }) : null;
-    function c(e) {
-      x("set-page", e);
+    function c(t) {
+      x("set-page", t);
     }
-    function k() {
-      t.currentPage < a.value && c(t.currentPage + 1);
+    function y() {
+      e.currentPage < a.value && c(e.currentPage + 1);
     }
-    function S() {
-      t.currentPage > 1 && c(t.currentPage - 1);
+    function z() {
+      e.currentPage > 1 && c(e.currentPage - 1);
     }
-    function y(e) {
-      const f = Math.abs(t.currentPage - e);
-      return a.value < 10 || e === 1 || e === a.value || t.currentPage < 6 && e < 8 || a.value - t.currentPage < 5 && a.value - e < 7 || f < 3;
+    function S(t) {
+      const f = Math.abs(e.currentPage - t);
+      return a.value < 10 || t === 1 || t === a.value || e.currentPage < 6 && t < 8 || a.value - e.currentPage < 5 && a.value - t < 7 || f < 3;
     }
-    function C(e) {
-      return a.value > 9 && t.currentPage > 5 && e === 2;
+    function C(t) {
+      return a.value > 9 && e.currentPage > 5 && t === 2;
     }
-    function z(e) {
-      return a.value > 9 && a.value - t.currentPage > 4 && e === a.value - 1;
+    function L(t) {
+      return a.value > 9 && a.value - e.currentPage > 4 && t === a.value - 1;
     }
-    return (e, f) => (l(), i("div", B, [
-      d("ul", {
-        class: o(["stash-paginate__list tw-flex tw-items-center", n(r).pagination]),
+    return (t, f) => (l(), i("div", B, [
+      p("ul", {
+        class: o(["stash-paginate__list flex items-center", n(r).pagination]),
         "data-test": "stash-paginate|list"
       }, [
-        d("button", {
+        p("button", {
           "aria-label": n(g)("ll.previous"),
           "data-test": "stash-paginate|prev-page",
           class: o(n(r).prev),
-          disabled: t.currentPage === 1,
-          onClick: S
+          disabled: e.currentPage === 1,
+          onClick: z
         }, [
           _(h, {
             size: "small",
             name: "chevron-left"
           })
         ], 10, V),
-        t.variant === "stats" ? (l(), i("span", F, m(n(g)("ll.pageStats", n(w))), 1)) : (l(!0), i(v, { key: 1 }, D(a.value, (s) => (l(), i(v, null, [
+        e.variant === "stats" ? (l(), i("span", F, v(n(g)("ll.pageStats", n(k))), 1)) : (l(!0), i(m, { key: 1 }, E(a.value, (s) => (l(), i(m, null, [
           C(s) ? (l(), i("button", {
             key: `${s}-ellipsis`,
-            class: "tw-pointer-events-none",
+            class: "pointer-events-none",
             "data-test": "stash-paginate|first-ellipsis",
             tabindex: "-1"
-          }, " … ")) : p("", !0),
-          y(s) ? (l(), i("button", {
+          }, " … ")) : d("", !0),
+          S(s) ? (l(), i("button", {
             key: s,
             "data-test": "stash-paginate|page-number",
-            class: o({ [n(r)["is-active"]]: t.currentPage === s }),
+            class: o({ [n(r)["is-active"]]: e.currentPage === s }),
             onClick: (K) => c(s)
-          }, m(s), 11, I)) : p("", !0),
-          z(s) ? (l(), i("button", {
+          }, v(s), 11, I)) : d("", !0),
+          L(s) ? (l(), i("button", {
             key: `${s}-ellipsis`,
-            class: "tw-pointer-events-none",
+            class: "pointer-events-none",
             "data-test": "stash-paginate|last-ellipsis",
             tabindex: "-1"
-          }, " … ")) : p("", !0)
+          }, " … ")) : d("", !0)
         ], 64))), 256)),
-        d("button", {
+        p("button", {
           "aria-label": n(g)("ll.next"),
           "data-test": "stash-paginate|next-page",
           class: o(n(r).next),
-          disabled: t.isNextDisabled || t.currentPage === a.value,
-          onClick: k
+          disabled: e.isNextDisabled || e.currentPage === a.value,
+          onClick: y
         }, [
           _(h, {
             size: "small",
-            class: "tw-rotate-180",
+            class: "rotate-180",
             name: "chevron-left"
           })
         ], 10, j)
       ], 2)
     ]));
   }
-}), q = "_pagination_104d8_2", A = "_prev_104d8_20", G = "_next_104d8_25", H = {
+}), q = "_pagination_kzyvn_5", A = "_prev_kzyvn_23", G = "_next_kzyvn_28", H = {
   pagination: q,
   prev: A,
   next: G,
-  "is-active": "_is-active_104d8_38"
+  "is-active": "_is-active_kzyvn_41"
 }, J = {
   $style: H
-}, X = /* @__PURE__ */ $(R, [["__cssModules", J]]);
+}, X = /* @__PURE__ */ w(R, [["__cssModules", J]]);
 export {
   X as default
 };

package/dist/Paginate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, toRef, useCssModule } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n    /*\n     * Optional override for the next button disabled state\n     */\n    isNextDisabled?: boolean;\n    /**\n     * Variant of the pagination component\n     */\n    variant?: 'standard' | 'stats';\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n    isNextDisabled: false,\n    variant: 'standard',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pageCount = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  const pageStats =\n    props.variant === 'stats'\n      ? usePaginationStats({\n          currentPage: toRef(() => props.currentPage),\n          pageSize: toRef(() => props.pageSize),\n          totalItems: toRef(() => props.listLength),\n        })\n      : null;\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pageCount.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pageCount.value < 10 ||\n      page === 1 ||\n      page === pageCount.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pageCount.value - props.currentPage < 5 && pageCount.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pageCount.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pageCount.value > 9 && pageCount.value - props.currentPage > 4 && page === pageCount.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul\n      class=\"stash-paginate__list tw-flex tw-items-center\"\n      :class=\"classes.pagination\"\n      data-test=\"stash-paginate|list\"\n    >\n      <button\n        :aria-label=\"t('ll.previous')\"\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"classes.prev\"\n        :disabled=\"props.currentPage === 1\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <span v-if=\"props.variant === 'stats'\" class=\"tw-mx-3 tw-text-ice-900\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\n      <template v-for=\"page in pageCount\" v-else>\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|first-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: props.currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button\n          v-if=\"shouldShowLastEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|last-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n      </template>\n      <button\n        :aria-label=\"t('ll.next')\"\n        data-test=\"stash-paginate|next-page\"\n        :class=\"classes.next\"\n        :disabled=\"props.isNextDisabled || props.currentPage === pageCount\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n\n      &:not(:disabled):hover,\n      &:not(:disabled):focus,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-active:focus {\n        @apply tw-bg-blue-700 tw-border-blue-700;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pageCount","computed","pageStats","usePaginationStats","toRef","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAQRC,IAAOC,GAOPC,IAAUC,EAAA,GAEVC,IAAYC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC,GAEvEQ,IACJR,EAAM,YAAY,UACdS,EAAmB;AAAA,MACjB,aAAaC,EAAM,MAAMV,EAAM,WAAW;AAAA,MAC1C,UAAUU,EAAM,MAAMV,EAAM,QAAQ;AAAA,MACpC,YAAYU,EAAM,MAAMV,EAAM,UAAU;AAAA,IAAA,CACzC,IACD;AAKN,aAASW,EAAWC,GAAqB;AACvC,MAAAV,EAAK,YAAYU,CAAW;AAAA,IAC9B;AAKA,aAASC,IAAO;AACd,MAAIb,EAAM,cAAcM,EAAU,SAChCK,EAAWX,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASc,IAAO;AACd,MAAId,EAAM,cAAc,KACtBW,EAAWX,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASe,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIjB,EAAM,cAAcgB,CAAI;AAElD,aACEV,EAAU,QAAQ,MAClBU,MAAS,KACTA,MAASV,EAAU,SAClBN,EAAM,cAAc,KAAKgB,IAAO,KAChCV,EAAU,QAAQN,EAAM,cAAc,KAAKM,EAAU,QAAQU,IAAO,KACrEC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOV,EAAU,QAAQ,KAAKN,EAAM,cAAc,KAAKgB,MAAS;AAAA,IAClE;AAMA,aAASG,EAAuBH,GAAuB;AACrD,aAAOV,EAAU,QAAQ,KAAKA,EAAU,QAAQN,EAAM,cAAc,KAAKgB,MAASV,EAAU,QAAQ;AAAA,IACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, toRef, useCssModule } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n    /*\n     * Optional override for the next button disabled state\n     */\n    isNextDisabled?: boolean;\n    /**\n     * Variant of the pagination component\n     */\n    variant?: 'standard' | 'stats';\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n    isNextDisabled: false,\n    variant: 'standard',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pageCount = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  const pageStats =\n    props.variant === 'stats'\n      ? usePaginationStats({\n          currentPage: toRef(() => props.currentPage),\n          pageSize: toRef(() => props.pageSize),\n          totalItems: toRef(() => props.listLength),\n        })\n      : null;\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pageCount.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pageCount.value < 10 ||\n      page === 1 ||\n      page === pageCount.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pageCount.value - props.currentPage < 5 && pageCount.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pageCount.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pageCount.value > 9 && pageCount.value - props.currentPage > 4 && page === pageCount.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate flex justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list flex items-center\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        :aria-label=\"t('ll.previous')\"\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"classes.prev\"\n        :disabled=\"props.currentPage === 1\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <span v-if=\"props.variant === 'stats'\" class=\"mx-3 text-ice-900\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\n      <template v-for=\"page in pageCount\" v-else>\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"pointer-events-none\"\n          data-test=\"stash-paginate|first-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: props.currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button\n          v-if=\"shouldShowLastEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"pointer-events-none\"\n          data-test=\"stash-paginate|last-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n      </template>\n      <button\n        :aria-label=\"t('ll.next')\"\n        data-test=\"stash-paginate|next-page\"\n        :class=\"classes.next\"\n        :disabled=\"props.isNextDisabled || props.currentPage === pageCount\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .pagination {\n      /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n      margin-top: --spacing(12);\n      z-index: 0;\n\n      a,\n      button {\n        @apply border border-solid border-ice-200;\n        align-items: center;\n        background-color: var(--color-white);\n        color: var(--color-blue-500);\n        cursor: pointer;\n        display: flex;\n        height: var(--height-input);\n        justify-content: center;\n        margin: 0 0 0 -1px;\n        width: var(--height-input);\n\n        &.prev {\n          border-bottom-left-radius: var(--radius-sm);\n          border-top-left-radius: var(--radius-sm);\n        }\n\n        &.next {\n          border-bottom-right-radius: var(--radius-sm);\n          border-top-right-radius: var(--radius-sm);\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          text-decoration: none;\n        }\n\n        &.is-active {\n          background-color: var(--color-blue-500);\n          color: var(--color-white);\n          pointer-events: none;\n          z-index: var(--z-index-control);\n        }\n\n        &:disabled {\n          cursor: not-allowed;\n          opacity: 0.5;\n        }\n\n        &:not(:disabled):hover,\n        &:not(:disabled):focus,\n        &.is-active {\n          @apply border border-solid border-blue-500;\n          position: relative;\n        }\n\n        &.is-active:focus {\n          @apply bg-blue-700 border-blue-700;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pageCount","computed","pageStats","usePaginationStats","toRef","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAQRC,IAAOC,GAOPC,IAAUC,EAAA,GAEVC,IAAYC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC,GAEvEQ,IACJR,EAAM,YAAY,UACdS,EAAmB;AAAA,MACjB,aAAaC,EAAM,MAAMV,EAAM,WAAW;AAAA,MAC1C,UAAUU,EAAM,MAAMV,EAAM,QAAQ;AAAA,MACpC,YAAYU,EAAM,MAAMV,EAAM,UAAU;AAAA,IAAA,CACzC,IACD;AAKN,aAASW,EAAWC,GAAqB;AACvC,MAAAV,EAAK,YAAYU,CAAW;AAAA,IAC9B;AAKA,aAASC,IAAO;AACd,MAAIb,EAAM,cAAcM,EAAU,SAChCK,EAAWX,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASc,IAAO;AACd,MAAId,EAAM,cAAc,KACtBW,EAAWX,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASe,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIjB,EAAM,cAAcgB,CAAI;AAElD,aACEV,EAAU,QAAQ,MAClBU,MAAS,KACTA,MAASV,EAAU,SAClBN,EAAM,cAAc,KAAKgB,IAAO,KAChCV,EAAU,QAAQN,EAAM,cAAc,KAAKM,EAAU,QAAQU,IAAO,KACrEC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOV,EAAU,QAAQ,KAAKN,EAAM,cAAc,KAAKgB,MAAS;AAAA,IAClE;AAMA,aAASG,EAAuBH,GAAuB;AACrD,aAAOV,EAAU,QAAQ,KAAKA,EAAU,QAAQN,EAAM,cAAc,KAAKgB,MAASV,EAAU,QAAQ;AAAA,IACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/QuickAction.js

@@ -1,7 +1,7 @@
-import { defineComponent as u, useCssModule as _, computed as s, createBlock as d, openBlock as f, resolveDynamicComponent as w, mergeProps as m, unref as p, withCtx as h, createElementVNode as e, createVNode as o, toDisplayString as n } from "vue";
-import r from "./Icon.js";
-import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const b = { class: "tw-flex tw-items-center tw-gap-3" }, k = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, v = { class: "tw-flex-1" }, g = { class: "tw-text-blue-500" }, y = { class: "tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0" }, C = /* @__PURE__ */ u({
+import { defineComponent as u, useCssModule as _, computed as s, createBlock as d, openBlock as f, resolveDynamicComponent as m, mergeProps as p, unref as h, withCtx as x, createElementVNode as e, createVNode as o, toDisplayString as r } from "vue";
+import n from "./Icon.js";
+import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const k = { class: "flex items-center gap-3" }, v = { class: "flex items-center justify-center rounded bg-blue-100 p-3" }, g = { class: "flex-1" }, y = { class: "text-blue-500" }, C = { class: "text-xs font-normal text-ice-700 lg:mb-0" }, w = /* @__PURE__ */ u({
   __name: "QuickAction",
   props: {
     title: {},
@@ -16,36 +16,36 @@ const b = { class: "tw-flex tw-items-center tw-gap-3" }, k = { class: "tw-flex t
     } : t.href ? {
       href: t.href
     } : {});
-    return (B, D) => (f(), d(w(l.value), m(a.value, {
-      class: ["stash-quick-action tw-rounded tw-p-3 tw-shadow", p(i).root],
+    return (B, D) => (f(), d(m(l.value), p(a.value, {
+      class: ["stash-quick-action rounded p-3 shadow", h(i).root],
       "data-test": "stash-quick-action"
     }), {
-      default: h(() => [
-        e("div", b, [
-          e("div", k, [
-            o(r, {
+      default: x(() => [
+        e("div", k, [
+          e("div", v, [
+            o(n, {
               name: t.icon,
-              class: "tw-text-blue-500"
+              class: "text-blue-500"
             }, null, 8, ["name"])
           ]),
-          e("div", v, [
-            e("h4", g, n(t.title), 1),
-            e("p", y, n(t.subtitle), 1)
+          e("div", g, [
+            e("h4", y, r(t.title), 1),
+            e("p", C, r(t.subtitle), 1)
           ]),
-          o(r, {
+          o(n, {
             name: "arrow-right",
-            class: "tw-text-blue-500"
+            class: "text-blue-500"
           })
         ])
       ]),
       _: 1
     }, 16, ["class"]));
   }
-}), A = "_root_nu1bt_2", M = {
+}), A = "_root_1iis9_3", M = {
   root: A
 }, q = {
   $style: M
-}, j = /* @__PURE__ */ x(C, [["__cssModules", q]]);
+}, j = /* @__PURE__ */ b(w, [["__cssModules", q]]);
 export {
   j as default
 };

package/dist/QuickAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n  const classes = useCssModule();\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 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action tw-rounded tw-p-3 tw-shadow\"\n    :class=\"classes.root\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"tw-flex tw-items-center tw-gap-3\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n        <p class=\"tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n    </div>\n  </component>\n</template>\n\n<style module>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","is","computed","linkAttrs"],"mappings":";;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GACRC,IAAUC,EAAA,GAEVC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKM,IAAYD,EAAS,MACrBL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n  const classes = useCssModule();\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 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action rounded p-3 shadow\"\n    :class=\"classes.root\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <div class=\"flex items-center justify-center rounded bg-blue-100 p-3\">\n        <Icon :name=\"props.icon\" class=\"text-blue-500\" />\n      </div>\n      <div class=\"flex-1\">\n        <h4 class=\"text-blue-500\">{{ props.title }}</h4>\n        <p class=\"text-xs font-normal text-ice-700 lg:mb-0\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"text-blue-500\" />\n    </div>\n  </component>\n</template>\n\n<style module>\n  @layer utilities {\n    .root {\n      background-color: #fff;\n      border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n      cursor: pointer;\n      display: inline-block;\n    }\n\n    .root:hover,\n    .root:active,\n    .root:focus {\n      border: 1px solid var(--color-blue-500);\n      text-decoration: none;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","is","computed","linkAttrs"],"mappings":";;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GACRC,IAAUC,EAAA,GAEVC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKM,IAAYD,EAAS,MACrBL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Radio.js

@@ -1,10 +1,10 @@
-import { useCssModule as d, createElementBlock as i, openBlock as u, normalizeClass as a, withDirectives as c, createElementVNode as s, mergeProps as _, vModelRadio as m, toDisplayString as h } from "vue";
+import { useCssModule as n, createElementBlock as i, openBlock as c, normalizeClass as a, withDirectives as u, createElementVNode as s, mergeProps as _, vModelRadio as m, toDisplayString as h } from "vue";
 import { _ as f } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const p = "_root_ul6uq_2", b = "_label_ul6uq_7", k = "_error_ul6uq_40", y = "_input_ul6uq_45", g = {
+const p = "_root_1dy32_5", y = "_label_1dy32_10", b = "_error_1dy32_43", k = "_input_1dy32_48", g = {
   root: p,
-  label: b,
-  error: k,
-  input: y
+  label: y,
+  error: b,
+  input: k
 }, v = {
   name: "ll-radio",
   props: {
@@ -50,7 +50,7 @@ const p = "_root_ul6uq_2", b = "_label_ul6uq_7", k = "_error_ul6uq_40", y = "_in
   emits: ["update:checked"],
   setup() {
     return {
-      classes: d()
+      classes: n()
     };
   },
   computed: {
@@ -67,30 +67,30 @@ const p = "_root_ul6uq_2", b = "_label_ul6uq_7", k = "_error_ul6uq_40", y = "_in
     if (this.$attrs.onChange)
       throw new Error("ll-radio: use the @update:checked event instead of @input");
   }
-}, w = ["id"], E = ["for"];
-function V(e, l, t, r, S, o) {
-  return u(), i("div", {
+}, E = ["id"], V = ["for"];
+function w(e, l, t, r, M, o) {
+  return c(), i("div", {
     class: a(["stash-radio", [r.classes.root, { error: t.hasError }]]),
     "data-test": "ll-radio"
   }, [
-    c(s("input", _({
+    u(s("input", _({
       id: t.id,
-      "onUpdate:modelValue": l[0] || (l[0] = (n) => o.internalValue = n),
-      class: ["tw-sr-only", r.classes.input],
+      "onUpdate:modelValue": l[0] || (l[0] = (d) => o.internalValue = d),
+      class: ["sr-only", r.classes.input],
       type: "radio"
-    }, e.$attrs), null, 16, w), [
+    }, e.$attrs), null, 16, E), [
       [m, o.internalValue]
     ]),
     s("label", {
       for: t.id,
       class: a(r.classes.label)
-    }, h(t.label), 11, E)
+    }, h(t.label), 11, V)
   ], 2);
 }
-const q = {
+const S = {
   $style: g
-}, C = /* @__PURE__ */ f(v, [["render", V], ["__cssModules", q]]);
+}, N = /* @__PURE__ */ f(v, [["render", w], ["__cssModules", S]]);
 export {
-  C as default
+  N as default
 };
 //# sourceMappingURL=Radio.js.map

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/components/Radio/Radio.vue"],"sourcesContent":["<script>\n  import { useCssModule } from 'vue';\n\n  /**\n   * @deprecated use components/RadioNew/Radio instead.\n   * if you need multiple Radio components considering using RadioGroup instead.\n   */\n  export default {\n    name: 'll-radio',\n\n    props: {\n      /**\n       * The checked/selected state of the radio button\n       */\n      checked: {\n        type: [String, Number],\n        default: undefined,\n      },\n\n      /**\n       * @deprecated Use :checked or v-model:checked instead of :model-value and v-model.\n       */\n      modelValue: {\n        type: [String, Number, null],\n        default: null,\n        validator(value) {\n          if (value !== null) {\n            throw new Error('ll-radio: use :checked or v-model:checked instead of :model-value and v-model.');\n          }\n\n          return true;\n        },\n      },\n\n      /**\n       * Adds error styling\n       */\n      hasError: Boolean,\n\n      /**\n       * A unique string to distinguish one Radio instance from another\n       * and to link the label to the input; required for accessibility\n       */\n      id: {\n        type: String,\n        required: true,\n      },\n\n      /**\n       * The description which appears to the right of the radio button\n       */\n      label: {\n        type: String,\n        default: '',\n      },\n    },\n\n    emits: ['update:checked'],\n\n    setup() {\n      return {\n        classes: useCssModule(),\n      };\n    },\n\n    computed: {\n      internalValue: {\n        get() {\n          return this.checked;\n        },\n        set(value) {\n          this.$emit('update:checked', value);\n        },\n      },\n    },\n\n    created() {\n      if (this.$attrs.onChange) {\n        throw new Error('ll-radio: use the @update:checked event instead of @input');\n      }\n    },\n  };\n</script>\n\n<template>\n  <div class=\"stash-radio\" data-test=\"ll-radio\" :class=\"[classes.root, { error: hasError }]\">\n    <input :id=\"id\" v-model=\"internalValue\" class=\"tw-sr-only\" :class=\"classes.input\" type=\"radio\" v-bind=\"$attrs\" />\n\n    <label :for=\"id\" :class=\"classes.label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    margin: theme('spacing[1.5]') 0;\n  }\n\n  .label {\n    color: var(--color-ice-700);\n    cursor: pointer;\n    display: inline-block;\n    font-size: theme('fontSize.sm');\n    font-weight: theme('fontWeight.normal');\n    line-height: theme('spacing.6');\n    min-height: theme('spacing.9');\n    overflow: visible;\n    padding: theme('spacing[1.5]') 0 theme('spacing[1.5]') calc(20px + theme('spacing.3'));\n    position: relative;\n    vertical-align: top;\n  }\n\n  .label::before {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    content: '';\n    display: inline-block;\n    vertical-align: top;\n  }\n\n  .label::before,\n  .label::after {\n    height: 20px;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    border-radius: 50%;\n  }\n\n  .error .label {\n    color: var(--color-red-500);\n  }\n\n  .error .label::before,\n  .error .input {\n    border-color: var(--color-red-500);\n  }\n\n  .input:checked + .label::after {\n    background: var(--color-blue-500);\n    content: '';\n    height: 14px;\n    left: 3px;\n    width: 14px;\n  }\n\n  .input:checked:disabled + .label::after {\n    background: var(--color-ice-500);\n  }\n\n  .input:not(:disabled, :checked) + .label:hover::before {\n    border-color: var(--color-blue-500);\n  }\n\n  @media screen('lg') {\n    .root input {\n      margin: 0;\n    }\n  }\n</style>\n"],"names":["_sfc_main","value","useCssModule","_hoisted_1","_hoisted_2","_createElementBlock","_normalizeClass","$setup","$props","_withDirectives","_createElementVNode","_mergeProps","_cache","$event","$options","_ctx","_toDisplayString"],"mappings":";;;;;;;GAOOA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,IAAI;AAAA,MAC3B,SAAS;AAAA,MACT,UAAUC,GAAO;AACf,YAAIA,MAAU;AACZ,gBAAM,IAAI,MAAM,gFAAgF;AAGlG,eAAO;AAAA,MACT;AAAA;;;;IAMF,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO,CAAC,gBAAgB;AAAA,EAExB,QAAQ;AACN,WAAO;AAAA,MACL,SAASC,EAAY;AAAA;EAEzB;AAAA,EAEA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,MAAM;AACJ,eAAO,KAAK;AAAA,MACd;AAAA,MACA,IAAID,GAAO;AACT,aAAK,MAAM,kBAAkBA,CAAK;AAAA,MACpC;AAAA;;EAIJ,UAAU;AACR,QAAI,KAAK,OAAO;AACd,YAAM,IAAI,MAAM,2DAA2D;AAAA,EAE/E;GAhFJE,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA;;cAqFEC,EAMM,OAAA;AAAA,IAND,OArFPC,GAqFa,eAAa,CAA+BC,UAAQ,eAAeC,EAAA,SAAQ,CAAA,CAAA,CAAA;AAAA,IAA7D,aAAU;AAAA;IACjCC,EAAAC,EAAiH,SAAjHC,EAAiH;AAAA,MAAzG,IAAIH,EAAA;AAAA,MAtFhB,uBAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAsF6BC,EAAA,gBAAaD;AAAA,MAAE,OAAK,CAAC,cAAqBN,EAAA,QAAQ,KAAK;AAAA,MAAE,MAAK;AAAA,IAAgB,GAAAQ,EAAA,MAAM,GAAA,MAAA,IAtFjHZ,CAAA,GAAA;AAAA,UAsF6BW,EAAA,aAAa;AAAA;IAEtCJ,EAEQ,SAAA;AAAA,MAFA,KAAKF,EAAA;AAAA,MAAK,OAxFtBF,EAwF6BC,EAAA,QAAQ,KAAK;AAAA,IACjC,GAAAS,EAAAR,EAAA,KAAK,GAAA,IAzFdJ,CAAA;AAAA;;;;;"}
+{"version":3,"file":"Radio.js","sources":["../src/components/Radio/Radio.vue"],"sourcesContent":["<script>\n  import { useCssModule } from 'vue';\n\n  /**\n   * @deprecated use components/RadioNew/Radio instead.\n   * if you need multiple Radio components considering using RadioGroup instead.\n   */\n  export default {\n    name: 'll-radio',\n\n    props: {\n      /**\n       * The checked/selected state of the radio button\n       */\n      checked: {\n        type: [String, Number],\n        default: undefined,\n      },\n\n      /**\n       * @deprecated Use :checked or v-model:checked instead of :model-value and v-model.\n       */\n      modelValue: {\n        type: [String, Number, null],\n        default: null,\n        validator(value) {\n          if (value !== null) {\n            throw new Error('ll-radio: use :checked or v-model:checked instead of :model-value and v-model.');\n          }\n\n          return true;\n        },\n      },\n\n      /**\n       * Adds error styling\n       */\n      hasError: Boolean,\n\n      /**\n       * A unique string to distinguish one Radio instance from another\n       * and to link the label to the input; required for accessibility\n       */\n      id: {\n        type: String,\n        required: true,\n      },\n\n      /**\n       * The description which appears to the right of the radio button\n       */\n      label: {\n        type: String,\n        default: '',\n      },\n    },\n\n    emits: ['update:checked'],\n\n    setup() {\n      return {\n        classes: useCssModule(),\n      };\n    },\n\n    computed: {\n      internalValue: {\n        get() {\n          return this.checked;\n        },\n        set(value) {\n          this.$emit('update:checked', value);\n        },\n      },\n    },\n\n    created() {\n      if (this.$attrs.onChange) {\n        throw new Error('ll-radio: use the @update:checked event instead of @input');\n      }\n    },\n  };\n</script>\n\n<template>\n  <div class=\"stash-radio\" data-test=\"ll-radio\" :class=\"[classes.root, { error: hasError }]\">\n    <input :id=\"id\" v-model=\"internalValue\" class=\"sr-only\" :class=\"classes.input\" type=\"radio\" v-bind=\"$attrs\" />\n\n    <label :for=\"id\" :class=\"classes.label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      position: relative;\n      margin: --spacing(1.5) 0;\n    }\n\n    .label {\n      color: var(--color-ice-700);\n      cursor: pointer;\n      display: inline-block;\n      font-size: var(--text-sm);\n      font-weight: var(--font-weight-normal);\n      line-height: --spacing(6);\n      min-height: --spacing(9);\n      overflow: visible;\n      padding: --spacing(1.5) 0 --spacing(1.5) calc(20px + --spacing(3));\n      position: relative;\n      vertical-align: top;\n    }\n\n    .label::before {\n      background: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      content: '';\n      display: inline-block;\n      vertical-align: top;\n    }\n\n    .label::before,\n    .label::after {\n      height: 20px;\n      left: 0;\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 20px;\n      border-radius: 50%;\n    }\n\n    .error .label {\n      color: var(--color-red-500);\n    }\n\n    .error .label::before,\n    .error .input {\n      border-color: var(--color-red-500);\n    }\n\n    .input:checked + .label::after {\n      background: var(--color-blue-500);\n      content: '';\n      height: 14px;\n      left: 3px;\n      width: 14px;\n    }\n\n    .input:checked:disabled + .label::after {\n      background: var(--color-ice-500);\n    }\n\n    .input:not(:disabled, :checked) + .label:hover::before {\n      border-color: var(--color-blue-500);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      .root input {\n        margin: 0;\n      }\n    }\n  }\n</style>\n"],"names":["_sfc_main","value","useCssModule","_hoisted_1","_hoisted_2","_createElementBlock","_normalizeClass","$setup","$props","_withDirectives","_createElementVNode","_mergeProps","_cache","$event","$options","_ctx","_toDisplayString"],"mappings":";;;;;;;GAOOA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,IAAI;AAAA,MAC3B,SAAS;AAAA,MACT,UAAUC,GAAO;AACf,YAAIA,MAAU;AACZ,gBAAM,IAAI,MAAM,gFAAgF;AAGlG,eAAO;AAAA,MACT;AAAA;;;;IAMF,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO,CAAC,gBAAgB;AAAA,EAExB,QAAQ;AACN,WAAO;AAAA,MACL,SAASC,EAAY;AAAA;EAEzB;AAAA,EAEA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,MAAM;AACJ,eAAO,KAAK;AAAA,MACd;AAAA,MACA,IAAID,GAAO;AACT,aAAK,MAAM,kBAAkBA,CAAK;AAAA,MACpC;AAAA;;EAIJ,UAAU;AACR,QAAI,KAAK,OAAO;AACd,YAAM,IAAI,MAAM,2DAA2D;AAAA,EAE/E;GAhFJE,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA;;cAqFEC,EAMM,OAAA;AAAA,IAND,OArFPC,GAqFa,eAAa,CAA+BC,UAAQ,eAAeC,EAAA,SAAQ,CAAA,CAAA,CAAA;AAAA,IAA7D,aAAU;AAAA;IACjCC,EAAAC,EAA8G,SAA9GC,EAA8G;AAAA,MAAtG,IAAIH,EAAA;AAAA,MAtFhB,uBAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAsF6BC,EAAA,gBAAaD;AAAA,MAAE,OAAK,CAAC,WAAkBN,EAAA,QAAQ,KAAK;AAAA,MAAE,MAAK;AAAA,IAAgB,GAAAQ,EAAA,MAAM,GAAA,MAAA,IAtF9GZ,CAAA,GAAA;AAAA,UAsF6BW,EAAA,aAAa;AAAA;IAEtCJ,EAEQ,SAAA;AAAA,MAFA,KAAKF,EAAA;AAAA,MAAK,OAxFtBF,EAwF6BC,EAAA,QAAQ,KAAK;AAAA,IACjC,GAAAS,EAAAR,EAAA,KAAK,GAAA,IAzFdJ,CAAA;AAAA;;;;;"}