@adyen/bento-vue3 1.22.0 → 1.24.0

package/dist/@types/packages/vue2/src/components/typography/typography.vue.d.ts

@@ -1,4 +1,3 @@
-import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoTypographyElement, BentoTypographyVariant } from './typography.types';
 /**
  * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles
@@ -18,135 +17,122 @@ import { BentoTypographyElement, BentoTypographyVariant } from './typography.typ
  *     `
  * }
  */
-declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_modules/vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Sets the HTML DOM element.
      * @values h1, h2, h3, h4, h5, h6, div, p, span
      */
-    el: {
-        type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | BentoTypographyElement>;
-        default: BentoTypographyElement;
-        validator: (value: BentoTypographyElement) => boolean;
-    };
+    el?: BentoTypographyElement | `${BentoTypographyElement}`;
+    /**
+     * Adds the large class modifier.
+     * Applicable to the Title variant.
+     */
+    large?: boolean;
+    /**
+     * Adds the medium class modifier.
+     * Applicable to the Title variant.
+     */
+    medium?: boolean;
     /**
      * Adds the stronger class modifier.
      * Applicable to Caption, Body and Subtitle variants.
      */
-    stronger: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    stronger?: boolean;
     /**
      * Adds the strongest class modifier.
      * Applicable to Caption, Body and Subtitle variants.
      */
-    strongest: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    strongest?: boolean;
     /**
      * Sets the type of typography variant.
      * @values caption, body, title.
      */
-    variant: {
-        type: PropType<"body" | "caption" | "title" | "subtitle" | BentoTypographyVariant>;
-        default: BentoTypographyVariant;
-        validator: (value: BentoTypographyVariant) => boolean;
-    };
+    variant?: BentoTypographyVariant | `${BentoTypographyVariant}`;
     /**
      * Adds the medium class modifier.
-     * Applicable to the Title variant.
+     * Applicable to tje Body variant.
      */
-    medium: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    wide?: boolean;
+}>, {
+    el: BentoTypographyElement;
+    large: boolean;
+    medium: boolean;
+    stronger: boolean;
+    strongest: boolean;
+    variant: BentoTypographyVariant;
+    wide: boolean;
+}>, {}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Sets the HTML DOM element.
+     * @values h1, h2, h3, h4, h5, h6, div, p, span
+     */
+    el?: BentoTypographyElement | `${BentoTypographyElement}`;
     /**
      * Adds the large class modifier.
      * Applicable to the Title variant.
      */
-    large: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    large?: boolean;
     /**
      * Adds the medium class modifier.
-     * Applicable to tje Body variant.
-     */
-    wide: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    conditionalClasses: import("../../../../vue3/node_modules/vue").ComputedRef<{
-        [x: string]: boolean;
-    }>;
-}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
-    /**
-     * Sets the HTML DOM element.
-     * @values h1, h2, h3, h4, h5, h6, div, p, span
+     * Applicable to the Title variant.
      */
-    el: {
-        type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | BentoTypographyElement>;
-        default: BentoTypographyElement;
-        validator: (value: BentoTypographyElement) => boolean;
-    };
+    medium?: boolean;
     /**
      * Adds the stronger class modifier.
      * Applicable to Caption, Body and Subtitle variants.
      */
-    stronger: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    stronger?: boolean;
     /**
      * Adds the strongest class modifier.
      * Applicable to Caption, Body and Subtitle variants.
      */
-    strongest: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    strongest?: boolean;
     /**
      * Sets the type of typography variant.
      * @values caption, body, title.
      */
-    variant: {
-        type: PropType<"body" | "caption" | "title" | "subtitle" | BentoTypographyVariant>;
-        default: BentoTypographyVariant;
-        validator: (value: BentoTypographyVariant) => boolean;
-    };
-    /**
-     * Adds the medium class modifier.
-     * Applicable to the Title variant.
-     */
-    medium: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Adds the large class modifier.
-     * Applicable to the Title variant.
-     */
-    large: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    variant?: BentoTypographyVariant | `${BentoTypographyVariant}`;
     /**
      * Adds the medium class modifier.
      * Applicable to tje Body variant.
      */
-    wide: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
+    wide?: boolean;
+}>, {
+    el: BentoTypographyElement;
+    large: boolean;
+    medium: boolean;
+    stronger: boolean;
+    strongest: boolean;
+    variant: BentoTypographyVariant;
+    wide: boolean;
+}>>>, {
     wide: boolean;
     stronger: boolean;
     strongest: boolean;
-    el: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | BentoTypographyElement;
-    variant: "body" | "caption" | "title" | "subtitle" | BentoTypographyVariant;
-    medium: boolean;
+    el: BentoTypographyElement | `${BentoTypographyElement}`;
     large: boolean;
+    medium: boolean;
+    variant: BentoTypographyVariant | `${BentoTypographyVariant}`;
+}>, {
+    default: (_: {}) => any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../vue3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../vue3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/composables/index.d.ts

@@ -6,3 +6,4 @@ export * from './use-form-layout-loading/use-form-layout-loading';
 export * from './use-form-validate';
 export * from './use-has-slot/use-has-slot';
 export * from './use-virtual-list';
+export * from './use-bento-toast-controller';

package/dist/@types/packages/vue2/src/composables/use-bento-toast-controller/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-bento-toast-controller';
+export * from './use-bento-toast-controller.types';

package/dist/@types/packages/vue2/src/composables/use-bento-toast-controller/install.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This function is used to create and register global reactive state necessary fro the Toasts to operate.
+ * @param {Vue} Vue A context application to register global state with.
+ */
+declare const _default: (Vue: any) => void;
+export default _default;

package/dist/@types/packages/vue2/src/composables/use-bento-toast-controller/toast-stack.d.ts

@@ -0,0 +1,7 @@
+import type { ToastStack } from './use-bento-toast-controller.types';
+export declare const toastStackInjectionKey: unique symbol;
+/**
+ * This utility creates a global reactive state to add new toasts and keep track of them.
+ * @returns {ToastStack} An object that contains reactive stack property with all add toasts and a function to add new toasts
+ */
+export declare const createToastStack: () => ToastStack;

package/dist/@types/packages/vue2/src/composables/use-bento-toast-controller/use-bento-toast-controller.d.ts

@@ -0,0 +1,2 @@
+import { UseBentoToastController } from './use-bento-toast-controller.types';
+export declare function useBentoToastController(): UseBentoToastController;

package/dist/@types/packages/vue2/src/composables/use-bento-toast-controller/use-bento-toast-controller.types.d.ts

@@ -0,0 +1,23 @@
+import { type DeepReadonly, type Ref } from "../../../../vue3/node_modules/vue";
+export interface BentoToastItemAction {
+    handler: () => void;
+    text: string;
+}
+export interface BentoToastItemParams {
+    action?: BentoToastItemAction;
+    text: string;
+}
+export interface BentoToastItem extends BentoToastItemParams {
+    id: string;
+    dismiss: () => void;
+}
+export type BentoToastItemsList = Array<BentoToastItem>;
+interface Toast {
+    dismiss: () => void;
+}
+export interface ToastStack {
+    stack: DeepReadonly<Ref<BentoToastItemsList>>;
+    addToast: (params: BentoToastItemParams) => Toast;
+}
+export type UseBentoToastController = ToastStack;
+export {};

package/dist/@types/packages/vue2/src/index.d.ts

@@ -49,6 +49,7 @@ export * from './components/toggle';
 export * from './components/tutorial';
 export * from './components/typography';
 export * from './composables/use-form-validate';
+export * from './composables/use-bento-toast-controller';
 export * from './templates/data-grid-template';
 export * from './types';
 export * from './directives';

package/dist/@types/packages/vue2/src/utils/ts/storybook.d.ts

@@ -10,3 +10,13 @@ export declare const getPokemonFromApi: (pokemonName?: string) => Promise<{
     label: any;
     value: any;
 }[]>;
+/**
+ * Adds necessary Toast component to display toasts.
+ * It should be added just once on the app level, but never in the views or components itself
+ */
+export declare const withToastDecorator: () => {
+    components: {
+        BentoToast: import("../../../../vue3/node_modules/vue").DefineComponent<{}, {}, {}, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{}>>, {}>;
+    };
+    template: string;
+};

package/dist/accordion.js

@@ -1,11 +1,11 @@
 import { defineComponent as C, provide as k, toRef as B, openBlock as a, createElementBlock as r, renderSlot as E, ref as b, inject as O, computed as $, watch as s, createVNode as y, unref as e, withCtx as g, createElementVNode as h, createBlock as I, createTextVNode as z, toDisplayString as A, Transition as D, normalizeStyle as H, createCommentVNode as V } from "vue";
 import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as w } from "./chunks/index.6e7e9ac6.js";
+import { B as w } from "./chunks/index.51fe0fc2.js";
 import { C as R, a as j } from "./chunks/chevron-up.638a9f34.js";
 import { g as x } from "./chunks/unique-id.a2a2b458.js";
 import { o as M } from "./chunks/resize.a041304d.js";
 import { u as U } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index21.css";
+import "./assets/index9.css";
 const S = Symbol("accordion title size injection key"), q = { class: "b-accordion" }, J = {}, K = /* @__PURE__ */ C({
   ...J,
   __name: "accordion",

package/dist/action-bar.js

@@ -1,13 +1,13 @@
 import { onMounted as k, nextTick as B, getCurrentScope as z, onScopeDispose as H, unref as o, getCurrentInstance as x, ref as _, watch as A, watchEffect as U, computed as y, defineComponent as Y, toRefs as K, provide as Q, openBlock as S, createBlock as I, Transition as $, withCtx as w, createElementVNode as V, normalizeClass as q, createElementBlock as J, createVNode as N, createCommentVNode as Z, createTextVNode as X, toDisplayString as W } from "vue";
-import { a as ee } from "./chunks/button.a378e7ab.js";
-import { B as te } from "./chunks/index.6e7e9ac6.js";
-import { B as ne } from "./chunks/button-actions-with-menu.df95130d.js";
+import { a as ee } from "./chunks/button.ce5d1f5e.js";
+import { B as te } from "./chunks/index.51fe0fc2.js";
+import { B as ne } from "./chunks/button-actions-with-menu.305991e5.js";
 import { C as ae } from "./chunks/cross.26509efc.js";
 import { u as oe } from "./chunks/i18n.f7e6533e.js";
-import { P as ie } from "./chunks/index.fb0e9e1a.js";
-import { B as se } from "./chunks/button-actions.bcc9dcc7.js";
+import { P as ie } from "./chunks/index.920cc1ee.js";
+import { B as se } from "./chunks/button-actions.ea025810.js";
 import { _ as ce } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index10.css";
+import "./assets/index35.css";
 function P(e) {
   return z() ? (H(e), !0) : !1;
 }

package/dist/alert.js

@@ -1,37 +1,73 @@
-import { openBlock as o, createElementBlock as p, mergeProps as w, toDisplayString as V, createCommentVNode as a, createElementVNode as u, defineComponent as G, computed as s, onMounted as R, resolveComponent as f, normalizeClass as A, createBlock as d, resolveDynamicComponent as N, withCtx as v, renderSlot as h, createVNode as D } from "vue";
-import { B as P, c as U, a as y } from "./chunks/index.6e7e9ac6.js";
-import { a as F } from "./chunks/button.a378e7ab.js";
-import { C as M } from "./chunks/cross-small.b85406fe.js";
-import { _ as E } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { C as b } from "./chunks/cross-circle-fill.1abec1a2.js";
-import { C as S } from "./chunks/checkmark-circle-fill.c45a999d.js";
-import { I as T } from "./chunks/info-filled.a6f9d7d0.js";
+import { openBlock as e, createElementBlock as l, mergeProps as I, toDisplayString as E, createCommentVNode as a, createElementVNode as o, defineComponent as R, computed as r, onMounted as A, resolveComponent as m, normalizeClass as N, createBlock as p, resolveDynamicComponent as M, withCtx as g, renderSlot as v, createVNode as D } from "vue";
+import { B as P, c as Z, a as y } from "./chunks/index.51fe0fc2.js";
+import { a as F } from "./chunks/button.ce5d1f5e.js";
+import { C as U } from "./chunks/cross-small.b85406fe.js";
+import { _ as b } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { C as S } from "./chunks/cross-circle-fill.1abec1a2.js";
+import { C as H } from "./chunks/checkmark-circle-fill.c45a999d.js";
 import { u as O } from "./chunks/use-has-slot.4d98bf29.js";
 import { u as W } from "./chunks/i18n.f7e6533e.js";
-import "./assets/index11.css";
-var i = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.TIP = "tip", t))(i || {}), e = /* @__PURE__ */ ((t) => (t.WARNING = "warning", t.CRITICAL = "critical", t.HIGHLIGHT = "highlight", t.SUCCESS = "success", t))(e || {}), I = /* @__PURE__ */ ((t) => (t.CLOSE_ALERT = "close-alert", t))(I || {});
-let $ = 0;
-const Z = {
+import "./assets/index47.css";
+var d = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.TIP = "tip", t))(d || {}), s = /* @__PURE__ */ ((t) => (t.WARNING = "warning", t.CRITICAL = "critical", t.HIGHLIGHT = "highlight", t.SUCCESS = "success", t))(s || {}), $ = /* @__PURE__ */ ((t) => (t.CLOSE_ALERT = "close-alert", t))($ || {});
+let T = 0;
+const j = {
   beforeCreate() {
-    this.uuid = $.toString(), $ += 1;
+    this.uuid = T.toString(), T += 1;
   }
-}, j = { key: 0 }, q = /* @__PURE__ */ u("path", {
+}, q = { key: 0 }, z = /* @__PURE__ */ o("path", {
   fill: "#00112C",
   d: "M15.3501 11.5301L9.9501 2.21008C9.7501 1.87008 9.4701 1.58008 9.1301 1.38008C8.4401 0.980078 7.5601 0.980078 6.8801 1.38008C6.5401 1.58008 6.2501 1.86008 6.0601 2.20008L0.650097 11.5301C0.450097 11.8701 0.350098 12.2601 0.350098 12.6601C0.350098 13.0601 0.450097 13.4501 0.650097 13.7801C0.850097 14.1201 1.1301 14.4101 1.4701 14.6001C1.8101 14.8001 2.2001 14.9001 2.6001 14.9001H13.4001C13.7901 14.9001 14.1801 14.8001 14.5201 14.6001C14.8601 14.4001 15.1501 14.1201 15.3501 13.7801C15.5501 13.4401 15.6501 13.0501 15.6501 12.6501C15.6501 12.2501 15.5501 11.8601 15.3501 11.5201V11.5301ZM7.2501 4.58008H8.7501V9.08008H7.2501V4.58008ZM8.9201 11.7101C8.8401 11.8901 8.7201 12.0501 8.5501 12.1601C8.3801 12.2701 8.1901 12.3301 7.9901 12.3301C7.7201 12.3301 7.4701 12.2301 7.2801 12.0401C7.0901 11.8501 6.9901 11.6001 6.9901 11.3301C6.9901 11.1301 7.0501 10.9401 7.1601 10.7801C7.2701 10.6201 7.4201 10.4901 7.6101 10.4101C7.7901 10.3301 7.9901 10.3201 8.1901 10.3501C8.3901 10.3901 8.5601 10.4801 8.7001 10.6201C8.8401 10.7601 8.9301 10.9401 8.9701 11.1301C9.0101 11.3201 8.9901 11.5201 8.9101 11.7101H8.9201Z"
 }, null, -1);
-function z(t, n, C, l, r, _) {
-  return o(), p("svg", w({ role: "img" }, t.$attrs, {
+function Y(t, n, u, c, i, C) {
+  return e(), l("svg", I({ role: "img" }, t.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    t.$attrs["svg-title"] ? (o(), p("title", j, V(t.$attrs["svg-title"]), 1)) : a("", !0),
-    q
+    t.$attrs["svg-title"] ? (e(), l("title", q, E(t.$attrs["svg-title"]), 1)) : a("", !0),
+    z
   ], 16);
 }
-const H = /* @__PURE__ */ E(Z, [["render", z]]), L = {
+const w = /* @__PURE__ */ b(j, [["render", Y]]);
+let L = 0;
+const J = {
+  beforeCreate() {
+    this.uuid = L.toString(), L += 1;
+  }
+}, K = { key: 0 }, Q = ["clip-path"], X = /* @__PURE__ */ o("path", {
+  fill: "#00112C",
+  d: "M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z"
+}, null, -1), x = [
+  X
+], t1 = ["id"], e1 = /* @__PURE__ */ o("rect", {
+  width: "16",
+  height: "16",
+  fill: "#fff"
+}, null, -1), o1 = [
+  e1
+];
+function s1(t, n, u, c, i, C) {
+  return e(), l("svg", I({ role: "img" }, t.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    t.$attrs["svg-title"] ? (e(), l("title", K, E(t.$attrs["svg-title"]), 1)) : a("", !0),
+    o("g", {
+      "clip-path": "url(#uia-icons-16-info_filled__a" + t.uuid + ")"
+    }, x, 8, Q),
+    o("defs", null, [
+      o("clipPath", {
+        id: "uia-icons-16-info_filled__a" + t.uuid
+      }, o1, 8, t1)
+    ])
+  ], 16);
+}
+const V = /* @__PURE__ */ b(J, [["render", s1]]), k = {
   "en-US": {
     highlightIcon: "Highlight icon",
     successIcon: "Success icon",
@@ -39,10 +75,10 @@ const H = /* @__PURE__ */ E(Z, [["render", z]]), L = {
     warningIcon: "Warning icon",
     close: "Close"
   }
-}, Y = G({
-  i18n: { messages: L },
+}, n1 = R({
+  i18n: { messages: k },
   name: "bento-alert",
-  components: { CrossSmall: M, BentoButton: F, Warning: H, CrossCircle: b, CheckedCircle: S, Info: T, BentoTypography: P },
+  components: { CrossSmall: U, BentoButton: F, Warning: w, CrossCircle: S, CheckedCircle: H, Info: V, BentoTypography: P },
   props: {
     /**
      * Adds a close button on the right side of the alert
@@ -57,8 +93,8 @@ const H = /* @__PURE__ */ E(Z, [["render", z]]), L = {
      */
     type: {
       type: String,
-      default: e.HIGHLIGHT,
-      validator: (t) => Object.values(e).includes(t)
+      default: s.HIGHLIGHT,
+      validator: (t) => Object.values(s).includes(t)
     },
     /**
      * Variant for the alert
@@ -66,76 +102,76 @@ const H = /* @__PURE__ */ E(Z, [["render", z]]), L = {
      */
     variant: {
       type: String,
-      default: i.DEFAULT,
-      validator: (t) => Object.values(i).includes(t)
+      default: d.DEFAULT,
+      validator: (t) => Object.values(d).includes(t)
     }
   },
-  emits: [I.CLOSE_ALERT],
-  setup(t, { slots: n, emit: C }) {
-    const { t: l } = W({ messages: L }), r = s(() => t.variant === i.TIP), _ = s(() => ({
+  emits: [$.CLOSE_ALERT],
+  setup(t, { slots: n, emit: u }) {
+    const { t: c } = W({ messages: k }), i = r(() => t.variant === d.TIP), C = r(() => ({
       [`b-alert--${t.type}`]: t.type,
-      [`b-alert--${i.TIP}`]: r.value
-    })), c = s(() => l(`${t.type}Icon`)), m = s(() => {
+      [`b-alert--${d.TIP}`]: i.value
+    })), _ = r(() => c(`${t.type}Icon`)), h = r(() => {
       switch (t.type) {
-        case e.CRITICAL:
-          return b;
-        case e.SUCCESS:
+        case s.CRITICAL:
           return S;
-        case e.WARNING:
+        case s.SUCCESS:
           return H;
-        case e.HIGHLIGHT:
+        case s.WARNING:
+          return w;
+        case s.HIGHLIGHT:
         default:
-          return T;
+          return V;
       }
-    }), g = s(() => ({
-      el: U.DIV,
-      variant: r.value ? y.CAPTION : y.BODY,
+    }), f = r(() => ({
+      el: Z.DIV,
+      variant: i.value ? y.CAPTION : y.BODY,
       wide: !0
-    })), k = s(() => t.type === e.HIGHLIGHT ? "status" : "alert"), B = () => {
-      C(I.CLOSE_ALERT);
+    })), B = r(() => t.type === s.HIGHLIGHT ? "status" : "alert"), G = () => {
+      u($.CLOSE_ALERT);
     };
-    return R(() => {
+    return A(() => {
       if (!n.default && !n.description)
         throw new Error("Alert Component requires a title or a description");
     }), {
       // Values
-      alertConditionalClasses: _,
-      computedRole: k,
-      descriptionTypography: g,
-      iconComponent: m,
-      iconSvgTitle: c,
-      isTipVariant: r,
+      alertConditionalClasses: C,
+      computedRole: B,
+      descriptionTypography: f,
+      iconComponent: h,
+      iconSvgTitle: _,
+      isTipVariant: i,
       // Methods
-      onCloseButtonClick: B,
+      onCloseButtonClick: G,
       hasSlot: O(n),
-      t: l,
+      t: c,
       // Enums
       BentoTypographyVariant: y
     };
   }
 });
-const J = ["role"], K = { class: "b-alert__icon" }, Q = { class: "b-alert__content" }, X = {
+const i1 = ["role"], r1 = { class: "b-alert__icon" }, a1 = { class: "b-alert__content" }, l1 = {
   key: 2,
   class: "b-alert__actions",
   "data-testid": "alert-actions"
 };
-function x(t, n, C, l, r, _) {
-  const c = f("bento-typography"), m = f("cross-small"), g = f("bento-button");
-  return o(), p("div", {
+function c1(t, n, u, c, i, C) {
+  const _ = m("bento-typography"), h = m("cross-small"), f = m("bento-button");
+  return e(), l("div", {
     class: "b-alert",
     role: t.computedRole
   }, [
-    u("div", {
-      class: A(["b-alert__inner-container", t.alertConditionalClasses])
+    o("div", {
+      class: N(["b-alert__inner-container", t.alertConditionalClasses])
     }, [
-      u("div", K, [
-        (o(), d(N(t.iconComponent), {
+      o("div", r1, [
+        (e(), p(M(t.iconComponent), {
           "aria-hidden": "true",
           "svg-title": t.iconSvgTitle
         }, null, 8, ["svg-title"]))
       ]),
-      u("div", Q, [
-        t.hasSlot("default") && !t.isTipVariant ? (o(), d(c, {
+      o("div", a1, [
+        t.hasSlot("default") && !t.isTipVariant ? (e(), p(_, {
           key: 0,
           class: "b-alert__title",
           el: "div",
@@ -143,46 +179,46 @@ function x(t, n, C, l, r, _) {
           strongest: "",
           wide: ""
         }, {
-          default: v(() => [
-            h(t.$slots, "default", {}, void 0, !0)
+          default: g(() => [
+            v(t.$slots, "default", {}, void 0, !0)
           ]),
           _: 3
         })) : a("", !0),
-        t.hasSlot("description") ? (o(), d(c, w({
+        t.hasSlot("description") ? (e(), p(_, I({
           key: 1,
           class: "b-alert__description"
         }, t.descriptionTypography, { "data-testid": "alert-description" }), {
-          default: v(() => [
-            h(t.$slots, "description", {}, void 0, !0)
+          default: g(() => [
+            v(t.$slots, "description", {}, void 0, !0)
           ]),
           _: 3
         }, 16)) : a("", !0),
-        t.hasSlot("actions") && !t.isTipVariant ? (o(), p("div", X, [
-          h(t.$slots, "actions", {}, void 0, !0)
+        t.hasSlot("actions") && !t.isTipVariant ? (e(), l("div", l1, [
+          v(t.$slots, "actions", {}, void 0, !0)
         ])) : a("", !0)
       ]),
-      t.closeButton && !t.isTipVariant ? (o(), d(g, {
+      t.closeButton && !t.isTipVariant ? (e(), p(f, {
         key: 0,
         class: "b-alert__close-button",
         variant: "tertiary",
         type: "button",
         onClick: t.onCloseButtonClick
       }, {
-        default: v(() => [
-          D(m, {
+        default: g(() => [
+          D(h, {
             "svg-title": t.t("close")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
       }, 8, ["onClick"])) : a("", !0)
     ], 2)
-  ], 8, J);
+  ], 8, i1);
 }
-const d1 = /* @__PURE__ */ E(Y, [["render", x], ["__scopeId", "data-v-549bc4f7"]]);
+const v1 = /* @__PURE__ */ b(n1, [["render", c1], ["__scopeId", "data-v-549bc4f7"]]);
 export {
-  d1 as BentoAlert,
-  I as BentoAlertEvent,
-  e as BentoAlertTypeOption,
-  i as BentoAlertVariant
+  v1 as BentoAlert,
+  $ as BentoAlertEvent,
+  s as BentoAlertTypeOption,
+  d as BentoAlertVariant
 };
 //# sourceMappingURL=alert.js.map