@cypress-design/vue-alert 1.0.0 → 1.1.0

package/.turbo/turbo-build.log

@@ -1,14 +1,9 @@
-$ yarn build:module && yarn build:types
-$ yarn vite build
-$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
-The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
-vite v5.2.12 building for production...
+The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
+vite v5.4.19 building for production...
 transforming...
 ✓ 4 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.mjs  7.83 kB │ gzip: 2.13 kB │ map: 11.41 kB
-dist/index.umd.js  6.23 kB │ gzip: 1.92 kB │ map: 10.97 kB
-✓ built in 3.71s
-$ yarn vue-tsc --project ./tsconfig.build.json
-$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json
+dist/index.es.mjs  6.99 kB │ gzip: 2.00 kB │ map: 11.56 kB
+dist/index.umd.js  5.39 kB │ gzip: 1.78 kB │ map: 11.12 kB
+✓ built in 2.54s

package/Alert.vue

@@ -10,12 +10,12 @@ import {
 import { DetailsAnimation } from '@cypress-design/details-animation'
 import {
   AlertSize,
-  alertSizesClasses,
+  CssAlertSizesClasses,
   AlertVariant,
   defaultAlertSize,
   defaultAlertTitle,
   defaultAlertVariant,
-  alertClasses,
+  CssAlertClasses,
 } from '@cypress-design/constants-alert'
 
 const dismissed = ref(false)
@@ -81,7 +81,7 @@ const detailsRef = ref(null)
 const contentRef = ref(null)
 
 const variantClasses = computed(() => {
-  return alertClasses[variant.value] ?? {}
+  return CssAlertClasses[variant.value] ?? {}
 })
 
 let timeout: number | undefined
@@ -136,7 +136,7 @@ const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
 })
 
 const sizeClasses = computed(() => {
-  return alertSizesClasses[props.size] ?? {}
+  return CssAlertSizesClasses[props.size] ?? {}
 })
 </script>
 

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/vue-alert
 
+## 1.1.0
+
+### Minor Changes
+
+- [#733](https://github.com/cypress-io/cypress-design/pull/733) [`5e916fb`](https://github.com/cypress-io/cypress-design/commit/5e916fbe2b83d1503ed80820a85a8705bdcaeef1) Thanks [@jennifer-shehane](https://github.com/jennifer-shehane)! - Depend on `@cypress-design/vue-icon` and `@cypress-design/react-icon` 3.x. These packages were last published against icon 1.x, so installs stayed on 1.x and missed the 3.x fixes, including tree-shakable named icon imports. None of the icons these components use were renamed or removed in 2.0 or 3.0, so there are no API changes. `@cypress-design/vue-modal` now also lists `@cypress-design/vue-icon` as a dependency instead of a devDependency, since its build imports it at runtime.
+
 ## 1.0.0
 
 ### Major Changes

package/ReadMe.md

@@ -18,7 +18,7 @@ yarn add @cypress-design/vue-alert
 import Alert from '@cypress-design/vue-alert'
 ```
 
-The simplest is to use with plain text. By default, type is `info`.
+The simplest is to use with plain text. By default, `variant` is `info`.
 
 ```jsx live
 <Alert variant="error">Great Scott!!</Alert>

package/dist/index.es.mjs

@@ -1,5 +1,5 @@
-import { defineComponent as T, ref as m, useSlots as B, computed as i, onMounted as k, onUnmounted as D, h as v, openBlock as a, createElementBlock as d, normalizeClass as l, createElementVNode as c, renderSlot as u, normalizeProps as j, guardReactiveProps as S, createBlock as $, resolveDynamicComponent as V, mergeProps as N, createCommentVNode as t, createVNode as w, unref as C, createTextVNode as P, toDisplayString as _ } from "vue";
-import { IconWarningCircle as z, IconCheckmarkOutline as E, IconActionDeleteLarge as L, IconChevronDownSmall as M } from "@cypress-design/vue-icon";
+import { defineComponent as T, ref as m, useSlots as B, computed as i, onMounted as k, onUnmounted as D, h as v, createElementBlock as d, createCommentVNode as a, openBlock as l, normalizeClass as t, createElementVNode as c, renderSlot as u, normalizeProps as j, guardReactiveProps as S, createBlock as $, resolveDynamicComponent as V, mergeProps as N, createVNode as w, unref as C, createTextVNode as P, toDisplayString as _ } from "vue";
+import { IconWarningCircle as A, IconCheckmarkOutline as E, IconActionDeleteLarge as L, IconChevronDownSmall as M } from "@cypress-design/vue-icon";
 import { DetailsAnimation as O } from "@cypress-design/details-animation";
 const U = {
   xs: "py-[4px] px-[8px] leading-[22px] text-[14px]",
@@ -93,8 +93,8 @@ const U = {
     size: { default: W }
   },
   emits: ["dismiss"],
-  setup(A, { emit: H }) {
-    const x = m(!1), y = B(), I = H, o = A, b = i(() => o.variant ?? o.type), p = m(null), g = m(null), e = i(() => q[b.value] ?? {});
+  setup(z, { emit: H }) {
+    const x = m(!1), y = B(), I = H, o = z, b = i(() => o.variant ?? o.type), p = m(null), g = m(null), e = i(() => q[b.value] ?? {});
     let s;
     k(() => {
       o.duration && (s = setTimeout(f, o.duration));
@@ -116,27 +116,27 @@ const U = {
         case "success":
           return () => v(E, n.value);
         case "warning":
-          return () => v(z, n.value);
+          return () => v(A, n.value);
         case "error":
-          return () => v(z, n.value);
+          return () => v(A, n.value);
         default:
           return null;
       }
     }), R = i(() => U[o.size] ?? {});
-    return (r, K) => x.value ? t("", !0) : (a(), d("div", {
+    return (r, K) => x.value ? a("", !0) : (l(), d("div", {
       key: 0,
-      class: l(["overflow-hidden text-left", [e.value.wrapperClass, { rounded: !o.notRounded }]])
+      class: t(["overflow-hidden text-left", [e.value.wrapperClass, { rounded: !o.notRounded }]])
     }, [
       c("div", {
-        class: l(["flex", [e.value.headerClass, R.value]])
+        class: t(["flex", [e.value.headerClass, R.value]])
       }, [
         u(r.$slots, "icon", j(S(n.value)), () => [
-          !o.noIcon && h.value ? (a(), $(V(h.value), j(N({ key: 0 }, n.value)), null, 16)) : t("", !0)
+          !o.noIcon && h.value ? (l(), $(V(h.value), j(N({ key: 0 }, n.value)), null, 16)) : a("", !0)
         ]),
         c("div", J, [
           u(r.$slots, "default")
         ]),
-        r.dismissible ? (a(), d("button", {
+        r.dismissible ? (l(), d("button", {
           key: 0,
           class: "m-[4px] ml-[8px] h-[16px]",
           "aria-label": "Dismiss",
@@ -145,22 +145,22 @@ const U = {
           w(C(L), {
             "stroke-color": e.value.iconCloseColor
           }, null, 8, ["stroke-color"])
-        ])) : t("", !0)
+        ])) : a("", !0)
       ], 2),
-      C(y).body ? (a(), d("div", {
+      C(y).body ? (l(), d("div", {
         key: 0,
-        class: l(["p-[16px]", e.value.bodyClass])
+        class: t(["p-[16px]", e.value.bodyClass])
       }, [
         u(r.$slots, "body")
-      ], 2)) : t("", !0),
-      C(y).details ? (a(), d("details", {
+      ], 2)) : a("", !0),
+      C(y).details ? (l(), d("details", {
         key: 1,
         ref_key: "detailsRef",
         ref: p,
-        class: l(["p-[16px] border-t border-t-1", [e.value.bodyClass, e.value.borderClass]])
+        class: t(["p-[16px] border-t border-t-1", [e.value.bodyClass, e.value.borderClass]])
       }, [
         c("summary", {
-          class: l(["flex font-medium cursor-pointer details-none", e.value.detailsHeaderClass])
+          class: t(["flex font-medium cursor-pointer details-none", e.value.detailsHeaderClass])
         }, [
           w(C(M), {
             strokeColor: e.value.iconChevronColor,
@@ -176,13 +176,13 @@ const U = {
             u(r.$slots, "details")
           ])
         ], 512)
-      ], 2)) : t("", !0),
-      r.$slots.footer ? (a(), d("div", {
+      ], 2)) : a("", !0),
+      r.$slots.footer ? (l(), d("div", {
         key: 2,
-        class: l(e.value.bodyClass)
+        class: t(e.value.bodyClass)
       }, [
         u(r.$slots, "footer")
-      ], 2)) : t("", !0)
+      ], 2)) : a("", !0)
     ], 2));
   }
 });
@@ -191,4 +191,4 @@ export {
 };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="my-[4px] mr-[8px] overflow-hidden text-left rounded flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t cursor-pointer details-none transition transform -rotate-90 open:rotate-0 py-[4px] px-[8px] leading-[22px] text-[14px] py-[8px] px-[12px] py-[12px] px-[16px] leading-[24px] text-[16px] text-gray-800 bg-gray-100 bg-gray-50 text-gray-500 border-gray-100 text-gray-600 text-indigo-700 bg-indigo-100 bg-indigo-50 text-indigo-500 border-indigo-100 text-indigo-600 text-orange-700 bg-orange-100 bg-orange-50 text-orange-500 border-orange-100 text-orange-600 text-red-700 bg-red-100 bg-red-50 text-red-500 border-red-100 text-red-600 text-jade-700 bg-jade-100 bg-jade-50 text-jade-600 border-jade-100 border-gray-50 bg-white border text-gray-700 icon-dark-gray-600 icon-dark-gray-500 icon-dark-gray-300 icon-dark-indigo-500 icon-dark-indigo-300 icon-dark-orange-500 icon-dark-orange-400 icon-dark-orange-300 icon-dark-red-500 icon-dark-red-400 icon-dark-red-300 icon-dark-jade-600 icon-dark-jade-500 icon-dark-jade-300"> */
+/* <wind-keep class="my-[4px] mr-[8px] overflow-hidden text-left rounded flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t cursor-pointer details-none transition transform -rotate-90 open:rotate-0"> */

package/dist/index.es.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../Alert.vue"],"sourcesContent":["export const alertSizesClasses = {\n    xs: 'py-[4px] px-[8px] leading-[22px] text-[14px]',\n    sm: 'py-[8px] px-[12px] leading-[22px] text-[14px]',\n    md: 'py-[12px] px-[16px] leading-[24px] text-[16px]',\n    lg: 'p-[16px] leading-[24px] text-[16px]',\n};\nexport const defaultAlertSize = 'lg';\nexport const alertClasses = {\n    neutral: {\n        headerClass: 'text-gray-800 bg-gray-100',\n        bodyClass: 'bg-gray-50 text-gray-500',\n        borderClass: 'border-gray-100',\n        detailsHeaderClass: 'text-gray-600',\n        /* <tw-keep strokeColor=\"gray-600\"/> */\n        iconCloseColor: 'gray-600',\n        /* <tw-keep strokeColor=\"gray-500\"/> */\n        iconColor: 'gray-500',\n        /* <tw-keep strokeColor=\"gray-300\"/> */\n        iconChevronColor: 'gray-300',\n    },\n    info: {\n        headerClass: 'text-indigo-700 bg-indigo-100',\n        bodyClass: 'bg-indigo-50 text-indigo-500',\n        borderClass: 'border-indigo-100',\n        detailsHeaderClass: 'text-indigo-600',\n        /* <tw-keep strokeColor=\"indigo-500\"/> */\n        iconCloseColor: 'indigo-500',\n        /* <tw-keep strokeColor=\"indigo-500\"/> */\n        iconColor: 'indigo-500',\n        /* <tw-keep strokeColor=\"indigo-300\"/> */\n        iconChevronColor: 'indigo-300',\n    },\n    warning: {\n        headerClass: 'text-orange-700 bg-orange-100',\n        bodyClass: 'bg-orange-50 text-orange-500',\n        borderClass: 'border-orange-100',\n        detailsHeaderClass: 'text-orange-600',\n        /* <tw-keep strokeColor=\"orange-500\"/> */\n        iconCloseColor: 'orange-500',\n        /* <tw-keep strokeColor=\"orange-400\"/> */\n        iconColor: 'orange-400',\n        /* <tw-keep strokeColor=\"orange-300\"/> */\n        iconChevronColor: 'orange-300',\n    },\n    error: {\n        headerClass: 'text-red-700 bg-red-100',\n        bodyClass: 'bg-red-50 text-red-500',\n        borderClass: 'border-red-100',\n        detailsHeaderClass: 'text-red-600',\n        /* <tw-keep strokeColor=\"red-500\"/> */\n        iconCloseColor: 'red-500',\n        /* <tw-keep strokeColor=\"red-400\"/> */\n        iconColor: 'red-400',\n        /* <tw-keep strokeColor=\"red-300\"/> */\n        iconChevronColor: 'red-300',\n    },\n    success: {\n        headerClass: 'text-jade-700 bg-jade-100',\n        bodyClass: 'bg-jade-50 text-jade-600',\n        borderClass: 'border-jade-100',\n        detailsHeaderClass: 'text-jade-600',\n        /* <tw-keep strokeColor=\"jade-600\"/> */\n        iconCloseColor: 'jade-600',\n        /* <tw-keep strokeColor=\"jade-500\"/> */\n        iconColor: 'jade-500',\n        /* <tw-keep strokeColor=\"jade-300\"/> */\n        iconChevronColor: 'jade-300',\n    },\n    clear: {\n        wrapperClass: 'border-gray-50 bg-white border text-gray-700',\n        headerClass: '',\n        bodyClass: 'border-gray-50 border-t',\n        borderClass: 'border-gray-50',\n        detailsHeaderClass: 'text-gray-700',\n        /* <tw-keep strokeColor=\"gray-600\"/> */\n        iconCloseColor: 'gray-600',\n        /* <tw-keep strokeColor=\"gray-500\"/> */\n        iconColor: 'gray-500',\n        /* <tw-keep strokeColor=\"gray-300\"/> */\n        iconChevronColor: 'gray-300',\n    },\n};\nexport const defaultAlertVariant = 'info';\nexport const defaultAlertTitle = 'Additional details';\n","<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue'\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n  IconChevronDownSmall,\n  IconActionDeleteLarge,\n  IconWarningCircle,\n  IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport {\n  AlertSize,\n  alertSizesClasses,\n  AlertVariant,\n  defaultAlertSize,\n  defaultAlertTitle,\n  defaultAlertVariant,\n  alertClasses,\n} from '@cypress-design/constants-alert'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n  /**\n   * Clicking on the dismiss button or dismissed after a timeout\n   */\n  (event: 'dismiss'): void\n}>()\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Color scheme\n     */\n    variant?: AlertVariant\n    /**\n     * Color scheme\n     * @deprecated use `variant` instead\n     */\n    type?: AlertVariant\n    /**\n     * If details are provided,text used in the toggle button\n     */\n    detailsTitle?: string\n    /**\n     * Show the dismiss button\n     */\n    dismissible?: boolean\n    /**\n     * When an icon is displayed by default, use this to remove it\n     */\n    noIcon?: boolean\n    /**\n     * If you need square corners\n     */\n    notRounded?: boolean\n    /**\n     * Dismiss the alert after a delay (in ms)\n     */\n    duration?: number\n    /**\n     * Size of the alert\n     */\n    size?: typeof defaultAlertSize | AlertSize\n  }>(),\n  {\n    variant: undefined,\n    type: defaultAlertVariant,\n    detailsTitle: defaultAlertTitle,\n    size: defaultAlertSize,\n  },\n)\n\nconst variant = computed(() => {\n  return props.variant ?? props.type\n})\n\nconst detailsRef = ref(null)\nconst contentRef = ref(null)\n\nconst variantClasses = computed(() => {\n  return alertClasses[variant.value] ?? {}\n})\n\nlet timeout: number | undefined\n\nonMounted(() => {\n  if (props.duration) {\n    timeout = setTimeout(dismiss, props.duration)\n  }\n})\n\nonMounted(() => {\n  if (detailsRef.value && contentRef.value) {\n    new DetailsAnimation(detailsRef.value, contentRef.value)\n  }\n})\n\nonUnmounted(() => {\n  if (timeout) {\n    clearTimeout(timeout)\n  }\n})\n\nfunction dismiss() {\n  dismissed.value = true\n  emit('dismiss')\n  if (timeout) {\n    clearTimeout(timeout)\n    timeout = undefined\n  }\n}\n\nconst computedIconProps = computed(() => {\n  return {\n    strokeColor: variantClasses.value.iconColor,\n    class: 'my-[4px] mr-[8px]',\n  }\n})\n\nconst icon: ComputedRef<FunctionalComponent | null> = computed(() => {\n  switch (variant.value) {\n    case 'info':\n      return null\n    case 'success':\n      return () => h(IconCheckmarkOutline, computedIconProps.value)\n    case 'warning':\n      return () => h(IconWarningCircle, computedIconProps.value)\n    case 'error':\n      return () => h(IconWarningCircle, computedIconProps.value)\n    default:\n      return null\n  }\n})\n\nconst sizeClasses = computed(() => {\n  return alertSizesClasses[props.size] ?? {}\n})\n</script>\n\n<template>\n  <div\n    v-if=\"!dismissed\"\n    class=\"overflow-hidden text-left\"\n    :class=\"[variantClasses.wrapperClass, { rounded: !props.notRounded }]\"\n  >\n    <div class=\"flex\" :class=\"[variantClasses.headerClass, sizeClasses]\">\n      <!--\n        @slot replace the default left icon here\n        @binding strokeColor - a windicolor that to be passed to `strokeColor`\n        @binding class - the class this icon should have (for utility css purposes)\n\t\t\t-->\n      <slot name=\"icon\" v-bind=\"computedIconProps\">\n        <component\n          :is=\"icon\"\n          v-if=\"!props.noIcon && icon\"\n          v-bind=\"computedIconProps\"\n        />\n      </slot>\n      <div class=\"flex-1 font-medium\">\n        <!-- @slot title of the alert -->\n        <slot />\n      </div>\n      <button\n        v-if=\"dismissible\"\n        class=\"m-[4px] ml-[8px] h-[16px]\"\n        aria-label=\"Dismiss\"\n        @click=\"dismiss\"\n      >\n        <IconActionDeleteLarge :stroke-color=\"variantClasses.iconCloseColor\" />\n      </button>\n    </div>\n    <div v-if=\"slots.body\" class=\"p-[16px]\" :class=\"variantClasses.bodyClass\">\n      <!-- @slot body/details of the alert -->\n      <slot name=\"body\" />\n    </div>\n    <details\n      v-if=\"slots.details\"\n      ref=\"detailsRef\"\n      class=\"p-[16px] border-t border-t-1\"\n      :class=\"[variantClasses.bodyClass, variantClasses.borderClass]\"\n    >\n      <summary\n        class=\"flex font-medium cursor-pointer details-none\"\n        :class=\"variantClasses.detailsHeaderClass\"\n      >\n        <IconChevronDownSmall\n          :strokeColor=\"variantClasses.iconChevronColor\"\n          class=\"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0\"\n        />\n        {{ props.detailsTitle }}\n      </summary>\n      <div ref=\"contentRef\">\n        <div>\n          <!--@slot Togglable additional details-->\n          <slot name=\"details\" />\n        </div>\n      </div>\n    </details>\n    <template v-if=\"$slots.footer\">\n      <div :class=\"variantClasses.bodyClass\">\n        <!--@slot A box to add buttons or additional content -->\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </div>\n</template>\n"],"names":["alertSizesClasses","defaultAlertSize","alertClasses","defaultAlertVariant","defaultAlertTitle","dismissed","ref","slots","useSlots","emit","__emit","props","__props","variant","computed","detailsRef","contentRef","variantClasses","timeout","onMounted","dismiss","DetailsAnimation","onUnmounted","computedIconProps","icon","h","IconCheckmarkOutline","IconWarningCircle","sizeClasses"],"mappings":"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"}
+{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.es.mjs","../Alert.vue"],"sourcesContent":["const CssAlertSizesClasses = {\n    xs: 'py-[4px] px-[8px] leading-[22px] text-[14px]',\n    sm: 'py-[8px] px-[12px] leading-[22px] text-[14px]',\n    md: 'py-[12px] px-[16px] leading-[24px] text-[16px]',\n    lg: 'p-[16px] leading-[24px] text-[16px]',\n};\nconst defaultAlertSize = 'lg';\nconst CssAlertClasses = {\n    neutral: {\n        headerClass: 'text-gray-800 bg-gray-100',\n        bodyClass: 'bg-gray-50 text-gray-500',\n        borderClass: 'border-gray-100',\n        detailsHeaderClass: 'text-gray-600',\n        /* <tw-keep strokeColor=\"gray-600\"/> */\n        iconCloseColor: 'gray-600',\n        /* <tw-keep strokeColor=\"gray-500\"/> */\n        iconColor: 'gray-500',\n        /* <tw-keep strokeColor=\"gray-300\"/> */\n        iconChevronColor: 'gray-300',\n    },\n    info: {\n        headerClass: 'text-indigo-700 bg-indigo-100',\n        bodyClass: 'bg-indigo-50 text-indigo-500',\n        borderClass: 'border-indigo-100',\n        detailsHeaderClass: 'text-indigo-600',\n        /* <tw-keep strokeColor=\"indigo-500\"/> */\n        iconCloseColor: 'indigo-500',\n        /* <tw-keep strokeColor=\"indigo-500\"/> */\n        iconColor: 'indigo-500',\n        /* <tw-keep strokeColor=\"indigo-300\"/> */\n        iconChevronColor: 'indigo-300',\n    },\n    warning: {\n        headerClass: 'text-orange-700 bg-orange-100',\n        bodyClass: 'bg-orange-50 text-orange-500',\n        borderClass: 'border-orange-100',\n        detailsHeaderClass: 'text-orange-600',\n        /* <tw-keep strokeColor=\"orange-500\"/> */\n        iconCloseColor: 'orange-500',\n        /* <tw-keep strokeColor=\"orange-400\"/> */\n        iconColor: 'orange-400',\n        /* <tw-keep strokeColor=\"orange-300\"/> */\n        iconChevronColor: 'orange-300',\n    },\n    error: {\n        headerClass: 'text-red-700 bg-red-100',\n        bodyClass: 'bg-red-50 text-red-500',\n        borderClass: 'border-red-100',\n        detailsHeaderClass: 'text-red-600',\n        /* <tw-keep strokeColor=\"red-500\"/> */\n        iconCloseColor: 'red-500',\n        /* <tw-keep strokeColor=\"red-400\"/> */\n        iconColor: 'red-400',\n        /* <tw-keep strokeColor=\"red-300\"/> */\n        iconChevronColor: 'red-300',\n    },\n    success: {\n        headerClass: 'text-jade-700 bg-jade-100',\n        bodyClass: 'bg-jade-50 text-jade-600',\n        borderClass: 'border-jade-100',\n        detailsHeaderClass: 'text-jade-600',\n        /* <tw-keep strokeColor=\"jade-600\"/> */\n        iconCloseColor: 'jade-600',\n        /* <tw-keep strokeColor=\"jade-500\"/> */\n        iconColor: 'jade-500',\n        /* <tw-keep strokeColor=\"jade-300\"/> */\n        iconChevronColor: 'jade-300',\n    },\n    clear: {\n        wrapperClass: 'border-gray-50 bg-white border text-gray-700',\n        headerClass: '',\n        bodyClass: 'border-gray-50 border-t',\n        borderClass: 'border-gray-50',\n        detailsHeaderClass: 'text-gray-700',\n        /* <tw-keep strokeColor=\"gray-600\"/> */\n        iconCloseColor: 'gray-600',\n        /* <tw-keep strokeColor=\"gray-500\"/> */\n        iconColor: 'gray-500',\n        /* <tw-keep strokeColor=\"gray-300\"/> */\n        iconChevronColor: 'gray-300',\n    },\n};\nconst defaultAlertVariant = 'info';\nconst defaultAlertTitle = 'Additional details';\n\nexport { CssAlertClasses, CssAlertSizesClasses, defaultAlertSize, defaultAlertTitle, defaultAlertVariant };\n//# sourceMappingURL=index.es.mjs.map\n","<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue'\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n  IconChevronDownSmall,\n  IconActionDeleteLarge,\n  IconWarningCircle,\n  IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport {\n  AlertSize,\n  CssAlertSizesClasses,\n  AlertVariant,\n  defaultAlertSize,\n  defaultAlertTitle,\n  defaultAlertVariant,\n  CssAlertClasses,\n} from '@cypress-design/constants-alert'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n  /**\n   * Clicking on the dismiss button or dismissed after a timeout\n   */\n  (event: 'dismiss'): void\n}>()\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Color scheme\n     */\n    variant?: AlertVariant\n    /**\n     * Color scheme\n     * @deprecated use `variant` instead\n     */\n    type?: AlertVariant\n    /**\n     * If details are provided,text used in the toggle button\n     */\n    detailsTitle?: string\n    /**\n     * Show the dismiss button\n     */\n    dismissible?: boolean\n    /**\n     * When an icon is displayed by default, use this to remove it\n     */\n    noIcon?: boolean\n    /**\n     * If you need square corners\n     */\n    notRounded?: boolean\n    /**\n     * Dismiss the alert after a delay (in ms)\n     */\n    duration?: number\n    /**\n     * Size of the alert\n     */\n    size?: typeof defaultAlertSize | AlertSize\n  }>(),\n  {\n    variant: undefined,\n    type: defaultAlertVariant,\n    detailsTitle: defaultAlertTitle,\n    size: defaultAlertSize,\n  },\n)\n\nconst variant = computed(() => {\n  return props.variant ?? props.type\n})\n\nconst detailsRef = ref(null)\nconst contentRef = ref(null)\n\nconst variantClasses = computed(() => {\n  return CssAlertClasses[variant.value] ?? {}\n})\n\nlet timeout: number | undefined\n\nonMounted(() => {\n  if (props.duration) {\n    timeout = setTimeout(dismiss, props.duration)\n  }\n})\n\nonMounted(() => {\n  if (detailsRef.value && contentRef.value) {\n    new DetailsAnimation(detailsRef.value, contentRef.value)\n  }\n})\n\nonUnmounted(() => {\n  if (timeout) {\n    clearTimeout(timeout)\n  }\n})\n\nfunction dismiss() {\n  dismissed.value = true\n  emit('dismiss')\n  if (timeout) {\n    clearTimeout(timeout)\n    timeout = undefined\n  }\n}\n\nconst computedIconProps = computed(() => {\n  return {\n    strokeColor: variantClasses.value.iconColor,\n    class: 'my-[4px] mr-[8px]',\n  }\n})\n\nconst icon: ComputedRef<FunctionalComponent | null> = computed(() => {\n  switch (variant.value) {\n    case 'info':\n      return null\n    case 'success':\n      return () => h(IconCheckmarkOutline, computedIconProps.value)\n    case 'warning':\n      return () => h(IconWarningCircle, computedIconProps.value)\n    case 'error':\n      return () => h(IconWarningCircle, computedIconProps.value)\n    default:\n      return null\n  }\n})\n\nconst sizeClasses = computed(() => {\n  return CssAlertSizesClasses[props.size] ?? {}\n})\n</script>\n\n<template>\n  <div\n    v-if=\"!dismissed\"\n    class=\"overflow-hidden text-left\"\n    :class=\"[variantClasses.wrapperClass, { rounded: !props.notRounded }]\"\n  >\n    <div class=\"flex\" :class=\"[variantClasses.headerClass, sizeClasses]\">\n      <!--\n        @slot replace the default left icon here\n        @binding strokeColor - a windicolor that to be passed to `strokeColor`\n        @binding class - the class this icon should have (for utility css purposes)\n\t\t\t-->\n      <slot name=\"icon\" v-bind=\"computedIconProps\">\n        <component\n          :is=\"icon\"\n          v-if=\"!props.noIcon && icon\"\n          v-bind=\"computedIconProps\"\n        />\n      </slot>\n      <div class=\"flex-1 font-medium\">\n        <!-- @slot title of the alert -->\n        <slot />\n      </div>\n      <button\n        v-if=\"dismissible\"\n        class=\"m-[4px] ml-[8px] h-[16px]\"\n        aria-label=\"Dismiss\"\n        @click=\"dismiss\"\n      >\n        <IconActionDeleteLarge :stroke-color=\"variantClasses.iconCloseColor\" />\n      </button>\n    </div>\n    <div v-if=\"slots.body\" class=\"p-[16px]\" :class=\"variantClasses.bodyClass\">\n      <!-- @slot body/details of the alert -->\n      <slot name=\"body\" />\n    </div>\n    <details\n      v-if=\"slots.details\"\n      ref=\"detailsRef\"\n      class=\"p-[16px] border-t border-t-1\"\n      :class=\"[variantClasses.bodyClass, variantClasses.borderClass]\"\n    >\n      <summary\n        class=\"flex font-medium cursor-pointer details-none\"\n        :class=\"variantClasses.detailsHeaderClass\"\n      >\n        <IconChevronDownSmall\n          :strokeColor=\"variantClasses.iconChevronColor\"\n          class=\"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0\"\n        />\n        {{ props.detailsTitle }}\n      </summary>\n      <div ref=\"contentRef\">\n        <div>\n          <!--@slot Togglable additional details-->\n          <slot name=\"details\" />\n        </div>\n      </div>\n    </details>\n    <template v-if=\"$slots.footer\">\n      <div :class=\"variantClasses.bodyClass\">\n        <!--@slot A box to add buttons or additional content -->\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </div>\n</template>\n"],"names":["CssAlertSizesClasses","defaultAlertSize","CssAlertClasses","defaultAlertVariant","defaultAlertTitle","dismissed","ref","slots","useSlots","emit","__emit","props","__props","variant","computed","detailsRef","contentRef","variantClasses","timeout","onMounted","dismiss","DetailsAnimation","onUnmounted","computedIconProps","icon","h","IconCheckmarkOutline","IconWarningCircle","sizeClasses"],"mappings":"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"}

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue"),require("@cypress-design/vue-icon"),require("@cypress-design/details-animation")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon","@cypress-design/details-animation"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.Alert=r(e.Vue,e.CyIcon,e.CyDetailsAnimation))})(this,function(e,r,g){"use strict";const f={xs:"py-[4px] px-[8px] leading-[22px] text-[14px]",sm:"py-[8px] px-[12px] leading-[22px] text-[14px]",md:"py-[12px] px-[16px] leading-[24px] text-[16px]",lg:"p-[16px] leading-[24px] text-[16px]"},y="lg",x={neutral:{headerClass:"text-gray-800 bg-gray-100",bodyClass:"bg-gray-50 text-gray-500",borderClass:"border-gray-100",detailsHeaderClass:"text-gray-600",iconCloseColor:"gray-600",iconColor:"gray-500",iconChevronColor:"gray-300"},info:{headerClass:"text-indigo-700 bg-indigo-100",bodyClass:"bg-indigo-50 text-indigo-500",borderClass:"border-indigo-100",detailsHeaderClass:"text-indigo-600",iconCloseColor:"indigo-500",iconColor:"indigo-500",iconChevronColor:"indigo-300"},warning:{headerClass:"text-orange-700 bg-orange-100",bodyClass:"bg-orange-50 text-orange-500",borderClass:"border-orange-100",detailsHeaderClass:"text-orange-600",iconCloseColor:"orange-500",iconColor:"orange-400",iconChevronColor:"orange-300"},error:{headerClass:"text-red-700 bg-red-100",bodyClass:"bg-red-50 text-red-500",borderClass:"border-red-100",detailsHeaderClass:"text-red-600",iconCloseColor:"red-500",iconColor:"red-400",iconChevronColor:"red-300"},success:{headerClass:"text-jade-700 bg-jade-100",bodyClass:"bg-jade-50 text-jade-600",borderClass:"border-jade-100",detailsHeaderClass:"text-jade-600",iconCloseColor:"jade-600",iconColor:"jade-500",iconChevronColor:"jade-300"},clear:{wrapperClass:"border-gray-50 bg-white border text-gray-700",headerClass:"",bodyClass:"border-gray-50 border-t",borderClass:"border-gray-50",detailsHeaderClass:"text-gray-700",iconCloseColor:"gray-600",iconColor:"gray-500",iconChevronColor:"gray-300"}},u="info",b="Additional details",h={class:"flex-1 font-medium"};return e.defineComponent({__name:"Alert",props:{variant:{default:void 0},type:{default:u},detailsTitle:{default:b},dismissible:{type:Boolean},noIcon:{type:Boolean},notRounded:{type:Boolean},duration:{},size:{default:y}},emits:["dismiss"],setup(k,{emit:V}){const d=e.ref(!1),c=e.useSlots(),B=V,t=k,C=e.computed(()=>t.variant??t.type),n=e.ref(null),i=e.ref(null),o=e.computed(()=>x[C.value]??{});let a;e.onMounted(()=>{t.duration&&(a=setTimeout(m,t.duration))}),e.onMounted(()=>{n.value&&i.value&&new g.DetailsAnimation(n.value,i.value)}),e.onUnmounted(()=>{a&&clearTimeout(a)});function m(){d.value=!0,B("dismiss"),a&&(clearTimeout(a),a=void 0)}const l=e.computed(()=>({strokeColor:o.value.iconColor,class:"my-[4px] mr-[8px]"})),p=e.computed(()=>{switch(C.value){case"info":return null;case"success":return()=>e.h(r.IconCheckmarkOutline,l.value);case"warning":return()=>e.h(r.IconWarningCircle,l.value);case"error":return()=>e.h(r.IconWarningCircle,l.value);default:return null}}),N=e.computed(()=>f[t.size]??{});return(s,j)=>d.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overflow-hidden text-left",[o.value.wrapperClass,{rounded:!t.notRounded}]])},[e.createElementVNode("div",{class:e.normalizeClass(["flex",[o.value.headerClass,N.value]])},[e.renderSlot(s.$slots,"icon",e.normalizeProps(e.guardReactiveProps(l.value)),()=>[!t.noIcon&&p.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p.value),e.normalizeProps(e.mergeProps({key:0},l.value)),null,16)):e.createCommentVNode("",!0)]),e.createElementVNode("div",h,[e.renderSlot(s.$slots,"default")]),s.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,class:"m-[4px] ml-[8px] h-[16px]","aria-label":"Dismiss",onClick:m},[e.createVNode(e.unref(r.IconActionDeleteLarge),{"stroke-color":o.value.iconCloseColor},null,8,["stroke-color"])])):e.createCommentVNode("",!0)],2),e.unref(c).body?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["p-[16px]",o.value.bodyClass])},[e.renderSlot(s.$slots,"body")],2)):e.createCommentVNode("",!0),e.unref(c).details?(e.openBlock(),e.createElementBlock("details",{key:1,ref_key:"detailsRef",ref:n,class:e.normalizeClass(["p-[16px] border-t border-t-1",[o.value.bodyClass,o.value.borderClass]])},[e.createElementVNode("summary",{class:e.normalizeClass(["flex font-medium cursor-pointer details-none",o.value.detailsHeaderClass])},[e.createVNode(e.unref(r.IconChevronDownSmall),{strokeColor:o.value.iconChevronColor,class:"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"},null,8,["strokeColor"]),e.createTextVNode(" "+e.toDisplayString(t.detailsTitle),1)],2),e.createElementVNode("div",{ref_key:"contentRef",ref:i},[e.createElementVNode("div",null,[e.renderSlot(s.$slots,"details")])],512)],2)):e.createCommentVNode("",!0),s.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(o.value.bodyClass)},[e.renderSlot(s.$slots,"footer")],2)):e.createCommentVNode("",!0)],2))}})});
+(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue"),require("@cypress-design/vue-icon"),require("@cypress-design/details-animation")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon","@cypress-design/details-animation"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.Alert=r(e.Vue,e.Icon,e.CyDetailsAnimation))})(this,function(e,r,g){"use strict";const f={xs:"py-[4px] px-[8px] leading-[22px] text-[14px]",sm:"py-[8px] px-[12px] leading-[22px] text-[14px]",md:"py-[12px] px-[16px] leading-[24px] text-[16px]",lg:"p-[16px] leading-[24px] text-[16px]"},y="lg",x={neutral:{headerClass:"text-gray-800 bg-gray-100",bodyClass:"bg-gray-50 text-gray-500",borderClass:"border-gray-100",detailsHeaderClass:"text-gray-600",iconCloseColor:"gray-600",iconColor:"gray-500",iconChevronColor:"gray-300"},info:{headerClass:"text-indigo-700 bg-indigo-100",bodyClass:"bg-indigo-50 text-indigo-500",borderClass:"border-indigo-100",detailsHeaderClass:"text-indigo-600",iconCloseColor:"indigo-500",iconColor:"indigo-500",iconChevronColor:"indigo-300"},warning:{headerClass:"text-orange-700 bg-orange-100",bodyClass:"bg-orange-50 text-orange-500",borderClass:"border-orange-100",detailsHeaderClass:"text-orange-600",iconCloseColor:"orange-500",iconColor:"orange-400",iconChevronColor:"orange-300"},error:{headerClass:"text-red-700 bg-red-100",bodyClass:"bg-red-50 text-red-500",borderClass:"border-red-100",detailsHeaderClass:"text-red-600",iconCloseColor:"red-500",iconColor:"red-400",iconChevronColor:"red-300"},success:{headerClass:"text-jade-700 bg-jade-100",bodyClass:"bg-jade-50 text-jade-600",borderClass:"border-jade-100",detailsHeaderClass:"text-jade-600",iconCloseColor:"jade-600",iconColor:"jade-500",iconChevronColor:"jade-300"},clear:{wrapperClass:"border-gray-50 bg-white border text-gray-700",headerClass:"",bodyClass:"border-gray-50 border-t",borderClass:"border-gray-50",detailsHeaderClass:"text-gray-700",iconCloseColor:"gray-600",iconColor:"gray-500",iconChevronColor:"gray-300"}},u="info",b="Additional details",h={class:"flex-1 font-medium"};return e.defineComponent({__name:"Alert",props:{variant:{default:void 0},type:{default:u},detailsTitle:{default:b},dismissible:{type:Boolean},noIcon:{type:Boolean},notRounded:{type:Boolean},duration:{},size:{default:y}},emits:["dismiss"],setup(k,{emit:V}){const d=e.ref(!1),c=e.useSlots(),B=V,s=k,C=e.computed(()=>s.variant??s.type),n=e.ref(null),i=e.ref(null),o=e.computed(()=>x[C.value]??{});let a;e.onMounted(()=>{s.duration&&(a=setTimeout(m,s.duration))}),e.onMounted(()=>{n.value&&i.value&&new g.DetailsAnimation(n.value,i.value)}),e.onUnmounted(()=>{a&&clearTimeout(a)});function m(){d.value=!0,B("dismiss"),a&&(clearTimeout(a),a=void 0)}const l=e.computed(()=>({strokeColor:o.value.iconColor,class:"my-[4px] mr-[8px]"})),p=e.computed(()=>{switch(C.value){case"info":return null;case"success":return()=>e.h(r.IconCheckmarkOutline,l.value);case"warning":return()=>e.h(r.IconWarningCircle,l.value);case"error":return()=>e.h(r.IconWarningCircle,l.value);default:return null}}),N=e.computed(()=>f[s.size]??{});return(t,A)=>d.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overflow-hidden text-left",[o.value.wrapperClass,{rounded:!s.notRounded}]])},[e.createElementVNode("div",{class:e.normalizeClass(["flex",[o.value.headerClass,N.value]])},[e.renderSlot(t.$slots,"icon",e.normalizeProps(e.guardReactiveProps(l.value)),()=>[!s.noIcon&&p.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p.value),e.normalizeProps(e.mergeProps({key:0},l.value)),null,16)):e.createCommentVNode("",!0)]),e.createElementVNode("div",h,[e.renderSlot(t.$slots,"default")]),t.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,class:"m-[4px] ml-[8px] h-[16px]","aria-label":"Dismiss",onClick:m},[e.createVNode(e.unref(r.IconActionDeleteLarge),{"stroke-color":o.value.iconCloseColor},null,8,["stroke-color"])])):e.createCommentVNode("",!0)],2),e.unref(c).body?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["p-[16px]",o.value.bodyClass])},[e.renderSlot(t.$slots,"body")],2)):e.createCommentVNode("",!0),e.unref(c).details?(e.openBlock(),e.createElementBlock("details",{key:1,ref_key:"detailsRef",ref:n,class:e.normalizeClass(["p-[16px] border-t border-t-1",[o.value.bodyClass,o.value.borderClass]])},[e.createElementVNode("summary",{class:e.normalizeClass(["flex font-medium cursor-pointer details-none",o.value.detailsHeaderClass])},[e.createVNode(e.unref(r.IconChevronDownSmall),{strokeColor:o.value.iconChevronColor,class:"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"},null,8,["strokeColor"]),e.createTextVNode(" "+e.toDisplayString(s.detailsTitle),1)],2),e.createElementVNode("div",{ref_key:"contentRef",ref:i},[e.createElementVNode("div",null,[e.renderSlot(t.$slots,"details")])],512)],2)):e.createCommentVNode("",!0),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(o.value.bodyClass)},[e.renderSlot(t.$slots,"footer")],2)):e.createCommentVNode("",!0)],2))}})});
 //# sourceMappingURL=index.umd.js.map
 
-/* <wind-keep class="my-[4px] mr-[8px] overflow-hidden text-left rounded flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t cursor-pointer details-none transition transform -rotate-90 open:rotate-0 py-[4px] px-[8px] leading-[22px] text-[14px] py-[8px] px-[12px] py-[12px] px-[16px] leading-[24px] text-[16px] text-gray-800 bg-gray-100 bg-gray-50 text-gray-500 border-gray-100 text-gray-600 text-indigo-700 bg-indigo-100 bg-indigo-50 text-indigo-500 border-indigo-100 text-indigo-600 text-orange-700 bg-orange-100 bg-orange-50 text-orange-500 border-orange-100 text-orange-600 text-red-700 bg-red-100 bg-red-50 text-red-500 border-red-100 text-red-600 text-jade-700 bg-jade-100 bg-jade-50 text-jade-600 border-jade-100 border-gray-50 bg-white border text-gray-700 icon-dark-gray-600 icon-dark-gray-500 icon-dark-gray-300 icon-dark-indigo-500 icon-dark-indigo-300 icon-dark-orange-500 icon-dark-orange-400 icon-dark-orange-300 icon-dark-red-500 icon-dark-red-400 icon-dark-red-300 icon-dark-jade-600 icon-dark-jade-500 icon-dark-jade-300"> */
+/* <wind-keep class="my-[4px] mr-[8px] overflow-hidden text-left rounded flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t cursor-pointer details-none transition transform -rotate-90 open:rotate-0"> */

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.js","../Alert.vue"],"sourcesContent":["export const alertSizesClasses = {\n    xs: 'py-[4px] px-[8px] leading-[22px] text-[14px]',\n    sm: 'py-[8px] px-[12px] leading-[22px] text-[14px]',\n    md: 'py-[12px] px-[16px] leading-[24px] text-[16px]',\n    lg: 'p-[16px] leading-[24px] text-[16px]',\n};\nexport const defaultAlertSize = 'lg';\nexport const alertClasses = {\n    neutral: {\n        headerClass: 'text-gray-800 bg-gray-100',\n        bodyClass: 'bg-gray-50 text-gray-500',\n        borderClass: 'border-gray-100',\n        detailsHeaderClass: 'text-gray-600',\n        /* <tw-keep strokeColor=\"gray-600\"/> */\n        iconCloseColor: 'gray-600',\n        /* <tw-keep strokeColor=\"gray-500\"/> */\n        iconColor: 'gray-500',\n        /* <tw-keep strokeColor=\"gray-300\"/> */\n        iconChevronColor: 'gray-300',\n    },\n    info: {\n        headerClass: 'text-indigo-700 bg-indigo-100',\n        bodyClass: 'bg-indigo-50 text-indigo-500',\n        borderClass: 'border-indigo-100',\n        detailsHeaderClass: 'text-indigo-600',\n        /* <tw-keep strokeColor=\"indigo-500\"/> */\n        iconCloseColor: 'indigo-500',\n        /* <tw-keep strokeColor=\"indigo-500\"/> */\n        iconColor: 'indigo-500',\n        /* <tw-keep strokeColor=\"indigo-300\"/> */\n        iconChevronColor: 'indigo-300',\n    },\n    warning: {\n        headerClass: 'text-orange-700 bg-orange-100',\n        bodyClass: 'bg-orange-50 text-orange-500',\n        borderClass: 'border-orange-100',\n        detailsHeaderClass: 'text-orange-600',\n        /* <tw-keep strokeColor=\"orange-500\"/> */\n        iconCloseColor: 'orange-500',\n        /* <tw-keep strokeColor=\"orange-400\"/> */\n        iconColor: 'orange-400',\n        /* <tw-keep strokeColor=\"orange-300\"/> */\n        iconChevronColor: 'orange-300',\n    },\n    error: {\n        headerClass: 'text-red-700 bg-red-100',\n        bodyClass: 'bg-red-50 text-red-500',\n        borderClass: 'border-red-100',\n        detailsHeaderClass: 'text-red-600',\n        /* <tw-keep strokeColor=\"red-500\"/> */\n        iconCloseColor: 'red-500',\n        /* <tw-keep strokeColor=\"red-400\"/> */\n        iconColor: 'red-400',\n        /* <tw-keep strokeColor=\"red-300\"/> */\n        iconChevronColor: 'red-300',\n    },\n    success: {\n        headerClass: 'text-jade-700 bg-jade-100',\n        bodyClass: 'bg-jade-50 text-jade-600',\n        borderClass: 'border-jade-100',\n        detailsHeaderClass: 'text-jade-600',\n        /* <tw-keep strokeColor=\"jade-600\"/> */\n        iconCloseColor: 'jade-600',\n        /* <tw-keep strokeColor=\"jade-500\"/> */\n        iconColor: 'jade-500',\n        /* <tw-keep strokeColor=\"jade-300\"/> */\n        iconChevronColor: 'jade-300',\n    },\n    clear: {\n        wrapperClass: 'border-gray-50 bg-white border text-gray-700',\n        headerClass: '',\n        bodyClass: 'border-gray-50 border-t',\n        borderClass: 'border-gray-50',\n        detailsHeaderClass: 'text-gray-700',\n        /* <tw-keep strokeColor=\"gray-600\"/> */\n        iconCloseColor: 'gray-600',\n        /* <tw-keep strokeColor=\"gray-500\"/> */\n        iconColor: 'gray-500',\n        /* <tw-keep strokeColor=\"gray-300\"/> */\n        iconChevronColor: 'gray-300',\n    },\n};\nexport const defaultAlertVariant = 'info';\nexport const defaultAlertTitle = 'Additional details';\n","<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue'\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n  IconChevronDownSmall,\n  IconActionDeleteLarge,\n  IconWarningCircle,\n  IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport {\n  AlertSize,\n  alertSizesClasses,\n  AlertVariant,\n  defaultAlertSize,\n  defaultAlertTitle,\n  defaultAlertVariant,\n  alertClasses,\n} from '@cypress-design/constants-alert'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n  /**\n   * Clicking on the dismiss button or dismissed after a timeout\n   */\n  (event: 'dismiss'): void\n}>()\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Color scheme\n     */\n    variant?: AlertVariant\n    /**\n     * Color scheme\n     * @deprecated use `variant` instead\n     */\n    type?: AlertVariant\n    /**\n     * If details are provided,text used in the toggle button\n     */\n    detailsTitle?: string\n    /**\n     * Show the dismiss button\n     */\n    dismissible?: boolean\n    /**\n     * When an icon is displayed by default, use this to remove it\n     */\n    noIcon?: boolean\n    /**\n     * If you need square corners\n     */\n    notRounded?: boolean\n    /**\n     * Dismiss the alert after a delay (in ms)\n     */\n    duration?: number\n    /**\n     * Size of the alert\n     */\n    size?: typeof defaultAlertSize | AlertSize\n  }>(),\n  {\n    variant: undefined,\n    type: defaultAlertVariant,\n    detailsTitle: defaultAlertTitle,\n    size: defaultAlertSize,\n  },\n)\n\nconst variant = computed(() => {\n  return props.variant ?? props.type\n})\n\nconst detailsRef = ref(null)\nconst contentRef = ref(null)\n\nconst variantClasses = computed(() => {\n  return alertClasses[variant.value] ?? {}\n})\n\nlet timeout: number | undefined\n\nonMounted(() => {\n  if (props.duration) {\n    timeout = setTimeout(dismiss, props.duration)\n  }\n})\n\nonMounted(() => {\n  if (detailsRef.value && contentRef.value) {\n    new DetailsAnimation(detailsRef.value, contentRef.value)\n  }\n})\n\nonUnmounted(() => {\n  if (timeout) {\n    clearTimeout(timeout)\n  }\n})\n\nfunction dismiss() {\n  dismissed.value = true\n  emit('dismiss')\n  if (timeout) {\n    clearTimeout(timeout)\n    timeout = undefined\n  }\n}\n\nconst computedIconProps = computed(() => {\n  return {\n    strokeColor: variantClasses.value.iconColor,\n    class: 'my-[4px] mr-[8px]',\n  }\n})\n\nconst icon: ComputedRef<FunctionalComponent | null> = computed(() => {\n  switch (variant.value) {\n    case 'info':\n      return null\n    case 'success':\n      return () => h(IconCheckmarkOutline, computedIconProps.value)\n    case 'warning':\n      return () => h(IconWarningCircle, computedIconProps.value)\n    case 'error':\n      return () => h(IconWarningCircle, computedIconProps.value)\n    default:\n      return null\n  }\n})\n\nconst sizeClasses = computed(() => {\n  return alertSizesClasses[props.size] ?? {}\n})\n</script>\n\n<template>\n  <div\n    v-if=\"!dismissed\"\n    class=\"overflow-hidden text-left\"\n    :class=\"[variantClasses.wrapperClass, { rounded: !props.notRounded }]\"\n  >\n    <div class=\"flex\" :class=\"[variantClasses.headerClass, sizeClasses]\">\n      <!--\n        @slot replace the default left icon here\n        @binding strokeColor - a windicolor that to be passed to `strokeColor`\n        @binding class - the class this icon should have (for utility css purposes)\n\t\t\t-->\n      <slot name=\"icon\" v-bind=\"computedIconProps\">\n        <component\n          :is=\"icon\"\n          v-if=\"!props.noIcon && icon\"\n          v-bind=\"computedIconProps\"\n        />\n      </slot>\n      <div class=\"flex-1 font-medium\">\n        <!-- @slot title of the alert -->\n        <slot />\n      </div>\n      <button\n        v-if=\"dismissible\"\n        class=\"m-[4px] ml-[8px] h-[16px]\"\n        aria-label=\"Dismiss\"\n        @click=\"dismiss\"\n      >\n        <IconActionDeleteLarge :stroke-color=\"variantClasses.iconCloseColor\" />\n      </button>\n    </div>\n    <div v-if=\"slots.body\" class=\"p-[16px]\" :class=\"variantClasses.bodyClass\">\n      <!-- @slot body/details of the alert -->\n      <slot name=\"body\" />\n    </div>\n    <details\n      v-if=\"slots.details\"\n      ref=\"detailsRef\"\n      class=\"p-[16px] border-t border-t-1\"\n      :class=\"[variantClasses.bodyClass, variantClasses.borderClass]\"\n    >\n      <summary\n        class=\"flex font-medium cursor-pointer details-none\"\n        :class=\"variantClasses.detailsHeaderClass\"\n      >\n        <IconChevronDownSmall\n          :strokeColor=\"variantClasses.iconChevronColor\"\n          class=\"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0\"\n        />\n        {{ props.detailsTitle }}\n      </summary>\n      <div ref=\"contentRef\">\n        <div>\n          <!--@slot Togglable additional details-->\n          <slot name=\"details\" />\n        </div>\n      </div>\n    </details>\n    <template v-if=\"$slots.footer\">\n      <div :class=\"variantClasses.bodyClass\">\n        <!--@slot A box to add buttons or additional content -->\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </div>\n</template>\n"],"names":["alertSizesClasses","defaultAlertSize","alertClasses","defaultAlertVariant","defaultAlertTitle","dismissed","ref","slots","useSlots","emit","__emit","props","__props","variant","computed","detailsRef","contentRef","variantClasses","timeout","onMounted","dismiss","DetailsAnimation","onUnmounted","computedIconProps","icon","h","IconCheckmarkOutline","IconWarningCircle","sizeClasses"],"mappings":"oaAAO,MAAMA,EAAoB,CAC7B,GAAI,+CACJ,GAAI,gDACJ,GAAI,iDACJ,GAAI,qCACR,EACaC,EAAmB,KACnBC,EAAe,CACxB,QAAS,CACL,YAAa,4BACb,UAAW,2BACX,YAAa,kBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UACrB,EACD,KAAM,CACF,YAAa,gCACb,UAAW,+BACX,YAAa,oBACb,mBAAoB,kBAEpB,eAAgB,aAEhB,UAAW,aAEX,iBAAkB,YACrB,EACD,QAAS,CACL,YAAa,gCACb,UAAW,+BACX,YAAa,oBACb,mBAAoB,kBAEpB,eAAgB,aAEhB,UAAW,aAEX,iBAAkB,YACrB,EACD,MAAO,CACH,YAAa,0BACb,UAAW,yBACX,YAAa,iBACb,mBAAoB,eAEpB,eAAgB,UAEhB,UAAW,UAEX,iBAAkB,SACrB,EACD,QAAS,CACL,YAAa,4BACb,UAAW,2BACX,YAAa,kBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UACrB,EACD,MAAO,CACH,aAAc,+CACd,YAAa,GACb,UAAW,0BACX,YAAa,iBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UACrB,CACL,EACaC,EAAsB,OACtBC,EAAoB,oTC/D3B,MAAAC,EAAYC,MAAI,EAAK,EAErBC,EAAQC,EAAAA,WAERC,EAAOC,EAOPC,EAAQC,EA4CRC,EAAUC,EAAAA,SAAS,IAChBH,EAAM,SAAWA,EAAM,IAC/B,EAEKI,EAAaT,MAAI,IAAI,EACrBU,EAAaV,MAAI,IAAI,EAErBW,EAAiBH,EAAAA,SAAS,IACvBZ,EAAaW,EAAQ,KAAK,GAAK,CAAA,CACvC,EAEG,IAAAK,EAEJC,EAAAA,UAAU,IAAM,CACVR,EAAM,WACEO,EAAA,WAAWE,EAAST,EAAM,QAAQ,EAC9C,CACD,EAEDQ,EAAAA,UAAU,IAAM,CACVJ,EAAW,OAASC,EAAW,OACjC,IAAIK,EAAiB,iBAAAN,EAAW,MAAOC,EAAW,KAAK,CACzD,CACD,EAEDM,EAAAA,YAAY,IAAM,CACZJ,GACF,aAAaA,CAAO,CACtB,CACD,EAED,SAASE,GAAU,CACjBf,EAAU,MAAQ,GAClBI,EAAK,SAAS,EACVS,IACF,aAAaA,CAAO,EACVA,EAAA,OAEd,CAEM,MAAAK,EAAoBT,EAAAA,SAAS,KAC1B,CACL,YAAaG,EAAe,MAAM,UAClC,MAAO,mBAAA,EAEV,EAEKO,EAAgDV,EAAAA,SAAS,IAAM,CACnE,OAAQD,EAAQ,MAAO,CACrB,IAAK,OACI,OAAA,KACT,IAAK,UACH,MAAO,IAAMY,EAAAA,EAAEC,EAAAA,qBAAsBH,EAAkB,KAAK,EAC9D,IAAK,UACH,MAAO,IAAME,EAAAA,EAAEE,EAAAA,kBAAmBJ,EAAkB,KAAK,EAC3D,IAAK,QACH,MAAO,IAAME,EAAAA,EAAEE,EAAAA,kBAAmBJ,EAAkB,KAAK,EAC3D,QACS,OAAA,IACX,CAAA,CACD,EAEKK,EAAcd,EAAAA,SAAS,IACpBd,EAAkBW,EAAM,IAAI,GAAK,CAAA,CACzC"}
+{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.es.mjs","../Alert.vue"],"sourcesContent":["const CssAlertSizesClasses = {\n    xs: 'py-[4px] px-[8px] leading-[22px] text-[14px]',\n    sm: 'py-[8px] px-[12px] leading-[22px] text-[14px]',\n    md: 'py-[12px] px-[16px] leading-[24px] text-[16px]',\n    lg: 'p-[16px] leading-[24px] text-[16px]',\n};\nconst defaultAlertSize = 'lg';\nconst CssAlertClasses = {\n    neutral: {\n        headerClass: 'text-gray-800 bg-gray-100',\n        bodyClass: 'bg-gray-50 text-gray-500',\n        borderClass: 'border-gray-100',\n        detailsHeaderClass: 'text-gray-600',\n        /* <tw-keep strokeColor=\"gray-600\"/> */\n        iconCloseColor: 'gray-600',\n        /* <tw-keep strokeColor=\"gray-500\"/> */\n        iconColor: 'gray-500',\n        /* <tw-keep strokeColor=\"gray-300\"/> */\n        iconChevronColor: 'gray-300',\n    },\n    info: {\n        headerClass: 'text-indigo-700 bg-indigo-100',\n        bodyClass: 'bg-indigo-50 text-indigo-500',\n        borderClass: 'border-indigo-100',\n        detailsHeaderClass: 'text-indigo-600',\n        /* <tw-keep strokeColor=\"indigo-500\"/> */\n        iconCloseColor: 'indigo-500',\n        /* <tw-keep strokeColor=\"indigo-500\"/> */\n        iconColor: 'indigo-500',\n        /* <tw-keep strokeColor=\"indigo-300\"/> */\n        iconChevronColor: 'indigo-300',\n    },\n    warning: {\n        headerClass: 'text-orange-700 bg-orange-100',\n        bodyClass: 'bg-orange-50 text-orange-500',\n        borderClass: 'border-orange-100',\n        detailsHeaderClass: 'text-orange-600',\n        /* <tw-keep strokeColor=\"orange-500\"/> */\n        iconCloseColor: 'orange-500',\n        /* <tw-keep strokeColor=\"orange-400\"/> */\n        iconColor: 'orange-400',\n        /* <tw-keep strokeColor=\"orange-300\"/> */\n        iconChevronColor: 'orange-300',\n    },\n    error: {\n        headerClass: 'text-red-700 bg-red-100',\n        bodyClass: 'bg-red-50 text-red-500',\n        borderClass: 'border-red-100',\n        detailsHeaderClass: 'text-red-600',\n        /* <tw-keep strokeColor=\"red-500\"/> */\n        iconCloseColor: 'red-500',\n        /* <tw-keep strokeColor=\"red-400\"/> */\n        iconColor: 'red-400',\n        /* <tw-keep strokeColor=\"red-300\"/> */\n        iconChevronColor: 'red-300',\n    },\n    success: {\n        headerClass: 'text-jade-700 bg-jade-100',\n        bodyClass: 'bg-jade-50 text-jade-600',\n        borderClass: 'border-jade-100',\n        detailsHeaderClass: 'text-jade-600',\n        /* <tw-keep strokeColor=\"jade-600\"/> */\n        iconCloseColor: 'jade-600',\n        /* <tw-keep strokeColor=\"jade-500\"/> */\n        iconColor: 'jade-500',\n        /* <tw-keep strokeColor=\"jade-300\"/> */\n        iconChevronColor: 'jade-300',\n    },\n    clear: {\n        wrapperClass: 'border-gray-50 bg-white border text-gray-700',\n        headerClass: '',\n        bodyClass: 'border-gray-50 border-t',\n        borderClass: 'border-gray-50',\n        detailsHeaderClass: 'text-gray-700',\n        /* <tw-keep strokeColor=\"gray-600\"/> */\n        iconCloseColor: 'gray-600',\n        /* <tw-keep strokeColor=\"gray-500\"/> */\n        iconColor: 'gray-500',\n        /* <tw-keep strokeColor=\"gray-300\"/> */\n        iconChevronColor: 'gray-300',\n    },\n};\nconst defaultAlertVariant = 'info';\nconst defaultAlertTitle = 'Additional details';\n\nexport { CssAlertClasses, CssAlertSizesClasses, defaultAlertSize, defaultAlertTitle, defaultAlertVariant };\n//# sourceMappingURL=index.es.mjs.map\n","<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue'\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n  IconChevronDownSmall,\n  IconActionDeleteLarge,\n  IconWarningCircle,\n  IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport {\n  AlertSize,\n  CssAlertSizesClasses,\n  AlertVariant,\n  defaultAlertSize,\n  defaultAlertTitle,\n  defaultAlertVariant,\n  CssAlertClasses,\n} from '@cypress-design/constants-alert'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n  /**\n   * Clicking on the dismiss button or dismissed after a timeout\n   */\n  (event: 'dismiss'): void\n}>()\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Color scheme\n     */\n    variant?: AlertVariant\n    /**\n     * Color scheme\n     * @deprecated use `variant` instead\n     */\n    type?: AlertVariant\n    /**\n     * If details are provided,text used in the toggle button\n     */\n    detailsTitle?: string\n    /**\n     * Show the dismiss button\n     */\n    dismissible?: boolean\n    /**\n     * When an icon is displayed by default, use this to remove it\n     */\n    noIcon?: boolean\n    /**\n     * If you need square corners\n     */\n    notRounded?: boolean\n    /**\n     * Dismiss the alert after a delay (in ms)\n     */\n    duration?: number\n    /**\n     * Size of the alert\n     */\n    size?: typeof defaultAlertSize | AlertSize\n  }>(),\n  {\n    variant: undefined,\n    type: defaultAlertVariant,\n    detailsTitle: defaultAlertTitle,\n    size: defaultAlertSize,\n  },\n)\n\nconst variant = computed(() => {\n  return props.variant ?? props.type\n})\n\nconst detailsRef = ref(null)\nconst contentRef = ref(null)\n\nconst variantClasses = computed(() => {\n  return CssAlertClasses[variant.value] ?? {}\n})\n\nlet timeout: number | undefined\n\nonMounted(() => {\n  if (props.duration) {\n    timeout = setTimeout(dismiss, props.duration)\n  }\n})\n\nonMounted(() => {\n  if (detailsRef.value && contentRef.value) {\n    new DetailsAnimation(detailsRef.value, contentRef.value)\n  }\n})\n\nonUnmounted(() => {\n  if (timeout) {\n    clearTimeout(timeout)\n  }\n})\n\nfunction dismiss() {\n  dismissed.value = true\n  emit('dismiss')\n  if (timeout) {\n    clearTimeout(timeout)\n    timeout = undefined\n  }\n}\n\nconst computedIconProps = computed(() => {\n  return {\n    strokeColor: variantClasses.value.iconColor,\n    class: 'my-[4px] mr-[8px]',\n  }\n})\n\nconst icon: ComputedRef<FunctionalComponent | null> = computed(() => {\n  switch (variant.value) {\n    case 'info':\n      return null\n    case 'success':\n      return () => h(IconCheckmarkOutline, computedIconProps.value)\n    case 'warning':\n      return () => h(IconWarningCircle, computedIconProps.value)\n    case 'error':\n      return () => h(IconWarningCircle, computedIconProps.value)\n    default:\n      return null\n  }\n})\n\nconst sizeClasses = computed(() => {\n  return CssAlertSizesClasses[props.size] ?? {}\n})\n</script>\n\n<template>\n  <div\n    v-if=\"!dismissed\"\n    class=\"overflow-hidden text-left\"\n    :class=\"[variantClasses.wrapperClass, { rounded: !props.notRounded }]\"\n  >\n    <div class=\"flex\" :class=\"[variantClasses.headerClass, sizeClasses]\">\n      <!--\n        @slot replace the default left icon here\n        @binding strokeColor - a windicolor that to be passed to `strokeColor`\n        @binding class - the class this icon should have (for utility css purposes)\n\t\t\t-->\n      <slot name=\"icon\" v-bind=\"computedIconProps\">\n        <component\n          :is=\"icon\"\n          v-if=\"!props.noIcon && icon\"\n          v-bind=\"computedIconProps\"\n        />\n      </slot>\n      <div class=\"flex-1 font-medium\">\n        <!-- @slot title of the alert -->\n        <slot />\n      </div>\n      <button\n        v-if=\"dismissible\"\n        class=\"m-[4px] ml-[8px] h-[16px]\"\n        aria-label=\"Dismiss\"\n        @click=\"dismiss\"\n      >\n        <IconActionDeleteLarge :stroke-color=\"variantClasses.iconCloseColor\" />\n      </button>\n    </div>\n    <div v-if=\"slots.body\" class=\"p-[16px]\" :class=\"variantClasses.bodyClass\">\n      <!-- @slot body/details of the alert -->\n      <slot name=\"body\" />\n    </div>\n    <details\n      v-if=\"slots.details\"\n      ref=\"detailsRef\"\n      class=\"p-[16px] border-t border-t-1\"\n      :class=\"[variantClasses.bodyClass, variantClasses.borderClass]\"\n    >\n      <summary\n        class=\"flex font-medium cursor-pointer details-none\"\n        :class=\"variantClasses.detailsHeaderClass\"\n      >\n        <IconChevronDownSmall\n          :strokeColor=\"variantClasses.iconChevronColor\"\n          class=\"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0\"\n        />\n        {{ props.detailsTitle }}\n      </summary>\n      <div ref=\"contentRef\">\n        <div>\n          <!--@slot Togglable additional details-->\n          <slot name=\"details\" />\n        </div>\n      </div>\n    </details>\n    <template v-if=\"$slots.footer\">\n      <div :class=\"variantClasses.bodyClass\">\n        <!--@slot A box to add buttons or additional content -->\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </div>\n</template>\n"],"names":["CssAlertSizesClasses","defaultAlertSize","CssAlertClasses","defaultAlertVariant","defaultAlertTitle","dismissed","ref","slots","useSlots","emit","__emit","props","__props","variant","computed","detailsRef","contentRef","variantClasses","timeout","onMounted","dismiss","DetailsAnimation","onUnmounted","computedIconProps","icon","h","IconCheckmarkOutline","IconWarningCircle","sizeClasses"],"mappings":"kaAAA,MAAMA,EAAuB,CACzB,GAAI,+CACJ,GAAI,gDACJ,GAAI,iDACJ,GAAI,qCACR,EACMC,EAAmB,KACnBC,EAAkB,CACpB,QAAS,CACL,YAAa,4BACb,UAAW,2BACX,YAAa,kBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UAC1B,EACI,KAAM,CACF,YAAa,gCACb,UAAW,+BACX,YAAa,oBACb,mBAAoB,kBAEpB,eAAgB,aAEhB,UAAW,aAEX,iBAAkB,YAC1B,EACI,QAAS,CACL,YAAa,gCACb,UAAW,+BACX,YAAa,oBACb,mBAAoB,kBAEpB,eAAgB,aAEhB,UAAW,aAEX,iBAAkB,YAC1B,EACI,MAAO,CACH,YAAa,0BACb,UAAW,yBACX,YAAa,iBACb,mBAAoB,eAEpB,eAAgB,UAEhB,UAAW,UAEX,iBAAkB,SAC1B,EACI,QAAS,CACL,YAAa,4BACb,UAAW,2BACX,YAAa,kBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UAC1B,EACI,MAAO,CACH,aAAc,+CACd,YAAa,GACb,UAAW,0BACX,YAAa,iBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UAC1B,CACA,EACMC,EAAsB,OACtBC,EAAoB,oTC/D1B,MAAMC,EAAYC,EAAAA,IAAI,EAAK,EAErBC,EAAQC,EAAAA,SAAA,EAERC,EAAOC,EAOPC,EAAQC,EA4CRC,EAAUC,EAAAA,SAAS,IAChBH,EAAM,SAAWA,EAAM,IAC/B,EAEKI,EAAaT,EAAAA,IAAI,IAAI,EACrBU,EAAaV,EAAAA,IAAI,IAAI,EAErBW,EAAiBH,EAAAA,SAAS,IACvBZ,EAAgBW,EAAQ,KAAK,GAAK,CAAA,CAC1C,EAED,IAAIK,EAEJC,EAAAA,UAAU,IAAM,CACVR,EAAM,WACRO,EAAU,WAAWE,EAAST,EAAM,QAAQ,EAEhD,CAAC,EAEDQ,EAAAA,UAAU,IAAM,CACVJ,EAAW,OAASC,EAAW,OACjC,IAAIK,EAAAA,iBAAiBN,EAAW,MAAOC,EAAW,KAAK,CAE3D,CAAC,EAEDM,EAAAA,YAAY,IAAM,CACZJ,GACF,aAAaA,CAAO,CAExB,CAAC,EAED,SAASE,GAAU,CACjBf,EAAU,MAAQ,GAClBI,EAAK,SAAS,EACVS,IACF,aAAaA,CAAO,EACpBA,EAAU,OAEd,CAEA,MAAMK,EAAoBT,EAAAA,SAAS,KAC1B,CACL,YAAaG,EAAe,MAAM,UAClC,MAAO,mBAAA,EAEV,EAEKO,EAAgDV,EAAAA,SAAS,IAAM,CACnE,OAAQD,EAAQ,MAAA,CACd,IAAK,OACH,OAAO,KACT,IAAK,UACH,MAAO,IAAMY,EAAAA,EAAEC,uBAAsBH,EAAkB,KAAK,EAC9D,IAAK,UACH,MAAO,IAAME,EAAAA,EAAEE,oBAAmBJ,EAAkB,KAAK,EAC3D,IAAK,QACH,MAAO,IAAME,EAAAA,EAAEE,oBAAmBJ,EAAkB,KAAK,EAC3D,QACE,OAAO,IAAA,CAEb,CAAC,EAEKK,EAAcd,EAAAA,SAAS,IACpBd,EAAqBW,EAAM,IAAI,GAAK,CAAA,CAC5C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cypress-design/vue-alert",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "files": [
     "*"
   ],
@@ -20,15 +20,15 @@
   },
   "scripts": {
     "build": "yarn build:module && yarn build:types",
-    "build:module": "yarn vite build",
-    "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
+    "build:module": "yarn exec vite build",
+    "build:types": "yarn exec vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/constants-alert": "^1.0.0",
     "@cypress-design/details-animation": "^1.0.0",
-    "@cypress-design/vue-icon": "^1.0.0"
+    "@cypress-design/vue-icon": "^3.3.2"
   },
   "devDependencies": {
+    "@cypress-design/constants-alert": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

package/vite.config.ts

@@ -1,5 +1,5 @@
 import * as path from 'path'
-import generateViteConfig from '../../root.vite.config'
+import generateViteConfig from '../../vue.vite.config'
 
 export default generateViteConfig({
   entry: path.resolve(__dirname, './index.ts'),