@adyen/bento-vue2 1.20.1 → 1.21.0

package/dist/chunks/arrow-left.2db60716.js

@@ -1,26 +0,0 @@
-import { n as r } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/cross.css";
-let e = 0;
-const n = {
-  beforeCreate() {
-    this.uuid = e.toString(), e += 1;
-  }
-};
-var l = function() {
-  var t = this, s = t._self._c;
-  return s("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#00112C", d: "M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z" } })]);
-}, _ = [], a = /* @__PURE__ */ r(
-  n,
-  l,
-  _,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const c = a.exports;
-export {
-  c as A
-};
-//# sourceMappingURL=arrow-left.2db60716.js.map

package/dist/chunks/arrow-left.2db60716.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"arrow-left.2db60716.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/arrow-left.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","_sfc_main"],"mappings":";;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/base-modal.cc448ad3.js

@@ -1,203 +0,0 @@
-import { defineComponent as E, useSlots as w, useAttrs as N, ref as O, computed as i, watch as S, onMounted as F, provide as x } from "vue";
-import { B as U } from "./index.2f00afab.js";
-import { a as z } from "./button.27948f1c.js";
-import { B as q } from "./index.900d8b24.js";
-import { u as W } from "./use-has-slot.fbeb19ec.js";
-import { u as H } from "./i18n.eb5b985b.js";
-import { M as K } from "./base-modal.keys.b08a6bdf.js";
-import { g as Y } from "./unique-id.a2a2b458.js";
-import { C as J } from "./cross.04678d81.js";
-import { G as Q, a as j } from "./grid-layout.e0025286.js";
-import { n as X } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/base-modal.css";
-var Z = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.DIALOG = "dialog", a))(Z || {}), $ = /* @__PURE__ */ ((a) => (a.DEFAULT = "BentoModalDefault", a.DIALOG = "BentoModalDialog", a))($ || {}), b = /* @__PURE__ */ ((a) => (a.SMALL = "small", a.MEDIUM = "medium", a.LARGE = "large", a))(b || {}), m = /* @__PURE__ */ ((a) => (a.SMALLER = "smaller", a.EQUAL = "equal", a.BIGGER = "bigger", a))(m || {}), _ = /* @__PURE__ */ ((a) => (a.DIALOG = "dialog", a.ALERT_DIALOG = "alertdialog", a))(_ || {}), V = /* @__PURE__ */ ((a) => (a.CONFIRMATION = "confirmation", a.DESTRUCTIVE = "destructive", a.INFO = "info", a.ACKNOWLEDGEMENT = "acknowledgement", a))(V || {}), tt = /* @__PURE__ */ ((a) => (a.CLOSE_MODAL = "close-modal", a))(tt || {});
-const at = {
-  "en-US": {
-    ariaLabelFallback: "modal",
-    close: "Close"
-  }
-}, et = E({
-  i18n: { messages: at },
-  name: "base-modal"
-}), ot = /* @__PURE__ */ E({
-  ...et,
-  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".
-     * But you may change the color of 1-st action to red with 'critial' key
-     * Not more than 3 action buttons can be provided
-     * Or 2 action buttons and 1 Label for them
-     *
-     * 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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
-     *
-     * ```
-     * [{
-     *   title: 'Primary',2
-     *   event: () => { ... },
-     *   icon: FourPeopleIcon
-     * }, {
-     *   title: 'Secondary',
-     *   event: () => { ... }
-     * }]
-     * ```
-     */
-    actions: {
-      type: Array,
-      default: null
-    },
-    /**
-     * 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.
-     */
-    columnsSize: {
-      type: String,
-      default: m.SMALLER
-    },
-    /**
-     * If provided, manages the padding of the whole modal container
-     */
-    customPadding: { type: String, default: null },
-    /**
-     * Hides a cross icon on the right side of the title
-     */
-    hideCloseButton: { type: Boolean, required: !0 },
-    /**
-     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
-     */
-    initiallyOpen: { type: Boolean, default: !1 },
-    /**
-     * If set to true, it allows the modal to be closed by clicking outside of it
-     */
-    isDismissible: { type: Boolean, required: !0 },
-    /**
-     * Controls the modal's state from the outside. Set it to true to open the modal
-     */
-    isOpen: { type: Boolean, required: !0 },
-    /**
-     * Defines whether the modal will be an alert modal
-     */
-    modalRole: { type: String, default: _.DIALOG },
-    /**
-     * Sets the width of the modal
-     */
-    size: {
-      type: String,
-      default: b.SMALL
-    },
-    /**
-     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
-     */
-    withColumnLayout: { type: Boolean, default: !1 }
-  },
-  emits: ["close-modal"],
-  setup(a, { expose: e, emit: o }) {
-    const t = a, n = 500, C = 26, { t: y } = H(), L = w(), v = N(), d = W(L), r = O(null), c = O(!1), A = Y("modal"), I = i(() => t.isDismissible && !t.hideCloseButton), B = i(() => {
-      if (!t.customPadding)
-        return {};
-      const s = {
-        paddingLeft: t.customPadding,
-        paddingRight: t.customPadding
-      }, l = { ...s, paddingTop: void 0, paddingBottom: void 0 };
-      return d("default") || (l.paddingTop = t.customPadding), d("actions") || (l.paddingBottom = t.customPadding), {
-        header: {
-          ...s,
-          paddingTop: t.customPadding,
-          flex: 0,
-          paddingRight: `${parseInt(t.customPadding, 10) + C}px`
-        },
-        content: l,
-        closeButton: { top: t.customPadding, right: t.customPadding },
-        actions: { ...s, paddingBottom: t.customPadding }
-      };
-    }), D = i(() => v["aria-label"] ?? y("ariaLabelFallback")), p = i(() => t.withColumnLayout && t.size === b.LARGE), f = () => {
-      r.value.showModal();
-    }, h = () => {
-      o("close-modal");
-    }, T = () => {
-      c.value && (r.value.close(), h(), c.value = !1);
-    }, u = () => {
-      r.value.open && (c.value = !0);
-    }, g = (s) => {
-      s && s.preventDefault(), !(!t.isDismissible && t.modalRole === _.DIALOG) && u();
-    }, G = ({ target: s }) => {
-      s && s.tagName === _.DIALOG.toUpperCase() && g();
-    }, M = i(() => ({
-      [`b-modal-base__container--${t.size}`]: t.size,
-      "b-modal-base__container--hide": c.value,
-      "b-modal-base__container--column-layout": p.value
-    })), P = i(() => ({
-      "b-modal-base__content--column-layout": p.value,
-      "b-modal-base__content--with-header": d("default"),
-      "b-modal-base__content--with-actions": d("actions")
-    })), R = i(() => t.columnsSize === m.SMALLER ? [
-      { small: 4, medium: 4, large: 4 },
-      { small: 8, medium: 8, large: 8 }
-    ] : t.columnsSize === m.BIGGER ? [
-      { small: 8, medium: 8, large: 8 },
-      { small: 4, medium: 4, large: 4 }
-    ] : [
-      { small: 6, medium: 6, large: 6 },
-      { small: 6, medium: 6, large: 6 }
-    ]);
-    return S(
-      () => [t.isOpen, r.value],
-      ([s, l], [, k]) => {
-        if (!l)
-          return;
-        s ? f() : !k || u();
-      }
-    ), S(
-      () => t.actions,
-      () => {
-        var s, l;
-        ((l = (s = t.actions) == null ? void 0 : s[0]) == null ? void 0 : l.state) === "success" && setTimeout(u, n);
-      },
-      { deep: !0 }
-    ), F(() => {
-      t.isOpen && r.value && f();
-    }), e({
-      internalModalActionClose: g
-    }), x(K, A), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, CLOSE_BUTTON_ICON_WIDTH: C, t: y, slots: L, attrs: v, hasSlot: d, modal: r, isClosing: c, modalId: A, emit: o, props: t, showCloseButton: I, customPaddingStyles: B, computedAriaLabel: D, hasColumnLayout: p, openModal: f, emitCloseEvent: h, closeModalAfterAnimation: T, startCloseModalAnimation: u, internalModalActionClose: g, closeModalOnClickOutside: G, modalConditionalClasses: M, modalContentConditionalClasses: P, computedColumnWidth: R, BentoTypography: U, BentoButton: z, BentoFocusTrap: q, GridLayout: Q, GridLayoutContainerType: j, CrossIcon: J };
-  }
-});
-var st = function() {
-  var e = this, o = e._self._c, t = e._self._setupProxy;
-  return o("div", { staticClass: "b-modal-base" }, [o("dialog", { ref: "modal", staticClass: "b-modal-base__container", class: t.modalConditionalClasses, attrs: { id: t.modalId, role: e.modalRole, "aria-label": t.computedAriaLabel, open: e.initiallyOpen }, on: { animationend: t.closeModalAfterAnimation, click: function(n) {
-    e.isDismissible && t.closeModalOnClickOutside(n);
-  }, keydown: function(n) {
-    return !n.type.indexOf("key") && e._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : t.internalModalActionClose.apply(null, arguments);
-  } } }, [e.isOpen || e.initiallyOpen ? o(t.BentoFocusTrap, [t.showCloseButton ? o(t.BentoButton, { staticClass: "b-modal-base__close-button", style: t.customPaddingStyles.closeButton, attrs: { variant: "tertiary", type: "button" }, on: { click: t.internalModalActionClose } }, [o(t.CrossIcon, { attrs: { "svg-title": t.t("close") } })], 1) : e._e(), o("div", { staticClass: "b-modal-base__wrapper" }, [t.hasSlot("default") || t.showCloseButton ? o("div", { staticClass: "b-modal-base__header-container", style: t.customPaddingStyles.header }, [o("div", { staticClass: "b-modal-base__header" }, [o(t.BentoTypography, { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: "span", variant: "title", stronger: "" } }, [t.hasSlot("default") ? e._t("default") : e._e()], 2)], 1)]) : e._e(), o("div", { staticClass: "b-modal-base__content", class: t.modalContentConditionalClasses, style: t.customPaddingStyles.content }, [t.hasSlot("content") || t.hasSlot("content-col-1") && t.hasSlot("content-col-2") ? o(t.BentoTypography, { attrs: { "aria-label": "base modal content", el: "div", variant: "body", stronger: "" } }, [t.hasColumnLayout ? o(t.GridLayout, { staticClass: "b-modal-base__grid", attrs: { "column-width": t.computedColumnWidth, "container-type": t.GridLayoutContainerType.NORMAL, "no-gap": "" }, scopedSlots: e._u([{ key: "col-1", fn: function() {
-    return [e._t("content-col-1")];
-  }, proxy: !0 }, { key: "col-2", fn: function() {
-    return [e._t("content-col-2")];
-  }, proxy: !0 }], null, !0) }) : e._t("content")], 2) : e._e()], 1), t.hasSlot("actions") ? o("div", { staticClass: "b-modal-base__actions-container", style: t.customPaddingStyles.actions }, [o("div", { staticClass: "b-modal-base__actions", attrs: { "aria-label": "modal actions" } }, [e._t("actions")], 2)]) : e._e()])], 1) : e._e()], 1)]);
-}, nt = [], lt = /* @__PURE__ */ X(
-  ot,
-  st,
-  nt,
-  !1,
-  null,
-  "5f27120d",
-  null,
-  null
-);
-const yt = lt.exports;
-export {
-  Z as B,
-  $ as a,
-  b,
-  m as c,
-  _ as d,
-  V as e,
-  tt as f,
-  yt as g
-};
-//# sourceMappingURL=base-modal.cc448ad3.js.map

package/dist/chunks/base-modal.cc448ad3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-modal.cc448ad3.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                <bento-button\n                    v-if=\"showCloseButton\"\n                    class=\"b-modal-base__close-button\"\n                    variant=\"tertiary\"\n                    type=\"button\"\n                    :style=\"customPaddingStyles.closeButton\"\n                    @click=\"internalModalActionClose\"\n                >\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\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                        </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                        <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 { 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    const CLOSE_BUTTON_ICON_WIDTH = 26;\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: {\n                ...xPadding,\n                paddingTop: props.customPadding,\n                flex: 0,\n                paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n            },\n            content,\n            closeButton: { top: props.customPadding, right: props.customPadding },\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","CLOSE_BUTTON_ICON_WIDTH","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.27948f1c.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.27948f1c.js","sources":["../../../core/src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"conditionalClasses\"\n        @click.capture=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-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-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, useAttrs, useSlots } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { Booleanish } from '@/types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        // eslint-disable-next-line vue/require-default-prop\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Displays button as critical\n         */\n        critical: { type: Boolean, default: false },\n\n        /**\n         * Disables button functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: { type: Boolean, default: false },\n\n        /**\n         * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n         */\n        link: { type: Object, default: undefined },\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        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary\n         */\n        variant: {\n            type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n            default: BentoButtonVariant.PRIMARY,\n            validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur');\n\n        /**\n         * Emitted when the button is clicked\n         */\n        (e: 'click', event: MouseEvent);\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus');\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: 'keydown.esc');\n    }>();\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const componentType = computed(() => {\n        if (props?.link !== undefined) {\n            return BentoLink;\n        }\n        return 'button';\n    });\n    const ariaAttributes = computed(() => ({\n        'aria-controls': attrs['aria-controls']?.toString() as string,\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        componentType.value === 'button'\n            ? {\n                  ...ariaAttributes.value,\n                  disabled: props.disabled,\n                  type: props.type,\n              }\n            : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT, isButton: true }\n    );\n\n    const variantClass = computed(() => ({\n        [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        ...variantClass.value,\n        [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n        [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n        [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n        [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n    }));\n\n    const onClickButton = (e: MouseEvent) => {\n        if (!props.disabled) {\n            emit('click', e);\n        } else {\n            e.preventDefault();\n            e.stopPropagation();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @example\n     * import { BentoButton } from '@adyen/bento-vue2';\n     * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             variant=\"secondary\"\n     *         >\n     *              <template #iconLeft>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *\n     *              Button text\n     *\n     *              <template #iconRight>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","componentType","computed","props","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"mappings":";;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;ACgLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7EAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIC,KAAA,gBAAAA,EAAA,UAAA,SACIC,IAEJ,QAAO,GAEXC,IAAAH,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAI,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,QACe,kBAAAC,IAAAZ,EAAA,eAAA,MAAA,gBAAAY,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAN;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAI,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,IAAA,SAAAM,EAAA,SAAA,UAAA,GAAA;AAAA,IAE4E,GAGtGC,IAAAR,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAC,EAAA,UAAAA,EAAA,WAAA,IAAAX,EAAA,gBAAA,IAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGmB,IAAAT,EAAA,OAAA;AAAA,MAA2C,GAAAQ,EAAA;AAAA,MACvB,CAAA,aAAAlB,EAAA,WAAA,GAAAW,EAAA;AAAA,MACuC,CAAA,aAAAX,EAAA,UAAA,GAAAW,EAAA;AAAA,MACD,CAAA,aAAAX,EAAA,WAAA,GAAA,CAAAK,EAAA;AAAA,MACE,CAAA,aAAAL,EAAA,SAAA,GAAAW,EAAA;AAAA,IACH,EAAA;0LAGzD,CAAAS,MAAA;AACI,MAAAT,EAAA,YAGIS,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAC,EAAA,SAAAD,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/checkbox.2c2a1f90.js

@@ -1,275 +0,0 @@
-import { defineComponent as R, toRefs as A, computed as o, ref as O } from "vue";
-import { B as F } from "./index.2f00afab.js";
-import { u as H } from "./use-default-slot-validator.b9bff4c6.js";
-import { u as Y } from "./use-has-slot.fbeb19ec.js";
-import { g as L } from "./unique-id.a2a2b458.js";
-import { g as S } from "./get-slot-text.99c3d860.js";
-import { u as K } from "./i18n.eb5b985b.js";
-import { u as j } from "./aria-label.ac9651a5.js";
-import { BentoTag as z } from "../tag.js";
-import { C as Z } from "./checkmark-small.520f01b1.js";
-import { n as $ } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { E as G } from "./error-message.3d436de3.js";
-import "../assets/checkbox.css";
-var c = /* @__PURE__ */ ((t) => (t.UNCHECKED = "unchecked", t.DISABLED = "disabled", t.ERROR = "error", t.READONLY = "readonly", t))(c || {}), D = /* @__PURE__ */ ((t) => (t.UPDATE = "update:model-value", t))(D || {});
-let I = 0;
-const J = {
-  beforeCreate() {
-    this.uuid = I.toString(), I += 1;
-  }
-};
-var Q = function() {
-  var e = this, a = e._self._c;
-  return a("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? a("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), a("path", { attrs: { fill: "#00112C", d: "M4.25 7.25H11.75V8.75H4.25V7.25Z" } })]);
-}, W = [], X = /* @__PURE__ */ $(
-  J,
-  Q,
-  W,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const ee = X.exports, ae = {
-  name: "checkbox-input",
-  inheritAttrs: !1
-}, te = /* @__PURE__ */ R({
-  ...ae,
-  props: {
-    /**
-     * The aria label associated to the input checkbox.
-     */
-    ariaLabel: { type: String, default: "" },
-    /**
-     * An additional string that serves as description for the input checkbox (useful if the component shows a description).
-     */
-    ariaDescribedby: { type: String, default: "" },
-    /**
-     * Setting this property to true will disable the checkbox in your form.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Setting this property to true will show the checkbox in error state.
-     */
-    hasError: { type: Boolean, default: !1 },
-    /**
-     * Sets the id of the checkbox. Required for accessibility purposes
-     */
-    id: { type: String, default: null },
-    /**
-     * The :indeterminate CSS pseudo-class represents any form element
-     * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute
-     * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,
-     * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
-     * This property lets you control the input.indeterminate native property.
-     */
-    indeterminate: { type: Boolean, default: !1 },
-    /**
-     * When handling a single checkbox with a singular state, use a boolean.
-     *
-     * When handling multiple checkboxes, use an array of keys.
-     * These keys exist as a set "value" prop for each checkbox.
-     */
-    modelValue: {
-      type: [Boolean, Array],
-      default: !1
-    },
-    /**
-     * Setting this property to true will set the checkbox to read only state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The value of the component. The DOM API casts this to a string.
-     * The browser uses "on" as the default value.
-     *
-     * In the case of multiple checkboxes this value is used as a unique key.
-     */
-    value: { type: [String, Number], default: null }
-  },
-  emits: ["update:model-value"],
-  setup(t, { emit: e }) {
-    const a = t, { disabled: l, indeterminate: f, modelValue: n, readonly: _, value: i } = A(a), v = o(() => ({
-      [`b-checkbox-input--${c.DISABLED}`]: a.disabled,
-      [`b-checkbox-input--${c.READONLY}`]: a.readonly
-    })), g = o(() => ({
-      [`b-checkbox-input__outline--${c.UNCHECKED}`]: !m.value && !a.indeterminate,
-      [`b-checkbox-input__outline--${c.ERROR}`]: a.hasError,
-      [`b-checkbox-input__outline--${c.READONLY}`]: a.readonly
-    })), u = o(() => Array.isArray(n.value)), m = o(() => u.value ? n.value.some((r) => r === i.value) : n.value), k = o(() => a.hasError && !a.disabled && !a.readonly);
-    return { __sfc: !0, props: a, emit: e, disabled: l, indeterminate: f, modelValue: n, readonly: _, value: i, conditionalClasses: v, outlineConditionalClasses: g, isCheckboxGroup: u, isChecked: m, ariaInvalid: k, onClick: (r) => {
-      _.value && r.preventDefault();
-    }, onChange: (r) => {
-      if (l.value)
-        return;
-      const d = r.target.checked;
-      if (u.value) {
-        const s = [...n.value], b = s.indexOf(i.value);
-        b === -1 ? s.push(i.value) : s.splice(b, 1), e(D.UPDATE, s);
-      } else
-        e(D.UPDATE, d);
-    }, CheckmarkSmallIcon: Z, MinusSmallIcon: ee };
-  }
-});
-var le = function() {
-  var e = this, a = e._self._c, l = e._self._setupProxy;
-  return a("div", { staticClass: "b-checkbox-input", class: l.conditionalClasses }, [l.indeterminate ? a(l.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "intermediate" } }) : l.isChecked ? a(l.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "checked" } }) : e._e(), a("input", { ref: "input", staticClass: "b-checkbox-input__outline", class: l.outlineConditionalClasses, attrs: { id: e.id, role: "checkbox", type: "checkbox", "aria-label": e.ariaLabel, "aria-checked": l.isChecked, "aria-describedby": e.ariaDescribedby, "aria-invalid": l.ariaInvalid, disabled: l.disabled, "aria-readonly": l.readonly }, domProps: { checked: l.isChecked, indeterminate: l.indeterminate, value: l.value }, on: { click: l.onClick, change: l.onChange } })], 1);
-}, oe = [], re = /* @__PURE__ */ $(
-  te,
-  le,
-  oe,
-  !1,
-  null,
-  "7fd78e04",
-  null,
-  null
-);
-const se = re.exports;
-var p = /* @__PURE__ */ ((t) => (t.UPDATE = "update:model-value", t.INPUT = "input", t))(p || {});
-const ne = {
-  "en-US": {
-    ariaLabelFallback: "Checkbox",
-    optional: "optional",
-    required: "required"
-  }
-}, ie = R({
-  name: "bento-checkbox",
-  i18n: { messages: ne },
-  components: {
-    BentoTag: z,
-    BentoTypography: F,
-    CheckboxInput: se,
-    ErrorMessage: G
-  },
-  model: { prop: "modelValue" },
-  props: {
-    /**
-     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
-     */
-    /**
-     * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.
-     */
-    ariaLabel: { type: String, default: null },
-    /**
-     * Setting this property to true will disable the checkbox in your form.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Renders the checkbox in an error state with an error message.
-     */
-    errorMessage: { type: String, default: null },
-    /**
-     * Setting this property to true will show the checkbox in error state.
-     */
-    hasError: { type: Boolean, default: !1 },
-    /**
-     * The :indeterminate CSS pseudo-class represents any form element
-     * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute
-     * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,
-     * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
-     * This property lets you control the input.indeterminate native property.
-     */
-    indeterminate: { type: Boolean, default: !1 },
-    /**
-     * When handling a single checkbox with a singular state, use a boolean.
-     *
-     * When handling multiple checkboxes, use an array of keys.
-     * These keys exist as a set "value" prop for each checkbox.
-     */
-    modelValue: {
-      type: [Boolean, Array],
-      default: !1
-    },
-    /**
-     * Highlights the checkbox is optional.
-     */
-    optional: { type: Boolean, default: !1 },
-    /**
-     * Setting this property to true will set the checkbox to read only state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * Highlights the checkbox is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Sets the properties of the BentoTag component that is placed next to the label.
-     * {@see BentoTag}
-     */
-    tag: { type: Object, default: void 0 },
-    /**
-     * The value of the component. The DOM API casts this to a string.
-     * The browser uses "on" as the default value.
-     *
-     * In the case of multiple checkboxes this value is used as a unique key.
-     */
-    value: { type: [String, Number], default: null }
-  },
-  emits: [p.UPDATE, p.INPUT],
-  setup(t, { attrs: e, emit: a, slots: l }) {
-    const { t: f } = K(), n = L("description"), _ = L("error"), i = Y(l), { disabled: v, indeterminate: g, modelValue: u, readonly: m, value: k } = A(t), C = S(l)("default"), x = S(l)("description");
-    H("bento-checkbox", l.default, l.description);
-    const r = o(() => Array.isArray(u.value)), d = o(() => r.value ? u.value.some((y) => y === k.value) : u.value), s = o(() => g.value), b = o(
-      () => !t.disabled && !t.readonly && (t.hasError || !!t.errorMessage)
-    ), B = o(() => !t.disabled && !t.readonly && !!t.errorMessage), h = o(() => i("content")), E = o(() => (s == null ? void 0 : s.value) || (d == null ? void 0 : d.value)), U = o(
-      () => (h == null ? void 0 : h.value) && (r == null ? void 0 : r.value) && (E == null ? void 0 : E.value)
-    ), P = o(
-      () => s.value ? "mixed" : `${!!d.value}`
-    ), T = o(
-      () => `${B.value ? _ : ""} ${C && x ? n : ""}`.trim() || null
-    ), w = O(e["aria-label"]), { ariaLabel: M } = A(t), N = j({
-      ariaLabel: w.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: M,
-      defaultFallback: i("default") ? S(l)("default") : f("ariaLabelFallback")
-    }), V = o(() => b.value), q = o(() => ({
-      [`b-checkbox--${c.DISABLED}`]: v.value,
-      [`b-checkbox--${c.READONLY}`]: m.value
-    }));
-    return {
-      // Values
-      descriptionId: n,
-      errorId: _,
-      ariaChecked: P,
-      ariaDescribedBy: T,
-      ariaInvalid: V,
-      computedAriaLabel: N,
-      conditionalClass: q,
-      defaultSlotValue: C,
-      descriptionSlotValue: x,
-      isCheckboxGroup: r,
-      isChecked: d,
-      isIndeterminate: s,
-      shouldShowError: b,
-      shouldShowErrorMessage: B,
-      contentSlotAvailable: U,
-      hasContentSlot: h,
-      // Methods
-      hasSlot: i,
-      onChange: (y) => {
-        v.value || (a(p.UPDATE, y), a(p.INPUT, y));
-      },
-      t: f
-    };
-  }
-});
-var ce = function() {
-  var e = this, a = e._self._c;
-  return e._self._setupProxy, a("label", { staticClass: "b-checkbox", class: e.conditionalClass }, [a("checkbox-input", e._b({ ref: "input", attrs: { "aria-label": e.computedAriaLabel, "aria-describedby": e.ariaDescribedBy, disabled: e.disabled, "has-error": e.shouldShowError, indeterminate: e.isIndeterminate, value: e.value, "model-value": e.modelValue, readonly: e.readonly }, on: { "update:model-value": e.onChange } }, "checkbox-input", e.$attrs, !1)), e.hasSlot("default") || e.shouldShowErrorMessage ? a("span", { staticClass: "b-checkbox__text" }, [e.hasSlot("default") ? a("bento-typography", { staticClass: "b-checkbox__label", attrs: { el: "span", variant: "body" } }, [a("span", [e._t("default")], 2), e.optional ? a("bento-typography", { staticClass: "b-checkbox__label-requirement", attrs: { el: "span" } }, [e._v("(" + e._s(e.t("optional")) + ")")]) : e.required ? a("bento-typography", { staticClass: "b-checkbox__label-requirement", attrs: { el: "span" } }, [e._v("(" + e._s(e.t("required")) + ")")]) : e._e(), e.tag ? a("bento-tag", e._b({ staticClass: "b-checkbox__label-tag" }, "bento-tag", e.tag, !1)) : e._e()], 1) : e._e(), e.hasSlot("default") && e.hasSlot("description") ? a("bento-typography", { staticClass: "b-checkbox__description", attrs: { id: e.descriptionId, el: "span", variant: "body" } }, [e._t("description")], 2) : e._e(), e.shouldShowErrorMessage ? a("error-message", { attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.contentSlotAvailable ? a("bento-typography", { staticClass: "b-checkbox__content", attrs: { el: "span", variant: "body" } }, [e._t("content")], 2) : e._e()], 1) : e._e()], 1);
-}, ue = [], de = /* @__PURE__ */ $(
-  ie,
-  ce,
-  ue,
-  !1,
-  null,
-  "e400ef17",
-  null,
-  null
-);
-const Se = de.exports;
-export {
-  Se as B,
-  c as C,
-  p as a
-};
-//# sourceMappingURL=checkbox.2c2a1f90.js.map