@adyen/bento-vue3 1.71.0 → 1.72.0

package/dist/chunks/{empty-state.BTaeZdQu.js → empty-state.BsKJ-1pT.js}

@@ -1,185 +1,140 @@
-import { defineComponent as U, ref as d, computed as r, watch as L, createElementBlock as A, openBlock as i, createCommentVNode as m, createVNode as P, createBlock as f, normalizeClass as k, unref as p, mergeProps as M, withCtx as c, renderSlot as C, createTextVNode as E, toDisplayString as N, createSlots as w, resolveDynamicComponent as S } from "vue";
+import { defineComponent as U, ref as d, computed as i, watch as D, createElementBlock as L, openBlock as n, createCommentVNode as p, createVNode as P, createBlock as f, normalizeClass as k, unref as E, mergeProps as y, withCtx as c, renderSlot as A, createTextVNode as N, toDisplayString as _, createSlots as M, resolveDynamicComponent as w } from "vue";
 import { B as F } from "./button.C-MAa6ut.js";
-import { B as O, c as j } from "./typography.yBEME_Gu.js";
-import { o as H } from "./resize.Bqks3WUm.js";
-import { _ as I } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as C } from "./typography.yBEME_Gu.js";
+import { o as S } from "./resize.Bqks3WUm.js";
+import { _ as H } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/empty-state.css";
-const b = (e, n, g) => {
-  const s = e[n];
-  return s ? typeof s == "function" ? s() : Promise.resolve(s) : new Promise((t, o) => {
+const h = (e, o, s) => {
+  const l = e[o];
+  return l ? typeof l == "function" ? l() : Promise.resolve(l) : new Promise((v, u) => {
     (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
-      o.bind(
+      u.bind(
         null,
         new Error(
-          "Unknown variable dynamic import: " + n + (n.split("/").length !== g ? ". Note that variables only represent file names one level deep." : "")
+          "Unknown variable dynamic import: " + o + (o.split("/").length !== s ? ". Note that variables only represent file names one level deep." : "")
         )
       )
     );
   });
 };
-var a = /* @__PURE__ */ ((e) => (e.FULL_PAGE = "full-page", e.EMBEDDED = "embedded", e.BASIC = "basic", e.CONDENSED = "condensed", e))(a || {}), h = /* @__PURE__ */ ((e) => (e.GENERIC_USE1 = "1-generic-use", e.GENERIC_USE2 = "2-generic-use", e.GENERIC_USE3 = "3-generic-use", e.GENERIC_USE4 = "4-generic-use", e.ADDING_PAYMENT_METHOD = "adding-payment-methods", e.ADYEN_GIVING = "adyen-giving", e.DELIGHT = "delight", e.INTERNAL_ERROR = "internal-error", e.NO_RESULTS_FOUND = "no-results-found", e.NOTIFICATIONS_CLEARED = "notifications-cleared", e.PAGE_NOT_FOUND = "page-not-found", e.PLANNED_MAINTENANCE = "planned-maintenance", e.REFERRALS = "referrals", e.SUCCESS = "success", e.UPLOAD_FILES = "upload-files", e.WRONG_ENVIRONMENT = "wrong-environment", e))(h || {}), u = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.LARGE = "large", e[e.NULL = null] = "NULL", e))(u || {});
-const W = ["src"], $ = {}, x = /* @__PURE__ */ U({
+var r = /* @__PURE__ */ ((e) => (e.FULL_PAGE = "full-page", e.EMBEDDED = "embedded", e.BASIC = "basic", e.CONDENSED = "condensed", e))(r || {}), I = /* @__PURE__ */ ((e) => (e.GENERIC_USE1 = "1-generic-use", e.GENERIC_USE2 = "2-generic-use", e.GENERIC_USE3 = "3-generic-use", e.GENERIC_USE4 = "4-generic-use", e.ADDING_PAYMENT_METHOD = "adding-payment-methods", e.ADYEN_GIVING = "adyen-giving", e.DELIGHT = "delight", e.INTERNAL_ERROR = "internal-error", e.NO_RESULTS_FOUND = "no-results-found", e.NOTIFICATIONS_CLEARED = "notifications-cleared", e.PAGE_NOT_FOUND = "page-not-found", e.PLANNED_MAINTENANCE = "planned-maintenance", e.REFERRALS = "referrals", e.SUCCESS = "success", e.UPLOAD_FILES = "upload-files", e.WRONG_ENVIRONMENT = "wrong-environment", e))(I || {}), g = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.LARGE = "large", e[e.NULL = null] = "NULL", e))(g || {});
+const W = ["src"], $ = {}, j = /* @__PURE__ */ U({
   ...$,
   __name: "empty-state",
   props: {
-    /**
-     * Defines the button at the end of the component.
-     */
-    action: {
-      type: Object,
-      default: null,
-      validator: (e) => !!(e.title && e.event)
-    },
-    /**
-     * The empty state description.
-     * Gives additional details to the issue.
-     * This can be used or the default slot
-     */
-    description: {
-      type: String,
-      default: null
-    },
-    /**
-     * Sets the heading HTML DOM element.
-     * @values h1, h2, h3, h4, h5, h6, div, p, span
-     */
-    headingEl: {
-      type: String,
-      default: null,
-      validator: (e) => Object.values(j).includes(e)
-    },
-    /**
-     * Name of the illustration for the empty state.
-     */
-    image: {
-      type: String,
-      default: null,
-      validator: (e) => Object.values(h).includes(e)
-    },
-    /**
-     * The empty state heading.
-     * Should clearly explain the issue.
-     */
-    title: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Types of different empty states
-     * @values full-page, embedded, basic, condensed
-     */
-    variant: {
-      type: String,
-      default: "basic",
-      validator: (e) => Object.values(a).includes(e)
-    }
+    action: { default: null },
+    description: { default: null },
+    headingEl: { default: null },
+    image: { default: null },
+    title: { default: "" },
+    variant: { default: "basic" }
   },
   setup(e) {
-    const g = {
-      [a.FULL_PAGE]: "h2",
-      [a.EMBEDDED]: "h3",
-      [a.BASIC]: "h3",
-      [a.CONDENSED]: "div"
-    }, s = e, t = d(null), o = d(0), D = r(() => o.value < 740), l = r(() => {
+    const s = e, l = d(null), v = d(0), u = i(() => v.value < 740), t = i(() => {
       switch (s.variant) {
-        case a.FULL_PAGE:
-          return D.value ? u.SMALL : u.LARGE;
-        case a.EMBEDDED:
-          return D.value ? null : u.SMALL;
+        case r.FULL_PAGE:
+          return u.value ? g.SMALL : g.LARGE;
+        case r.EMBEDDED:
+          return u.value ? null : g.SMALL;
         default:
           return null;
       }
-    }), v = d("");
-    L(
-      [() => s.image, l],
+    }), m = d("");
+    D(
+      [() => s.image, t],
       async () => {
-        s.image && l.value && (l.value === "small" ? v.value = (await b(/* @__PURE__ */ Object.assign({ "./assets/small/1-generic-use.svg": () => import("./1-generic-use.CZhwP2Yc.js"), "./assets/small/2-generic-use.svg": () => import("./2-generic-use.CNKjB4B7.js"), "./assets/small/3-generic-use.svg": () => import("./3-generic-use.BLEzR04g.js"), "./assets/small/4-generic-use.svg": () => import("./4-generic-use.CULEpvgj.js"), "./assets/small/adding-payment-methods.svg": () => import("./adding-payment-methods.Dle8zt43.js"), "./assets/small/adyen-giving.svg": () => import("./adyen-giving.Ffw_DlJK.js"), "./assets/small/delight.svg": () => import("./delight.xKDCvvaS.js"), "./assets/small/internal-error.svg": () => import("./internal-error.BmrwJFpR.js"), "./assets/small/no-results-found.svg": () => import("./no-results-found.Bg_ZcEid.js"), "./assets/small/notifications-cleared.svg": () => import("./notifications-cleared.BMZk37uf.js"), "./assets/small/page-not-found.svg": () => import("./page-not-found.COJLPVaU.js"), "./assets/small/planned-maintenance.svg": () => import("./planned-maintenance.C61sWB9h.js"), "./assets/small/referrals.svg": () => import("./referrals.aX8WZigH.js"), "./assets/small/success.svg": () => import("./success.nNwxJRBS.js"), "./assets/small/upload-files.svg": () => import("./upload-files.jTQY6y2X.js"), "./assets/small/wrong-environment.svg": () => import("./wrong-environment.BOsyKdRI.js") }), `./assets/small/${s.image}.svg`, 4)).default : v.value = (await b(/* @__PURE__ */ Object.assign({ "./assets/large/1-generic-use.svg": () => import("./1-generic-use.R6x8PEGA.js"), "./assets/large/2-generic-use.svg": () => import("./2-generic-use.w0fUhovx.js"), "./assets/large/3-generic-use.svg": () => import("./3-generic-use.D3NFHgI4.js"), "./assets/large/4-generic-use.svg": () => import("./4-generic-use.D82y3n39.js"), "./assets/large/adding-payment-methods.svg": () => import("./adding-payment-methods.BJZLPxtM.js"), "./assets/large/adyen-giving.svg": () => import("./adyen-giving.LiKHj_jY.js"), "./assets/large/delight.svg": () => import("./delight.CDBAFnwC.js"), "./assets/large/internal-error.svg": () => import("./internal-error.BLZodVBE.js"), "./assets/large/no-results-found.svg": () => import("./no-results-found.BqvYsBR6.js"), "./assets/large/notifications-cleared.svg": () => import("./notifications-cleared.C7W9ZXY7.js"), "./assets/large/page-not-found.svg": () => import("./page-not-found.DWW6W-PZ.js"), "./assets/large/planned-maintenance.svg": () => import("./planned-maintenance.jmWYTdet.js"), "./assets/large/referrals.svg": () => import("./referrals.BvtT-kQS.js"), "./assets/large/success.svg": () => import("./success.DhioLvPD.js"), "./assets/large/upload-files.svg": () => import("./upload-files.5wQwbfkp.js"), "./assets/large/wrong-environment.svg": () => import("./wrong-environment.BiHTPtbJ.js") }), `./assets/large/${s.image}.svg`, 4)).default);
+        s.image && t.value && (t.value === "small" ? m.value = (await h(/* @__PURE__ */ Object.assign({ "./assets/small/1-generic-use.svg": () => import("./1-generic-use.CZhwP2Yc.js"), "./assets/small/2-generic-use.svg": () => import("./2-generic-use.CNKjB4B7.js"), "./assets/small/3-generic-use.svg": () => import("./3-generic-use.BLEzR04g.js"), "./assets/small/4-generic-use.svg": () => import("./4-generic-use.CULEpvgj.js"), "./assets/small/adding-payment-methods.svg": () => import("./adding-payment-methods.Dle8zt43.js"), "./assets/small/adyen-giving.svg": () => import("./adyen-giving.Ffw_DlJK.js"), "./assets/small/delight.svg": () => import("./delight.xKDCvvaS.js"), "./assets/small/internal-error.svg": () => import("./internal-error.BmrwJFpR.js"), "./assets/small/no-results-found.svg": () => import("./no-results-found.Bg_ZcEid.js"), "./assets/small/notifications-cleared.svg": () => import("./notifications-cleared.BMZk37uf.js"), "./assets/small/page-not-found.svg": () => import("./page-not-found.COJLPVaU.js"), "./assets/small/planned-maintenance.svg": () => import("./planned-maintenance.C61sWB9h.js"), "./assets/small/referrals.svg": () => import("./referrals.aX8WZigH.js"), "./assets/small/success.svg": () => import("./success.nNwxJRBS.js"), "./assets/small/upload-files.svg": () => import("./upload-files.jTQY6y2X.js"), "./assets/small/wrong-environment.svg": () => import("./wrong-environment.BOsyKdRI.js") }), `./assets/small/${s.image}.svg`, 4)).default : m.value = (await h(/* @__PURE__ */ Object.assign({ "./assets/large/1-generic-use.svg": () => import("./1-generic-use.R6x8PEGA.js"), "./assets/large/2-generic-use.svg": () => import("./2-generic-use.w0fUhovx.js"), "./assets/large/3-generic-use.svg": () => import("./3-generic-use.D3NFHgI4.js"), "./assets/large/4-generic-use.svg": () => import("./4-generic-use.D82y3n39.js"), "./assets/large/adding-payment-methods.svg": () => import("./adding-payment-methods.BJZLPxtM.js"), "./assets/large/adyen-giving.svg": () => import("./adyen-giving.LiKHj_jY.js"), "./assets/large/delight.svg": () => import("./delight.CDBAFnwC.js"), "./assets/large/internal-error.svg": () => import("./internal-error.BLZodVBE.js"), "./assets/large/no-results-found.svg": () => import("./no-results-found.BqvYsBR6.js"), "./assets/large/notifications-cleared.svg": () => import("./notifications-cleared.C7W9ZXY7.js"), "./assets/large/page-not-found.svg": () => import("./page-not-found.DWW6W-PZ.js"), "./assets/large/planned-maintenance.svg": () => import("./planned-maintenance.jmWYTdet.js"), "./assets/large/referrals.svg": () => import("./referrals.BvtT-kQS.js"), "./assets/large/success.svg": () => import("./success.DhioLvPD.js"), "./assets/large/upload-files.svg": () => import("./upload-files.5wQwbfkp.js"), "./assets/large/wrong-environment.svg": () => import("./wrong-environment.BiHTPtbJ.js") }), `./assets/large/${s.image}.svg`, 4)).default);
       },
       { immediate: !0 }
     );
-    const y = r(() => ({
-      "b-empty-state__image--small": l.value === "small",
-      "b-empty-state__image--large": l.value === "large"
-    })), R = r(
-      () => s.headingEl || g[s.variant]
-    ), T = r(() => ({
-      el: R.value,
-      medium: s.variant !== a.CONDENSED,
-      strongest: s.variant === a.CONDENSED,
-      variant: s.variant === a.CONDENSED ? "body" : "title"
-    })), G = r(() => {
+    const O = i(() => ({
+      "b-empty-state__image--small": t.value === "small",
+      "b-empty-state__image--large": t.value === "large"
+    })), R = {
+      [r.FULL_PAGE]: "h2",
+      [r.EMBEDDED]: "h3",
+      [r.BASIC]: "h3",
+      [r.CONDENSED]: "div"
+    }, b = i(
+      () => s.headingEl || R[s.variant]
+    ), T = i(() => ({
+      el: b.value,
+      medium: s.variant !== r.CONDENSED,
+      strongest: s.variant === r.CONDENSED,
+      variant: s.variant === r.CONDENSED ? "body" : "title"
+    })), G = i(() => {
       switch (s.variant) {
-        case a.FULL_PAGE:
+        case r.FULL_PAGE:
           return "primary";
-        case a.CONDENSED:
+        case r.CONDENSED:
           return "tertiary";
         default:
           return "secondary";
       }
     });
-    return L(t, () => {
-      H(t.value, () => {
-        t.value && (o.value = t.value.offsetWidth);
+    return D(l, () => {
+      S(l.value, () => {
+        l.value && (v.value = l.value.offsetWidth);
       });
-    }), (_, q) => (i(), A("div", {
+    }), (a, q) => (n(), L("div", {
       ref_key: "rootRef",
-      ref: t,
+      ref: l,
       class: "b-empty-state"
     }, [
-      e.image && l.value ? (i(), A("img", {
+      a.image && t.value ? (n(), L("img", {
         key: 0,
         alt: "",
-        class: k(["b-empty-state__image", y.value]),
-        src: v.value
-      }, null, 10, W)) : m("", !0),
-      P(p(O), M(T.value, { class: "b-empty-state__title" }), {
+        class: k(["b-empty-state__image", O.value]),
+        src: m.value
+      }, null, 10, W)) : p("", !0),
+      P(E(C), y(T.value, { class: "b-empty-state__title" }), {
         default: c(() => [
-          C(_.$slots, "title", {}, () => [
-            E(N(e.title), 1)
+          A(a.$slots, "title", {}, () => [
+            N(_(a.title), 1)
           ], !0)
         ]),
         _: 3
       }, 16),
-      e.variant !== "condensed" ? (i(), f(p(O), {
+      a.variant !== "condensed" ? (n(), f(E(C), {
         key: 1,
         variant: "body",
         class: "b-empty-state__details"
       }, {
         default: c(() => [
-          C(_.$slots, "default", {}, () => [
-            E(N(e.description), 1)
+          A(a.$slots, "default", {}, () => [
+            N(_(a.description), 1)
           ], !0)
         ]),
         _: 3
-      })) : m("", !0),
-      e.action ? (i(), f(p(F), {
+      })) : p("", !0),
+      a.action ? (n(), f(E(F), {
         key: 2,
         type: "button",
         variant: G.value,
-        onClick: e.action.event
-      }, w({
+        onClick: a.action.event
+      }, M({
         default: c(() => [
-          E(" " + N(e.action.title), 1)
+          N(" " + _(a.action.title), 1)
         ]),
         _: 2
       }, [
-        e.action.icon ? {
+        a.action.icon ? {
           name: "iconLeft",
           fn: c(() => [
-            (i(), f(S(e.action.icon), {
-              "svg-title": e.action.title
+            (n(), f(w(a.action.icon), {
+              "svg-title": a.action.title
             }, null, 8, ["svg-title"]))
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["variant", "onClick"])) : m("", !0)
+      ]), 1032, ["variant", "onClick"])) : p("", !0)
     ], 512));
   }
-}), J = /* @__PURE__ */ I(x, [["__scopeId", "data-v-01a93be4"]]);
+}), Q = /* @__PURE__ */ H(j, [["__scopeId", "data-v-282d3033"]]);
 export {
-  J as B,
-  a,
-  h as b,
-  u as c
+  Q as B,
+  r as a,
+  I as b,
+  g as c
 };
-//# sourceMappingURL=empty-state.BTaeZdQu.js.map
+//# sourceMappingURL=empty-state.BsKJ-1pT.js.map

package/dist/chunks/empty-state.BsKJ-1pT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.BsKJ-1pT.js","sources":["../../../vue2/src/components/empty-state/empty-state.types.ts","../../../vue2/src/components/empty-state/empty-state.vue"],"sourcesContent":["import type { BentoButtonActionObject } from '@/components/button/components/button-actions/button-actions.types';\nimport type { BentoTypographyElement } from '@/components/typography/typography.types';\n\nexport enum BentoEmptyStateVariant {\n    FULL_PAGE = 'full-page',\n    EMBEDDED = 'embedded',\n    BASIC = 'basic',\n    CONDENSED = 'condensed',\n}\n\nexport enum BentoEmptyStateImage {\n    GENERIC_USE1 = '1-generic-use',\n    GENERIC_USE2 = '2-generic-use',\n    GENERIC_USE3 = '3-generic-use',\n    GENERIC_USE4 = '4-generic-use',\n    ADDING_PAYMENT_METHOD = 'adding-payment-methods',\n    ADYEN_GIVING = 'adyen-giving',\n    DELIGHT = 'delight',\n    INTERNAL_ERROR = 'internal-error',\n    NO_RESULTS_FOUND = 'no-results-found',\n    NOTIFICATIONS_CLEARED = 'notifications-cleared',\n    PAGE_NOT_FOUND = 'page-not-found',\n    PLANNED_MAINTENANCE = 'planned-maintenance',\n    REFERRALS = 'referrals',\n    SUCCESS = 'success',\n    UPLOAD_FILES = 'upload-files',\n    WRONG_ENVIRONMENT = 'wrong-environment',\n}\n\nexport enum BentoEmptyStateImageVariant {\n    SMALL = 'small',\n    LARGE = 'large',\n    NULL = null,\n}\n\nexport interface BentoEmptyStateProps {\n    /**\n     * Defines the button at the end of the component.\n     */\n    action?: BentoButtonActionObject;\n\n    /**\n     * The empty state description.\n     * Gives additional details to the issue.\n     * This can be used or the default slot\n     */\n    description?: string;\n\n    /**\n     * Sets the heading HTML DOM element.\n     * @values h1, h2, h3, h4, h5, h6, div, p, span\n     */\n    headingEl?: `${BentoTypographyElement}`;\n\n    /**\n     * Name of the illustration for the empty state.\n     */\n    image?: `${BentoEmptyStateImage}`;\n\n    /**\n     * The empty state heading.\n     * Should clearly explain the issue.\n     */\n    title?: string;\n\n    /**\n     * Types of different empty states\n     * @values full-page, embedded, basic, condensed\n     */\n    variant?: `${BentoEmptyStateVariant}`;\n}\n","<template>\n    <div ref=\"rootRef\" class=\"b-empty-state\">\n        <!-- illustration -->\n        <img\n            v-if=\"image && imageVariant\"\n            alt=\"\"\n            class=\"b-empty-state__image\"\n            :class=\"imageConditionalClasses\"\n            :src=\"imageSvg\"\n        />\n\n        <!-- heading -->\n        <bento-typography v-bind=\"headingProps\" class=\"b-empty-state__title\">\n            <slot name=\"title\">\n                {{ title }}\n            </slot>\n        </bento-typography>\n\n        <!-- details -->\n        <bento-typography v-if=\"variant !== 'condensed'\" variant=\"body\" class=\"b-empty-state__details\">\n            <slot>\n                {{ description }}\n            </slot>\n        </bento-typography>\n\n        <!-- action -->\n        <bento-button v-if=\"action\" type=\"button\" :variant=\"actionVariant\" @click=\"action.event\">\n            <template v-if=\"action.icon\" #iconLeft>\n                <component :is=\"action.icon\" :svg-title=\"action.title\"></component>\n            </template>\n            {{ action.title }}\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n\n    import { BentoButton, type BentoButtonVariant } from '@/components/button';\n    import { BentoTypography, type BentoTypographyElement, type BentoTypographyVariant } from '@/components/typography';\n\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import {\n        BentoEmptyStateImageVariant,\n        type BentoEmptyStateProps,\n        BentoEmptyStateVariant,\n    } from './empty-state.types';\n\n    const WIDTH_BREAKPOINT = 740;\n\n    const props = withDefaults(defineProps<BentoEmptyStateProps>(), {\n        action: null,\n        description: null,\n        headingEl: null,\n        image: null,\n        title: '',\n        variant: 'basic',\n    });\n\n    const rootRef = ref<HTMLDivElement>(null);\n    const containerWidth = ref(0);\n\n    const isBelowBreakpoint = computed(() => containerWidth.value < WIDTH_BREAKPOINT);\n\n    const imageVariant = computed<BentoEmptyStateImageVariant>(() => {\n        switch (props.variant) {\n            case BentoEmptyStateVariant.FULL_PAGE:\n                return isBelowBreakpoint.value ? BentoEmptyStateImageVariant.SMALL : BentoEmptyStateImageVariant.LARGE;\n            case BentoEmptyStateVariant.EMBEDDED:\n                return isBelowBreakpoint.value ? null : BentoEmptyStateImageVariant.SMALL;\n            default:\n                return null;\n        }\n    });\n\n    const imageSvg = ref('');\n\n    watch(\n        [() => props.image, imageVariant],\n        async () => {\n            if (props.image && imageVariant.value) {\n                // rollup only supports one variable in a dynamic path\n                /* v8 ignore next 4 */\n                if (imageVariant.value === 'small') {\n                    imageSvg.value = (await import(`./assets/small/${props.image}.svg`)).default;\n                } else {\n                    imageSvg.value = (await import(`./assets/large/${props.image}.svg`)).default;\n                }\n            }\n        },\n        { immediate: true }\n    );\n\n    const imageConditionalClasses = computed(() => ({\n        'b-empty-state__image--small': imageVariant.value === 'small',\n        'b-empty-state__image--large': imageVariant.value === 'large',\n    }));\n\n    const HEADING_ELEMENT_MAP = {\n        [BentoEmptyStateVariant.FULL_PAGE]: 'h2',\n        [BentoEmptyStateVariant.EMBEDDED]: 'h3',\n        [BentoEmptyStateVariant.BASIC]: 'h3',\n        [BentoEmptyStateVariant.CONDENSED]: 'div',\n    };\n\n    const headingElement = computed(\n        () => (props.headingEl || HEADING_ELEMENT_MAP[props.variant]) as BentoTypographyElement\n    );\n\n    const headingProps = computed(() => ({\n        el: headingElement.value,\n        medium: props.variant !== BentoEmptyStateVariant.CONDENSED,\n        strongest: props.variant === BentoEmptyStateVariant.CONDENSED,\n        variant: (props.variant === BentoEmptyStateVariant.CONDENSED ? 'body' : 'title') as BentoTypographyVariant,\n    }));\n\n    const actionVariant = computed<`${BentoButtonVariant}`>(() => {\n        switch (props.variant) {\n            case BentoEmptyStateVariant.FULL_PAGE:\n                return 'primary';\n            case BentoEmptyStateVariant.CONDENSED:\n                return 'tertiary';\n            default:\n                return 'secondary';\n        }\n    });\n\n    // Lifecycle\n    watch(rootRef, () => {\n        // Use ResizeObserver so that image is only fetched if needed (visible).\n        observeSizeOfElement(rootRef.value, () => {\n            if (rootRef.value) {\n                containerWidth.value = rootRef.value.offsetWidth;\n            }\n        });\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Empty states are moments in the user experience when there is nothing to display.\n     * This component can be used to provide:\n     * - Information about system status\n     * - Contextual learning cues\n     * - Direct pathways for key tasks\n     *\n     * @example\n     * import { BentoEmptyState } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoEmptyState },\n     *     template: `\n     *          <bento-empty-state\n     *              title=\"No results were found\"\n     *              image=\"no-results-found\"\n     *              variant=\"full-page\"\n     *              :action=\"{ title: 'Reset filters', event: () => {} }\"\n     *          >\n     *              Try a different term or reset search filters\n     *          </bento-empty-state>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./empty-state.scss\" />\n"],"names":["BentoEmptyStateVariant","BentoEmptyStateVariant2","BentoEmptyStateImage","BentoEmptyStateImage2","BentoEmptyStateImageVariant","BentoEmptyStateImageVariant2","__default__","props","__props","rootRef","ref","containerWidth","isBelowBreakpoint","computed","imageVariant","imageSvg","watch","__variableDynamicImportRuntimeHelper","imageConditionalClasses","HEADING_ELEMENT_MAP","headingElement","headingProps","actionVariant","observeSizeOfElement"],"mappings":"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"}