@cypress-design/vue-alert 0.5.2 → 0.5.3

package/.turbo/turbo-build.log

@@ -1,13 +1,13 @@
 $ yarn build:module && yarn build:types
 $ yarn vite build
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
-vite v4.2.2 building for production...
+vite v4.3.5 building for production...
 transforming...
 ✓ 5 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.mjs  9.84 kB │ gzip: 2.76 kB │ map: 269.11 kB
-dist/index.umd.js  8.26 kB │ gzip: 2.62 kB │ map: 268.50 kB
-✓ built in 6.39s
+dist/index.es.mjs  10.56 kB │ gzip: 2.87 kB │ map: 270.36 kB
+dist/index.umd.js  8.82 kB │ gzip: 2.72 kB │ map: 269.68 kB
+✓ built in 9.30s
 $ yarn vue-tsc --project ./tsconfig.build.json
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/Alert.vue

@@ -11,10 +11,10 @@ import { DetailsAnimation } from '@cypress-design/details-animation'
 import {
   AlertSize,
   alertSizesClasses,
-  AlertType,
+  AlertVariant,
   defaultAlertSize,
   defaultAlertTitle,
-  defaultAlertType,
+  defaultAlertVariant,
   alertClasses,
 } from '@cypress-design/constants-alert'
 
@@ -34,7 +34,12 @@ const props = withDefaults(
     /**
      * Color scheme
      */
-    type?: AlertType
+    variant?: AlertVariant
+    /**
+     * Color scheme
+     * @deprecated use `variant` instead
+     */
+    type?: AlertVariant
     /**
      * If details are provided,text used in the toggle button
      */
@@ -61,17 +66,22 @@ const props = withDefaults(
     size?: AlertSize
   }>(),
   {
-    type: defaultAlertType,
+    variant: undefined,
+    type: defaultAlertVariant,
     detailsTitle: defaultAlertTitle,
     size: defaultAlertSize,
   }
 )
 
+const variant = computed(() => {
+  return props.variant ?? props.type
+})
+
 const detailsRef = ref(null)
 const contentRef = ref(null)
 
-const typeClasses = computed(() => {
-  return alertClasses[props.type] ?? {}
+const variantClasses = computed(() => {
+  return alertClasses[variant.value] ?? {}
 })
 
 let timeout: number | undefined
@@ -105,13 +115,13 @@ function dismiss() {
 
 const computedIconProps = computed(() => {
   return {
-    strokeColor: typeClasses.value.iconColor,
+    strokeColor: variantClasses.value.iconColor,
     class: 'my-[4px] mr-[8px]',
   }
 })
 
 const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
-  switch (props.type) {
+  switch (variant.value) {
     case 'info':
       return null
     case 'success':
@@ -134,9 +144,9 @@ const sizeClasses = computed(() => {
   <div
     v-if="!dismissed"
     class="overflow-hidden text-left"
-    :class="props.notRounded ? undefined : 'rounded'"
+    :class="[variantClasses.wrapperClass, { rounded: !props.notRounded }]"
   >
-    <div class="flex" :class="[typeClasses.headerClass, sizeClasses]">
+    <div class="flex" :class="[variantClasses.headerClass, sizeClasses]">
       <!--
         @slot replace the default left icon here
         @binding strokeColor - a windicolor that to be passed to `strokeColor`
@@ -159,10 +169,10 @@ const sizeClasses = computed(() => {
         @click="dismiss"
         aria-label="Dismiss"
       >
-        <IconActionDeleteLarge :stroke-color="typeClasses.iconCloseColor" />
+        <IconActionDeleteLarge :stroke-color="variantClasses.iconCloseColor" />
       </button>
     </div>
-    <div v-if="slots.body" class="p-[16px]" :class="typeClasses.bodyClass">
+    <div v-if="slots.body" class="p-[16px]" :class="variantClasses.bodyClass">
       <!-- @slot body/details of the alert -->
       <slot name="body" />
     </div>
@@ -170,14 +180,14 @@ const sizeClasses = computed(() => {
       v-if="slots.details"
       class="p-[16px] border-t border-t-1"
       ref="detailsRef"
-      :class="[typeClasses.bodyClass, typeClasses.borderClass]"
+      :class="[variantClasses.bodyClass, variantClasses.borderClass]"
     >
       <summary
         class="flex font-medium cursor-pointer details-none"
-        :class="typeClasses.detailsHeaderClass"
+        :class="variantClasses.detailsHeaderClass"
       >
         <IconChevronDownSmall
-          :strokeColor="typeClasses.iconChevronColor"
+          :strokeColor="variantClasses.iconChevronColor"
           class="icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"
         />
         {{ props.detailsTitle }}
@@ -189,5 +199,11 @@ const sizeClasses = computed(() => {
         </div>
       </div>
     </details>
+    <template v-if="$slots.footer">
+      <div :class="variantClasses.bodyClass">
+        <!--@slot A box to add buttons or additional content -->
+        <slot name="footer" />
+      </div>
+    </template>
   </div>
 </template>

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @cypress-design/vue-alert
 
+## 0.5.3
+
+### Patch Changes
+
+- [#217](https://github.com/cypress-io/cypress-design/pull/217) [`0e24977`](https://github.com/cypress-io/cypress-design/commit/0e24977b5c2196b50409c4b1f7fe6fbe6639eb64) Thanks [@elevatebart](https://github.com/elevatebart)! - add alerts new variant and demos
+
+- Updated dependencies [[`0e24977`](https://github.com/cypress-io/cypress-design/commit/0e24977b5c2196b50409c4b1f7fe6fbe6639eb64)]:
+  - @cypress-design/constants-alert@0.1.1
+
 ## 0.5.2
 
 ### Patch Changes

package/ReadMe.md

@@ -20,25 +20,24 @@ import Alert from '@cypress-design/vue-alert'
 
 The simplest is to use with plain text. By default, type is `info`.
 
-```vue live
-<script setup>
-import Alert from '@cypress-design/vue-alert'
-</script>
-
-<template>
-  <Alert type="error">Great Scott!!</Alert>
-</template>
+```jsx live
+<Alert variant="error">Great Scott!!</Alert>
 ```
 
 One can also have rich text in both the title and the body.
 
 ```jsx live
-<Alert>
-  This is an <code>info</code> message
-  <template #body>
-    <p>This is the body of the alert.</p>
-  </template>
-</Alert>
+<div class="bg-white p-4">
+  <Alert>
+    This is an <code>info</code> message
+    <template #body>
+      <p>This is the body of <b>the alert.</b></p>
+    </template>
+    <template #details>
+      <p>This is the details of the alert.</p>
+    </template>
+  </Alert>
+</div>
 ```
 
 If you want the alert to be dismissible, you can add the `dismissible` prop. Don't forget to add the `@dismiss` prop to handle the dismiss event.
@@ -58,7 +57,55 @@ const dismissed = false
 You can also remove the rounded corners and the icon of the alert by adding the `notRounded` and the `noIcon` props.
 
 ```jsx live
-<Alert type="warning" notRounded noIcon>
+<Alert variant="warning" notRounded noIcon>
   Look at my corners
 </Alert>
 ```
+
+```vue live
+<script setup>
+import { ref } from 'vue'
+import Button from '@cypress-design/vue-button'
+const dismissed = ref(false)
+</script>
+
+<template>
+  <Alert variant="clear" dismissible @dismiss="dismissed = true">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="mr-2 inline"
+    >
+      <path
+        d="M8 0L0.552002 2.656L1.688 12.504L8 16L14.312 12.504L15.448 2.656L8 0Z"
+        fill="#DD0031"
+      />
+      <path
+        d="M8 0L8.00001 1.776V1.768L8 16L14.312 12.504L15.448 2.656L8 0Z"
+        fill="#C3002F"
+      />
+      <path
+        d="M8.00001 1.768L3.34401 12.208H5.08001L6.01601 9.872H9.96801L10.904 12.208H12.64L8.00001 1.768ZM9.36001 8.432H6.64001L8.00001 5.16L9.36001 8.432Z"
+        fill="white"
+      />
+    </svg>
+    Angular component testing is available for this project
+    <template #body>
+      You can now use Cypress to develop and test individual components without
+      running your whole application. Generate the config in just a few clicks.
+    </template>
+    <template #footer>
+      <div class="p-4 flex flex-wrap overflow-x-hidden gap-4">
+        <Button variant="outline-indigo" size="32">Quick setup</Button>
+        <Button variant="link" size="32">Read our guides</Button>
+        <div class="md:flex-grow md:grow" />
+        <Button variant="link" size="32">Give feedback</Button>
+      </div>
+    </template>
+  </Alert>
+  <p v-if="dismissed">Alert dismissed</p>
+</template>
+```

package/dist/Alert.vue.d.ts

@@ -1,9 +1,14 @@
-import { AlertSize, AlertType } from '@cypress-design/constants-alert';
+import { AlertVariant } from '@cypress-design/constants-alert';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Color scheme
      */
-    type?: AlertType | undefined;
+    variant?: AlertVariant | undefined;
+    /**
+     * Color scheme
+     * @deprecated use `variant` instead
+     */
+    type?: AlertVariant | undefined;
     /**
      * If details are provided,text used in the toggle button
      */
@@ -29,7 +34,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     size?: "xs" | "sm" | "md" | "lg" | undefined;
 }>, {
-    type: AlertType;
+    variant: undefined;
+    type: AlertVariant;
     detailsTitle: string;
     size: "xs" | "sm" | "md" | "lg";
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -38,7 +44,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Color scheme
      */
-    type?: AlertType | undefined;
+    variant?: AlertVariant | undefined;
+    /**
+     * Color scheme
+     * @deprecated use `variant` instead
+     */
+    type?: AlertVariant | undefined;
     /**
      * If details are provided,text used in the toggle button
      */
@@ -64,23 +75,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     size?: "xs" | "sm" | "md" | "lg" | undefined;
 }>, {
-    type: AlertType;
+    variant: undefined;
+    type: AlertVariant;
     detailsTitle: string;
     size: "xs" | "sm" | "md" | "lg";
 }>>> & {
     onDismiss?: (() => any) | undefined;
 }, {
-    type: AlertType;
+    variant: AlertVariant;
+    type: AlertVariant;
     detailsTitle: string;
-    size: AlertSize;
+    size: "xs" | "sm" | "md" | "lg";
 }>, {
-    icon: (_: {
+    icon?(_: {
         strokeColor: import("@cypress-design/vue-icon").WindiColor | undefined;
         class: string;
-    }) => any;
-    default: (_: {}) => any;
-    body: (_: {}) => any;
-    details: (_: {}) => any;
+    }): any;
+    default?(_: {}): any;
+    body?(_: {}): any;
+    details?(_: {}): any;
+    footer?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -93,13 +107,16 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=Alert.vue.d.ts.map

package/dist/Alert.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../Alert.vue.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,SAAS,EAET,SAAS,EAKV,MAAM,iCAAiC,CAAA;;IAyHpC;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;IA1BH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;UAvBI,SAAS;kBAID,MAAM;UAoBd,SAAS;;;;;UA4LS,GAAG;wBACA,GAAG;qBACL,GAAG;wBACA,GAAG;;AAjVpC,wBA0Wc;AACd,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC;AAWN,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAAE,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../Alert.vue.ts"],"names":[],"mappings":"AAWA,OAAO,EAGL,YAAY,EAKb,MAAM,iCAAiC,CAAA;;IAkIpC;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;IA/BH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;AAiQP,wBAA8G;AAE9G,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AAWN,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC;AACJ,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/index.es.mjs

@@ -1,84 +1,84 @@
-import { h as i, defineComponent as M, ref as z, useSlots as R, computed as f, onMounted as j, onUnmounted as T, openBlock as C, createElementBlock as x, normalizeClass as p, createElementVNode as m, unref as r, renderSlot as k, normalizeProps as A, guardReactiveProps as I, createBlock as B, resolveDynamicComponent as E, mergeProps as H, createCommentVNode as g, createVNode as S, createTextVNode as _, toDisplayString as N } from "vue";
-import * as y from "@cypress-design/icon-registry";
-import { ICON_COLOR_PROP_NAMES as O } from "@cypress-design/icon-registry";
-import { DetailsAnimation as P } from "@cypress-design/details-animation";
-const v = ({
+import { h as n, defineComponent as R, ref as z, useSlots as H, computed as b, onMounted as A, onUnmounted as I, openBlock as c, createElementBlock as f, normalizeClass as u, unref as r, createElementVNode as y, renderSlot as v, normalizeProps as $, guardReactiveProps as T, createBlock as B, resolveDynamicComponent as E, mergeProps as N, createCommentVNode as C, createVNode as S, createTextVNode as O, toDisplayString as P } from "vue";
+import * as x from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as V } from "@cypress-design/icon-registry";
+import { DetailsAnimation as Z } from "@cypress-design/details-animation";
+const k = ({
   body: s,
   compiledClasses: o,
   size: e,
   class: t,
   interactiveColorsOnGroup: h,
-  ...d
+  ...p
 }) => {
-  const c = Object.keys(d).reduce(
-    (a, n) => (!O.includes(n) && n !== "name" && (a[n] = d[n]), a),
+  const m = Object.keys(p).reduce(
+    (l, a) => (!V.includes(a) && a !== "name" && (l[a] = p[a]), l),
     {}
-  ), l = {
+  ), i = {
     width: e,
     height: e,
     viewBox: `0 0 ${e} ${e}`,
     fill: "none",
     innerHTML: s,
-    ...c
+    ...m
     // add all standard attributes back to the svg tag
   };
-  return o.length && (l.class = o.join(" ")), l;
-}, Z = (s) => {
-  const { sizeWithDefault: o, compiledClasses: e } = y.getComponentAttributes({ ...s, availableSizes: ["16", "24"] }), t = {
+  return o.length && (i.class = o.join(" ")), i;
+}, _ = (s) => {
+  const { sizeWithDefault: o, compiledClasses: e } = x.getComponentAttributes({ ...s, availableSizes: ["16", "24"] }), t = {
     16: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13 13 3M3 3l10 10" class="icon-dark"/>',
     24: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20 20 4M4 4l16 16" class="icon-dark"/>'
   }[o];
   if (!t)
     throw Error(`Icon "action-delete-large" is not available in size ${o}`);
-  return i("svg", v({
+  return n("svg", k({
     ...s,
     size: o,
     body: t,
     compiledClasses: e
   }));
-}, V = (s) => {
-  const { sizeWithDefault: o, compiledClasses: e } = y.getComponentAttributes({ ...s, availableSizes: ["16"] }), t = {
+}, W = (s) => {
+  const { sizeWithDefault: o, compiledClasses: e } = x.getComponentAttributes({ ...s, availableSizes: ["16"] }), t = {
     16: '<path stroke="currentColor" stroke-width="2" d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" class="icon-dark"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 8 1.5 2L10 6" class="icon-dark"/>'
   }[o];
   if (!t)
     throw Error(`Icon "checkmark-outline" is not available in size ${o}`);
-  return i("svg", v({
+  return n("svg", k({
     ...s,
     size: o,
     body: t,
     compiledClasses: e
   }));
-}, W = (s) => {
-  const { sizeWithDefault: o, compiledClasses: e } = y.getComponentAttributes({ ...s, availableSizes: ["8", "16"] }), t = {
+}, L = (s) => {
+  const { sizeWithDefault: o, compiledClasses: e } = x.getComponentAttributes({ ...s, availableSizes: ["8", "16"] }), t = {
     8: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 2.5 3 3 3-3" class="icon-dark"/>',
     16: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 6 4 4 4-4" class="icon-dark"/>'
   }[o];
   if (!t)
     throw Error(`Icon "chevron-down-small" is not available in size ${o}`);
-  return i("svg", v({
+  return n("svg", k({
     ...s,
     size: o,
     body: t,
     compiledClasses: e
   }));
-}, $ = (s) => {
-  const { sizeWithDefault: o, compiledClasses: e } = y.getComponentAttributes({ ...s, availableSizes: ["16"] }), t = {
+}, D = (s) => {
+  const { sizeWithDefault: o, compiledClasses: e } = x.getComponentAttributes({ ...s, availableSizes: ["16"] }), t = {
     16: '<path fill="currentColor" fill-rule="evenodd" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm1 5a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V5Zm-1 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="icon-dark" clip-rule="evenodd"/>'
   }[o];
   if (!t)
     throw Error(`Icon "warning-circle" is not available in size ${o}`);
-  return i("svg", v({
+  return n("svg", k({
     ...s,
     size: o,
     body: t,
     compiledClasses: e
   }));
-}, L = {
+}, G = {
   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]"
-}, G = "lg", U = {
+}, U = "lg", q = {
   neutral: {
     headerClass: "text-gray-800 bg-gray-100",
     bodyClass: "bg-gray-50 text-gray-500",
@@ -138,109 +138,129 @@ const v = ({
     iconColor: "jade-500",
     /* <tw-keep strokeColor="jade-300"/> */
     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",
+    /* <tw-keep strokeColor="gray-600"/> */
+    iconCloseColor: "gray-600",
+    /* <tw-keep strokeColor="gray-500"/> */
+    iconColor: "gray-500",
+    /* <tw-keep strokeColor="gray-300"/> */
+    iconChevronColor: "gray-300"
   }
-}, q = "info", F = "Additional details", J = { class: "flex-1 font-medium" }, ee = /* @__PURE__ */ M({
+}, F = "info", J = "Additional details", K = { class: "flex-1 font-medium" }, oe = /* @__PURE__ */ R({
   __name: "Alert",
   props: {
-    type: { default: q },
-    detailsTitle: { default: F },
+    variant: { default: void 0 },
+    type: { default: F },
+    detailsTitle: { default: J },
     dismissible: { type: Boolean },
     noIcon: { type: Boolean },
     notRounded: { type: Boolean },
     duration: null,
-    size: { default: G }
+    size: { default: U }
   },
   emits: ["dismiss"],
   setup(s, { emit: o }) {
-    const e = s, t = z(!1), h = R(), d = z(null), c = z(null), l = f(() => U[e.type] ?? {});
+    const e = s, t = z(!1), h = H(), p = b(() => e.variant ?? e.type), m = z(null), i = z(null), l = b(() => q[p.value] ?? {});
     let a;
-    j(() => {
-      e.duration && (a = setTimeout(n, e.duration));
-    }), j(() => {
-      d.value && c.value && new P(d.value, c.value);
-    }), T(() => {
+    A(() => {
+      e.duration && (a = setTimeout(w, e.duration));
+    }), A(() => {
+      m.value && i.value && new Z(m.value, i.value);
+    }), I(() => {
       a && clearTimeout(a);
     });
-    function n() {
+    function w() {
       t.value = !0, o("dismiss"), a && (clearTimeout(a), a = void 0);
     }
-    const u = f(() => ({
+    const g = b(() => ({
       strokeColor: l.value.iconColor,
       class: "my-[4px] mr-[8px]"
-    })), w = f(() => {
-      switch (e.type) {
+    })), j = b(() => {
+      switch (p.value) {
         case "info":
           return null;
         case "success":
-          return () => i(V, u.value);
+          return () => n(W, g.value);
         case "warning":
-          return () => i($, u.value);
+          return () => n(D, g.value);
         case "error":
-          return () => i($, u.value);
+          return () => n(D, g.value);
         default:
           return null;
       }
-    }), D = f(() => L[e.size] ?? {});
-    return (b, K) => t.value ? g("", !0) : (C(), x("div", {
+    }), M = b(() => G[e.size] ?? {});
+    return (d, Q) => t.value ? C("", !0) : (c(), f("div", {
       key: 0,
-      class: p(["overflow-hidden text-left", e.notRounded ? void 0 : "rounded"])
+      class: u(["overflow-hidden text-left", [r(l).wrapperClass, { rounded: !e.notRounded }]])
     }, [
-      m("div", {
-        class: p(["flex", [r(l).headerClass, r(D)]])
+      y("div", {
+        class: u(["flex", [r(l).headerClass, r(M)]])
       }, [
-        k(b.$slots, "icon", A(I(r(u))), () => [
-          !e.noIcon && r(w) ? (C(), B(E(r(w)), A(H({ key: 0 }, r(u))), null, 16)) : g("", !0)
+        v(d.$slots, "icon", $(T(r(g))), () => [
+          !e.noIcon && r(j) ? (c(), B(E(r(j)), $(N({ key: 0 }, r(g))), null, 16)) : C("", !0)
         ]),
-        m("div", J, [
-          k(b.$slots, "default")
+        y("div", K, [
+          v(d.$slots, "default")
         ]),
-        s.dismissible ? (C(), x("button", {
+        s.dismissible ? (c(), f("button", {
           key: 0,
           class: "m-[4px] ml-[8px] h-[16px]",
-          onClick: n,
+          onClick: w,
           "aria-label": "Dismiss"
         }, [
-          S(r(Z), {
+          S(r(_), {
             "stroke-color": r(l).iconCloseColor
           }, null, 8, ["stroke-color"])
-        ])) : g("", !0)
+        ])) : C("", !0)
       ], 2),
-      r(h).body ? (C(), x("div", {
+      r(h).body ? (c(), f("div", {
         key: 0,
-        class: p(["p-[16px]", r(l).bodyClass])
+        class: u(["p-[16px]", r(l).bodyClass])
       }, [
-        k(b.$slots, "body")
-      ], 2)) : g("", !0),
-      r(h).details ? (C(), x("details", {
+        v(d.$slots, "body")
+      ], 2)) : C("", !0),
+      r(h).details ? (c(), f("details", {
         key: 1,
-        class: p(["p-[16px] border-t border-t-1", [r(l).bodyClass, r(l).borderClass]]),
+        class: u(["p-[16px] border-t border-t-1", [r(l).bodyClass, r(l).borderClass]]),
         ref_key: "detailsRef",
-        ref: d
+        ref: m
       }, [
-        m("summary", {
-          class: p(["flex font-medium cursor-pointer details-none", r(l).detailsHeaderClass])
+        y("summary", {
+          class: u(["flex font-medium cursor-pointer details-none", r(l).detailsHeaderClass])
         }, [
-          S(r(W), {
+          S(r(L), {
             strokeColor: r(l).iconChevronColor,
             class: "icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"
           }, null, 8, ["strokeColor"]),
-          _(" " + N(e.detailsTitle), 1)
+          O(" " + P(e.detailsTitle), 1)
         ], 2),
-        m("div", {
+        y("div", {
           ref_key: "contentRef",
-          ref: c
+          ref: i
         }, [
-          m("div", null, [
-            k(b.$slots, "details")
+          y("div", null, [
+            v(d.$slots, "details")
           ])
         ], 512)
-      ], 2)) : g("", !0)
+      ], 2)) : C("", !0),
+      d.$slots.footer ? (c(), f("div", {
+        key: 2,
+        class: u(r(l).bodyClass)
+      }, [
+        v(d.$slots, "footer")
+      ], 2)) : C("", !0)
     ], 2));
   }
 });
 export {
-  ee as default
+  oe as default
 };
 //# 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 border-t-1 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 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 flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t border-t-1 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"> */