@adyen/bento-vue2 1.18.0 → 1.19.0

package/dist/button.js

@@ -1,118 +1,96 @@
-import { a as p } from "./chunks/button.f5739261.js";
-import { b as I, B as R } from "./chunks/button.f5739261.js";
-import { defineComponent as v, computed as o } from "vue";
-import { B as u } from "./chunks/loading-button.390228ff.js";
-import { a as O } from "./chunks/loading-button.390228ff.js";
-import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index39.css";
-var l = /* @__PURE__ */ ((n) => (n.BUTTONS_END = "buttons-end", n.FILL_CONTAINER = "fill-container", n.SPACE_BETWEEN = "space-between", n.VERTICAL_STACK = "vertical-stack", n))(l || {}), _ = /* @__PURE__ */ ((n) => (n.BUTTONS_START = "buttons-start", n))(_ || {});
-const c = { ...l, ..._ }, B = {}, g = /* @__PURE__ */ v({
-  ...B,
-  __name: "button-actions",
+import { a as s } from "./chunks/button.0b6cda85.js";
+import { b as P, B as S } from "./chunks/button.0b6cda85.js";
+import { B as I, c as K, a as h, b as z } from "./chunks/button-actions.1dc90a19.js";
+import { B as F, a as N } from "./chunks/loading-button.50dddf2f.js";
+import { defineComponent as u, computed as d, useSlots as i } from "vue";
+import "./chunks/index.4c062058.js";
+import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index5.css";
+const _ = {}, g = /* @__PURE__ */ u({
+  ..._,
+  __name: "toggle-button",
   props: {
     /**
-     * List of actions that will be used to render the buttons.
-     * First element in the list will be rendered as "primary".
-     * All elements after the first will be rendered as "secondary".
-     *
-     * Each object in the list should have a `title`, an `event` and
-     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-     *
-     * `title`: Button's text.
-     *
-     * `event`: Event triggered when clicking the Button.
-     *
-     * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
-     *
-     * @see BentoButton for a list of all the other props supported by each button action.
-     *
-     * ```
-     * [{
-     *   title: 'Primary',
-     *   event: () => { ... },
-     *   icon: FourPeopleIcon,
-     *   link: {
-     *           variant: 'default',
-     *           external: true,
-     *           to: 'https://www.adyen.com/'
-     *       },
-     *  }, {
-     *   title: 'Secondary',
-     *   event: () => { ... }
-     *   disabled: true,
-     *   variant: 'secondary',
-     *   critical: true
-     * }]
-     * ```
+     * Reduces sizing of button
      */
-    actions: {
-      type: Array,
-      required: !0
+    condensed: {
+      type: s.props.condensed.type,
+      default: !1
+    },
+    /**
+     * Disables button functonality
+     */
+    disabled: {
+      type: s.props.disabled.type,
+      default: !1
     },
     /**
-     * Sets the Button Actions to color scheme inverse
+     * Sets color set to inverse
      */
     inverse: {
       type: Boolean,
       default: !1
     },
     /**
-     * Defines the layout in which the button actions is presented.
-     * It can be one of:
-     *
-     * @values BUTTONS_START
-     * @values BUTTONS_END
-     * @values FILL_CONTAINER
-     * @values SPACE_BETWEEN
-     * @values VERTICAL_STACK
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
      */
-    layout: {
-      type: String,
-      default: c.BUTTONS_END,
-      validator: (n) => Object.values(c).includes(n)
+    variant: {
+      type: s.props.variant.type,
+      default: "primary",
+      validator: s.props.variant.validator
+    },
+    /**
+     * The state of the button whether it is toggled or not.
+     */
+    toggled: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(n) {
-    const t = n, r = o(() => t.actions.slice().reverse()), s = (a) => {
-      const d = t.actions.length - 1;
-      return a === d ? "primary" : "secondary";
-    }, e = o(() => ({
-      [`b-button-actions--${t.layout}`]: !0
-    }));
-    return { __sfc: !0, props: t, reversedActionsList: r, generateButtonVariantByIndex: s, conditionalClasses: e, generateButtonEvents: (a) => (a == null ? void 0 : a.event) !== void 0 ? {
-      click: a.event
-    } : {}, BentoButton: p, BentoLoadingButton: u };
+  emits: ["click", "update:toggled"],
+  setup(r, { emit: e }) {
+    const t = r, o = d(() => ({
+      ["b-toggle-button--condensed"]: t == null ? void 0 : t.condensed,
+      ["b-toggle-button--tertiary"]: (t == null ? void 0 : t.variant) === "tertiary",
+      [`b-toggle-button--${t.variant}-toggled`]: t.toggled,
+      ["b-toggle-button--inverse"]: t.inverse
+    })), a = (l) => {
+      l.stopPropagation(), t != null && t.disabled || (e("click", l), e("update:toggled", !t.toggled));
+    }, n = i();
+    return { __sfc: !0, props: t, emit: e, conditionalClasses: o, onClick: a, slots: n, getSlotKeyIfVue3: (l) => ({}), BentoButton: s };
   }
 });
-var m = function() {
-  var t = this, r = t._self._c, s = t._self._setupProxy;
-  return r("div", { staticClass: "b-button-actions" }, [r("div", { staticClass: "b-button-actions__container-wrapper", class: s.conditionalClasses, attrs: { role: "group" } }, t._l(s.reversedActionsList, function(e, i) {
-    return r("div", { key: i, staticClass: "b-button-actions__button-wrapper" }, [e.state ? r(s.BentoLoadingButton, t._g({ attrs: { condensed: e.condensed, critical: e.critical, disabled: e.disabled, inverse: t.inverse, state: e.state, variant: e.variant || s.generateButtonVariantByIndex(i) } }, s.generateButtonEvents(e)), [t._v(" " + t._s(e.title) + " ")]) : r(s.BentoButton, t._g({ attrs: { condensed: e.condensed, critical: e.critical, disabled: e.disabled, inverse: t.inverse, link: e.link, variant: e.variant || s.generateButtonVariantByIndex(i) }, scopedSlots: t._u([e.icon || e.iconLeft ? { key: "iconLeft", fn: function() {
-      return [r(e.icon || e.iconLeft, { tag: "component", attrs: { "svg-title": e.title } })];
-    }, proxy: !0 } : null, e.iconRight ? { key: "iconRight", fn: function() {
-      return [r(e.iconRight, { tag: "component", attrs: { "svg-title": e.title } })];
-    }, proxy: !0 } : null], null, !0) }, s.generateButtonEvents(e)), [t._v(" " + t._s(e.title) + " ")])], 1);
-  }), 0)]);
-}, y = [], C = /* @__PURE__ */ f(
+var p = function() {
+  var e = this, t = e._self._c, o = e._self._setupProxy;
+  return t(o.BentoButton, { staticClass: "b-toggle-button", class: o.conditionalClasses, attrs: { condensed: e.condensed, disabled: e.disabled, inverse: e.inverse, variant: e.variant }, on: { "!click": function(a) {
+    return a.stopPropagation(), o.onClick.apply(null, arguments);
+  } }, scopedSlots: e._u([e._l(o.slots, function(a, n) {
+    return { key: n, fn: function() {
+      return [e._t(n, null, null, o.getSlotKeyIfVue3(n))];
+    }, proxy: !0 };
+  })], null, !0) });
+}, f = [], B = /* @__PURE__ */ c(
   g,
-  m,
-  y,
+  p,
+  f,
   !1,
   null,
-  "063db1f3",
+  "d8096cbd",
   null,
   null
 );
-const L = C.exports;
+const C = B.exports;
 export {
-  p as BentoButton,
-  L as BentoButtonActions,
-  c as BentoButtonActionsLayout,
-  l as BentoButtonActionsLayoutBasic,
-  _ as BentoButtonActionsLayoutExtended,
-  I as BentoButtonPropClass,
-  R as BentoButtonVariant,
-  u as BentoLoadingButton,
-  O as BentoLoadingButtonState
+  s as BentoButton,
+  I as BentoButtonActions,
+  K as BentoButtonActionsLayout,
+  h as BentoButtonActionsLayoutBasic,
+  z as BentoButtonActionsLayoutExtended,
+  P as BentoButtonPropClass,
+  S as BentoButtonVariant,
+  F as BentoLoadingButton,
+  N as BentoLoadingButtonState,
+  C as BentoToggleButton
 };
 //# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../src/components/button/components/button-actions/button-actions.types.ts","../src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { VueNodeElement } from '@/types';\nimport type { BentoButtonProps, BentoLoadingButtonState } from '@/components/button';\n\nexport interface BentoButtonActionObject extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: VueNodeElement;\n    iconLeft?: VueNodeElement;\n    iconRight?: VueNodeElement;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n}\n\nexport type BentoButtonActionsList = Array<BentoButtonActionObject>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","<template>\n    <div class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div v-for=\"(button, index) in reversedActionsList\" :key=\"index\" class=\"b-button-actions__button-wrapper\">\n                <bento-loading-button\n                    v-if=\"button.state\"\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :state=\"button.state\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    {{ button.title }}\n                </bento-loading-button>\n                <bento-button\n                    v-else\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :link=\"button.link\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                        <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                    </template>\n                    {{ button.title }}\n                    <template v-if=\"button.iconRight\" #iconRight>\n                        <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionObject, BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\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         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon,\n         *   link: {\n         *           variant: 'default',\n         *           external: true,\n         *           to: 'https://www.adyen.com/'\n         *       },\n         *  }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         *   disabled: true,\n         *   variant: 'secondary',\n         *   critical: true\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Sets the Button Actions to color scheme inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         * It can be one of:\n         *\n         * @values BUTTONS_START\n         * @values BUTTONS_END\n         * @values FILL_CONTAINER\n         * @values SPACE_BETWEEN\n         * @values VERTICAL_STACK\n         */\n        layout: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (layout: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(layout),\n        },\n    });\n\n    const reversedActionsList = computed(() => props.actions.slice().reverse());\n    const generateButtonVariantByIndex = actionIndex => {\n        const lastActionIndex = props.actions.length - 1;\n        return actionIndex === lastActionIndex ? 'primary' : 'secondary';\n    };\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions--${props.layout}`]: true,\n    }));\n\n    const generateButtonEvents = (button: BentoButtonActionObject) =>\n        button?.event !== undefined\n            ? {\n                  click: button.event,\n              }\n            : {};\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ButtonActions component component manages a set of actions a user can choose from by displaying a group of buttons.\n     *\n     * @example\n     * import { BentoButtonActions } from '@adyen/bento-vue2';\n     * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n     *\n     * const clickedAction = () => { //your action here }\n     *\n     * <template>\n     *     <bento-button-actions\n     *         :actions=\"[{\n     *             title: 'Primary',\n     *             event: clickedAction,\n     *             icon: MachineLearningIcon,\n     *         }, {\n     *             title: 'Secondary',\n     *             event: clickedAction,\n     *         }, {\n     *             title: 'Tertiary',\n     *             event: clickedAction,\n     *         }]\"\n     *     />\n     * </template>\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","__default__","reversedActionsList","computed","props","generateButtonVariantByIndex","actionIndex","lastActionIndex","conditionalClasses","button"],"mappings":";;;;;;;AAcY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAOL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCgIHG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAC,IAAA,CAAAC,MAAA;AACI,YAAAC,IAAAH,EAAA,QAAA,SAAA;AACA,aAAAE,MAAAC,IAAA,YAAA;AAAA,IAAqD,GAGzDC,IAAAL,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,QAAA,GAAA;AAAA,IACA,EAAA;wIAG3C,CAAAK,OAAAA,KAAA,gBAAAA,EAAA,WAAA,SAAA;AAAA,MAEU,OAAAA,EAAA;AAAA,IACkB,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button.js","sources":["../src/components/button/components/toggle-button/toggle-button.vue"],"sourcesContent":["<template>\n    <bento-button\n        class=\"b-toggle-button\"\n        :condensed=\"condensed\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        :variant=\"variant\"\n        @click.capture.stop=\"onClick\"\n    >\n        <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]>\n            <slot :name=\"innerSlot\" v-bind=\"getSlotKeyIfVue3(innerSlot)\" />\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import BentoButton from '@/components/button/button.vue';\n    import { isVue3 } from 'vue-demi';\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n\n        /**\n         * The state of the button whether it is toggled or not.\n         */\n        toggled: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n\n        /**\n         * Update the toggle state when the button has been clicked.\n         */\n        (e: 'update:toggled', newToggleState: boolean): void;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        [`b-toggle-button--condensed`]: props?.condensed,\n        [`b-toggle-button--tertiary`]: props?.variant === 'tertiary',\n        [`b-toggle-button--${props.variant}-toggled`]: props.toggled,\n        [`b-toggle-button--inverse`]: props.inverse,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n        if (!props?.disabled) {\n            emit('click', e);\n            emit('update:toggled', !props.toggled);\n        }\n    };\n\n    const slots = useSlots();\n    // If we don't provide a key to `slot` in vue 3, we will get type errors\n    const getSlotKeyIfVue3 = (slotName: string | number) => (isVue3 ? { key: slotName } : {});\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Toggle button is used to switch between two states (example: menu shown, menu hidden).\n     * It functions as a regular button but retains its state to indicate whether the associated menu or element is active or inactive.\n     *\n     * @example\n     * import { BentoToggleButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToggleButton },\n     *     template: `\n     *          <bento-toggle-button state=\"toggled\" variant=\"secondary\">\n     *              Button that can be toggled\n     *          </bento-toggle-button>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle-button.scss\" />\n"],"names":["__default__","conditionalClasses","computed","props","onClick","e","emit","slots","useSlots","slotName"],"mappings":";;;;;;;;AAmHI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtCAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,4BAAA,GAAAC,KAAA,gBAAAA,EAAA;AAAA,MACA,CAAA,2BAAA,IAAAA,KAAA,gBAAAA,EAAA,aAAA;AAAA,MACW,CAAA,oBAAAA,EAAA,iBAAA,GAAAA,EAAA;AAAA,MACG,CAAA,0BAAA,GAAAA,EAAA;AAAA,IACjB,EAAA,GAGxCC,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GACAF,KAAA,QAAAA,EAAA,aACIG,EAAA,SAAAD,CAAA,GACAC,EAAA,kBAAA,CAAAH,EAAA,OAAA;AAAA,IACJ,GAGJI,IAAAC,EAAA;0GAEA,CAAAC,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/card.js

@@ -1,14 +1,14 @@
 import { defineComponent as T, ref as h, watch as p, computed as n } from "vue";
-import { B as H } from "./chunks/index.546b27ae.js";
+import { B as H } from "./chunks/index.de687404.js";
 import { a as I, C as D } from "./chunks/chevron-up.81185563.js";
 import { u as M } from "./chunks/use-has-slot.fbeb19ec.js";
 import { g as O } from "./chunks/unique-id.a2a2b458.js";
 import { u as U } from "./chunks/i18n.eb5b985b.js";
 import { o as z } from "./chunks/resize.a041304d.js";
 import { u as R } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import { BentoButtonActions as W, BentoButtonActionsLayout as y } from "./button.js";
+import { B as W, c as y } from "./chunks/button-actions.1dc90a19.js";
 import { n as F } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index43.css";
+import "./assets/index6.css";
 var u = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(u || {}), i = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(i || {});
 const N = {
   "en-US": {

package/dist/checkbox.js

@@ -1,13 +1,13 @@
-import { B as y, b as l } from "./chunks/checkbox.1345941b.js";
-import { a as D } from "./chunks/checkbox.1345941b.js";
+import { B as y, a as l } from "./chunks/checkbox.c7a74005.js";
+import { C as D } from "./chunks/checkbox.c7a74005.js";
 import { defineComponent as g, toRef as v, computed as n, watch as c, ref as x } from "vue";
 import { g as E } from "./chunks/unique-id.a2a2b458.js";
-import { d as k } from "./chunks/index.546b27ae.js";
+import { d as k } from "./chunks/index.de687404.js";
 import { u as C } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { C as S } from "./chunks/controls-group.2b645d54.js";
-import { E as M } from "./chunks/error-message.317dd85f.js";
+import { C as S } from "./chunks/controls-group.8abe0bd1.js";
+import { E as M } from "./chunks/error-message.75666843.js";
 import { n as I } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index33.css";
+import "./assets/index7.css";
 var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
 const p = "bento-checkbox-group", T = g({
   name: p,

package/dist/chunks/{base-button.bf0c938c.js → base-button.3c3d473d.js}

@@ -1,5 +1,5 @@
 import { defineComponent as b, computed as r, ref as _ } from "vue";
-import { B as d } from "./index.546b27ae.js";
+import { B as d } from "./index.de687404.js";
 import { u as f } from "./use-has-slot.fbeb19ec.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/base-button.css";
@@ -85,4 +85,4 @@ export {
   U as B,
   s as a
 };
-//# sourceMappingURL=base-button.bf0c938c.js.map
+//# sourceMappingURL=base-button.3c3d473d.js.map

package/dist/chunks/{base-button.bf0c938c.js.map → base-button.3c3d473d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-button.bf0c938c.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-button.3c3d473d.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-modal.1dc6cf96.js → base-modal.27c6f2db.js}

@@ -1,8 +1,8 @@
 import { defineComponent as S, useSlots as P, useAttrs as w, ref as h, computed as i, watch as O, onMounted as F, provide as N } from "vue";
-import { B as x } from "./index.546b27ae.js";
-import { a as U } from "./button.f5739261.js";
-import { B as z } from "./index.7aa428c2.js";
-import { B as q } from "./index.6c299479.js";
+import { B as x } from "./index.de687404.js";
+import { a as U } from "./button.0b6cda85.js";
+import { B as z } from "./index.026ae47b.js";
+import { B as q } from "./index.302e9cf2.js";
 import { u as W } from "./use-has-slot.fbeb19ec.js";
 import { u as K } from "./i18n.eb5b985b.js";
 import { M as Y } from "./base-modal.keys.b08a6bdf.js";
@@ -195,4 +195,4 @@ export {
   tt as f,
   Lt as g
 };
-//# sourceMappingURL=base-modal.1dc6cf96.js.map
+//# sourceMappingURL=base-modal.27c6f2db.js.map

package/dist/chunks/{base-modal.1dc6cf96.js.map → base-modal.27c6f2db.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-modal.1dc6cf96.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'default',\n    DIALOG = 'dialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariantMapping {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n","<template>\n    <div class=\"b-modal-base\">\n        <dialog\n            :id=\"modalId\"\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"computedAriaLabel\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @click=\"isDismissible && closeModalOnClickOutside($event)\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap v-if=\"isOpen || initiallyOpen\">\n                <div class=\"b-modal-base__wrapper\">\n                    <div\n                        v-if=\"hasSlot('default') || showCloseButton\"\n                        class=\"b-modal-base__header-container\"\n                        :style=\"customPaddingStyles.header\"\n                    >\n                        <div class=\"b-modal-base__header\">\n                            <bento-typography\n                                class=\"b-modal-base__title\"\n                                aria-label=\"base modal title\"\n                                el=\"span\"\n                                variant=\"title\"\n                                stronger\n                            >\n                                <slot v-if=\"hasSlot('default')\" />\n                            </bento-typography>\n                            <bento-button\n                                v-if=\"showCloseButton\"\n                                class=\"b-modal-base__close-button\"\n                                variant=\"tertiary\"\n                                type=\"button\"\n                                @click=\"internalModalActionClose\"\n                            >\n                                <cross-icon :svg-title=\"t('close')\" />\n                            </bento-button>\n                        </div>\n                    </div>\n\n                    <div\n                        class=\"b-modal-base__content\"\n                        :class=\"modalContentConditionalClasses\"\n                        :style=\"customPaddingStyles.content\"\n                    >\n                        <bento-typography\n                            v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                            aria-label=\"base modal content\"\n                            el=\"div\"\n                            variant=\"body\"\n                            stronger\n                        >\n                            <grid-layout\n                                v-if=\"hasColumnLayout\"\n                                :column-width=\"computedColumnWidth\"\n                                :container-type=\"GridLayoutContainerType.NORMAL\"\n                                no-gap\n                                class=\"b-modal-base__grid\"\n                            >\n                                <template #col-1><slot name=\"content-col-1\"></slot></template>\n                                <template #col-2><slot name=\"content-col-2\"></slot></template>\n                            </grid-layout>\n                            <slot v-else name=\"content\" />\n                        </bento-typography>\n                    </div>\n\n                    <div\n                        v-if=\"hasSlot('actions')\"\n                        class=\"b-modal-base__actions-container\"\n                        :style=\"customPaddingStyles.actions\"\n                    >\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n                        <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n                            <slot name=\"actions\" />\n                        </div>\n                    </div>\n                </div>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, provide, ref, useAttrs, useSlots, watch } from 'vue';\n    import { BentoModalColumnLayoutVariant, BentoModalRole, BentoModalSize } from '@/components/modal/modal.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoDivider } from '@/components/divider';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const slots = useSlots();\n    const attrs = useAttrs();\n    const hasSlot = useHasSlot(slots);\n    const modal = ref<HTMLDialogElement>(null);\n    const isClosing = ref(false);\n    const modalId = generateUid('modal');\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the modal is closed.\n         */\n        (e: 'close-modal');\n    }>();\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         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\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         * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n         */\n        columnsSize: {\n            type: String as PropType<BentoModalColumnLayoutVariant>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n        },\n\n        /**\n         * If provided, manages the padding of the whole modal container\n         */\n        customPadding: { type: String, default: null },\n\n        /**\n         * Hides a cross icon on the right side of the title\n         */\n        hideCloseButton: { type: Boolean, required: true },\n\n        /**\n         * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n         */\n        initiallyOpen: { type: Boolean, default: false },\n\n        /**\n         * If set to true, it allows the modal to be closed by clicking outside of it\n         */\n        isDismissible: { type: Boolean, required: true },\n\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: { type: Boolean, required: true },\n\n        /**\n         * Defines whether the modal will be an alert modal\n         */\n        modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n        /**\n         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            default: BentoModalSize.SMALL,\n        },\n\n        /**\n         * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n         */\n        withColumnLayout: { type: Boolean, default: false },\n    });\n\n    const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n    const customPaddingStyles = computed(() => {\n        if (!props.customPadding) {\n            return {};\n        }\n\n        const xPadding = {\n            paddingLeft: props.customPadding,\n            paddingRight: props.customPadding,\n        };\n\n        const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n        if (!hasSlot('default')) {\n            content.paddingTop = props.customPadding;\n        }\n\n        if (!hasSlot('actions')) {\n            content.paddingBottom = props.customPadding;\n        }\n\n        return {\n            header: { ...xPadding, paddingTop: props.customPadding, flex: 0 },\n            content,\n            actions: { ...xPadding, paddingBottom: props.customPadding },\n        };\n    });\n\n    const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\n    const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n    const openModal = (): void => {\n        modal.value.showModal();\n    };\n\n    const emitCloseEvent = (): void => {\n        emit('close-modal');\n    };\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value) {\n            modal.value.close();\n            emitCloseEvent();\n            isClosing.value = false;\n        }\n    };\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * If the user has pressed escape, clicked outside or clicked the close icon.\n     * Needs to be called from outside, following the \"dialog.close()\" pattern,\n     * when the closing event is triggered outside of the \"base-modal\"\n     * component (e.g. from a closing action).\n     */\n    const internalModalActionClose = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n            return;\n        }\n        startCloseModalAnimation();\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 closeModalOnClickOutside = ({ target }: Event): void => {\n        if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n            internalModalActionClose();\n        }\n    };\n\n    const modalConditionalClasses = computed(() => ({\n        [`b-modal-base__container--${props.size}`]: props.size,\n        'b-modal-base__container--hide': isClosing.value,\n        'b-modal-base__container--column-layout': hasColumnLayout.value,\n    }));\n\n    const modalContentConditionalClasses = computed(() => ({\n        'b-modal-base__content--column-layout': hasColumnLayout.value,\n        'b-modal-base__content--with-header': hasSlot('default'),\n        'b-modal-base__content--with-actions': hasSlot('actions'),\n    }));\n\n    const computedColumnWidth = computed(() => {\n        if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n            return [\n                { small: 4, medium: 4, large: 4 },\n                { small: 8, medium: 8, large: 8 },\n            ];\n        }\n        if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n            return [\n                { small: 8, medium: 8, large: 8 },\n                { small: 4, medium: 4, large: 4 },\n            ];\n        }\n        return [\n            { small: 6, medium: 6, large: 6 },\n            { small: 6, medium: 6, large: 6 },\n        ];\n    });\n\n    watch(\n        () => [props.isOpen, modal.value],\n        ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n            if (!newModalValue) {\n                return;\n            }\n\n            const isFirstMutation = !oldModalValue;\n            if (newIsOpen) {\n                openModal();\n            } else if (!isFirstMutation) {\n                startCloseModalAnimation();\n            }\n        }\n    );\n\n    // If the first button is a loading button then close the modal have 0.5 seconds\n    // if the state is changed to 'success'.\n    watch(\n        () => props.actions,\n        () => {\n            if (props.actions?.[0]?.state === 'success') {\n                setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n            }\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        if (props.isOpen && modal.value) {\n            openModal();\n        }\n    });\n\n    /**\n     * Expose methods through its 'ref'\n     */\n    defineExpose({\n        internalModalActionClose,\n    });\n\n    // Let's Children components know they are inside a Modal (dialog element)\n    provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dialog container. It creates a dialog HTML element for the modal to use.\n     *\n     * @example\n     * import BaseModal from './components/base-modal/base-modal.vue';\n     *\n     * export default {\n     *     components: { BaseModal },\n     *     template: `\n     *          <base-modal\n     *              :hide-close-button=\"true\"\n     *              :is-dismissible=\"false\"\n     *              :is-open=\"isOpen\"\n     *              @close-modal=\"isOpen = false\"\n     *          >\n     *              <template #content-col-1>\n     *                  // Content on the left side column\n     *              </template>\n     *\n     *              <template #content-col-2>\n     *                  // Content on the right side column\n     *              </template>\n     *\n     *              <template v-if=\"actions\" #actions>\n     *                  <footer-actions :actions=\"actions\" />\n     *              </template>\n     *          </base-modal>\n     *     `,\n     *     setup() {\n     *          const isOpen = ref(true)\n     *          const  footerActions =  [{\n     *              title: 'Primary action',\n     *              event: () => { ... }\n     *          }]\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","__default__","defineComponent","messages","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","t","useI18n","slots","useSlots","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","modalId","generateUid","showCloseButton","computed","props","customPaddingStyles","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","emit","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","expose","provide","MODAL_DIALOG_ID_INJECTION_KEY"],"mappings":"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"}
+{"version":3,"file":"base-modal.27c6f2db.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'default',\n    DIALOG = 'dialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariantMapping {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n","<template>\n    <div class=\"b-modal-base\">\n        <dialog\n            :id=\"modalId\"\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"computedAriaLabel\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @click=\"isDismissible && closeModalOnClickOutside($event)\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap v-if=\"isOpen || initiallyOpen\">\n                <div class=\"b-modal-base__wrapper\">\n                    <div\n                        v-if=\"hasSlot('default') || showCloseButton\"\n                        class=\"b-modal-base__header-container\"\n                        :style=\"customPaddingStyles.header\"\n                    >\n                        <div class=\"b-modal-base__header\">\n                            <bento-typography\n                                class=\"b-modal-base__title\"\n                                aria-label=\"base modal title\"\n                                el=\"span\"\n                                variant=\"title\"\n                                stronger\n                            >\n                                <slot v-if=\"hasSlot('default')\" />\n                            </bento-typography>\n                            <bento-button\n                                v-if=\"showCloseButton\"\n                                class=\"b-modal-base__close-button\"\n                                variant=\"tertiary\"\n                                type=\"button\"\n                                @click=\"internalModalActionClose\"\n                            >\n                                <cross-icon :svg-title=\"t('close')\" />\n                            </bento-button>\n                        </div>\n                    </div>\n\n                    <div\n                        class=\"b-modal-base__content\"\n                        :class=\"modalContentConditionalClasses\"\n                        :style=\"customPaddingStyles.content\"\n                    >\n                        <bento-typography\n                            v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                            aria-label=\"base modal content\"\n                            el=\"div\"\n                            variant=\"body\"\n                            stronger\n                        >\n                            <grid-layout\n                                v-if=\"hasColumnLayout\"\n                                :column-width=\"computedColumnWidth\"\n                                :container-type=\"GridLayoutContainerType.NORMAL\"\n                                no-gap\n                                class=\"b-modal-base__grid\"\n                            >\n                                <template #col-1><slot name=\"content-col-1\"></slot></template>\n                                <template #col-2><slot name=\"content-col-2\"></slot></template>\n                            </grid-layout>\n                            <slot v-else name=\"content\" />\n                        </bento-typography>\n                    </div>\n\n                    <div\n                        v-if=\"hasSlot('actions')\"\n                        class=\"b-modal-base__actions-container\"\n                        :style=\"customPaddingStyles.actions\"\n                    >\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n                        <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n                            <slot name=\"actions\" />\n                        </div>\n                    </div>\n                </div>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, provide, ref, useAttrs, useSlots, watch } from 'vue';\n    import { BentoModalColumnLayoutVariant, BentoModalRole, BentoModalSize } from '@/components/modal/modal.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoDivider } from '@/components/divider';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const slots = useSlots();\n    const attrs = useAttrs();\n    const hasSlot = useHasSlot(slots);\n    const modal = ref<HTMLDialogElement>(null);\n    const isClosing = ref(false);\n    const modalId = generateUid('modal');\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the modal is closed.\n         */\n        (e: 'close-modal');\n    }>();\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         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\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         * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n         */\n        columnsSize: {\n            type: String as PropType<BentoModalColumnLayoutVariant>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n        },\n\n        /**\n         * If provided, manages the padding of the whole modal container\n         */\n        customPadding: { type: String, default: null },\n\n        /**\n         * Hides a cross icon on the right side of the title\n         */\n        hideCloseButton: { type: Boolean, required: true },\n\n        /**\n         * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n         */\n        initiallyOpen: { type: Boolean, default: false },\n\n        /**\n         * If set to true, it allows the modal to be closed by clicking outside of it\n         */\n        isDismissible: { type: Boolean, required: true },\n\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: { type: Boolean, required: true },\n\n        /**\n         * Defines whether the modal will be an alert modal\n         */\n        modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n        /**\n         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            default: BentoModalSize.SMALL,\n        },\n\n        /**\n         * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n         */\n        withColumnLayout: { type: Boolean, default: false },\n    });\n\n    const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n    const customPaddingStyles = computed(() => {\n        if (!props.customPadding) {\n            return {};\n        }\n\n        const xPadding = {\n            paddingLeft: props.customPadding,\n            paddingRight: props.customPadding,\n        };\n\n        const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n        if (!hasSlot('default')) {\n            content.paddingTop = props.customPadding;\n        }\n\n        if (!hasSlot('actions')) {\n            content.paddingBottom = props.customPadding;\n        }\n\n        return {\n            header: { ...xPadding, paddingTop: props.customPadding, flex: 0 },\n            content,\n            actions: { ...xPadding, paddingBottom: props.customPadding },\n        };\n    });\n\n    const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\n    const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n    const openModal = (): void => {\n        modal.value.showModal();\n    };\n\n    const emitCloseEvent = (): void => {\n        emit('close-modal');\n    };\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value) {\n            modal.value.close();\n            emitCloseEvent();\n            isClosing.value = false;\n        }\n    };\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * If the user has pressed escape, clicked outside or clicked the close icon.\n     * Needs to be called from outside, following the \"dialog.close()\" pattern,\n     * when the closing event is triggered outside of the \"base-modal\"\n     * component (e.g. from a closing action).\n     */\n    const internalModalActionClose = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n            return;\n        }\n        startCloseModalAnimation();\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 closeModalOnClickOutside = ({ target }: Event): void => {\n        if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n            internalModalActionClose();\n        }\n    };\n\n    const modalConditionalClasses = computed(() => ({\n        [`b-modal-base__container--${props.size}`]: props.size,\n        'b-modal-base__container--hide': isClosing.value,\n        'b-modal-base__container--column-layout': hasColumnLayout.value,\n    }));\n\n    const modalContentConditionalClasses = computed(() => ({\n        'b-modal-base__content--column-layout': hasColumnLayout.value,\n        'b-modal-base__content--with-header': hasSlot('default'),\n        'b-modal-base__content--with-actions': hasSlot('actions'),\n    }));\n\n    const computedColumnWidth = computed(() => {\n        if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n            return [\n                { small: 4, medium: 4, large: 4 },\n                { small: 8, medium: 8, large: 8 },\n            ];\n        }\n        if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n            return [\n                { small: 8, medium: 8, large: 8 },\n                { small: 4, medium: 4, large: 4 },\n            ];\n        }\n        return [\n            { small: 6, medium: 6, large: 6 },\n            { small: 6, medium: 6, large: 6 },\n        ];\n    });\n\n    watch(\n        () => [props.isOpen, modal.value],\n        ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n            if (!newModalValue) {\n                return;\n            }\n\n            const isFirstMutation = !oldModalValue;\n            if (newIsOpen) {\n                openModal();\n            } else if (!isFirstMutation) {\n                startCloseModalAnimation();\n            }\n        }\n    );\n\n    // If the first button is a loading button then close the modal have 0.5 seconds\n    // if the state is changed to 'success'.\n    watch(\n        () => props.actions,\n        () => {\n            if (props.actions?.[0]?.state === 'success') {\n                setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n            }\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        if (props.isOpen && modal.value) {\n            openModal();\n        }\n    });\n\n    /**\n     * Expose methods through its 'ref'\n     */\n    defineExpose({\n        internalModalActionClose,\n    });\n\n    // Let's Children components know they are inside a Modal (dialog element)\n    provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dialog container. It creates a dialog HTML element for the modal to use.\n     *\n     * @example\n     * import BaseModal from './components/base-modal/base-modal.vue';\n     *\n     * export default {\n     *     components: { BaseModal },\n     *     template: `\n     *          <base-modal\n     *              :hide-close-button=\"true\"\n     *              :is-dismissible=\"false\"\n     *              :is-open=\"isOpen\"\n     *              @close-modal=\"isOpen = false\"\n     *          >\n     *              <template #content-col-1>\n     *                  // Content on the left side column\n     *              </template>\n     *\n     *              <template #content-col-2>\n     *                  // Content on the right side column\n     *              </template>\n     *\n     *              <template v-if=\"actions\" #actions>\n     *                  <footer-actions :actions=\"actions\" />\n     *              </template>\n     *          </base-modal>\n     *     `,\n     *     setup() {\n     *          const isOpen = ref(true)\n     *          const  footerActions =  [{\n     *              title: 'Primary action',\n     *              event: () => { ... }\n     *          }]\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","__default__","defineComponent","messages","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","t","useI18n","slots","useSlots","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","modalId","generateUid","showCloseButton","computed","props","customPaddingStyles","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","emit","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","expose","provide","MODAL_DIALOG_ID_INJECTION_KEY"],"mappings":"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"}

package/dist/chunks/{button-actions-with-menu.4ecf3d93.js → button-actions-with-menu.a38327c2.js}

@@ -1,7 +1,7 @@
 import { defineComponent as a, computed as i, toRef as r, provide as u } from "vue";
-import { M as d, B as p } from "./index.81443e01.js";
-import { B as _ } from "./index.e6aa2c36.js";
-import { BentoButtonActions as l } from "../button.js";
+import { M as d, B as p } from "./index.a52b98d1.js";
+import { B as _ } from "./index.932c230b.js";
+import { B as l } from "./button-actions.1dc90a19.js";
 import { n as m } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/button-actions-with-menu.css";
 const f = {}, v = /* @__PURE__ */ a({
@@ -102,4 +102,4 @@ const C = B.exports;
 export {
   C as B
 };
-//# sourceMappingURL=button-actions-with-menu.4ecf3d93.js.map
+//# sourceMappingURL=button-actions-with-menu.a38327c2.js.map

package/dist/chunks/{button-actions-with-menu.4ecf3d93.js.map → button-actions-with-menu.a38327c2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.4ecf3d93.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\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             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;AAwJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA;AAEA,IAAAG,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAN;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAM,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions-with-menu.a38327c2.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\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             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;AAwJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA;AAEA,IAAAG,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAN;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAM,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;;;"}