@leaflink/stash 52.0.2 → 53.0.0

package/dist/DescriptionList.js

@@ -11,8 +11,8 @@ const p = ["data-variant"], f = /* @__PURE__ */ d({
     const t = e;
     return n(r.key, { divide: t.divide, variant: t.variant }), (a, v) => (i(), s("dl", {
       "data-variant": t.variant,
-      class: o(["stash-description-list tw-text-sm", {
-        "tw-divide-y tw-divide-ice-200": t.divide
+      class: o(["stash-description-list text-sm", {
+        "divide-y divide-ice-200": t.divide
       }]),
       "data-test": "stash-description-list"
     }, [

package/dist/DescriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.js","sources":["../src/components/DescriptionList/DescriptionList.types.ts","../src/components/DescriptionList/DescriptionList.vue"],"sourcesContent":["export enum DescriptionListVariant {\n  Columns = 'columns',\n  Inline = 'inline',\n  Stacked = 'stacked',\n  SpaceBetween = 'space-between',\n}\n\nexport type DescriptionListVariants = `${DescriptionListVariant}`;\n\n/**\n * Description List provide/inject keys\n */\nexport interface DescriptionListInjection {\n  /**\n   * Divide the list groups with a border.\n   */\n  divide?: boolean;\n  /**\n   * Different variants of description lists.\n   */\n  variant?: DescriptionListVariants;\n}\n","<script lang=\"ts\">\n  import type { DescriptionListVariants } from './DescriptionList.types';\n\n  export * from './DescriptionList.keys';\n  export * from './DescriptionList.types';\n\n  export interface DescriptionListProps {\n    /**\n     * Divide the list groups with a border.\n     */\n    divide?: boolean;\n    /**\n     * Different variants of description lists.\n     */\n    variant?: DescriptionListVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { provide } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from './DescriptionList.keys';\n\n  const props = withDefaults(defineProps<DescriptionListProps>(), {\n    variant: 'columns',\n    divide: false,\n  });\n\n  provide(DESCRIPTION_LIST_INJECTION.key, { divide: props.divide, variant: props.variant });\n</script>\n\n<template>\n  <dl\n    :data-variant=\"props.variant\"\n    class=\"stash-description-list tw-text-sm\"\n    :class=\"{\n      'tw-divide-y tw-divide-ice-200': props.divide,\n    }\"\n    data-test=\"stash-description-list\"\n  >\n    <!-- @slot Default slot, for rendering a description list -->\n    <slot></slot>\n  </dl>\n</template>\n./keys\n"],"names":["DescriptionListVariant","props","__props","provide","DESCRIPTION_LIST_INJECTION"],"mappings":";;AAAO,IAAKA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,eAAe,iBAJLA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;ACuBV,UAAMC,IAAQC;AAKd,WAAAC,EAAQC,EAA2B,KAAK,EAAE,QAAQH,EAAM,QAAQ,SAASA,EAAM,SAAS;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionList.js","sources":["../src/components/DescriptionList/DescriptionList.types.ts","../src/components/DescriptionList/DescriptionList.vue"],"sourcesContent":["export enum DescriptionListVariant {\n  Columns = 'columns',\n  Inline = 'inline',\n  Stacked = 'stacked',\n  SpaceBetween = 'space-between',\n}\n\nexport type DescriptionListVariants = `${DescriptionListVariant}`;\n\n/**\n * Description List provide/inject keys\n */\nexport interface DescriptionListInjection {\n  /**\n   * Divide the list groups with a border.\n   */\n  divide?: boolean;\n  /**\n   * Different variants of description lists.\n   */\n  variant?: DescriptionListVariants;\n}\n","<script lang=\"ts\">\n  import type { DescriptionListVariants } from './DescriptionList.types';\n\n  export * from './DescriptionList.keys';\n  export * from './DescriptionList.types';\n\n  export interface DescriptionListProps {\n    /**\n     * Divide the list groups with a border.\n     */\n    divide?: boolean;\n    /**\n     * Different variants of description lists.\n     */\n    variant?: DescriptionListVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { provide } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from './DescriptionList.keys';\n\n  const props = withDefaults(defineProps<DescriptionListProps>(), {\n    variant: 'columns',\n    divide: false,\n  });\n\n  provide(DESCRIPTION_LIST_INJECTION.key, { divide: props.divide, variant: props.variant });\n</script>\n\n<template>\n  <dl\n    :data-variant=\"props.variant\"\n    class=\"stash-description-list text-sm\"\n    :class=\"{\n      'divide-y divide-ice-200': props.divide,\n    }\"\n    data-test=\"stash-description-list\"\n  >\n    <!-- @slot Default slot, for rendering a description list -->\n    <slot></slot>\n  </dl>\n</template>\n"],"names":["DescriptionListVariant","props","__props","provide","DESCRIPTION_LIST_INJECTION"],"mappings":";;AAAO,IAAKA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,eAAe,iBAJLA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;ACuBV,UAAMC,IAAQC;AAKd,WAAAC,EAAQC,EAA2B,KAAK,EAAE,QAAQH,EAAM,QAAQ,SAASA,EAAM,SAAS;;;;;;;;;;;"}

package/dist/DescriptionListDetail.js

@@ -8,8 +8,8 @@ const p = ["data-variant"], h = /* @__PURE__ */ a({
       throw new Error("DescriptionListDetail must be used within a DescriptionList component.");
     const { variant: e } = t;
     return (s, _) => (r(), o("dd", {
-      class: c(["stash-description-list-detail tw-flex-1 tw-text-ice-900", {
-        "md:tw-text-right": i(e) === "space-between"
+      class: c(["stash-description-list-detail flex-1 text-ice-900", {
+        "md:text-right": i(e) === "space-between"
       }]),
       "data-test": "stash-description-list-detail",
       "data-variant": i(e)

package/dist/DescriptionListDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListDetail.js","sources":["../src/components/DescriptionListDetail/DescriptionListDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dd\n    class=\"stash-description-list-detail tw-flex-1 tw-text-ice-900\"\n    :class=\"{\n      'md:tw-text-right': variant === 'space-between',\n    }\"\n    data-test=\"stash-description-list-detail\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </dd>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,SAAAG,MAAYH;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListDetail.js","sources":["../src/components/DescriptionListDetail/DescriptionListDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dd\n    class=\"stash-description-list-detail flex-1 text-ice-900\"\n    :class=\"{\n      'md:text-right': variant === 'space-between',\n    }\"\n    data-test=\"stash-description-list-detail\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </dd>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,SAAAG,MAAYH;;;;;;;;;;;;"}

package/dist/DescriptionListGroup.js

@@ -1,19 +1,19 @@
 import { defineComponent as n, inject as r, createElementBlock as o, openBlock as d, unref as t, normalizeClass as p, renderSlot as c } from "vue";
 import { D as l } from "./DescriptionList.keys-BHlHYV6b.js";
-const m = ["data-divide", "data-variant"], v = /* @__PURE__ */ n({
+const m = ["data-divide", "data-variant"], b = /* @__PURE__ */ n({
   __name: "DescriptionListGroup",
-  setup(w) {
+  setup(u) {
     const i = r(l.key);
     if (!i)
       throw new Error("DescriptionListDetail must be used within a DescriptionList component.");
     const { divide: s, variant: e } = i;
-    return (a, u) => (d(), o("div", {
+    return (a, f) => (d(), o("div", {
       class: p(["stash-description-list-group", {
-        "md:tw-flex md:tw-items-start md:tw-gap-x-6": t(e) === "columns" || t(e) === "space-between",
-        "tw-justify-between": t(e) === "space-between",
-        "md:tw-flex md:tw-items-start": t(e) === "inline",
-        "tw-py-1.5 first:tw-pt-0 last:tw-pb-0": !t(s),
-        "tw-py-3 first:tw-pt-0 last:tw-pb-0": t(s)
+        "md:flex md:items-start md:gap-x-6": t(e) === "columns" || t(e) === "space-between",
+        "justify-between": t(e) === "space-between",
+        "md:flex md:items-start": t(e) === "inline",
+        "py-1.5 first:pt-0 last:pb-0": !t(s),
+        "py-3 first:pt-0 last:pb-0": t(s)
       }]),
       "data-test": "stash-description-list-group",
       "data-divide": t(s),
@@ -24,6 +24,6 @@ const m = ["data-divide", "data-variant"], v = /* @__PURE__ */ n({
   }
 });
 export {
-  v as default
+  b as default
 };
 //# sourceMappingURL=DescriptionListGroup.js.map

package/dist/DescriptionListGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListGroup.js","sources":["../src/components/DescriptionListGroup/DescriptionListGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { divide, variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <div\n    class=\"stash-description-list-group\"\n    :class=\"{\n      'md:tw-flex md:tw-items-start md:tw-gap-x-6': variant === 'columns' || variant === 'space-between',\n      'tw-justify-between': variant === 'space-between',\n      'md:tw-flex md:tw-items-start': variant === 'inline',\n      'tw-py-1.5 first:tw-pt-0 last:tw-pb-0': !divide,\n      'tw-py-3 first:tw-pt-0 last:tw-pb-0': divide,\n    }\"\n    data-test=\"stash-description-list-group\"\n    :data-divide=\"divide\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","divide","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,QAAAG,GAAQ,SAAAC,EAAA,IAAYJ;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListGroup.js","sources":["../src/components/DescriptionListGroup/DescriptionListGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { divide, variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <div\n    class=\"stash-description-list-group\"\n    :class=\"{\n      'md:flex md:items-start md:gap-x-6': variant === 'columns' || variant === 'space-between',\n      'justify-between': variant === 'space-between',\n      'md:flex md:items-start': variant === 'inline',\n      'py-1.5 first:pt-0 last:pb-0': !divide,\n      'py-3 first:pt-0 last:pb-0': divide,\n    }\"\n    data-test=\"stash-description-list-group\"\n    :data-divide=\"divide\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","divide","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,QAAAG,GAAQ,SAAAC,EAAA,IAAYJ;;;;;;;;;;;;;;;;;"}

package/dist/DescriptionListTerm.js

@@ -1,18 +1,18 @@
 import { defineComponent as a, inject as o, createElementBlock as r, openBlock as c, unref as e, normalizeClass as p, renderSlot as n } from "vue";
 import { D as d } from "./DescriptionList.keys-BHlHYV6b.js";
-const m = ["data-variant"], _ = /* @__PURE__ */ a({
+const m = ["data-variant"], b = /* @__PURE__ */ a({
   __name: "DescriptionListTerm",
   setup(l) {
     const i = o(d.key);
     if (!i)
       throw new Error("DescriptionListDetail must be used within a DescriptionList component.");
     const { variant: t } = i;
-    return (s, w) => (c(), r("dt", {
-      class: p(["stash-description-list-term tw-flex tw-items-center tw-gap-x-1 tw-font-bold tw-text-ice-900", {
-        "md:tw-max-w-40 md:tw-basis-2/5": e(t) === "columns",
-        "tw-mr-1.5": e(t) === "inline",
-        "tw-pb-1.5": e(t) === "stacked",
-        "tw-pb-1.5 md:tw-pb-0": e(t) !== "stacked"
+    return (s, f) => (c(), r("dt", {
+      class: p(["stash-description-list-term flex items-center gap-x-1 font-bold text-ice-900", {
+        "md:max-w-40 md:basis-2/5": e(t) === "columns",
+        "mr-1.5": e(t) === "inline",
+        "pb-1.5": e(t) === "stacked",
+        "pb-1.5 md:pb-0": e(t) !== "stacked"
       }]),
       "data-test": "stash-description-list-term",
       "data-variant": e(t)
@@ -24,6 +24,6 @@ const m = ["data-variant"], _ = /* @__PURE__ */ a({
   }
 });
 export {
-  _ as default
+  b as default
 };
 //# sourceMappingURL=DescriptionListTerm.js.map

package/dist/DescriptionListTerm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListTerm.js","sources":["../src/components/DescriptionListTerm/DescriptionListTerm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dt\n    class=\"stash-description-list-term tw-flex tw-items-center tw-gap-x-1 tw-font-bold tw-text-ice-900\"\n    :class=\"{\n      'md:tw-max-w-40 md:tw-basis-2/5': variant === 'columns',\n      'tw-mr-1.5': variant === 'inline',\n      'tw-pb-1.5': variant === 'stacked',\n      'tw-pb-1.5 md:tw-pb-0': variant !== 'stacked',\n    }\"\n    data-test=\"stash-description-list-term\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Prepend slot, for rendering a prepended element -->\n    <slot name=\"prepend\"></slot>\n    <!-- @slot Default slot, for rendering a term -->\n    <slot></slot>\n    <!-- @slot Append slot, for rendering an appended element -->\n    <slot name=\"append\"></slot>\n  </dt>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,SAAAG,MAAYH;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListTerm.js","sources":["../src/components/DescriptionListTerm/DescriptionListTerm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dt\n    class=\"stash-description-list-term flex items-center gap-x-1 font-bold text-ice-900\"\n    :class=\"{\n      'md:max-w-40 md:basis-2/5': variant === 'columns',\n      'mr-1.5': variant === 'inline',\n      'pb-1.5': variant === 'stacked',\n      'pb-1.5 md:pb-0': variant !== 'stacked',\n    }\"\n    data-test=\"stash-description-list-term\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Prepend slot, for rendering a prepended element -->\n    <slot name=\"prepend\"></slot>\n    <!-- @slot Default slot, for rendering a term -->\n    <slot></slot>\n    <!-- @slot Append slot, for rendering an appended element -->\n    <slot name=\"append\"></slot>\n  </dt>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,SAAAG,MAAYH;;;;;;;;;;;;;;;;;"}

package/dist/Dialog.js

@@ -1,15 +1,15 @@
-import { defineComponent as A, useSlots as H, useAttrs as K, useCssModule as L, ref as T, computed as s, watchEffect as q, nextTick as F, createBlock as f, openBlock as l, Transition as P, withCtx as m, createElementBlock as _, createCommentVNode as c, mergeProps as Y, unref as e, withKeys as j, createElementVNode as a, normalizeClass as o, toDisplayString as p, renderSlot as G, createVNode as J, createTextVNode as S } from "vue";
+import { defineComponent as A, useSlots as H, useAttrs as K, useCssModule as L, ref as S, computed as s, watchEffect as q, nextTick as F, createBlock as f, openBlock as l, Transition as P, withCtx as m, createElementBlock as _, createCommentVNode as d, mergeProps as Y, unref as e, withKeys as j, createElementVNode as a, normalizeClass as o, toDisplayString as p, renderSlot as G, createVNode as J, createTextVNode as B } from "vue";
 import y from "lodash-es/capitalize";
 import O from "lodash-es/uniqueId";
-import { S as B, b as g, a as I } from "./statusLevels-D8EgtE_L.js";
-import { t as d } from "./locale.js";
-import z from "./Button.js";
+import { S as I, b as g, a as w } from "./statusLevels-D8EgtE_L.js";
+import { t as i } from "./locale.js";
+import D from "./Button.js";
 import Q from "./Icon.js";
 import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
   key: 0,
-  class: "tw-mb-0"
-}, tt = ["innerHTML"], et = { class: "tw-text-right" }, ot = /* @__PURE__ */ A({
+  class: "mb-0"
+}, tt = ["innerHTML"], et = { class: "text-right" }, ot = /* @__PURE__ */ A({
   name: "ll-dialog",
   inheritAttrs: !1,
   __name: "Dialog",
@@ -17,9 +17,9 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
     open: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     dangerZone: { type: Boolean, default: !1 },
-    header: { default: d("ll.areYouSure") },
+    header: { default: i("ll.areYouSure") },
     description: { default: "" },
-    cancelText: { default: d("ll.cancel") },
+    cancelText: { default: i("ll.cancel") },
     confirmText: { default: "" },
     onConfirm: { type: Function, default: () => {
     } },
@@ -27,18 +27,18 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
     status: { default: void 0 }
   },
   emits: ["update:open", "cancel"],
-  setup(D, { emit: M }) {
-    const t = D, b = M, h = H(), v = K(), n = L(), w = O("dialog-header-"), r = T(!1), i = T(), E = s(() => t.confirmText || (t.alert ? d("ll.okay") : d("ll.confirm"))), x = s(() => !!h.default || t.description), N = s(
-      () => t.status ? B[y(t.status)] : B.Info
-    ), V = s(
-      () => t.status ? g[y(t.status)] : g.Info
-    ), k = s(
+  setup(M, { emit: E }) {
+    const t = M, b = E, h = H(), v = K(), n = L(), x = O("dialog-header-"), r = S(!1), c = S(), N = s(() => t.confirmText || (t.alert ? i("ll.okay") : i("ll.confirm"))), k = s(() => !!h.default || t.description), V = s(
       () => t.status ? I[y(t.status)] : I.Info
-    ), $ = s(() => t.dangerZone || t.status === g.Error);
-    function C() {
+    ), $ = s(
+      () => t.status ? g[y(t.status)] : g.Info
+    ), C = s(
+      () => t.status ? w[y(t.status)] : w.Info
+    ), Z = s(() => t.dangerZone || t.status === g.Error);
+    function T() {
       b("update:open", !1), b("cancel");
     }
-    async function Z(u) {
+    async function z(u) {
       if (!r.value) {
         r.value = !0;
         try {
@@ -49,30 +49,30 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
       }
     }
     return q(() => {
-      t.open && i.value && F(function() {
-        i.value.focus();
+      t.open && c.value && F(function() {
+        c.value.focus();
       });
-    }), (u, it) => (l(), f(P, { name: "fade" }, {
+    }), (u, ct) => (l(), f(P, { name: "fade" }, {
       default: m(() => [
         t.open ? (l(), _("dialog", Y({
           key: 0,
           ref_key: "root",
-          ref: i,
+          ref: c,
           open: t.open,
           tabindex: "0",
-          "aria-labelledby": e(w),
+          "aria-labelledby": e(x),
           "aria-modal": "true",
           class: ["stash-dialog", e(n).dialog],
           "data-test": e(v)["data-test"] || "ll-dialog"
         }, e(v), {
-          onKeydown: j(C, ["esc"])
+          onKeydown: j(T, ["esc"])
         }), [
           a("div", {
             class: o(["stash-dialog__body", [
               e(n).body,
-              `tw-border-${k.value}`,
+              `border-${C.value}`,
               {
-                "tw-border-t-6": t.status
+                "border-t-6": t.status
               }
             ]]),
             "data-test": "stash-dialog|body"
@@ -82,26 +82,26 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
               "data-test": "stash-dialog|body-content"
             }, [
               a("div", {
-                class: o(["tw-flex tw-items-start", x.value && "tw-mb-1.5"])
+                class: o(["flex items-start", k.value && "mb-1.5"])
               }, [
                 t.status ? (l(), f(Q, {
                   key: 0,
                   "data-test": "dialog-status-icon",
-                  name: N.value,
-                  title: V.value,
-                  class: o(`tw-text-${k.value}`)
-                }, null, 8, ["name", "title", "class"])) : c("", !0),
+                  name: V.value,
+                  title: $.value,
+                  class: o(`text-${C.value}`)
+                }, null, 8, ["name", "title", "class"])) : d("", !0),
                 a("h3", {
-                  id: e(w),
-                  class: o({ "tw-ml-1.5 tw-mt-px": t.status })
+                  id: e(x),
+                  class: o({ "ml-1.5 mt-px": t.status })
                 }, p(t.header), 11, W)
               ], 2),
-              x.value ? (l(), _("p", X, [
+              k.value ? (l(), _("p", X, [
                 e(h).default ? G(u.$slots, "default", { key: 0 }) : (l(), _("span", {
                   key: 1,
                   innerHTML: t.description
                 }, null, 8, tt))
-              ])) : c("", !0)
+              ])) : d("", !0)
             ], 2),
             a("footer", {
               class: o(["stash-dialog__footer", e(n).footer]),
@@ -111,29 +111,29 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
                 a("div", {
                   class: o({ "button-grid": !t.alert })
                 }, [
-                  t.alert ? c("", !0) : (l(), f(z, {
+                  t.alert ? d("", !0) : (l(), f(D, {
                     key: 0,
                     "data-test": "button|cancel",
                     secondary: "",
-                    onClick: C
+                    onClick: T
                   }, {
                     default: m(() => [
-                      S(p(t.cancelText), 1)
+                      B(p(t.cancelText), 1)
                     ]),
                     _: 1
                   })),
-                  J(z, {
+                  J(D, {
                     "data-test": "button|confirm",
                     disabled: t.disabled,
                     "is-loading": r.value,
-                    color: $.value ? "red" : "blue",
+                    color: Z.value ? "red" : "blue",
                     class: o({
-                      "tw-w-full": t.alert
+                      "w-full": t.alert
                     }),
-                    onClick: Z
+                    onClick: z
                   }, {
                     default: m(() => [
-                      S(p(E.value), 1)
+                      B(p(N.value), 1)
                     ]),
                     _: 1
                   }, 8, ["disabled", "is-loading", "color", "class"])
@@ -141,20 +141,20 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
               ])
             ], 2)
           ], 2)
-        ], 16, U)) : c("", !0)
+        ], 16, U)) : d("", !0)
       ]),
       _: 3
     }));
   }
-}), at = "_dialog_1fzac_2", st = "_body_1fzac_19", lt = "_grey_1fzac_32", nt = "_content_1fzac_42", rt = "_footer_1fzac_47", ct = {
+}), at = "_dialog_u78oe_5", st = "_body_u78oe_22", lt = "_grey_u78oe_35", nt = "_content_u78oe_45", rt = "_footer_u78oe_50", dt = {
   dialog: at,
   body: st,
   grey: lt,
   content: nt,
   footer: rt
-}, dt = {
-  $style: ct
-}, ht = /* @__PURE__ */ R(ot, [["__cssModules", dt]]);
+}, it = {
+  $style: dt
+}, ht = /* @__PURE__ */ R(ot, [["__cssModules", it]]);
 export {
   ht as default
 };

package/dist/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import {\n    StatusColor,\n    StatusColors,\n    StatusIcon,\n    StatusIcons,\n    StatusSeverities,\n    StatusSeverity,\n  } from '../../../types/statusLevels';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface DialogProps {\n    /**\n     * Shows or hides the dialog.\n     * Usage: v-model:open=\"isOpen\"\n     */\n    open?: boolean;\n\n    /**\n     * Whether the confirmation button is enabled or not.\n     */\n    disabled?: boolean;\n\n    /**\n     * Is this a dangerous action? Will turn the confirmation button red.\n     */\n    dangerZone?: boolean;\n\n    /**\n     * Header text.\n     */\n    header?: string;\n\n    /**\n     * Description text.\n     */\n    description?: string;\n\n    /**\n     * Cancel button text.\n     */\n    cancelText?: string;\n\n    /**\n     * Confirm button text.\n     */\n    confirmText?: string;\n\n    /**\n     * Callback function when the confirm button is clicked.\n     */\n    onConfirm?: (event: Event) => Promise<void> | void;\n\n    /**\n     * Treats it like an Alert Dialog, with only the confirmation button showing.\n     *\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/alert}\n     */\n    alert?: boolean;\n\n    /**\n     * Adds a top accent border and icon next to the header.\n     * This behaves similarly to the Alert component in respect to the levels, icons, and colors\n     * passing `error` will treat the dialog the same as `dangerZone`\n     */\n    status?: StatusSeverity;\n  }\n\n  const props = withDefaults(defineProps<DialogProps>(), {\n    open: false,\n    disabled: false,\n    dangerZone: false,\n    header: t('ll.areYouSure'),\n    description: '',\n    cancelText: t('ll.cancel'),\n    confirmText: '',\n    onConfirm: () => undefined,\n    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits = defineEmits<{\n    (e: 'update:open', value: boolean): void;\n    (e: 'cancel'): void;\n  }>();\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const headerId = uniqueId('dialog-header-');\n\n  const isConfirming = ref(false);\n  const root = ref();\n\n  // Set the default confirm button text to \"Confirm\".\n  // If the `alert` prop is true, the default text is \"Okay\".\n  // If the `confirmText` prop is provided, `confirmText` is used whether the alert prop is true.\n  const modifiedConfirmText = computed(() => props.confirmText || (props.alert ? t('ll.okay') : t('ll.confirm')));\n\n  const hasDescription = computed(() => !!slots.default || props.description);\n\n  const statusIcon = computed<StatusIcon>(() =>\n    props.status ? StatusIcons[capitalize(props.status)] : StatusIcons.Info,\n  );\n  const statusTitle = computed<StatusSeverity>(() =>\n    props.status ? StatusSeverities[capitalize(props.status)] : StatusSeverities.Info,\n  );\n  const statusColor = computed<StatusColor>(() =>\n    props.status ? StatusColors[capitalize(props.status)] : StatusColors.Info,\n  );\n\n  const computedDangerZone = computed(() => props.dangerZone || props.status === StatusSeverities.Error);\n\n  function cancel() {\n    emits('update:open', false);\n    emits('cancel');\n  }\n\n  async function handleConfirm(event: Event) {\n    if (isConfirming.value) {\n      return;\n    }\n\n    isConfirming.value = true;\n\n    try {\n      await props.onConfirm(event);\n    } finally {\n      isConfirming.value = false;\n    }\n  }\n\n  watchEffect(() => {\n    if (props.open && root.value) {\n      // Move focus to confirm button\n      nextTick(function () {\n        root.value.focus();\n      });\n    }\n  });\n</script>\n\n<template>\n  <transition name=\"fade\">\n    <dialog\n      v-if=\"props.open\"\n      ref=\"root\"\n      :open=\"props.open\"\n      tabindex=\"0\"\n      :aria-labelledby=\"headerId\"\n      aria-modal=\"true\"\n      class=\"stash-dialog\"\n      :class=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        class=\"stash-dialog__body\"\n        :class=\"[\n          classes.body,\n          `tw-border-${statusColor}`,\n          {\n            'tw-border-t-6': props.status,\n          },\n        ]\"\n        data-test=\"stash-dialog|body\"\n      >\n        <div class=\"stash-dialog__body__content\" :class=\"classes.content\" data-test=\"stash-dialog|body-content\">\n          <div class=\"tw-flex tw-items-start\" :class=\"hasDescription && 'tw-mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :title=\"statusTitle\"\n              :class=\"`tw-text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'tw-ml-1.5 tw-mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"tw-mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer class=\"stash-dialog__footer\" :class=\"classes.footer\" data-test=\"stash-dialog|footer\">\n          <div class=\"tw-text-right\">\n            <div :class=\"{ 'button-grid': !props.alert }\">\n              <Button v-if=\"!props.alert\" data-test=\"button|cancel\" secondary @click=\"cancel\">\n                {{ props.cancelText }}\n              </Button>\n\n              <Button\n                data-test=\"button|confirm\"\n                :disabled=\"props.disabled\"\n                :is-loading=\"isConfirming\"\n                :color=\"computedDangerZone ? 'red' : 'blue'\"\n                :class=\"{\n                  'tw-w-full': props.alert,\n                }\"\n                @click=\"handleConfirm\"\n              >\n                {{ modifiedConfirmText }}\n              </Button>\n            </div>\n          </div>\n        </footer>\n      </div>\n    </dialog>\n  </transition>\n</template>\n\n<style module>\n  .dialog {\n    background: rgb(0 0 0 / 30%);\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    place-content: center;\n    position: fixed;\n    right: 0;\n    top: 0;\n    z-index: theme('zIndex.dialog');\n    width: 100%;\n    height: 100vh;\n  }\n\n  .body {\n    @apply tw-shadow-3xl;\n\n    background: var(--color-white);\n    color: var(--color-ice-700);\n    display: flex;\n    flex-direction: column;\n    margin: 0 auto;\n    max-height: 100vh;\n    max-width: 360px;\n    transition: transform theme('transitionDuration.150') theme('transitionTimingFunction.swing');\n    width: 100%;\n\n    &.grey {\n      background: var(--color-ice-200);\n      border-radius: theme('borderRadius.DEFAULT');\n    }\n\n    @media screen('md') {\n      border-radius: theme('borderRadius.DEFAULT');\n    }\n  }\n\n  .content {\n    flex-grow: 1;\n    padding: theme('spacing.6') var(--grid-gutter);\n  }\n\n  .footer {\n    background: var(--color-ice-200);\n    border-top: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    display: initial; /* TEMP. Will need to fix marketplace `footer` style */\n    padding: theme('spacing.6') var(--grid-gutter);\n\n    @media screen('md') {\n      border-bottom-left-radius: theme('borderRadius.DEFAULT');\n      border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    }\n  }\n\n  :global(.fade-enter-from),\n  :global(.fade-leave-active) {\n    .body {\n      transform: translate3d(0, theme('spacing.3'), 0);\n    }\n  }\n</style>\n"],"names":["props","__props","emits","__emit","slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","t","hasDescription","statusIcon","StatusIcons","capitalize","statusTitle","StatusSeverities","statusColor","StatusColors","computedDangerZone","cancel","handleConfirm","event","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EE,UAAMA,IAAQC,GAkBRC,IAAQC,GAKRC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,EAAA,GAKPE,IAAsBC,EAAS,MAAMhB,EAAM,gBAAgBA,EAAM,QAAQiB,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBF,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWJ,EAAM,WAAW,GAEpEmB,IAAaH;AAAA,MAAqB,MACtChB,EAAM,SAASoB,EAAYC,EAAWrB,EAAM,MAAM,CAAC,IAAIoB,EAAY;AAAA,IAAA,GAE/DE,IAAcN;AAAA,MAAyB,MAC3ChB,EAAM,SAASuB,EAAiBF,EAAWrB,EAAM,MAAM,CAAC,IAAIuB,EAAiB;AAAA,IAAA,GAEzEC,IAAcR;AAAA,MAAsB,MACxChB,EAAM,SAASyB,EAAaJ,EAAWrB,EAAM,MAAM,CAAC,IAAIyB,EAAa;AAAA,IAAA,GAGjEC,IAAqBV,EAAS,MAAMhB,EAAM,cAAcA,EAAM,WAAWuB,EAAiB,KAAK;AAErG,aAASI,IAAS;AAChB,MAAAzB,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAe0B,EAAcC,GAAc;AACzC,UAAI,CAAAjB,EAAa,OAIjB;AAAA,QAAAA,EAAa,QAAQ;AAErB,YAAI;AACF,gBAAMZ,EAAM,UAAU6B,CAAK;AAAA,QAC7B,UAAA;AACE,UAAAjB,EAAa,QAAQ;AAAA,QACvB;AAAA;AAAA,IACF;AAEA,WAAAkB,EAAY,MAAM;AAChB,MAAI9B,EAAM,QAAQc,EAAK,SAErBiB,EAAS,WAAY;AACnB,QAAAjB,EAAK,MAAM,MAAA;AAAA,MACb,CAAC;AAAA,IAEL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Dialog.js","sources":["../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import {\n    StatusColor,\n    StatusColors,\n    StatusIcon,\n    StatusIcons,\n    StatusSeverities,\n    StatusSeverity,\n  } from '../../../types/statusLevels';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface DialogProps {\n    /**\n     * Shows or hides the dialog.\n     * Usage: v-model:open=\"isOpen\"\n     */\n    open?: boolean;\n\n    /**\n     * Whether the confirmation button is enabled or not.\n     */\n    disabled?: boolean;\n\n    /**\n     * Is this a dangerous action? Will turn the confirmation button red.\n     */\n    dangerZone?: boolean;\n\n    /**\n     * Header text.\n     */\n    header?: string;\n\n    /**\n     * Description text.\n     */\n    description?: string;\n\n    /**\n     * Cancel button text.\n     */\n    cancelText?: string;\n\n    /**\n     * Confirm button text.\n     */\n    confirmText?: string;\n\n    /**\n     * Callback function when the confirm button is clicked.\n     */\n    onConfirm?: (event: Event) => Promise<void> | void;\n\n    /**\n     * Treats it like an Alert Dialog, with only the confirmation button showing.\n     *\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/alert}\n     */\n    alert?: boolean;\n\n    /**\n     * Adds a top accent border and icon next to the header.\n     * This behaves similarly to the Alert component in respect to the levels, icons, and colors\n     * passing `error` will treat the dialog the same as `dangerZone`\n     */\n    status?: StatusSeverity;\n  }\n\n  const props = withDefaults(defineProps<DialogProps>(), {\n    open: false,\n    disabled: false,\n    dangerZone: false,\n    header: t('ll.areYouSure'),\n    description: '',\n    cancelText: t('ll.cancel'),\n    confirmText: '',\n    onConfirm: () => undefined,\n    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits = defineEmits<{\n    (e: 'update:open', value: boolean): void;\n    (e: 'cancel'): void;\n  }>();\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const headerId = uniqueId('dialog-header-');\n\n  const isConfirming = ref(false);\n  const root = ref();\n\n  // Set the default confirm button text to \"Confirm\".\n  // If the `alert` prop is true, the default text is \"Okay\".\n  // If the `confirmText` prop is provided, `confirmText` is used whether the alert prop is true.\n  const modifiedConfirmText = computed(() => props.confirmText || (props.alert ? t('ll.okay') : t('ll.confirm')));\n\n  const hasDescription = computed(() => !!slots.default || props.description);\n\n  const statusIcon = computed<StatusIcon>(() =>\n    props.status ? StatusIcons[capitalize(props.status)] : StatusIcons.Info,\n  );\n  const statusTitle = computed<StatusSeverity>(() =>\n    props.status ? StatusSeverities[capitalize(props.status)] : StatusSeverities.Info,\n  );\n  const statusColor = computed<StatusColor>(() =>\n    props.status ? StatusColors[capitalize(props.status)] : StatusColors.Info,\n  );\n\n  const computedDangerZone = computed(() => props.dangerZone || props.status === StatusSeverities.Error);\n\n  function cancel() {\n    emits('update:open', false);\n    emits('cancel');\n  }\n\n  async function handleConfirm(event: Event) {\n    if (isConfirming.value) {\n      return;\n    }\n\n    isConfirming.value = true;\n\n    try {\n      await props.onConfirm(event);\n    } finally {\n      isConfirming.value = false;\n    }\n  }\n\n  watchEffect(() => {\n    if (props.open && root.value) {\n      // Move focus to confirm button\n      nextTick(function () {\n        root.value.focus();\n      });\n    }\n  });\n</script>\n\n<template>\n  <transition name=\"fade\">\n    <dialog\n      v-if=\"props.open\"\n      ref=\"root\"\n      :open=\"props.open\"\n      tabindex=\"0\"\n      :aria-labelledby=\"headerId\"\n      aria-modal=\"true\"\n      class=\"stash-dialog\"\n      :class=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        class=\"stash-dialog__body\"\n        :class=\"[\n          classes.body,\n          `border-${statusColor}`,\n          {\n            'border-t-6': props.status,\n          },\n        ]\"\n        data-test=\"stash-dialog|body\"\n      >\n        <div class=\"stash-dialog__body__content\" :class=\"classes.content\" data-test=\"stash-dialog|body-content\">\n          <div class=\"flex items-start\" :class=\"hasDescription && 'mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :title=\"statusTitle\"\n              :class=\"`text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'ml-1.5 mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer class=\"stash-dialog__footer\" :class=\"classes.footer\" data-test=\"stash-dialog|footer\">\n          <div class=\"text-right\">\n            <div :class=\"{ 'button-grid': !props.alert }\">\n              <Button v-if=\"!props.alert\" data-test=\"button|cancel\" secondary @click=\"cancel\">\n                {{ props.cancelText }}\n              </Button>\n\n              <Button\n                data-test=\"button|confirm\"\n                :disabled=\"props.disabled\"\n                :is-loading=\"isConfirming\"\n                :color=\"computedDangerZone ? 'red' : 'blue'\"\n                :class=\"{\n                  'w-full': props.alert,\n                }\"\n                @click=\"handleConfirm\"\n              >\n                {{ modifiedConfirmText }}\n              </Button>\n            </div>\n          </div>\n        </footer>\n      </div>\n    </dialog>\n  </transition>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .dialog {\n      background: rgb(0 0 0 / 30%);\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      left: 0;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      place-content: center;\n      position: fixed;\n      right: 0;\n      top: 0;\n      z-index: var(--z-index-dialog);\n      width: 100%;\n      height: 100vh;\n    }\n\n    .body {\n      @apply shadow-3xl;\n\n      background: var(--color-white);\n      color: var(--color-ice-700);\n      display: flex;\n      flex-direction: column;\n      margin: 0 auto;\n      max-height: 100vh;\n      max-width: 360px;\n      transition: transform 150 var(--ease-swing);\n      width: 100%;\n\n      &.grey {\n        background: var(--color-ice-200);\n        border-radius: var(--radius-sm);\n      }\n\n      @media (width >= theme(--breakpoint-md)) {\n        border-radius: var(--radius-sm);\n      }\n    }\n\n    .content {\n      flex-grow: 1;\n      padding: --spacing(6) var(--grid-gutter);\n    }\n\n    .footer {\n      background: var(--color-ice-200);\n      border-top: var(--border-width) solid var(--color-ice-500);\n      display: initial; /* TEMP. Will need to fix marketplace `footer` style */\n      padding: --spacing(6) var(--grid-gutter);\n\n      @media (width >= theme(--breakpoint-md)) {\n        border-bottom-left-radius: var(--radius-sm);\n        border-bottom-right-radius: var(--radius-sm);\n      }\n    }\n\n    :global(.fade-enter-from),\n    :global(.fade-leave-active) {\n      .body {\n        transform: translate3d(0, --spacing(3), 0);\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emits","__emit","slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","t","hasDescription","statusIcon","StatusIcons","capitalize","statusTitle","StatusSeverities","statusColor","StatusColors","computedDangerZone","cancel","handleConfirm","event","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EE,UAAMA,IAAQC,GAkBRC,IAAQC,GAKRC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,EAAA,GAKPE,IAAsBC,EAAS,MAAMhB,EAAM,gBAAgBA,EAAM,QAAQiB,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBF,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWJ,EAAM,WAAW,GAEpEmB,IAAaH;AAAA,MAAqB,MACtChB,EAAM,SAASoB,EAAYC,EAAWrB,EAAM,MAAM,CAAC,IAAIoB,EAAY;AAAA,IAAA,GAE/DE,IAAcN;AAAA,MAAyB,MAC3ChB,EAAM,SAASuB,EAAiBF,EAAWrB,EAAM,MAAM,CAAC,IAAIuB,EAAiB;AAAA,IAAA,GAEzEC,IAAcR;AAAA,MAAsB,MACxChB,EAAM,SAASyB,EAAaJ,EAAWrB,EAAM,MAAM,CAAC,IAAIyB,EAAa;AAAA,IAAA,GAGjEC,IAAqBV,EAAS,MAAMhB,EAAM,cAAcA,EAAM,WAAWuB,EAAiB,KAAK;AAErG,aAASI,IAAS;AAChB,MAAAzB,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAe0B,EAAcC,GAAc;AACzC,UAAI,CAAAjB,EAAa,OAIjB;AAAA,QAAAA,EAAa,QAAQ;AAErB,YAAI;AACF,gBAAMZ,EAAM,UAAU6B,CAAK;AAAA,QAC7B,UAAA;AACE,UAAAjB,EAAa,QAAQ;AAAA,QACvB;AAAA;AAAA,IACF;AAEA,WAAAkB,EAAY,MAAM;AAChB,MAAI9B,EAAM,QAAQc,EAAK,SAErBiB,EAAS,WAAY;AACnB,QAAAjB,EAAK,MAAM,MAAA;AAAA,MACb,CAAC;AAAA,IAEL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Divider.js

@@ -1,13 +1,13 @@
-import { createElementBlock as t, openBlock as s, normalizeClass as r, renderSlot as o } from "vue";
+import { createElementBlock as s, openBlock as r, normalizeClass as t, renderSlot as o } from "vue";
 import { _ as a } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const c = "_separator_5w47w_2", l = {
+const c = "_separator_9qzqr_5", l = {
   separator: c
 }, n = {
   name: "ll-divider"
 };
 function p(e, i, _, f, m, u) {
-  return s(), t("div", {
-    class: r(["tw-flex tw-items-center tw-text-center tw-uppercase", e.$style.separator]),
+  return r(), s("div", {
+    class: t(["flex items-center text-center uppercase", e.$style.separator]),
     role: "separator"
   }, [
     o(e.$slots, "default")
@@ -15,8 +15,8 @@ function p(e, i, _, f, m, u) {
 }
 const d = {
   $style: l
-}, v = /* @__PURE__ */ a(n, [["render", p], ["__cssModules", d]]);
+}, x = /* @__PURE__ */ a(n, [["render", p], ["__cssModules", d]]);
 export {
-  v as default
+  x as default
 };
 //# sourceMappingURL=Divider.js.map

package/dist/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../src/components/Divider/Divider.vue"],"sourcesContent":["<script>\n  export default {\n    name: 'll-divider',\n  };\n</script>\n\n<template>\n  <div class=\"tw-flex tw-items-center tw-text-center tw-uppercase\" :class=\"$style.separator\" role=\"separator\">\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  .separator::before,\n  .separator::after {\n    border-bottom: 1px solid var(--color-ice-200);\n    content: '';\n    flex: 1;\n  }\n\n  .separator:not(:empty)::before {\n    margin-right: theme('spacing.3');\n  }\n\n  .separator:not(:empty)::after {\n    margin-left: theme('spacing.3');\n  }\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","_ctx","_renderSlot"],"mappings":";;;;GACOA,IAAU;AAAA,EACb,MAAM;;;cAKRC,EAEM,OAAA;AAAA,IAFD,OAPPC,EAAA,CAOa,uDAA8DC,EAAA,OAAO,SAAS,CAAA;AAAA,IAAE,MAAK;AAAA;IAC9FC,EAAaD,EAAA,QAAA,SAAA;AAAA;;;;;"}
+{"version":3,"file":"Divider.js","sources":["../src/components/Divider/Divider.vue"],"sourcesContent":["<script>\n  export default {\n    name: 'll-divider',\n  };\n</script>\n\n<template>\n  <div class=\"flex items-center text-center uppercase\" :class=\"$style.separator\" role=\"separator\">\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .separator::before,\n    .separator::after {\n      border-bottom: 1px solid var(--color-ice-200);\n      content: '';\n      flex: 1;\n    }\n\n    .separator:not(:empty)::before {\n      margin-right: --spacing(3);\n    }\n\n    .separator:not(:empty)::after {\n      margin-left: --spacing(3);\n    }\n  }\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","_ctx","_renderSlot"],"mappings":";;;;GACOA,IAAU;AAAA,EACb,MAAM;;;cAKRC,EAEM,OAAA;AAAA,IAFD,OAPPC,EAAA,CAOa,2CAAkDC,EAAA,OAAO,SAAS,CAAA;AAAA,IAAE,MAAK;AAAA;IAClFC,EAAaD,EAAA,QAAA,SAAA;AAAA;;;;;"}

package/dist/Dropdown.js

@@ -1,5 +1,5 @@
 import { defineComponent as I, ref as r, useCssModule as q, watch as C, onMounted as K, onBeforeUnmount as R, computed as U, withDirectives as _, createElementBlock as k, openBlock as m, renderSlot as x, createVNode as E, createElementVNode as b, normalizeClass as S, createBlock as V, createTextVNode as W, toDisplayString as Y, Transition as F, withCtx as j, normalizeStyle as G, unref as M, vShow as H, nextTick as A } from "vue";
-import { KEY_CODES as f } from "./constants.js";
+import { KEY_CODES as d } from "./constants.js";
 import J from "./directives/clickoutside.js";
 import Q from "./utils/calculateElementOverflow.js";
 import { getMountPoint as X } from "./utils/helpers.js";
@@ -7,7 +7,7 @@ import B from "./Icon.js";
 import { _ as Z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const ee = ["aria-expanded"], te = {
   key: 0,
-  class: "tw-flex tw-items-center tw-font-medium tw-text-blue-500 hover:tw-text-blue-700"
+  class: "flex items-center font-medium text-blue-500 hover:text-blue-700"
 }, le = /* @__PURE__ */ I({
   name: "ll-dropdown",
   __name: "Dropdown",
@@ -22,18 +22,18 @@ const ee = ["aria-expanded"], te = {
   },
   emits: ["toggle", "dismiss"],
   setup(D, { expose: $, emit: L }) {
-    const a = D, p = L, t = r(null), w = r(null), d = [], s = r(d), i = r(-1), l = r(!1), g = r({}), T = q();
+    const a = D, p = L, t = r(null), g = r(null), f = [], s = r(f), i = r(-1), l = r(!1), y = r({}), T = q();
     C(l, (e) => {
       e || (i.value = -1), p("toggle", e);
     }), C(i, (e, o) => {
-      e in s.value && s.value[e].classList.add("tw-bg-ice-200"), o in s.value && s.value[o].classList.remove("tw-bg-ice-200");
+      e in s.value && s.value[e].classList.add("bg-ice-200"), o in s.value && s.value[o].classList.remove("bg-ice-200");
     }), K(() => {
       var e, o, n;
       if (a.reattach) {
         const c = X();
         t.value && c.appendChild(t.value);
       }
-      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((o = t.value) == null ? void 0 : o.querySelectorAll(".stash-menu-item")) ?? d : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? d, window.addEventListener("resize", () => u());
+      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((o = t.value) == null ? void 0 : o.querySelectorAll(".stash-menu-item")) ?? f : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? f, window.addEventListener("resize", () => u());
     }), R(() => {
       var e, o;
       window.removeEventListener("resize", () => u()), (o = (e = t == null ? void 0 : t.value) == null ? void 0 : e.parentNode) == null || o.removeChild(t.value);
@@ -50,13 +50,13 @@ const ee = ["aria-expanded"], te = {
       l.value ? l.value = !1 : (l.value = !0, await z(), (e = t.value) == null || e.focus());
     }
     function N(e) {
-      if (e.keyCode === f.ESCAPE)
+      if (e.keyCode === d.ESCAPE)
         u();
-      else if (e.keyCode === f.DOWN && i.value < s.value.length - 1 && l.value)
+      else if (e.keyCode === d.DOWN && i.value < s.value.length - 1 && l.value)
         i.value++;
-      else if (e.keyCode === f.UP && i.value > -1 && l.value)
+      else if (e.keyCode === d.UP && i.value > -1 && l.value)
         i.value--;
-      else if (e.keyCode === f.ENTER && i.value !== -1 && l.value)
+      else if (e.keyCode === d.ENTER && i.value !== -1 && l.value)
         s[i.value].click();
       else
         return;
@@ -67,14 +67,14 @@ const ee = ["aria-expanded"], te = {
       (e = t.value) == null || e.style.setProperty("--offset", "0");
     }
     async function z() {
-      var y, h;
+      var w, h;
       await A();
-      const e = ((y = w.value) == null ? void 0 : y.getBoundingClientRect()) || {}, o = e.top + e.height, n = {
+      const e = ((w = g.value) == null ? void 0 : w.getBoundingClientRect()) || {}, o = e.top + e.height, n = {
         x: 0,
         y: 0,
         ...a.offset
       };
-      a.reattach && (g.value = {
+      a.reattach && (y.value = {
         left: a.align === "left" ? `${Math.round(e.left) + n.x}px` : void 0,
         right: a.align === "right" ? `${document.documentElement.clientWidth - Math.round(e.right) + n.x}px` : void 0,
         top: `${window.scrollY + o + n.y}px`
@@ -91,8 +91,8 @@ const ee = ["aria-expanded"], te = {
       dismiss: u
     }), (e, o) => _((m(), k("div", {
       ref_key: "dropdownRef",
-      ref: w,
-      class: "tw-relative tw-inline-block",
+      ref: g,
+      class: "relative inline-block",
       "data-test": "ll-dropdown",
       onKeydown: N
     }, [
@@ -103,7 +103,7 @@ const ee = ["aria-expanded"], te = {
         b("button", {
           "data-test": "button|toggle",
           "aria-expanded": l.value,
-          class: S([e.label ? "tw-min-w-auto tw-outline-none" : "tw-rounded tw-p-3"]),
+          class: S([e.label ? "outline-hidden min-w-auto" : "rounded p-3"]),
           onClick: v
         }, [
           e.label ? (m(), k("span", te, [
@@ -128,12 +128,12 @@ const ee = ["aria-expanded"], te = {
               M(T).content,
               e.contentClass,
               {
-                "tw-left-0 after:tw-left-6": a.align === "left",
-                "tw-right-0": a.align === "right",
-                "tw-max-w-[360px]": !a.fluidContent
+                "left-0 after:left-6": a.align === "left",
+                "right-0": a.align === "right",
+                "max-w-[360px]": !a.fluidContent
               }
             ]),
-            style: G(g.value)
+            style: G(y.value)
           }, [
             x(e.$slots, "default", {
               dismiss: u,
@@ -149,7 +149,7 @@ const ee = ["aria-expanded"], te = {
       [M(J), u]
     ]);
   }
-}), oe = "_content_zbxyu_2", ae = {
+}), oe = "_content_81ltz_5", ae = {
   content: oe
 }, ne = {
   $style: ae