@adyen/bento-vue3 1.4.1 → 1.5.0

package/dist/toggle.js

@@ -1,13 +1,13 @@
-import { defineComponent as $, ref as y, computed as p, toRefs as V, watch as D, resolveComponent as _, openBlock as n, createElementBlock as h, normalizeClass as T, withDirectives as w, createElementVNode as b, vModelCheckbox as O, createBlock as g, createCommentVNode as i, withCtx as k, renderSlot as v } from "vue";
+import { defineComponent as $, ref as y, computed as p, toRefs as V, watch as D, resolveComponent as _, openBlock as n, createElementBlock as k, normalizeClass as T, withDirectives as w, createElementVNode as b, vModelCheckbox as O, createBlock as g, createCommentVNode as i, withCtx as h, renderSlot as v } from "vue";
 import { C as N } from "./chunks/checkmark-small.3e93a119.js";
-import { B as U } from "./chunks/index.77c651df.js";
+import { B as U } from "./chunks/index.32ed68b7.js";
 import { g as j } from "./chunks/unique-id.a2a2b458.js";
-import { u as z } from "./chunks/use-has-slot.9fac7123.js";
+import { u as z } from "./chunks/use-has-slot.3daaffc6.js";
 import { u as H } from "./chunks/use-default-slot-validator.1169c221.js";
 import { g as m } from "./chunks/get-slot-text.bead058f.js";
 import { u as M } from "./chunks/aria-label.ac9651a5.js";
 import { _ as P } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index22.css";
+import "./assets/index40.css";
 var C = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(C || {}), d = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(d || {});
 const q = $({
   name: "bento-toggle",
@@ -58,12 +58,12 @@ const q = $({
   setup(e, { attrs: t, slots: a, emit: f }) {
     const c = z(a), u = y(e.value), r = j("toggle-description"), s = m(a)("default"), o = m(a)("description");
     H("bento-toggle", a.default, a.description);
-    const S = p(() => c("default") ? m(a)("default") : null), B = y(t["aria-label"]), { ariaLabel: E } = V(e), L = M({
+    const S = p(() => c("default") ? m(a)("default") : null), B = y(t["aria-label"]), { ariaLabel: E } = V(e), I = M({
       ariaLabel: B.value,
       // TODO: take this line away when the aria-label props is removed
       label: E,
       defaultFallback: S
-    }), I = p(() => r ?? null), A = p(() => ({
+    }), L = p(() => r ?? null), A = p(() => ({
       [`b-toggle--${C.LABEL_FIRST}`]: e.labelPosition === d.BEFORE,
       "b-toggle--disabled": e.disabled,
       "b-toggle--readonly": e.readonly
@@ -81,8 +81,8 @@ const q = $({
       // Refs
       toggleInput: u,
       // Values
-      computedAriaLabel: L,
-      computedDescription: I,
+      computedAriaLabel: I,
+      computedDescription: L,
       defaultSlotValue: s,
       descriptionSlotValue: o,
       conditionalClasses: A,
@@ -103,7 +103,7 @@ const G = ["aria-label", "aria-describedby", "disabled", "aria-readonly"], J = {
 };
 function W(e, t, a, f, c, u) {
   const r = _("checkmark-small"), s = _("bento-typography");
-  return n(), h("label", {
+  return n(), k("label", {
     class: T(["b-toggle", e.conditionalClasses]),
     "data-testid": "label"
   }, [
@@ -126,14 +126,14 @@ function W(e, t, a, f, c, u) {
         e.toggleInput ? (n(), g(r, { key: 0 })) : i("", !0)
       ])
     ]),
-    e.hasSlot("default") ? (n(), h("span", Q, [
+    e.hasSlot("default") ? (n(), k("span", Q, [
       e.hasSlot("default") ? (n(), g(s, {
         key: 0,
         el: "span",
         variant: "body",
         "data-testid": "inner-label"
       }, {
-        default: k(() => [
+        default: h(() => [
           v(e.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
@@ -145,7 +145,7 @@ function W(e, t, a, f, c, u) {
         variant: "body",
         class: "b-toggle__description"
       }, {
-        default: k(() => [
+        default: h(() => [
           v(e.$slots, "description", {}, void 0, !0)
         ]),
         _: 3

package/dist/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../vue2/src/components/toggle/toggle.types.ts","../../vue2/src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n            <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                el=\"span\"\n                variant=\"body\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toggle',\n        components: { BentoTypography, CheckmarkSmall },\n        props: {\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n             */\n            ariaLabel: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Disable the toggle (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Position of the label relative to the toggle (optional)\n             * @values before, after\n             */\n            labelPosition: {\n                type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n                default: BentoToggleLabelPosition.BEFORE,\n                validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value),\n            },\n            /**\n             * Setting this property to true will set the toggle to read only state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates if the switch is \"on\" or \"off\"\n             */\n            value: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['input'],\n        setup(props, { attrs, slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n            const labelSlot = computed((): string => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n                defaultFallback: labelSlot,\n            });\n\n            const computedDescription = computed((): string | null => descriptionId ?? null);\n\n            const conditionalClasses = computed((): { [key: string]: boolean } => ({\n                [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]:\n                    props.labelPosition === BentoToggleLabelPosition.BEFORE,\n                'b-toggle--disabled': props.disabled,\n                'b-toggle--readonly': props.readonly,\n            }));\n\n            const onChange = (event: Event) => {\n                emit('input', (event.target as HTMLInputElement).checked);\n            };\n\n            // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n            const onClick = (event: Event) => {\n                if (props.readonly) {\n                    event.preventDefault();\n                }\n            };\n\n            watch(\n                () => props.value,\n                newValue => {\n                    toggleInput.value = newValue;\n                }\n            );\n\n            return {\n                // Refs\n                toggleInput,\n\n                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Method\n                hasSlot,\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","value","props","attrs","slots","emit","hasSlot","useHasSlot","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue","_hoisted_1","openBlock","createElementBlock","normalizeClass","_ctx","_cache","$event","vModelCheckbox","createElementVNode","_hoisted_3","createBlock","_component_checkmark_small","createCommentVNode","_hoisted_4","_component_bento_typography"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../vue2/src/components/toggle/toggle.types.ts","../../vue2/src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n            <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                el=\"span\"\n                variant=\"body\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toggle',\n        components: { BentoTypography, CheckmarkSmall },\n        props: {\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n             */\n            ariaLabel: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Disable the toggle (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Position of the label relative to the toggle (optional)\n             * @values before, after\n             */\n            labelPosition: {\n                type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n                default: BentoToggleLabelPosition.BEFORE,\n                validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value),\n            },\n            /**\n             * Setting this property to true will set the toggle to read only state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates if the switch is \"on\" or \"off\"\n             */\n            value: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['input'],\n        setup(props, { attrs, slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n            const labelSlot = computed((): string => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n                defaultFallback: labelSlot,\n            });\n\n            const computedDescription = computed((): string | null => descriptionId ?? null);\n\n            const conditionalClasses = computed((): { [key: string]: boolean } => ({\n                [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]:\n                    props.labelPosition === BentoToggleLabelPosition.BEFORE,\n                'b-toggle--disabled': props.disabled,\n                'b-toggle--readonly': props.readonly,\n            }));\n\n            const onChange = (event: Event) => {\n                emit('input', (event.target as HTMLInputElement).checked);\n            };\n\n            // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n            const onClick = (event: Event) => {\n                if (props.readonly) {\n                    event.preventDefault();\n                }\n            };\n\n            watch(\n                () => props.value,\n                newValue => {\n                    toggleInput.value = newValue;\n                }\n            );\n\n            return {\n                // Refs\n                toggleInput,\n\n                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Method\n                hasSlot,\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmallIcon","value","props","attrs","slots","emit","hasSlot","useHasSlot","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue","_hoisted_1","openBlock","createElementBlock","normalizeClass","_ctx","_cache","$event","vModelCheckbox","createElementVNode","_hoisted_3","createBlock","_component_checkmark_small","createCommentVNode","_hoisted_4","_component_bento_typography"],"mappings":"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"}

package/dist/typography.js

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

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue3",
-    "version": "1.4.1",
+    "version": "1.5.0",
     "description": "Adyen Bento Vue 3 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -52,14 +52,14 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.4.1",
+        "@adyen/bento-design-tokens": "1.5.0",
         "@adyen/ui-assets-icons-16": "3.1.0",
         "@adyen/ui-assets-payment-method-icons": "5.2.0",
         "@codemirror/commands": "6.3.3",
         "@codemirror/language-data": "6.4.0",
         "@codemirror/state": "6.4.0",
         "@codemirror/view": "6.23.0",
-        "@popperjs/core": "2.11.8",
+        "@floating-ui/vue": "1.0.6",
         "date-fns": "2.28.0",
         "focus-lock": "0.11.0",
         "uuid": "9.0.0",

package/dist/chunks/base-button.c4ac1ad1.js

@@ -1,108 +0,0 @@
-import { defineComponent as C, computed as _, ref as m, resolveComponent as y, openBlock as n, createElementBlock as i, normalizeClass as h, renderSlot as r, createCommentVNode as l, createBlock as S, withCtx as k } from "vue";
-import { B as g } from "./index.77c651df.js";
-import { u as B } from "./use-has-slot.9fac7123.js";
-import { _ as L } from "./_plugin-vue_export-helper.dad06003.js";
-import "../assets/base-button.css";
-var d = /* @__PURE__ */ ((t) => (t.DESTRUCTIVE = "critical", t.ICON_ONLY = "icon-only", t))(d || {}), o = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CLICK = "click", t.FOCUS = "focus", t.KEYDOWN_ESC = "keydown.esc", t))(o || {});
-const $ = C({
-  name: "base-button",
-  components: { BentoTypography: g },
-  props: {
-    /**
-     * Disables button functionality
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Displays button as critical
-     */
-    critical: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The default behavior of the button.
-     * Possible values are: 'button', 'reset', 'submit'
-     */
-    type: {
-      type: String,
-      default: "button"
-    }
-  },
-  emits: [
-    o.CLICK,
-    o.FOCUS,
-    o.BLUR,
-    o.KEYDOWN_ESC
-  ],
-  setup(t, { slots: a, emit: c, attrs: u }) {
-    const p = _(() => {
-      var e;
-      return {
-        "aria-expanded": (e = u["aria-expanded"]) == null ? void 0 : e.toString()
-      };
-    }), b = m(null), s = _(() => ({
-      [`b-base-button--${d.DESTRUCTIVE}`]: t.critical,
-      [`b-base-button--${d.ICON_ONLY}`]: !a.default
-    }));
-    return {
-      // Values
-      ariaAttributes: p,
-      conditionalClasses: s,
-      // Methods
-      onClickButton: (e) => {
-        t.disabled ? (e.preventDefault(), e.stopPropagation()) : c(o.CLICK, e);
-      },
-      hasSlot: B(a),
-      // Refs
-      bentoBaseButtonRef: b
-    };
-  }
-});
-const I = ["disabled", "type", "aria-expanded"], O = {
-  key: 0,
-  class: "b-base-button__icon-left",
-  "data-testid": "icon-button-left"
-}, R = {
-  key: 2,
-  class: "b-base-button__icon-right",
-  "data-testid": "icon-button-right"
-};
-function v(t, a, c, u, p, b) {
-  const s = y("bento-typography");
-  return n(), i("button", {
-    ref: "bentoBaseButtonRef",
-    class: h(["b-base-button", t.conditionalClasses]),
-    disabled: t.disabled,
-    type: t.type,
-    "aria-expanded": t.ariaAttributes["aria-expanded"],
-    onClick: a[0] || (a[0] = (...f) => t.onClickButton && t.onClickButton(...f))
-  }, [
-    t.hasSlot("iconLeft") ? (n(), i("span", O, [
-      r(t.$slots, "iconLeft", {}, void 0, !0)
-    ])) : l("", !0),
-    t.hasSlot("default") ? (n(), S(s, {
-      key: 1,
-      el: "span",
-      variant: "body",
-      stronger: "",
-      class: "b-base-button__label"
-    }, {
-      default: k(() => [
-        r(t.$slots, "default", {}, void 0, !0)
-      ]),
-      _: 3
-    })) : l("", !0),
-    t.hasSlot("iconRight") ? (n(), i("span", R, [
-      r(t.$slots, "iconRight", {}, void 0, !0)
-    ])) : l("", !0)
-  ], 10, I);
-}
-const K = /* @__PURE__ */ L($, [["render", v], ["__scopeId", "data-v-29782ba2"]]);
-export {
-  K as B,
-  o as a
-};
-//# sourceMappingURL=base-button.c4ac1ad1.js.map

package/dist/chunks/base-button.c4ac1ad1.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-button.c4ac1ad1.js","sources":["../../../vue2/src/components/internal/base-button/base-button.types.ts","../../../vue2/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    >\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            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\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","useHasSlot","openBlock","createElementBlock","normalizeClass","_ctx","createCommentVNode","createBlock","_component_bento_typography","_hoisted_3"],"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;ACsDR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MAIU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAKM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,OAAA;AAAA,IACOJ,EAAA;AAAA,IACkBA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACzB,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACe;AAAA,KAAA,GAGtDC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MAC2B,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACD,EAAA;AAYrE,WAAA;AAAA;AAAA,MAAO,gBAAAG;AAAA,MAEH,oBAAAK;AAAA;AAAA,MACA,eAZJ,CAAA,MAAA;AACI,QAAAT,EAAA,YAGI,EAAA,eAAA,GACA,EAAA,gBAAA,KAHAE,EAAAP,EAAA,OAAA,CAAA;AAAA,MAIJ;AAAA,MASA,SAAAe,EAAAT,CAAA;AAAA;AAAA,MACyB,oBAAAM;AAAA,IAGzB;AAAA,EACJ;AAER,CAAA;;EApH2C,KAAA;AAAA,EAA2B,OAAA;AAAA;;EAM1B,KAAA;AAAA,EAA4B,OAAA;AAAA;;;;AAb/D,SAAAI,EAAA,GAAAC,EAAA,UAAA;AAAA,IACG,KAAA;AAAA,IACP,OAAAC,EAAA,CAAA,iBAAAC,EAAA,kBAAA,CAAA;AAAA,IACU,UAAAA,EAAA;AAAA,IACG,MAAAA,EAAA;AAAA,IACR,iBAAAA,EAAA,eAAA,eAAA;AAAA;EAEa,GAAA;AAAA;;IAGK,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAELD,EAAA,QAAA,SAAA,KAAAH,EAAA,GAAAK,EAAAC,GAAA;AAAA,MAFkC,KAAA;AAAA,MAAC,IAAA;AAAA,MAAe,SAAA;AAAA,MAAe,UAAA;AAAA;;;;;;;IAGpFH,EAAA,QAAA,WAAA,KAAAH,EAAA,GAAAC,EAAA,QAAAM,GAAA;AAAA;;;;;"}

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

@@ -1,291 +0,0 @@
-import { defineComponent as F, useAttrs as z, ref as U, computed as u, watch as I, onMounted as q, resolveComponent as c, openBlock as s, createElementBlock as h, createElementVNode as _, normalizeClass as M, withKeys as K, createVNode as S, withCtx as m, normalizeStyle as E, renderSlot as f, createCommentVNode as l, createBlock as y } from "vue";
-import { B as V } from "./index.77c651df.js";
-import { a as W } from "./button.7d09c245.js";
-import { BentoDivider as H } from "../divider.js";
-import { B as Q } from "./index.fdb0c13d.js";
-import { u as Y } from "./use-has-slot.9fac7123.js";
-import { u as j } from "./i18n.6c402773.js";
-import { C as J } from "./cross.5c36a670.js";
-import { G as X, a as Z } from "./grid-layout.984317d7.js";
-import { _ as x } from "./_plugin-vue_export-helper.dad06003.js";
-import "../assets/base-modal.css";
-var ee = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(ee || {}), A = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(A || {}), C = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(C || {}), O = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(O || {}), oe = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(oe || {}), k = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(k || {});
-const w = {
-  "en-US": {
-    ariaLabelFallback: "modal"
-  }
-}, te = 500, ae = F({
-  i18n: { messages: w },
-  name: "base-modal",
-  components: { CrossIcon: J, BentoTypography: V, BentoButton: W, BentoDivider: H, BentoFocusTrap: Q, GridLayout: X },
-  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: C.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: O.DIALOG },
-    /**
-     * Allows the inner elments to overflow the dialog
-     */
-    overflowVisible: { type: Boolean, default: !1 },
-    /**
-     * Sets the width of the modal
-     */
-    size: {
-      type: String,
-      default: A.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: [k.CLOSE_MODAL],
-  setup(e, { slots: i, emit: B }) {
-    const { t: v } = j({ messages: w }), G = z(), d = Y(i), t = U(null), g = u(() => {
-      if (!e.customPadding)
-        return {};
-      const o = {
-        paddingLeft: e.customPadding,
-        paddingRight: e.customPadding
-      }, n = { ...o, paddingTop: void 0, paddingBottom: void 0 };
-      return d("default") || (n.paddingTop = e.customPadding), d("actions") || (n.paddingBottom = e.customPadding), {
-        header: { ...o, paddingTop: e.customPadding },
-        content: n,
-        actions: { ...o, paddingBottom: e.customPadding }
-      };
-    }), L = u(
-      () => G["aria-label"] ?? v("ariaLabelFallback")
-    ), r = u(() => e.withColumnLayout && e.size === A.LARGE), b = () => {
-      t.value.showModal();
-    }, p = () => {
-      B(k.CLOSE_MODAL);
-    }, a = () => {
-      t.value.close(), p();
-    }, D = () => {
-      a();
-    }, R = ({ target: o }) => {
-      o && o.tagName === O.DIALOG.toUpperCase() && a();
-    }, T = u(() => ({
-      [`b-modal-base__container--${e.size}`]: e.size,
-      "b-modal-base__container--visible": e.isOpen,
-      "b-modal-base__container--overflow-visible": e.overflowVisible,
-      "b-modal-base__container--column-layout": r.value
-    })), P = u(() => ({
-      "b-modal-base__content--column-layout": r.value,
-      "b-modal-base__content--with-header": d("default"),
-      "b-modal-base__content--with-actions": d("actions")
-    })), N = u(() => e.columnsSize === C.SMALLER ? [{ small: 4, medium: 4, large: 4 }] : e.columnsSize === C.BIGGER ? [{ small: 8, medium: 8, large: 8 }] : [{ small: 6, medium: 6, large: 6 }]);
-    return I(
-      () => [e.isOpen, t.value],
-      ([o, n], [, $]) => {
-        if (!n)
-          return;
-        o ? b() : !$ || a();
-      }
-    ), I(
-      () => e.actions,
-      () => {
-        var o, n;
-        ((n = (o = e.actions) == null ? void 0 : o[0]) == null ? void 0 : n.state) === "success" && setTimeout(a, te);
-      },
-      { deep: !0 }
-    ), q(() => {
-      e.isOpen && t.value && b();
-    }), {
-      // Refs
-      modal: t,
-      computedAriaLabel: L,
-      // Handling the state
-      openModal: b,
-      closeModalOnClickOutside: R,
-      // Methods
-      onCloseButtonClick: D,
-      hasSlot: d,
-      emitCloseEvent: p,
-      t: v,
-      // Styles
-      modalConditionalClasses: T,
-      modalContentConditionalClasses: P,
-      customPaddingStyles: g,
-      hasColumnLayout: r,
-      computedColumnWidth: N,
-      // Enums
-      GridLayoutContainerType: Z
-    };
-  }
-});
-const ne = { class: "b-modal-base" }, se = ["role", "aria-label", "open"], le = { class: "b-modal-base__wrapper" }, ie = { class: "b-modal-base__header" }, de = {
-  "aria-label": "modal actions",
-  class: "b-modal-base__actions"
-};
-function re(e, i, B, v, G, d) {
-  const t = c("bento-typography"), g = c("cross-icon"), L = c("bento-button"), r = c("bento-divider"), b = c("grid-layout"), p = c("bento-focus-trap");
-  return s(), h("div", ne, [
-    _("dialog", {
-      ref: "modal",
-      role: e.modalRole,
-      "aria-label": e.computedAriaLabel,
-      class: M(["b-modal-base__container", e.modalConditionalClasses]),
-      open: e.initiallyOpen,
-      onClick: i[0] || (i[0] = (a) => e.isDismissible && e.closeModalOnClickOutside(a)),
-      onKeydown: i[1] || (i[1] = K((...a) => e.emitCloseEvent && e.emitCloseEvent(...a), ["esc"]))
-    }, [
-      S(p, null, {
-        default: m(() => [
-          _("div", le, [
-            e.hasSlot("default") || !e.hideCloseButton ? (s(), h("div", {
-              key: 0,
-              class: "b-modal-base__header-container",
-              style: E(e.customPaddingStyles.header)
-            }, [
-              _("div", ie, [
-                S(t, {
-                  class: "b-modal-base__title",
-                  "aria-label": "base modal title",
-                  el: "span",
-                  variant: "title",
-                  stronger: ""
-                }, {
-                  default: m(() => [
-                    e.hasSlot("default") ? f(e.$slots, "default", { key: 0 }, void 0, !0) : l("", !0)
-                  ]),
-                  _: 3
-                }),
-                e.hideCloseButton ? l("", !0) : (s(), y(L, {
-                  key: 0,
-                  class: "b-modal-base__close-button",
-                  variant: "tertiary",
-                  type: "button",
-                  onClick: e.onCloseButtonClick
-                }, {
-                  default: m(() => [
-                    S(g, { "svg-title": "close" })
-                  ]),
-                  _: 1
-                }, 8, ["onClick"]))
-              ]),
-              e.hasColumnLayout ? (s(), y(r, {
-                key: 0,
-                class: "b-modal-base__divider"
-              })) : l("", !0)
-            ], 4)) : l("", !0),
-            _("div", {
-              class: M(["b-modal-base__content", e.modalContentConditionalClasses]),
-              style: E(e.customPaddingStyles.content)
-            }, [
-              e.hasSlot("content") || e.hasSlot("content-col-1") && e.hasSlot("content-col-2") ? (s(), y(t, {
-                key: 0,
-                "aria-label": "base modal content",
-                el: "div",
-                variant: "body",
-                stronger: ""
-              }, {
-                default: m(() => [
-                  e.hasColumnLayout ? (s(), y(b, {
-                    key: 0,
-                    "column-width": e.computedColumnWidth,
-                    "container-type": e.GridLayoutContainerType.NORMAL,
-                    class: "b-modal-base__grid"
-                  }, {
-                    "col-1": m(() => [
-                      f(e.$slots, "content-col-1", {}, void 0, !0)
-                    ]),
-                    "col-2": m(() => [
-                      f(e.$slots, "content-col-2", {}, void 0, !0)
-                    ]),
-                    _: 3
-                  }, 8, ["column-width", "container-type"])) : f(e.$slots, "content", { key: 1 }, void 0, !0)
-                ]),
-                _: 3
-              })) : l("", !0)
-            ], 6),
-            e.hasSlot("actions") ? (s(), h("div", {
-              key: 1,
-              class: "b-modal-base__actions-container",
-              style: E(e.customPaddingStyles.actions)
-            }, [
-              e.hasColumnLayout ? (s(), y(r, {
-                key: 0,
-                class: "b-modal-base__divider"
-              })) : l("", !0),
-              _("div", de, [
-                f(e.$slots, "actions", {}, void 0, !0)
-              ])
-            ], 4)) : l("", !0)
-          ])
-        ]),
-        _: 3
-      })
-    ], 42, se)
-  ]);
-}
-const Le = /* @__PURE__ */ x(ae, [["render", re], ["__scopeId", "data-v-b3662c97"]]);
-export {
-  ee as B,
-  A as a,
-  C as b,
-  O as c,
-  oe as d,
-  k as e,
-  Le as f
-};
-//# sourceMappingURL=base-modal.db7a9829.js.map