@adyen/bento-vue2 1.18.0 → 1.19.0

package/dist/sidepanel.js

@@ -1,24 +1,17 @@
-import { defineComponent as D, ref as r, inject as L, onUnmounted as G, computed as p, watch as y, nextTick as B, toRefs as F, provide as O } from "vue";
-import { a as w } from "./chunks/button.f5739261.js";
-import { B as $ } from "./chunks/index.546b27ae.js";
-import { F as H } from "./chunks/footer-actions.e0b866b1.js";
-import { A as J } from "./chunks/arrow-left.2db60716.js";
-import { a as R, b as k, S as K } from "./chunks/sidepanel.keys.3f8d69c1.js";
-import { u as x } from "./chunks/i18n.eb5b985b.js";
-import { n as U } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as Y } from "./chunks/index.6c299479.js";
-import { C as j } from "./chunks/cross.04678d81.js";
-import { g as z } from "./chunks/unique-id.a2a2b458.js";
-import "./assets/index44.css";
-var C = /* @__PURE__ */ ((o) => (o.UPDATE_ACTIVE_PAGE = "update:active-page", o.UPDATE_IS_OPEN = "update:is-open", o))(C || {}), I = /* @__PURE__ */ ((o) => (o.TRANSITION_LEVEL_DEEPER = "b-sidepanel-page__animation--level-deeper", o.TRANSITION_LEVEL_UPPER = "b-sidepanel-page__animation--level-upper", o))(I || {});
-const M = {
-  "en-US": {
-    goToPreviousPage: "Go to previous page"
-  }
-}, q = {
-  i18n: { messages: M }
-}, Q = /* @__PURE__ */ D({
-  ...q,
+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.de687404.js";
+import { F as x } from "./chunks/footer-actions.0268a57b.js";
+import { D as G, B as L, b as F, a as R } from "./chunks/dialog-page.f787969c.js";
+import { n as C } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { a as U } from "./chunks/button.0b6cda85.js";
+import { B as w } from "./chunks/index.302e9cf2.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/index29.css";
+const $ = {}, z = /* @__PURE__ */ P({
+  ...$,
   __name: "sidepanel-page",
   props: {
     /**
@@ -79,46 +72,39 @@ const M = {
       default: null
     }
   },
-  setup(o) {
-    const a = o, { t } = x(), e = r(null), n = r(!1), m = r(!0), i = r(!1), u = L(R), { unregisterPage: s } = u({ title: a.title, pageId: a.pageId });
-    G(() => s());
-    const { activePage: v, animation: _, goToPreviousPage: d, hasPreviousPages: P, isOpen: f } = L(k), g = p(() => v.value ? v.value === a.pageId : !0), T = p(() => a.previousPage ? !0 : a.previousPage === null ? !1 : P.value && g.value), S = p(() => ({
-      "b-sidepanel-page__header--with-border": n.value && !m.value
-    })), b = p(() => ({
-      "b-sidepanel-page__actions--with-border": n.value && !i.value
-    })), E = () => {
-      e.value && (m.value = e.value.scrollTop === 0, i.value = e.value.scrollHeight - e.value.clientHeight === e.value.scrollTop);
-    }, A = async (h) => {
-      h && (await B(), n.value = e.value && e.value.scrollHeight > e.value.clientHeight);
-    };
-    return y(() => f.value, A, { immediate: !0 }), y(() => g.value, A, { immediate: !0 }), { __sfc: !0, props: a, t, contentElement: e, hasScroll: n, isScrollAtTop: m, isScrollAtBottom: i, registerPage: u, unregisterPage: s, activePage: v, animation: _, goToPreviousPage: d, hasPreviousPages: P, isOpen: f, showPage: g, showBackButton: T, headerConditionalClasses: S, actionsConditionalClasses: b, onScroll: E, calculateScroll: A, updateAnimation: () => {
-      _.value === I.TRANSITION_LEVEL_UPPER && (_.value = I.TRANSITION_LEVEL_DEEPER);
-    }, BentoButton: w, BentoTypography: $, FooterActions: H, ArrowLeftIcon: J };
+  setup(i) {
+    return { __sfc: !0, BentoTypography: N, FooterActions: x, DialogPage: G };
   }
 });
-var W = function() {
-  var a = this, t = a._self._c, e = a._self._setupProxy;
-  return t("Transition", { attrs: { name: e.animation, mode: "out-in" }, on: { "after-leave": e.updateAnimation } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showPage, expression: "showPage" }], staticClass: "b-sidepanel-page" }, [t("div", { staticClass: "b-sidepanel-page__header", class: e.headerConditionalClasses }, [e.showBackButton ? t(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(n) {
-    return e.goToPreviousPage(a.previousPage);
-  } } }, [t(e.ArrowLeftIcon, { attrs: { "svg-title": e.t("goToPreviousPage") } })], 1) : a._e(), t(e.BentoTypography, { staticClass: "b-sidepanel-page__title", attrs: { el: "h2", variant: "title" } }, [a._v(" " + a._s(a.title) + " ")])], 1), t("div", { ref: "contentElement", staticClass: "b-sidepanel-page__content", on: { scroll: e.onScroll } }, [t(e.BentoTypography, { attrs: { el: "div", variant: "body" } }, [a._t("default")], 2)], 1), a.actions && a.actions.length > 0 ? t("div", { staticClass: "b-sidepanel-page__actions", class: e.actionsConditionalClasses }, [t(e.FooterActions, { attrs: { actions: a.actions, "actions-label": a.actionsLabel, "destructive-actions": a.destructiveActions } })], 1) : a._e()])]);
-}, X = [], Z = /* @__PURE__ */ U(
-  Q,
-  W,
-  X,
+var M = 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)];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [s("div", { staticClass: "b-sidepanel-page__content" }, [s(t.BentoTypography, { attrs: { el: "div", variant: "body" } }, [e._t("default")], 2)], 1)];
+  }, 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,
+  M,
+  j,
   !1,
   null,
-  "8de64d4b",
+  "4e6c994b",
   null,
   null
 );
-const me = Z.exports, ee = {
+const ue = q.exports;
+var u = /* @__PURE__ */ ((i) => (i.UPDATE_ACTIVE_PAGE = "update:active-page", i.UPDATE_IS_OPEN = "update:is-open", i))(u || {});
+const H = {
   "en-US": {
     close: "Close"
   }
-}, ae = {
-  i18n: { messages: ee }
-}, te = /* @__PURE__ */ D({
-  ...ae,
+}, Q = {
+  i18n: { messages: H }
+}, W = /* @__PURE__ */ P({
+  ...Q,
   __name: "sidepanel",
   props: {
     /**
@@ -145,79 +131,60 @@ const me = Z.exports, ee = {
       default: null
     }
   },
-  setup(o, { emit: a }) {
-    const t = o, { activePage: e, isOpen: n } = F(t), { t: m } = x(), i = r(null), u = r([]), s = r([]), v = p(() => s.value.length > 1), _ = r(I.TRANSITION_LEVEL_DEEPER), d = r(!1), P = z("sidepanel"), f = p(() => s.value[s.value.length - 1]), g = p(() => u.value.some((l) => l.pageId === e.value)), T = (l) => {
-      if (l) {
-        const c = s.value.indexOf(l);
-        c !== -1 ? s.value = s.value.slice(0, c + 1) : s.value = [l];
-      } else
-        s.value.pop();
-      _.value = I.TRANSITION_LEVEL_UPPER, a(C.UPDATE_ACTIVE_PAGE, f.value);
-    };
-    y(
-      () => e.value,
-      async () => {
-        if (await B(), e.value && !g.value) {
-          console.error(`The activePage passed "${e.value}" does not match the id of any SidepanelPage`);
-          return;
-        }
-        e.value !== f.value && s.value.push(e.value);
-      },
-      { immediate: !0 }
-    );
-    const S = p(() => ({
-      "b-sidepanel--hide": d.value
-    })), b = () => {
-      d.value && (i.value.close(), s.value[0] && a(C.UPDATE_ACTIVE_PAGE, s.value[0]), s.value = [], d.value = !1, a(C.UPDATE_IS_OPEN, !1));
-    }, E = () => {
-      i.value.open && (d.value = !0);
-    }, A = ({ target: l }) => {
-      l && l.tagName === "DIALOG" && E();
+  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();
     };
-    y(
-      () => n.value,
+    h(
+      () => a.value,
       async () => {
-        await B(), i.value && (n.value ? (i.value.showModal(), s.value.length || s.value.push(e.value)) : i.value.open && E());
+        await k(), l.value && (a.value ? (_.value = !0, l.value.showModal(), o.value.length || o.value.push(t.value)) : l.value.open && d());
       },
       { immediate: !0 }
     );
-    const N = (l) => () => {
-      var c;
-      u.value = (c = u.value) == null ? void 0 : c.filter(({ pageId: V }) => V !== l);
-    }, h = ({ title: l, pageId: c }) => (u.value.push({ title: l, pageId: c }), { unregisterPage: N(c) });
-    return O(k, {
-      activePage: e,
-      animation: _,
-      goToPreviousPage: T,
-      hasPreviousPages: v,
-      isOpen: n
-    }), O(R, h), O(K, P), { __sfc: !0, props: t, emit: a, activePage: e, isOpen: n, t: m, sidepanel: i, pages: u, previousPages: s, hasPreviousPages: v, animation: _, isClosing: d, sidepanelId: P, lastPage: f, isActivePageValid: g, goToPreviousPage: T, conditionalClasses: S, closeSidepanelAfterAnimation: b, startCloseSidepanelAnimation: E, closeSidepanelOnClickOutside: A, unregisterPage: N, registerPage: h, BentoButton: w, BentoFocusTrap: Y, CrossIcon: j };
+    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, {
+      activePage: t,
+      animation: v,
+      isOpen: _,
+      pages: p,
+      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 };
   }
 });
-var se = function() {
-  var a = this, t = a._self._c, e = a._self._setupProxy;
-  return t("dialog", { ref: "sidepanel", staticClass: "b-sidepanel", class: e.conditionalClasses, attrs: { id: e.sidepanelId }, on: { animationend: e.closeSidepanelAfterAnimation, click: function(n) {
-    a.isDismissible && e.closeSidepanelOnClickOutside(n);
-  }, keydown: function(n) {
-    if (!n.type.indexOf("key") && a._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]))
+var X = 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);
+  }, keydown: function(a) {
+    if (!a.type.indexOf("key") && e._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"]))
       return null;
-    n.preventDefault(), a.isDismissible && e.startCloseSidepanelAnimation;
-  } } }, [t(e.BentoFocusTrap, [a.isDismissible ? t("div", { staticClass: "b-sidepanel__close-button" }, [t(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: e.startCloseSidepanelAnimation } }, [t(e.CrossIcon, { attrs: { "svg-title": e.t("close") } })], 1)], 1) : a._e(), a._t("default")], 2)], 1);
-}, ne = [], oe = /* @__PURE__ */ U(
-  te,
-  se,
-  ne,
+    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,
+  X,
+  Z,
   !1,
   null,
-  "0f05baad",
+  "97a8b5da",
   null,
   null
 );
-const Pe = oe.exports;
+const de = ee.exports;
 export {
-  Pe as BentoSidepanel,
-  I as BentoSidepanelAnimation,
-  C as BentoSidepanelEvent,
-  me as BentoSidepanelPage
+  de as BentoSidepanel,
+  u as BentoSidepanelEvent,
+  ue as BentoSidepanelPage
 };
 //# sourceMappingURL=sidepanel.js.map

package/dist/sidepanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidepanel.js","sources":["../src/components/sidepanel/sidepanel.types.ts","../src/components/sidepanel/components/sidepanel-page.vue","../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["import { Ref } from 'vue';\n\nexport interface BentoSidepanelPageObject {\n    title: string;\n    pageId: string;\n}\n\nexport enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n\nexport enum BentoSidepanelAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-sidepanel-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-sidepanel-page__animation--level-upper',\n}\n\nexport interface BentoSidepanelConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    goToPreviousPage: (page: string) => void;\n    hasPreviousPages: Ref<boolean>;\n    isOpen: Ref<boolean>;\n}\n\nexport type BentoSidepanelRegisterPage = (props: BentoSidepanelPageObject) => { unregisterPage: () => void };\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\">\n        <div v-show=\"showPage\" class=\"b-sidepanel-page\">\n            <div class=\"b-sidepanel-page__header\" :class=\"headerConditionalClasses\">\n                <bento-button v-if=\"showBackButton\" variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                    <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                </bento-button>\n\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n            <div ref=\"contentElement\" class=\"b-sidepanel-page__content\" @scroll=\"onScroll\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n            <div\n                v-if=\"actions && actions.length > 0\"\n                class=\"b-sidepanel-page__actions\"\n                :class=\"actionsConditionalClasses\"\n            >\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onUnmounted, PropType, ref, watch } from 'vue';\n\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { BentoSidepanelAnimation, BentoSidepanelConfigData, BentoSidepanelRegisterPage } from '../sidepanel.types';\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from '../sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = 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\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isScrollAtTop = ref(true);\n    const isScrollAtBottom = ref(false);\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoSidepanelRegisterPage>(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage({ title: props.title, pageId: props.pageId });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => unregisterPage());\n\n    const { activePage, animation, goToPreviousPage, hasPreviousPages, isOpen } =\n        inject<BentoSidepanelConfigData>(SIDEPANEL_CONFIG_INJECTION_KEY);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-sidepanel-page__header--with-border': hasScroll.value && !isScrollAtTop.value,\n    }));\n\n    const actionsConditionalClasses = computed(() => ({\n        'b-sidepanel-page__actions--with-border': hasScroll.value && !isScrollAtBottom.value,\n    }));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n        isScrollAtTop.value = contentElement.value.scrollTop === 0;\n        isScrollAtBottom.value =\n            contentElement.value.scrollHeight - contentElement.value.clientHeight === contentElement.value.scrollTop;\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Animation\n    const updateAnimation = () => {\n        if (animation.value === BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER) {\n            animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER;\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        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\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 {\n        BentoSidepanelAnimation,\n        BentoSidepanelEvent,\n        BentoSidepanelPageObject,\n        BentoSidepanelRegisterPage,\n    } from './sidepanel.types';\n\n    import {\n        SIDEPANEL_CONFIG_INJECTION_KEY,\n        SIDEPANEL_DIALOG_ID_INJECTION_KEY,\n        SIDEPANEL_REGISTER_PAGE_INJECTION_KEY,\n    } 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<BentoSidepanelPageObject[]>([]);\n    const previousPages = ref([]);\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const animation = ref(BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n    const sidepanelId = generateUid('sidepanel');\n\n    // Previous page/back button logic\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page.pageId === activePage.value));\n\n    const goToPreviousPage = (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER;\n        emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                // eslint-disable-next-line no-console\n                console.error(`The activePage passed \"${activePage.value}\" does not match the id of any SidepanelPage`);\n                return;\n            }\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\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            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                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    // 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: BentoSidepanelRegisterPage = ({ title, pageId }) => {\n        pages.value.push({ title, pageId });\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide(SIDEPANEL_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        goToPreviousPage,\n        hasPreviousPages,\n        isOpen,\n    });\n    provide(SIDEPANEL_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":["BentoSidepanelEvent","BentoSidepanelEvent2","BentoSidepanelAnimation","BentoSidepanelAnimation2","__default__$1","messages$1","useI18n","contentElement","ref","hasScroll","isScrollAtTop","isScrollAtBottom","registerPage","inject","SIDEPANEL_REGISTER_PAGE_INJECTION_KEY","unregisterPage","props","onUnmounted","activePage","animation","goToPreviousPage","hasPreviousPages","isOpen","SIDEPANEL_CONFIG_INJECTION_KEY","showPage","computed","showBackButton","headerConditionalClasses","actionsConditionalClasses","onScroll","calculateScroll","watchedValue","nextTick","watch","__default__","messages","toRefs","t","sidepanel","pages","previousPages","isClosing","sidepanelId","generateUid","lastPage","isActivePageValid","page","index","emit","conditionalClasses","closeSidepanelAfterAnimation","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","target","pageIdToRemove","_a","pageId","title","provide","SIDEPANEL_DIALOG_ID_INJECTION_KEY"],"mappings":"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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/status.js

@@ -1,7 +1,7 @@
 import { defineComponent as n, computed as a } from "vue";
-import { B as o } from "./chunks/index.546b27ae.js";
+import { B as o } from "./chunks/index.de687404.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index16.css";
+import "./assets/index30.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 V, ref as p, computed as o, watch as A, provide as w, readonly as K, useSlots as W, inject as z, onMounted as Z } from "vue";
-import { B as L } from "./chunks/index.546b27ae.js";
+import { B as L } from "./chunks/index.de687404.js";
 import { B as I, a as M } from "./chunks/keyboard-navigation.ca47dfa8.js";
 import { u as U } from "./chunks/i18n.eb5b985b.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as j } from "./chunks/base-button.bf0c938c.js";
+import { B as j } from "./chunks/base-button.3c3d473d.js";
 import { C as G } from "./chunks/checkmark-small.520f01b1.js";
-import "./assets/index17.css";
+import "./assets/index31.css";
 const q = (i) => {
   function s(r) {
     return ({ detail: u }) => {

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/index.898a95bc.js";
+import { B as r, a as o } from "./chunks/index.0bb773a7.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.546b27ae.js";
+import { B as L, a as g } from "./chunks/index.de687404.js";
 import { BentoTag as M, BentoTagVariant as f } from "./tag.js";
-import { C as G } from "./chunks/copy.e01532cf.js";
-import "./assets/index19.css";
+import { C as G } from "./chunks/copy.647aae54.js";
+import "./assets/index44.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.546b27ae.js";
+import { B as R } from "./chunks/index.de687404.js";
 import { g as D } from "./chunks/unique-id.a2a2b458.js";
-import { F as S } from "./chunks/fixed-scroller.afe02620.js";
-import "./assets/index20.css";
+import { F as S } from "./chunks/fixed-scroller.06574a66.js";
+import "./assets/index33.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.546b27ae.js";
+import { B as d } from "./chunks/index.de687404.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.d452f6c4.js";
+import { B as _ } from "./chunks/tooltip.6748027a.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index21.css";
+import "./assets/index34.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 u, toRef as X, computed as o, watch as L, nextTick as ee, onMounted as te, onUnmounted as ae } from "vue";
-import { a as le } from "./chunks/button.f5739261.js";
-import { B as re } from "./chunks/index.546b27ae.js";
+import { a as le } from "./chunks/button.0b6cda85.js";
+import { B as re } from "./chunks/index.de687404.js";
 import { n as w } 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.317dd85f.js";
-import "./assets/index22.css";
+import { E as ue, F as ce } from "./chunks/error-message.75666843.js";
+import "./assets/index35.css";
 let T = 0;
 const de = {
   beforeCreate() {

package/dist/timeline.js

@@ -1,21 +1,21 @@
 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.f5739261.js";
+import { a as z } from "./chunks/button.0b6cda85.js";
 import { BentoTextarea as Q } from "./textarea.js";
 import { u as H } from "./chunks/i18n.eb5b985b.js";
-import { BentoButtonActions as X } from "./button.js";
+import { B as X } from "./chunks/button-actions.1dc90a19.js";
 import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as ee } from "./chunks/index.2e70720a.js";
-import { B as te } from "./chunks/index.6c017121.js";
+import { B as ee } from "./chunks/index.5bfc67d1.js";
+import { B as te } from "./chunks/index.5b47c56b.js";
 import { BentoTag as ie } from "./tag.js";
-import { B as ae, d as se } from "./chunks/index.546b27ae.js";
-import { B as ne, a as oe, S as re } from "./chunks/index.898a95bc.js";
+import { B as ae, d as se } from "./chunks/index.de687404.js";
+import { B as ne, a as oe, S as re } from "./chunks/index.0bb773a7.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/index23.css";
+import "./assets/index36.css";
 var F = 1e3 * 60, M = 60 * 24, U = M * 30, j = M * 365;
-function $(t, e) {
+function B(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
   ce(2, arguments);
   var a = i.locale || de;
@@ -169,10 +169,10 @@ var be = function() {
   null
 );
 const Pe = he.exports;
-let B = 0;
+let $ = 0;
 const ye = {
   beforeCreate() {
-    this.uuid = B.toString(), B += 1;
+    this.uuid = $.toString(), $ += 1;
   }
 };
 var Ce = function() {
@@ -307,10 +307,10 @@ const Te = Ee.exports, Ne = {
       if (!L || !V)
         return null;
       const { date: R } = d.value[n], W = parseInt(
-        $(L, R, { unit: b.value.unit }),
+        B(L, R, { unit: b.value.unit }),
         10
       );
-      return b.value.amount < W ? $(L, R, { roundingMethod: "floor" }) : null;
+      return b.value.amount < W ? B(L, R, { roundingMethod: "floor" }) : null;
     }), T = r(() => v.value ? i("timegap", { timegap: v.value }) : ""), h = r(() => _.value && C.value === n), J = r(() => n === d.value.length - 1);
     return {
       // Values

package/dist/toast.js

@@ -2,11 +2,11 @@ import { defineComponent as d, ref as u, computed as c, onMounted as g, watch as
 import { u as y } from "./chunks/toastController.fd667b68.js";
 import { I as C } from "./chunks/info-filled.c37e091d.js";
 import { C as k } from "./chunks/cross-small.e851e0de.js";
-import { a as x } from "./chunks/button.f5739261.js";
-import { B as S } from "./chunks/index.546b27ae.js";
+import { a as x } from "./chunks/button.0b6cda85.js";
+import { B as S } from "./chunks/index.de687404.js";
 import { u as w } from "./chunks/use-has-slot.fbeb19ec.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index24.css";
+import "./assets/index40.css";
 const $ = {
   "en-US": {
     dismiss: "Dismiss"

package/dist/toggle.js

@@ -1,13 +1,13 @@
 import { defineComponent as k, ref as p, computed as u, toRefs as I, watch as A } from "vue";
 import { C as B } from "./chunks/checkmark-small.520f01b1.js";
-import { B as L } from "./chunks/index.546b27ae.js";
+import { B as L } from "./chunks/index.de687404.js";
 import { g as E } from "./chunks/unique-id.a2a2b458.js";
 import { u as F } from "./chunks/use-default-slot-validator.b9bff4c6.js";
 import { u as R } from "./chunks/use-has-slot.fbeb19ec.js";
 import { g } from "./chunks/get-slot-text.99c3d860.js";
 import { u as x } from "./chunks/aria-label.ac9651a5.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index25.css";
+import "./assets/index46.css";
 var f = /* @__PURE__ */ ((t) => (t.LABEL_FIRST = "label-first", t))(f || {}), d = /* @__PURE__ */ ((t) => (t.BEFORE = "before", t.AFTER = "after", t))(d || {});
 const D = k({
   name: "bento-toggle",

package/dist/tutorial.js

@@ -1,14 +1,14 @@
 import { defineComponent as g, ref as d, computed as a, isRef as R, watch as F, nextTick as $ } from "vue";
-import { B as I } from "./chunks/index.81443e01.js";
-import { B as S, a as P } from "./chunks/index.e6aa2c36.js";
-import { B as k } from "./chunks/index.546b27ae.js";
+import { B as I } from "./chunks/index.a52b98d1.js";
+import { B as S, a as P } from "./chunks/index.932c230b.js";
+import { B as k } from "./chunks/index.de687404.js";
 import { BentoImage as w } from "./image.js";
 import { u as A } from "./chunks/i18n.eb5b985b.js";
 import { R as N } from "./chunks/refresh.71a03998.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as T, h as D, o as M } from "./chunks/index.290bbc9e.js";
-import { BentoButtonActions as V } from "./button.js";
-import "./assets/index26.css";
+import { a as T, h as D, o as M } from "./chunks/index.dc985e76.js";
+import { B as V } from "./chunks/button-actions.1dc90a19.js";
+import "./assets/index48.css";
 var E;
 const j = /* @__PURE__ */ g({
   __name: "tutorial-indicator",

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { B as p, c as e, b as r, a as y } from "./chunks/index.546b27ae.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/index.de687404.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,