@adyen/bento-vue2 1.23.0 → 1.25.0

package/dist/sidepanel.js

@@ -1,17 +1,17 @@
-import { defineComponent as P, toRefs as T, ref as r, computed as B, watch as h, nextTick as k, provide as f } from "vue";
-import { B as N } from "./chunks/index.be6917c8.js";
-import { F as x } from "./chunks/footer-actions.1f22f86d.js";
-import { D as G, B as L, b as F, a as R } from "./chunks/dialog-page.3965f89e.js";
-import { n as C } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as U } from "./chunks/button.a823da67.js";
-import { B as w } from "./chunks/index.9d130872.js";
-import { C as V } from "./chunks/cross.04678d81.js";
-import { S as J } from "./chunks/sidepanel.keys.1ed8a57c.js";
-import { u as K } from "./chunks/i18n.eb5b985b.js";
-import { g as Y } from "./chunks/unique-id.a2a2b458.js";
-import "./assets/index48.css";
-const $ = {}, z = /* @__PURE__ */ P({
-  ...$,
+import { defineComponent as C, toRefs as B, ref as l, computed as h, watch as k, nextTick as N, provide as v } from "vue";
+import { B as x } from "./chunks/index.d97166c6.js";
+import { F as G } from "./chunks/footer-actions.32891b25.js";
+import { D as L, B as F, b as R, a as U } from "./chunks/dialog-page.286ead53.js";
+import { n as I } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { a as w } from "./chunks/button.e5f5638f.js";
+import { B as V } from "./chunks/index.596c4d0a.js";
+import { C as J } from "./chunks/cross.04678d81.js";
+import { S as K } from "./chunks/sidepanel.keys.1ed8a57c.js";
+import { u as Y } from "./chunks/i18n.eb5b985b.js";
+import { g as $ } from "./chunks/unique-id.a2a2b458.js";
+import "./assets/index33.css";
+const z = {}, M = /* @__PURE__ */ C({
+  ...z,
   __name: "sidepanel-page",
   props: {
     /**
@@ -73,10 +73,10 @@ const $ = {}, z = /* @__PURE__ */ P({
     }
   },
   setup(i) {
-    return { __sfc: !0, BentoTypography: N, FooterActions: x, DialogPage: G };
+    return { __sfc: !0, BentoTypography: x, FooterActions: G, DialogPage: L };
   }
 });
-var M = function() {
+var j = function() {
   var e = this, s = e._self._c, t = e._self._setupProxy;
   return s(t.DialogPage, { staticClass: "b-sidepanel-page", attrs: { "page-id": e.pageId, "previous-page": e.previousPage }, scopedSlots: e._u([{ key: "header", fn: function() {
     return [s("div", { staticClass: "b-sidepanel-page__header" }, [s(t.BentoTypography, { staticClass: "b-sidepanel-page__title", attrs: { el: "h2", variant: "title" } }, [e._v(" " + e._s(e.title) + " ")])], 1)];
@@ -85,26 +85,26 @@ var M = function() {
   }, proxy: !0 }, e.actions && e.actions.length > 0 ? { key: "footer", fn: function() {
     return [s("div", { staticClass: "b-sidepanel-page__actions" }, [s(t.FooterActions, { attrs: { actions: e.actions, "actions-label": e.actionsLabel, "destructive-actions": e.destructiveActions } })], 1)];
   }, proxy: !0 } : null], null, !0) });
-}, j = [], q = /* @__PURE__ */ C(
-  z,
+}, q = [], H = /* @__PURE__ */ I(
   M,
   j,
+  q,
   !1,
   null,
   "4e6c994b",
   null,
   null
 );
-const ue = q.exports;
+const de = H.exports;
 var u = /* @__PURE__ */ ((i) => (i.UPDATE_ACTIVE_PAGE = "update:active-page", i.UPDATE_IS_OPEN = "update:is-open", i))(u || {});
-const H = {
+const Q = {
   "en-US": {
     close: "Close"
   }
-}, Q = {
-  i18n: { messages: H }
-}, W = /* @__PURE__ */ P({
-  ...Q,
+}, W = {
+  i18n: { messages: Q }
+}, X = /* @__PURE__ */ C({
+  ...W,
   __name: "sidepanel",
   props: {
     /**
@@ -132,37 +132,39 @@ const H = {
     }
   },
   setup(i, { emit: e }) {
-    const s = i, { activePage: t, isOpen: a } = T(s), { t: I } = K(), l = r(null), p = r([]), o = r([]), v = r(L.TRANSITION_LEVEL_DEEPER), c = r(!1), g = Y("sidepanel"), _ = r(!1), b = B(() => ({
-      "b-sidepanel--hide": c.value
-    })), D = () => {
-      c.value && (l.value.close(), o.value[0] && e(u.UPDATE_ACTIVE_PAGE, o.value[0]), o.value = [], c.value = !1, _.value = !1, e(u.UPDATE_IS_OPEN, !1));
-    }, d = () => {
-      l.value.open && (c.value = !0);
-    }, S = ({ target: n }) => {
-      n && n.tagName === "DIALOG" && d();
+    const s = i, { activePage: t, isOpen: a } = B(s), { t: b } = Y(), r = l(null), c = l([]), o = l([]), g = l(F.TRANSITION_LEVEL_DEEPER), p = l(!1), m = $("sidepanel"), _ = l(!1), d = l(!1), D = h(() => ({
+      "b-sidepanel--hide": p.value,
+      "b-sidepanel--animation": d.value
+    })), S = () => {
+      p.value && (r.value.close(), o.value[0] && e(u.UPDATE_ACTIVE_PAGE, o.value[0]), o.value = [], p.value = !1, _.value = !1, e(u.UPDATE_IS_OPEN, !1));
+    }, f = () => {
+      r.value.open && (p.value = !0);
+    }, O = ({ target: n }) => {
+      n && n.tagName === "DIALOG" && f();
     };
-    h(
+    k(
       () => a.value,
       async () => {
-        await k(), l.value && (a.value ? (_.value = !0, l.value.showModal(), o.value.length || o.value.push(t.value)) : l.value.open && d());
+        await N(), r.value && (a.value ? (_.value = !0, r.value.showModal(), o.value.length || o.value.push(t.value)) : r.value.open && f());
       },
       { immediate: !0 }
     );
-    const m = (n) => e(u.UPDATE_ACTIVE_PAGE, n), y = (n) => () => {
-      var E;
-      p.value = (E = p.value) == null ? void 0 : E.filter((O) => O !== n);
-    }, A = (n) => (p.value.push(n), { unregisterPage: y(n) });
-    return f(F, {
+    const y = (n) => e(u.UPDATE_ACTIVE_PAGE, n), A = (n) => () => {
+      var P;
+      c.value = (P = c.value) == null ? void 0 : P.filter((T) => T !== n);
+    }, E = (n) => (c.value.push(n), { unregisterPage: A(n) });
+    return v(R, {
       activePage: t,
-      animation: v,
+      animation: g,
+      isAnimationActive: d,
       isOpen: _,
-      pages: p,
+      pages: c,
       previousPages: o,
-      updatePage: m
-    }), f(R, A), f(J, g), { __sfc: !0, props: s, emit: e, activePage: t, isOpen: a, t: I, sidepanel: l, pages: p, previousPages: o, animation: v, isClosing: c, sidepanelId: g, internalIsOpen: _, conditionalClasses: b, closeSidepanelAfterAnimation: D, startCloseSidepanelAnimation: d, closeSidepanelOnClickOutside: S, updatePage: m, unregisterPage: y, registerPage: A, BentoButton: U, BentoFocusTrap: w, CrossIcon: V };
+      updatePage: y
+    }), v(U, E), v(K, m), { __sfc: !0, props: s, emit: e, activePage: t, isOpen: a, t: b, sidepanel: r, pages: c, previousPages: o, animation: g, isClosing: p, sidepanelId: m, internalIsOpen: _, isAnimationActive: d, conditionalClasses: D, closeSidepanelAfterAnimation: S, startCloseSidepanelAnimation: f, closeSidepanelOnClickOutside: O, updatePage: y, unregisterPage: A, registerPage: E, BentoButton: w, BentoFocusTrap: V, CrossIcon: J };
   }
 });
-var X = function() {
+var Z = function() {
   var e = this, s = e._self._c, t = e._self._setupProxy;
   return s("dialog", { ref: "sidepanel", staticClass: "b-sidepanel", class: t.conditionalClasses, attrs: { id: t.sidepanelId }, on: { animationend: t.closeSidepanelAfterAnimation, click: function(a) {
     e.isDismissible && t.closeSidepanelOnClickOutside(a);
@@ -171,20 +173,20 @@ var X = function() {
       return null;
     a.preventDefault(), e.isDismissible && t.startCloseSidepanelAnimation;
   } } }, [s(t.BentoFocusTrap, [e.isDismissible ? s("div", { staticClass: "b-sidepanel__close-button" }, [s(t.BentoButton, { attrs: { variant: "tertiary" }, on: { click: t.startCloseSidepanelAnimation } }, [s(t.CrossIcon, { attrs: { "svg-title": t.t("close") } })], 1)], 1) : e._e(), e._t("default")], 2)], 1);
-}, Z = [], ee = /* @__PURE__ */ C(
-  W,
+}, ee = [], te = /* @__PURE__ */ I(
   X,
   Z,
+  ee,
   !1,
   null,
-  "97a8b5da",
+  "11e634f1",
   null,
   null
 );
-const de = ee.exports;
+const fe = te.exports;
 export {
-  de as BentoSidepanel,
+  fe as BentoSidepanel,
   u as BentoSidepanelEvent,
-  ue as BentoSidepanelPage
+  de as BentoSidepanelPage
 };
 //# sourceMappingURL=sidepanel.js.map

package/dist/sidepanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidepanel.js","sources":["../src/components/sidepanel/components/sidepanel-page.vue","../src/components/sidepanel/sidepanel.types.ts","../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-sidepanel-page\" :page-id=\"pageId\" :previous-page=\"previousPage\">\n        <template #header>\n            <div class=\"b-sidepanel-page__header\">\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n        </template>\n        <template #content>\n            <div class=\"b-sidepanel-page__content\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-sidepanel-page__actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n\n    import { BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import { DialogPage } from '@/internal';\n\n    defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","export enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n","<template>\n    <dialog\n        :id=\"sidepanelId\"\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @click=\"isDismissible && closeSidepanelOnClickOutside($event)\"\n        @keydown.esc.prevent=\"isDismissible && startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap>\n            <div v-if=\"isDismissible\" class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { BentoSidepanelEvent } from './sidepanel.types';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { generateUid } from '@/utils/ts/unique-id';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void;\n        /**\n         * Emits close-sidepanel event when the sidepanel is closed\n         */\n        (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n    const sidepanelId = generateUid('sidepanel');\n    const internalIsOpen = ref(false);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel--hide': isClosing.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = () => {\n        if (isClosing.value) {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = () => {\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n     * If the click doesn't happen in the dialog box itself, the modal closes\n     */\n    const closeSidepanelOnClickOutside = ({ target }: Event): void => {\n        if (target && (target as HTMLElement).tagName === 'DIALOG') {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                internalIsOpen.value = true;\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // Pages\n    const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        pages.value.push(pageId);\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n    // Let's Children components know they are inside a SidePanel (dialog element)\n    provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["__default__$1","BentoSidepanelEvent","BentoSidepanelEvent2","__default__","messages","activePage","isOpen","toRefs","props","t","useI18n","sidepanel","ref","pages","previousPages","animation","BentoDialogPageAnimation","isClosing","sidepanelId","generateUid","internalIsOpen","conditionalClasses","computed","closeSidepanelAfterAnimation","emit","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","target","watch","nextTick","updatePage","page","unregisterPage","pageIdToRemove","_a","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY"],"mappings":";;;;;;;;;;;;AA2II,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3IQ,IAAAC,IAAA,kBAAAC,OACRA,EAAA,qBAAA,sBACAA,EAAA,iBAAA,kBAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;GC8NRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1IA,EAAA,YAAAC,GAAA,QAAAC,EAAA,IAAAC,EAAAC,CAAA,GACA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,CAAA,CAAA,GACAE,IAAAF,EAAA,CAAA,CAAA,GACAG,IAAAH,EAAAI,EAAA,uBAAA,GACAC,IAAAL,EAAA,EAAA,GACAM,IAAAC,EAAA,WAAA,GACAC,IAAAR,EAAA,EAAA,GAGAS,IAAAC,EAAA,OAAA;AAAA,MAA2C,qBAAAL,EAAA;AAAA,IACR,EAAA,GAInCM,IAAA,MAAA;AACI,MAAAN,EAAA,UACIN,EAAA,MAAA,MAAA,GACAG,EAAA,MAAA,CAAA,KACIU,EAAAvB,EAAA,oBAAAa,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAG,EAAA,QAAA,IACAG,EAAA,QAAA,IACAI,EAAAvB,EAAA,gBAAA,EAAA;AAAA,IACJ,GAGJwB,IAAA,MAAA;AACI,MAAAd,EAAA,MAAA,SAGAM,EAAA,QAAA;AAAA,IAAkB,GAOtBS,IAAA,CAAA,EAAA,QAAAC,EAAA,MAAA;AACI,MAAAA,KAAAA,EAAA,YAAA,YACIF,EAAA;AAAA,IACJ;AAIJ,IAAAG;AAAA,MAAA,MAAAtB,EAAA;AAAA,MACiB,YAAA;AAKT,QAFA,MAAAuB,EAAA,GAEAlB,EAAA,UAIAL,EAAA,SACIc,EAAA,QAAA,IACAT,EAAA,MAAA,UAAA,GACAG,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAT,EAAA,KAAA,KACJM,EAAA,MAAA,QAEAc,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAK,IAAA,CAAAC,MAAAP,EAAAvB,EAAA,oBAAA8B,CAAA,GAGAC,IAAA,CAAAC,MAAA,MAAA;;AACI,MAAApB,EAAA,SAAAqB,IAAArB,EAAA,UAAA,gBAAAqB,EAAA,OAAA,CAAAC,MAAAA,MAAAF;AAAA,IAAqE,GAIzEG,IAAA,CAAAD,OACItB,EAAA,MAAA,KAAAsB,CAAA,GAEA,EAAA,gBAAAH,EAAAG,CAAA,EAAA;AAGJ,WAAAE,EAAAC,GAAA;AAAA,MAAqE,YAAAjC;AAAA,MACjE,WAAAU;AAAA,MACA,QAAAK;AAAA,MACQ,OAAAP;AAAA,MACR,eAAAC;AAAA,MACA,YAAAgB;AAAA,IACA,CAAA,GAEJO,EAAAE,GAAAH,CAAA,GAGAC,EAAAG,GAAAtB,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sidepanel.js","sources":["../src/components/sidepanel/components/sidepanel-page.vue","../src/components/sidepanel/sidepanel.types.ts","../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-sidepanel-page\" :page-id=\"pageId\" :previous-page=\"previousPage\">\n        <template #header>\n            <div class=\"b-sidepanel-page__header\">\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n        </template>\n        <template #content>\n            <div class=\"b-sidepanel-page__content\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-sidepanel-page__actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n\n    import { BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import { DialogPage } from '@/internal';\n\n    defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","export enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n","<template>\n    <dialog\n        :id=\"sidepanelId\"\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @click=\"isDismissible && closeSidepanelOnClickOutside($event)\"\n        @keydown.esc.prevent=\"isDismissible && startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap>\n            <div v-if=\"isDismissible\" class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { BentoSidepanelEvent } from './sidepanel.types';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { generateUid } from '@/utils/ts/unique-id';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void;\n        /**\n         * Emits close-sidepanel event when the sidepanel is closed\n         */\n        (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n    const sidepanelId = generateUid('sidepanel');\n    const internalIsOpen = ref(false);\n    const isAnimationActive = ref(false);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel--hide': isClosing.value,\n        'b-sidepanel--animation': isAnimationActive.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = () => {\n        if (isClosing.value) {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = () => {\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n     * If the click doesn't happen in the dialog box itself, the modal closes\n     */\n    const closeSidepanelOnClickOutside = ({ target }: Event): void => {\n        if (target && (target as HTMLElement).tagName === 'DIALOG') {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                internalIsOpen.value = true;\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // Pages\n    const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        pages.value.push(pageId);\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isAnimationActive,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n    // Let's Children components know they are inside a SidePanel (dialog element)\n    provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["__default__$1","BentoSidepanelEvent","BentoSidepanelEvent2","__default__","messages","activePage","isOpen","toRefs","props","t","useI18n","sidepanel","ref","pages","previousPages","animation","BentoDialogPageAnimation","isClosing","sidepanelId","generateUid","internalIsOpen","isAnimationActive","conditionalClasses","computed","closeSidepanelAfterAnimation","emit","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","target","watch","nextTick","updatePage","page","unregisterPage","pageIdToRemove","_a","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY"],"mappings":";;;;;;;;;;;;AA2II,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3IQ,IAAAC,IAAA,kBAAAC,OACRA,EAAA,qBAAA,sBACAA,EAAA,iBAAA,kBAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;GCiORE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7IA,EAAA,YAAAC,GAAA,QAAAC,EAAA,IAAAC,EAAAC,CAAA,GACA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,CAAA,CAAA,GACAE,IAAAF,EAAA,CAAA,CAAA,GACAG,IAAAH,EAAAI,EAAA,uBAAA,GACAC,IAAAL,EAAA,EAAA,GACAM,IAAAC,EAAA,WAAA,GACAC,IAAAR,EAAA,EAAA,GACAS,IAAAT,EAAA,EAAA,GAGAU,IAAAC,EAAA,OAAA;AAAA,MAA2C,qBAAAN,EAAA;AAAA,MACR,0BAAAI,EAAA;AAAA,IACa,EAAA,GAIhDG,IAAA,MAAA;AACI,MAAAP,EAAA,UACIN,EAAA,MAAA,MAAA,GACAG,EAAA,MAAA,CAAA,KACIW,EAAAxB,EAAA,oBAAAa,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAG,EAAA,QAAA,IACAG,EAAA,QAAA,IACAK,EAAAxB,EAAA,gBAAA,EAAA;AAAA,IACJ,GAGJyB,IAAA,MAAA;AACI,MAAAf,EAAA,MAAA,SAGAM,EAAA,QAAA;AAAA,IAAkB,GAOtBU,IAAA,CAAA,EAAA,QAAAC,EAAA,MAAA;AACI,MAAAA,KAAAA,EAAA,YAAA,YACIF,EAAA;AAAA,IACJ;AAIJ,IAAAG;AAAA,MAAA,MAAAvB,EAAA;AAAA,MACiB,YAAA;AAKT,QAFA,MAAAwB,EAAA,GAEAnB,EAAA,UAIAL,EAAA,SACIc,EAAA,QAAA,IACAT,EAAA,MAAA,UAAA,GACAG,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAT,EAAA,KAAA,KACJM,EAAA,MAAA,QAEAe,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAK,IAAA,CAAAC,MAAAP,EAAAxB,EAAA,oBAAA+B,CAAA,GAGAC,IAAA,CAAAC,MAAA,MAAA;;AACI,MAAArB,EAAA,SAAAsB,IAAAtB,EAAA,UAAA,gBAAAsB,EAAA,OAAA,CAAAC,MAAAA,MAAAF;AAAA,IAAqE,GAIzEG,IAAA,CAAAD,OACIvB,EAAA,MAAA,KAAAuB,CAAA,GAEA,EAAA,gBAAAH,EAAAG,CAAA,EAAA;AAGJ,WAAAE,EAAAC,GAAA;AAAA,MAAqE,YAAAlC;AAAA,MACjE,WAAAU;AAAA,MACA,mBAAAM;AAAA,MACA,QAAAD;AAAA,MACQ,OAAAP;AAAA,MACR,eAAAC;AAAA,MACA,YAAAiB;AAAA,IACA,CAAA,GAEJO,EAAAE,GAAAH,CAAA,GAGAC,EAAAG,GAAAvB,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/status.js

@@ -1,7 +1,7 @@
 import { defineComponent as n, computed as a } from "vue";
-import { B as o } from "./chunks/index.be6917c8.js";
+import { B as o } from "./chunks/index.d97166c6.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index47.css";
+import "./assets/index20.css";
 var r = /* @__PURE__ */ ((s) => (s.BLUE = "blue", s.GREEN = "green", s.GREY = "grey", s.ORANGE = "orange", s.RED = "red", s.YELLOW = "yellow", s))(r || {});
 const _ = n({
   name: "bento-status",

package/dist/stepper.js

@@ -1,11 +1,11 @@
 import { defineComponent as w, ref as p, computed as o, watch as A, provide as L, readonly as z, useSlots as Z, inject as U, onMounted as M, onBeforeUnmount as j } from "vue";
-import { B as D } from "./chunks/index.be6917c8.js";
+import { B as D } from "./chunks/index.d97166c6.js";
 import { u as G } from "./chunks/i18n.eb5b985b.js";
 import { B as E, a as q } from "./chunks/keyboard-navigation.ca47dfa8.js";
 import { n as O } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as J } from "./chunks/base-button.025269d7.js";
+import { B as J } from "./chunks/base-button.773343f6.js";
 import { C as Q } from "./chunks/checkmark-small.520f01b1.js";
-import "./assets/index43.css";
+import "./assets/index21.css";
 const X = (a) => {
   function t(i) {
     return ({ detail: c }) => {

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/index.7a59b0b8.js";
+import { B as r, a as o } from "./chunks/index.81e509f3.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/summary-grid.js

@@ -4,10 +4,10 @@ import { S as h } from "./chunks/summary-grid.keys.1d1028c2.js";
 import { G as E } from "./chunks/grid-layout.e0025286.js";
 import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoInfoIcon as O } from "./info-icon.js";
-import { B as L, a as g } from "./chunks/index.be6917c8.js";
+import { B as L, a as g } from "./chunks/index.d97166c6.js";
 import { BentoTag as M, BentoTagVariant as f } from "./tag.js";
-import { C as G } from "./chunks/copy.b20b47f9.js";
-import "./assets/index32.css";
+import { C as G } from "./chunks/copy.3c50b447.js";
+import "./assets/index22.css";
 const P = l({
   name: "bento-summary-grid",
   components: { GridLayout: E },

package/dist/tabs.js

@@ -1,10 +1,10 @@
 import { defineComponent as m, toRefs as C, ref as b, provide as u, computed as w, inject as p, onUnmounted as A, watch as N, nextTick as B } from "vue";
 import { E as k, T as I, a as h } from "./chunks/tabs.keys.358742f2.js";
 import { n as g } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as R } from "./chunks/index.be6917c8.js";
+import { B as R } from "./chunks/index.d97166c6.js";
 import { g as D } from "./chunks/unique-id.a2a2b458.js";
-import { F as S } from "./chunks/fixed-scroller.077a5709.js";
-import "./assets/index33.css";
+import { F as S } from "./chunks/fixed-scroller.3135f86c.js";
+import "./assets/index23.css";
 const K = m({
   props: {
     /**

package/dist/tag.js

@@ -1,10 +1,10 @@
 import { defineComponent as c, computed as o } from "vue";
-import { B as d } from "./chunks/index.be6917c8.js";
+import { B as d } from "./chunks/index.d97166c6.js";
 import { u as m } from "./chunks/aria-label.ac9651a5.js";
 import { g as s } from "./chunks/get-slot-text.99c3d860.js";
-import { b as _ } from "./chunks/tooltip.eb1eb37e.js";
+import { b as _ } from "./chunks/tooltip.e5deb137.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index37.css";
+import "./assets/index48.css";
 var r = /* @__PURE__ */ ((t) => (t.GREY = "grey", t.BLUE = "blue", t.GREEN = "green", t.ORANGE = "orange", t.RED = "red", t.WHITE = "white", t))(r || {});
 const p = c({
   name: "bento-tag",

package/dist/textarea.js

@@ -1,14 +1,14 @@
 import { defineComponent as K, useAttrs as Q, toRefs as O, ref as d, toRef as X, computed as n, watch as L, nextTick as ee, onMounted as te, onUnmounted as ae } from "vue";
-import { a as le } from "./chunks/button.a823da67.js";
-import { B as re } from "./chunks/index.be6917c8.js";
+import { a as le } from "./chunks/button.e5f5638f.js";
+import { B as re } from "./chunks/index.d97166c6.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { g as se } from "./chunks/unique-id.a2a2b458.js";
 import { o as F } from "./chunks/resize.a041304d.js";
 import { u as oe } from "./chunks/aria-label.ac9651a5.js";
 import { u as ne } from "./chunks/i18n.eb5b985b.js";
 import { u as ie } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as ue, F as ce } from "./chunks/error-message.7022fa86.js";
-import "./assets/index34.css";
+import { E as ue, F as ce } from "./chunks/error-message.db315e68.js";
+import "./assets/index19.css";
 let H = 0;
 const de = {
   beforeCreate() {

package/dist/timeline.js

@@ -1,19 +1,19 @@
 import { defineComponent as Y, computed as r, ref as N, toRefs as Z, provide as A, inject as D, onUnmounted as G } from "vue";
-import { a as z } from "./chunks/button.a823da67.js";
+import { a as z } from "./chunks/button.e5f5638f.js";
 import { BentoTextarea as Q } from "./textarea.js";
 import { u as H } from "./chunks/i18n.eb5b985b.js";
-import { B as X } from "./chunks/button-actions.3882346f.js";
+import { B as X } from "./chunks/button-actions.a03a672f.js";
 import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as ee } from "./chunks/index.b231f9ef.js";
-import { B as te } from "./chunks/index.19675c16.js";
+import { B as ee } from "./chunks/index.9e40ffeb.js";
+import { B as te } from "./chunks/index.444d221f.js";
 import { BentoTag as ie } from "./tag.js";
-import { B as ae, d as se } from "./chunks/index.be6917c8.js";
-import { B as ne, a as oe, S as re } from "./chunks/index.7a59b0b8.js";
+import { B as ae, d as se } from "./chunks/index.d97166c6.js";
+import { B as ne, a as oe, S as re } from "./chunks/index.81e509f3.js";
 import { g as le } from "./chunks/unique-id.a2a2b458.js";
 import { u as me } from "./chunks/use-has-slot.fbeb19ec.js";
 import { r as ce, e as de, t as w, g as k } from "./chunks/index.f55fdc32.js";
 import { c as ue, a as _e } from "./chunks/index.86453263.js";
-import "./assets/index35.css";
+import "./assets/index38.css";
 var F = 1e3 * 60, M = 60 * 24, U = M * 30, j = M * 365;
 function B(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};