@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/chunks/_plugin-vue2_normalizer.71e2aa87.js

@@ -0,0 +1,33 @@
+function v(r, a, d, h, i, t, f, u) {
+  var e = typeof r == "function" ? r.options : r;
+  a && (e.render = a, e.staticRenderFns = d, e._compiled = !0), h && (e.functional = !0), t && (e._scopeId = "data-v-" + t);
+  var o;
+  if (f ? (o = function(n) {
+    n = n || // cached call
+    this.$vnode && this.$vnode.ssrContext || // stateful
+    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !n && typeof __VUE_SSR_CONTEXT__ < "u" && (n = __VUE_SSR_CONTEXT__), i && i.call(this, n), n && n._registeredComponents && n._registeredComponents.add(f);
+  }, e._ssrRegister = o) : i && (o = u ? function() {
+    i.call(
+      this,
+      (e.functional ? this.parent : this).$root.$options.shadowRoot
+    );
+  } : i), o)
+    if (e.functional) {
+      e._injectStyles = o;
+      var l = e.render;
+      e.render = function(p, _) {
+        return o.call(_), l(p, _);
+      };
+    } else {
+      var s = e.beforeCreate;
+      e.beforeCreate = s ? [].concat(s, o) : [o];
+    }
+  return {
+    exports: r,
+    options: e
+  };
+}
+export {
+  v as n
+};
+//# sourceMappingURL=_plugin-vue2_normalizer.71e2aa87.js.map

package/dist/chunks/_plugin-vue2_normalizer.71e2aa87.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_plugin-vue2_normalizer.71e2aa87.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/aria-label.ac9651a5.js

@@ -0,0 +1,13 @@
+import { ref as e, computed as n } from "vue";
+const m = ({
+  ariaLabel: l = null,
+  label: u = null,
+  defaultFallback: a = null
+}) => {
+  const t = e(l), o = e(u), c = e(a);
+  return n(() => t.value ?? o.value ?? c.value);
+};
+export {
+  m as u
+};
+//# sourceMappingURL=aria-label.ac9651a5.js.map

package/dist/chunks/aria-label.ac9651a5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-label.ac9651a5.js","sources":["../../src/utils/ts/aria-label.ts"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types/maybe-ref';\n\ninterface ariaLabelOptions {\n    ariaLabel?: MaybeRef<string | null>;\n    label?: MaybeRef<string | null>;\n    defaultFallback?: MaybeRef<string | null>;\n}\n\n/**\n * Returns a valid aria-label for the element it's invoked for\n * @param ariaLabel - The aria label, which has to be set manually through the homonymous prop\n * @param label - Any other label provided, usually the component's main text\n * @param defaultFallback - The default fallback if no other value is provided\n * @returns {string | null} - A string corresponding to the aria label or null if no value is provided\n */\nexport const useAriaLabel = ({\n    ariaLabel = null,\n    label = null,\n    defaultFallback = null,\n}: ariaLabelOptions): ComputedRef<string> => {\n    const computedAriaLabel = ref(ariaLabel);\n    const computedLabel = ref(label);\n    const computedDefaultFallback = ref(defaultFallback);\n\n    return computed(() => computedAriaLabel.value ?? computedLabel.value ?? computedDefaultFallback.value);\n};\n"],"names":["useAriaLabel","ariaLabel","label","defaultFallback","computedAriaLabel","ref","computedLabel","computedDefaultFallback","computed"],"mappings":";AAgBO,MAAMA,IAAe,CAAC;AAAA,EACzB,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,iBAAAC,IAAkB;AACtB,MAA6C;AACnC,QAAAC,IAAoBC,EAAIJ,CAAS,GACjCK,IAAgBD,EAAIH,CAAK,GACzBK,IAA0BF,EAAIF,CAAe;AAEnD,SAAOK,EAAS,MAAMJ,EAAkB,SAASE,EAAc,SAASC,EAAwB,KAAK;AACzG;"}

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

@@ -0,0 +1,83 @@
+import "../assets/base-button.css";
+import { defineComponent as _, computed as i } from "vue";
+import { BentoTypography as d, BentoTypographyElement as p, BentoTypographyVariant as b } from "../typography.js";
+import { h as u } from "./hasSlot.dceac207.js";
+import { n as f } from "./_plugin-vue2_normalizer.71e2aa87.js";
+var s = /* @__PURE__ */ ((a) => (a.DESTRUCTIVE = "critical", a.ICON_ONLY = "icon-only", a))(s || {}), n = /* @__PURE__ */ ((a) => (a.BLUR = "blur", a.CLICK = "click", a.FOCUS = "focus", a.KEYDOWN_ESC = "keydown.esc", a))(n || {});
+const C = _({
+  name: "base-button",
+  components: { BentoTypography: d },
+  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: [
+    n.CLICK,
+    n.FOCUS,
+    n.BLUR,
+    n.KEYDOWN_ESC
+  ],
+  setup(a, { slots: t, emit: e, attrs: r }) {
+    const l = i(() => {
+      var o;
+      return {
+        "aria-expanded": (o = r["aria-expanded"]) == null ? void 0 : o.toString()
+      };
+    }), c = i(() => ({
+      [`b-base-button--${s.DESTRUCTIVE}`]: a.critical,
+      [`b-base-button--${s.ICON_ONLY}`]: !t.default
+    }));
+    return {
+      // Enums
+      BentoTypographyElement: p,
+      BentoTypographyVariant: b,
+      // Values
+      ariaAttributes: l,
+      conditionalClasses: c,
+      // Methods
+      onClickButton: (o) => {
+        a.disabled || e(n.CLICK, o);
+      },
+      hasSlot: u(t)
+    };
+  }
+});
+var y = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("button", { staticClass: "b-base-button", class: t.conditionalClasses, attrs: { disabled: t.disabled, type: t.type, "aria-expanded": t.ariaAttributes["aria-expanded"] }, on: { click: t.onClickButton } }, [t.hasSlot("iconLeft") ? e("span", { staticClass: "b-base-button__icon-left", attrs: { "data-testid": "icon-button-left" } }, [t._t("iconLeft")], 2) : t._e(), t.hasSlot("default") ? e("bento-typography", { staticClass: "b-base-button__label", attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t._t("default")], 2) : t._e(), t.hasSlot("iconRight") ? e("span", { staticClass: "b-base-button__icon-right", attrs: { "data-testid": "icon-button-right" } }, [t._t("iconRight")], 2) : t._e()], 1);
+}, m = [], h = /* @__PURE__ */ f(
+  C,
+  y,
+  m,
+  !1,
+  null,
+  "0f9f55d4",
+  null,
+  null
+);
+const E = h.exports;
+export {
+  E as B,
+  n as a
+};
+//# sourceMappingURL=base-button.38651156.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.38651156.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        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\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-base-button__label\"\n        >\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 } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { hasSlot } from '@/utils/ts/hasSlot';\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 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                }\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                hasSlot: hasSlot(slots),\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","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","hasSlot"],"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;AC2DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAF,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AASA,WAAA;AAAA;AAAA,MAAA,wBAAAO;AAAA,MAEA,wBAAAC;AAAA;AAAA,MACA,gBAAAL;AAAA,MAGA,oBAAAG;AAAA;AAAA,MACA,eAbA,CAAAG,MAAA;AACA,QAAAV,EAAA,YACAE,EAAAP,EAAA,OAAAe,CAAA;AAAA,MACA;AAAA,MAaA,SAAAC,EAAAV,CAAA;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/button-actions.59406268.js

@@ -0,0 +1,105 @@
+import "../assets/button-actions.css";
+import { defineComponent as u, computed as a } from "vue";
+import { B as d, a as o } from "./button.31b757d1.js";
+import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
+var c = /* @__PURE__ */ ((t) => (t.BUTTONS_END = "buttons-end", t.FILL_CONTAINER = "fill-container", t.SPACE_BETWEEN = "space-between", t.VERTICAL_STACK = "vertical-stack", t))(c || {}), l = /* @__PURE__ */ ((t) => (t.BUTTONS_START = "buttons-start", t))(l || {});
+const i = { ...c, ...l }, b = u({
+  name: "bento-button-actions",
+  components: { BentoButton: d },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `disabled` (optional): Disables the action.
+     *
+     * `variant` (optional): Sets button's variant background color.
+     *
+     * `critical` (optional): Sets button red border adn color.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     *   disabled: true,
+     *   variant: BentoButtonVariant.PRIMARY,
+     *   critical: true
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Defines the layout in which the button actions is presented.
+     * It can be one of:
+     *
+     * @values BUTTONS_START
+     * @values BUTTONS_END
+     * @values FILL_CONTAINER
+     * @values SPACE_BETWEEN
+     * @values VERTICAL_STACK
+     */
+    layout: {
+      type: String,
+      default: i.BUTTONS_END,
+      validator: (t) => Object.values(i).includes(t)
+    }
+  },
+  setup(t) {
+    const e = a(() => t.actions.slice().reverse()), s = (r) => {
+      const _ = t.actions.length - 1;
+      return r === _ ? o.PRIMARY : o.SECONDARY;
+    };
+    return {
+      // Values
+      conditionalClasses: a(() => ({
+        [`b-button-actions--${t.layout}`]: !0
+      })),
+      reversedActionsList: e,
+      // Methods
+      generateButtonVariantByIndex: s
+    };
+  }
+});
+var v = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", { staticClass: "b-button-actions" }, [s("div", { staticClass: "b-button-actions__container-wrapper", class: e.conditionalClasses, attrs: { role: "group" } }, e._l(e.reversedActionsList, function(n, r) {
+    return s("div", { key: r, staticClass: "b-button-actions__button-wrapper" }, [s("bento-button", { attrs: { critical: n.critical, disabled: n.disabled, variant: n.variant || e.generateButtonVariantByIndex(r) }, on: { click: n.event }, scopedSlots: e._u([n.icon ? { key: "iconLeft", fn: function() {
+      return [s(n.icon, { tag: "component", attrs: { "svg-title": n.title } })];
+    }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(n.title) + " ")])], 1);
+  }), 0)]);
+}, f = [], m = /* @__PURE__ */ p(
+  b,
+  v,
+  f,
+  !1,
+  null,
+  "e7b6b23b",
+  null,
+  null
+);
+const B = m.exports;
+export {
+  B,
+  c as a,
+  l as b,
+  i as c
+};
+//# sourceMappingURL=button-actions.59406268.js.map

package/dist/chunks/button-actions.59406268.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions.59406268.js","sources":["../../src/components/button/components/button-actions/button-actions.types.ts","../../src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { VueNodeElement } from '@/types';\nimport type { BentoButtonVariant } from '@/components/button';\n\nexport interface BentoButtonActionObject {\n    title: string;\n    event: (event: Event) => void;\n    icon?: VueNodeElement;\n    disabled?: boolean;\n    variant?: BentoButtonVariant;\n    critical?: boolean;\n}\n\nexport type BentoButtonActionsList = Array<BentoButtonActionObject>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\n\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","<template>\n    <div class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div v-for=\"(button, index) in reversedActionsList\" :key=\"index\" class=\"b-button-actions__button-wrapper\">\n                <bento-button\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    @click=\"button.event\"\n                >\n                    <template v-if=\"button.icon\" #iconLeft>\n                        <component :is=\"button.icon\" :svg-title=\"button.title\"></component>\n                    </template>\n                    {{ button.title }}\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonVariant } from '../../button.types';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n\n    export default defineComponent({\n        name: 'bento-button-actions',\n        components: { BentoButton },\n        inheritAttrs: false,\n        props: {\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `disabled` (optional): Disables the action.\n             *\n             * `variant` (optional): Sets button's variant background color.\n             *\n             * `critical` (optional): Sets button red border adn color.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: BentoButtonVariant.PRIMARY,\n             *   critical: true\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                required: true,\n            },\n\n            /**\n             * Defines the layout in which the button actions is presented.\n             * It can be one of:\n             *\n             * @values BUTTONS_START\n             * @values BUTTONS_END\n             * @values FILL_CONTAINER\n             * @values SPACE_BETWEEN\n             * @values VERTICAL_STACK\n             */\n            layout: {\n                type: String as PropType<BentoButtonActionsLayout>,\n                default: BentoButtonActionsLayout.BUTTONS_END,\n                validator: (layout: BentoButtonActionsLayout) =>\n                    Object.values(BentoButtonActionsLayout).includes(layout),\n            },\n        },\n        setup(props) {\n            const reversedActionsList = computed(() => props.actions.slice().reverse());\n            const generateButtonVariantByIndex = actionIndex => {\n                const lastActionIndex = props.actions.length - 1;\n                return actionIndex === lastActionIndex ? BentoButtonVariant.PRIMARY : BentoButtonVariant.SECONDARY;\n            };\n\n            const conditionalClasses = computed(() => ({\n                [`b-button-actions--${props.layout}`]: true,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n                reversedActionsList,\n\n                // Methods\n                generateButtonVariantByIndex,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","_sfc_main","defineComponent","BentoButton","layout","props","reversedActionsList","computed","generateButtonVariantByIndex","actionIndex","lastActionIndex","BentoButtonVariant"],"mappings":";;;;AAcY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAIL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCCPG,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAmCA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAYA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAEA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAAF,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAG,IAAA,CAAAC,MAAA;AACA,YAAAC,IAAAL,EAAA,QAAA,SAAA;AACA,aAAAI,MAAAC,IAAAC,EAAA,UAAAA,EAAA;AAAA,IAAA;AAOA,WAAA;AAAA;AAAA,MAAA,oBAJAJ,EAAA,OAAA;AAAA,QAAA,CAAA,qBAAAF,EAAA,QAAA,GAAA;AAAA,MACA,EAAA;AAAA,MAKA,qBAAAC;AAAA;AAAA,MACA,8BAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/button.31b757d1.js

@@ -0,0 +1,102 @@
+import "../assets/button.css";
+import { defineComponent as _, computed as i } from "vue";
+import { BentoTypography as p, BentoTypographyElement as b, BentoTypographyVariant as f } from "../typography.js";
+import { h as y } from "./hasSlot.dceac207.js";
+import { n as m } from "./_plugin-vue2_normalizer.71e2aa87.js";
+var r = /* @__PURE__ */ ((a) => (a.PRIMARY = "primary", a.SECONDARY = "secondary", a.TERTIARY = "tertiary", a))(r || {}), o = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.GROUPED = "grouped", a.DESTRUCTIVE = "critical", a.ICON_ONLY = "icon-only", a))(o || {});
+const h = _({
+  name: "bento-button",
+  components: { BentoTypography: p },
+  inheritAttrs: !1,
+  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"
+    },
+    /**
+     * Reduces sizing of button
+     */
+    condensed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
+     */
+    variant: {
+      type: String,
+      default: r.PRIMARY,
+      validator: (a) => Object.values(r).includes(a)
+    }
+  },
+  emits: ["click", "focus", "blur", "keydown.esc"],
+  setup(a, { slots: t, emit: e, attrs: s }) {
+    const c = i(() => {
+      var n, l;
+      return {
+        "aria-controls": (n = s["aria-controls"]) == null ? void 0 : n.toString(),
+        "aria-expanded": (l = s["aria-expanded"]) == null ? void 0 : l.toString()
+      };
+    }), d = i(() => ({
+      [`b-button--${a.variant}${a.critical ? `-${o.DESTRUCTIVE}` : ""}`]: !0
+    })), u = i(
+      () => ({
+        ...d.value,
+        [`b-button--${o.CONDENSED}`]: a.condensed,
+        [`b-button--${o.ICON_ONLY}`]: !t.default
+      })
+    );
+    return {
+      // Enums
+      BentoTypographyElement: b,
+      BentoTypographyVariant: f,
+      // Values
+      ariaAttributes: c,
+      conditionalClasses: u,
+      // Methods
+      onClickButton: (n) => {
+        a.disabled || e("click", n);
+      },
+      hasSlot: y(t)
+    };
+  }
+});
+var g = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("button", { staticClass: "b-button", class: t.conditionalClasses, attrs: { disabled: t.disabled, type: t.type, "aria-controls": t.ariaAttributes["aria-controls"], "aria-expanded": t.ariaAttributes["aria-expanded"] }, on: { click: t.onClickButton } }, [t.hasSlot("iconLeft") ? e("span", { staticClass: "b-button__icon-left", attrs: { "data-testid": "icon-button-left" } }, [t._t("iconLeft")], 2) : t._e(), t.hasSlot("default") ? e("bento-typography", { staticClass: "b-button__label", attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t._t("default")], 2) : t._e(), t.hasSlot("iconRight") ? e("span", { staticClass: "b-button__icon-right", attrs: { "data-testid": "icon-button-right" } }, [t._t("iconRight")], 2) : t._e()], 1);
+}, C = [], v = /* @__PURE__ */ m(
+  h,
+  g,
+  C,
+  !1,
+  null,
+  "d6efa5ed",
+  null,
+  null
+);
+const A = v.exports;
+export {
+  A as B,
+  r as a,
+  o as b
+};
+//# sourceMappingURL=button.31b757d1.js.map

package/dist/chunks/button.31b757d1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.31b757d1.js","sources":["../../src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["export enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    GROUPED = 'grouped',\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n","<template>\n    <button\n        class=\"b-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-controls=\"ariaAttributes['aria-controls']\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"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\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-button__label\"\n        >\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    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from './button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @usage\n     * import { BentoButton, AdlIconPosition } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             :icon-position=\"AdlIconPosition.AFTER\"\n     *         >\n     *             Button text\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-button',\n        components: { BentoTypography },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\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             * Reduces sizing of button\n             */\n            condensed: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Types of flavour of Button\n             * @values primary, secondary, tertiary\n             */\n            variant: {\n                type: String as PropType<BentoButtonVariant>,\n                default: BentoButtonVariant.PRIMARY,\n                validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n            },\n        },\n        emits: ['click', 'focus', 'blur', 'keydown.esc'],\n        setup(props, { slots, emit, attrs }) {\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 variantClass = computed((): { [x: string]: boolean } => ({\n                [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n            }));\n\n            const conditionalClasses = computed(\n                (): {\n                    [x: string]: boolean;\n                } => ({\n                    ...variantClass.value,\n                    [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n                    [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n                })\n            );\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit('click', e);\n                }\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                hasSlot: hasSlot(slots),\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","_sfc_main","defineComponent","BentoTypography","value","props","slots","emit","attrs","ariaAttributes","computed","_a","_b","variantClass","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","hasSlot"],"mappings":";;;;;AAAY,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,UAAA,WACAA,EAAA,cAAA,YACAA,EAAA,YAAA,aAJQA,IAAAD,KAAA,CAAA,CAAA;ACgDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA,QAAA,aAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,QACA,kBAAAC,IAAAJ,EAAA,eAAA,MAAA,gBAAAI,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAH,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAL,EAAA,UAAAA,EAAA,WAAA,IAAAN,EAAA,gBAAA,IAAA,GAAA;AAAA,IACA,EAAA,GAGAe,IAAAJ;AAAA,MAAA,OAAA;AAAA,QAGA,GAAAG,EAAA;AAAA,QACA,CAAA,aAAAd,EAAA,WAAA,GAAAM,EAAA;AAAA,QACA,CAAA,aAAAN,EAAA,WAAA,GAAA,CAAAO,EAAA;AAAA,MACA;AAAA,IACA;AASA,WAAA;AAAA;AAAA,MAAA,wBAAAS;AAAA,MAEA,wBAAAC;AAAA;AAAA,MACA,gBAAAP;AAAA,MAGA,oBAAAK;AAAA;AAAA,MACA,eAbA,CAAAG,MAAA;AACA,QAAAZ,EAAA,YACAE,EAAA,SAAAU,CAAA;AAAA,MACA;AAAA,MAaA,SAAAC,EAAAZ,CAAA;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/checkbox.fab16cce.js

@@ -0,0 +1,138 @@
+import "../assets/checkbox.css";
+import { defineComponent as w, toRefs as O, computed as l } from "vue";
+import { BentoTypography as T, BentoTypographyElement as N, BentoTypographyVariant as H } from "../typography.js";
+import { C as P } from "./checkmark-small.1371dd20.js";
+import { n as B } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { u as F } from "./aria-label.ac9651a5.js";
+import { u as K } from "./use-default-slot-validator.83d977a1.js";
+import { h as x } from "./hasSlot.dceac207.js";
+var i = /* @__PURE__ */ ((t) => (t.UNCHECKED = "unchecked", t.DISABLED = "disabled", t.ERROR = "error", t))(i || {});
+let S = 0;
+const M = {
+  beforeCreate() {
+    this.uuid = S.toString(), S += 1;
+  }
+};
+var U = function() {
+  var e = this, a = e._self._c;
+  return a("svg", e._b({ 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", "fill-rule": "evenodd", d: "M4.25 8C4.25 7.58579 4.58579 7.25 5 7.25H11C11.4142 7.25 11.75 7.58579 11.75 8C11.75 8.41421 11.4142 8.75 11 8.75H5C4.58579 8.75 4.25 8.41421 4.25 8Z", "clip-rule": "evenodd" } })]);
+}, Y = [], z = /* @__PURE__ */ B(
+  M,
+  U,
+  Y,
+  !1,
+  null,
+  "f5e2bac7",
+  null,
+  null
+);
+const G = z.exports, Z = w({
+  name: "bento-checkbox",
+  components: {
+    BentoTypography: T,
+    CheckmarkSmallIcon: P,
+    MinusSmallIcon: G
+  },
+  inheritAttrs: !1,
+  model: { prop: "modelValue" },
+  props: {
+    /**
+     * 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 },
+    /**
+     * 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 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 },
+    /**
+     * 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 },
+    /**
+     * 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 }
+  },
+  emits: ["input"],
+  setup(t, { emit: e, slots: a }) {
+    var h, m, b, v, C, k, y;
+    const { ariaLabel: E, disabled: _, indeterminate: V, modelValue: n, value: s } = O(t), p = x(a)("default"), f = x(a)("description");
+    K("bento-checkbox", p, f);
+    const c = l(() => Array.isArray(n.value)), o = l(() => c.value ? n.value.some((d) => d === s.value) : n.value), u = l(() => !o.value && V.value), $ = l(
+      () => u.value ? "mixed" : `${!!o.value}`
+    ), A = F({
+      ariaLabel: E,
+      label: ((b = (m = (h = a.default) == null ? void 0 : h.call(a)) == null ? void 0 : m[0]) == null ? void 0 : b.text) ?? ((y = (k = (C = (v = a.default) == null ? void 0 : v.call(a)) == null ? void 0 : C[0]) == null ? void 0 : k.children) == null ? void 0 : y.toString()),
+      defaultFallback: "checkbox"
+    }), D = l(() => t.hasError), I = l(() => ({
+      [`b-checkbox--${i.DISABLED}`]: _.value
+    })), R = l(() => ({
+      [`b-checkbox__outline--${i.UNCHECKED}`]: !o.value && !u.value,
+      [`b-checkbox__outline--${i.ERROR}`]: t.hasError
+    }));
+    return {
+      // Values
+      ariaChecked: $,
+      computedAriaLabel: A,
+      ariaInvalid: D,
+      conditionalClass: I,
+      conditionalClassOutline: R,
+      defaultSlotValue: p,
+      descriptionSlotValue: f,
+      isCheckboxGroup: c,
+      isChecked: o,
+      isIndeterminate: u,
+      // Enums
+      BentoTypographyElement: N,
+      BentoTypographyVariant: H,
+      // Events
+      onChange: (d) => {
+        if (_.value)
+          return;
+        const L = d.target.checked;
+        if (c.value) {
+          const r = [...n.value], g = r.indexOf(s.value);
+          g === -1 ? r.push(s.value) : r.splice(g, 1), e("input", r);
+        } else
+          e("input", L);
+      }
+    };
+  }
+});
+var j = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("label", { staticClass: "b-checkbox", class: e.conditionalClass }, [a("div", { staticClass: "b-checkbox__input-container" }, [e.isChecked ? a("checkmark-small-icon", { staticClass: "b-checkbox__icon", attrs: { "svg-title": "checked" } }) : e._e(), e.isIndeterminate ? a("minus-small-icon", { staticClass: "b-checkbox__icon", attrs: { "svg-title": "intermediate" } }) : e._e(), a("input", e._b({ ref: "input", staticClass: "b-checkbox__outline", class: e.conditionalClassOutline, attrs: { role: "checkbox", type: "checkbox", "aria-label": e.computedAriaLabel, "aria-checked": e.ariaChecked, "aria-invalid": e.ariaInvalid, disabled: e.disabled }, domProps: { checked: e.isChecked, indeterminate: e.isIndeterminate, value: e.value }, on: { change: e.onChange } }, "input", e.$attrs, !1))], 1), e.defaultSlotValue ? a("span", { staticClass: "b-checkbox__text" }, [e.defaultSlotValue ? a("bento-typography", { staticClass: "b-checkbox__label", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("default")], 2) : e._e(), e.defaultSlotValue && e.descriptionSlotValue ? a("bento-typography", { staticClass: "b-checkbox__description", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("description")], 2) : e._e()], 1) : e._e()]);
+}, q = [], J = /* @__PURE__ */ B(
+  Z,
+  j,
+  q,
+  !1,
+  null,
+  "d09a3fe7",
+  null,
+  null
+);
+const re = J.exports;
+export {
+  re as B,
+  i as a
+};
+//# sourceMappingURL=checkbox.fab16cce.js.map

package/dist/chunks/checkbox.fab16cce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.fab16cce.js","sources":["../../src/components/checkbox/checkbox.types.ts","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/minus-small.vue","../../src/components/checkbox/checkbox.vue"],"sourcesContent":["export type BentoMultiCheckboxType = Array<string | number>;\nexport type BentoCheckboxType = boolean | BentoMultiCheckboxType;\n\nexport enum BentoCheckboxState {\n    UNCHECKED = 'unchecked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" 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\" fill-rule=\"evenodd\" d=\"M4.25 8C4.25 7.58579 4.58579 7.25 5 7.25H11C11.4142 7.25 11.75 7.58579 11.75 8C11.75 8.41421 11.4142 8.75 11 8.75H5C4.58579 8.75 4.25 8.41421 4.25 8Z\" clip-rule=\"evenodd\"/></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 scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\n</style>\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\">\n        <div class=\"b-checkbox__input-container\">\n            <!-- Don't change order because it matters for CSS. Icons first -->\n            <checkmark-small-icon v-if=\"isChecked\" class=\"b-checkbox__icon\" svg-title=\"checked\" />\n            <minus-small-icon v-if=\"isIndeterminate\" class=\"b-checkbox__icon\" svg-title=\"intermediate\" />\n            <input\n                ref=\"input\"\n                role=\"checkbox\"\n                class=\"b-checkbox__outline\"\n                type=\"checkbox\"\n                v-bind=\"$attrs\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-checked=\"ariaChecked\"\n                :aria-invalid=\"ariaInvalid\"\n                :checked=\"isChecked\"\n                :disabled=\"disabled\"\n                :indeterminate.prop=\"isIndeterminate\"\n                :value=\"value\"\n                :class=\"conditionalClassOutline\"\n                @change=\"onChange\"\n            />\n        </div>\n        <span v-if=\"defaultSlotValue\" class=\"b-checkbox__text\">\n            <bento-typography\n                v-if=\"defaultSlotValue\"\n                class=\"b-checkbox__label\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"defaultSlotValue && descriptionSlotValue\"\n                class=\"b-checkbox__description\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRefs } from 'vue';\n    import { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType } from './checkbox.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useDefaultSlotValidator } from '@/composables';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n\n    /**\n     * Checkboxes are used to make a binary choice about an option.\n     * The label tag area is also clickable.\n     *\n     * @usage\n     * import { BentoCheckbox } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckbox },\n     *     template: `\n     *         <bento-checkbox>\n     *             Label text\n     *             <template #description>Sub label text</template>\n     *         </bento-checkbox>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-checkbox',\n        components: {\n            BentoTypography,\n            CheckmarkSmallIcon,\n            MinusSmallIcon,\n        },\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * The value of the component. The DOM API casts this to a string.\n             * The browser uses \"on\" as the default value.\n             *\n             * In the case of multiple checkboxes this value is used as a unique key.\n             */\n            value: { type: [String, Number], default: null },\n\n            /**\n             * When handling a single checkbox with a singular state, use a boolean.\n             *\n             * When handling multiple checkboxes, use an array of keys.\n             * These keys exist as a set \"value\" prop for each checkbox.\n             */\n            modelValue: { type: [Boolean, Array] as PropType<BentoCheckboxType>, default: false },\n\n            /**\n             * Setting this property to true will disable the checkbox in your form.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will show the checkbox in error state.\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * The :indeterminate CSS pseudo-class represents any form element\n             * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n             * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n             * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n             * This property lets you control the input.indeterminate native property.\n             */\n            indeterminate: { type: Boolean, default: false },\n            /**\n             * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n             */\n            ariaLabel: { type: String, default: null },\n        },\n        emits: ['input'],\n        setup(props, { emit, slots }) {\n            const { ariaLabel, disabled, indeterminate, modelValue, value } = toRefs(props);\n\n            const defaultSlotValue = hasSlot(slots)('default');\n            const descriptionSlotValue = hasSlot(slots)('description');\n\n            useDefaultSlotValidator('bento-checkbox', defaultSlotValue, descriptionSlotValue);\n\n            const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n            const isChecked = computed(() => {\n                if (!isCheckboxGroup.value) {\n                    return modelValue.value as boolean;\n                }\n\n                return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n            });\n            const isIndeterminate = computed(() => !isChecked.value && indeterminate.value);\n\n            // ARIA fields\n            const ariaChecked = computed<HTMLAttributes['aria-checked']>(() =>\n                isIndeterminate.value ? 'mixed' : `${!!isChecked.value}`\n            );\n\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel,\n                label: slots.default?.()?.[0]?.text ?? slots.default?.()?.[0]?.children?.toString(),\n                defaultFallback: 'checkbox',\n            });\n\n            const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(() => props.hasError);\n\n            const conditionalClass = computed(() => ({\n                [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n            }));\n            const conditionalClassOutline = computed(() => ({\n                [`b-checkbox__outline--${BentoCheckboxState.UNCHECKED}`]: !isChecked.value && !isIndeterminate.value,\n                [`b-checkbox__outline--${BentoCheckboxState.ERROR}`]: props.hasError,\n            }));\n\n            const onChange = (event: Event) => {\n                if (disabled.value) {\n                    return;\n                }\n\n                const newValue: boolean = (event.target as HTMLInputElement).checked;\n\n                if (isCheckboxGroup.value) {\n                    const newCheckedList = [...(modelValue.value as BentoMultiCheckboxType)];\n                    const index = newCheckedList.indexOf(value.value);\n\n                    if (index === -1) {\n                        newCheckedList.push(value.value);\n                    } else {\n                        newCheckedList.splice(index, 1);\n                    }\n                    emit('input', newCheckedList);\n                } else {\n                    emit('input', newValue);\n                }\n            };\n\n            return {\n                // Values\n                ariaChecked,\n                computedAriaLabel,\n                ariaInvalid,\n                conditionalClass,\n                conditionalClassOutline,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isCheckboxGroup,\n                isChecked,\n                isIndeterminate,\n\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Events\n                onChange,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox.scss\" />\n"],"names":["BentoCheckboxState","BentoCheckboxState2","uuid","_sfc_main$1","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","MinusSmallIcon","props","emit","slots","ariaLabel","disabled","indeterminate","modelValue","value","toRefs","defaultSlotValue","hasSlot","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","ariaChecked","computedAriaLabel","useAriaLabel","_c","_b","_a","_g","_f","_e","_d","ariaInvalid","conditionalClass","conditionalClassOutline","BentoTypographyElement","BentoTypographyVariant","event","newValue","newCheckedList","index"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/chunks/checkmark-circle-fill.d1aa324d.js

@@ -0,0 +1,26 @@
+import "../assets/checkmark-circle-fill.css";
+import { n as i } from "./_plugin-vue2_normalizer.71e2aa87.js";
+let l = 0;
+const r = {
+  beforeCreate() {
+    this.uuid = l.toString(), l += 1;
+  }
+};
+var s = function() {
+  var e = this, t = e._self._c;
+  return t("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("g", { attrs: { "clip-path": "url(#uia-icons-16-checkmark_circle_fill__a" + e.uuid + ")" } }, [t("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M0.249878 7.99988C0.249878 3.71967 3.71967 0.249878 7.99988 0.249878C12.2801 0.249878 15.7499 3.71967 15.7499 7.99988C15.7499 12.2801 12.2801 15.7499 7.99988 15.7499C3.71967 15.7499 0.249878 12.2801 0.249878 7.99988ZM11.5302 5.46955C11.8231 5.76244 11.8231 6.23731 11.5302 6.53021L7.53021 10.5302C7.27393 10.7865 6.87832 10.8185 6.5872 10.6263C6.54561 10.5989 6.50565 10.5663 6.46904 10.5297L4.46955 8.53021C4.17665 8.23732 4.17665 7.76244 4.46955 7.46955C4.76244 7.17665 5.23731 7.17665 5.53021 7.46955L6.99988 8.93922L10.4695 5.46955C10.7624 5.17665 11.2373 5.17665 11.5302 5.46955Z", "clip-rule": "evenodd" } })]), t("defs", [t("clipPath", { attrs: { id: "uia-icons-16-checkmark_circle_fill__a" + e.uuid } }, [t("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
+}, _ = [], a = /* @__PURE__ */ i(
+  r,
+  s,
+  _,
+  !1,
+  null,
+  "f497be72",
+  null,
+  null
+);
+const f = a.exports;
+export {
+  f as C
+};
+//# sourceMappingURL=checkmark-circle-fill.d1aa324d.js.map

package/dist/chunks/checkmark-circle-fill.d1aa324d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkmark-circle-fill.d1aa324d.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/checkmark-circle-fill.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-icons-16-checkmark_circle_fill__a' + uuid + ')'\"><path fill=\"#00112C\" fill-rule=\"evenodd\" d=\"M0.249878 7.99988C0.249878 3.71967 3.71967 0.249878 7.99988 0.249878C12.2801 0.249878 15.7499 3.71967 15.7499 7.99988C15.7499 12.2801 12.2801 15.7499 7.99988 15.7499C3.71967 15.7499 0.249878 12.2801 0.249878 7.99988ZM11.5302 5.46955C11.8231 5.76244 11.8231 6.23731 11.5302 6.53021L7.53021 10.5302C7.27393 10.7865 6.87832 10.8185 6.5872 10.6263C6.54561 10.5989 6.50565 10.5663 6.46904 10.5297L4.46955 8.53021C4.17665 8.23732 4.17665 7.76244 4.46955 7.46955C4.76244 7.17665 5.23731 7.17665 5.53021 7.46955L6.99988 8.93922L10.4695 5.46955C10.7624 5.17665 11.2373 5.17665 11.5302 5.46955Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-icons-16-checkmark_circle_fill__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></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 scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\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/checkmark-small.1371dd20.js

@@ -0,0 +1,26 @@
+import "../assets/checkmark-small.css";
+import { n as r } from "./_plugin-vue2_normalizer.71e2aa87.js";
+let l = 0;
+const s = {
+  beforeCreate() {
+    this.uuid = l.toString(), l += 1;
+  }
+};
+var n = function() {
+  var e = this, t = e._self._c;
+  return t("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M11.5303 6.53033C11.8232 6.23744 11.8232 5.76256 11.5303 5.46967C11.2374 5.17678 10.7626 5.17678 10.4697 5.46967L7 8.93934L5.53033 7.46967C5.23744 7.17678 4.76256 7.17678 4.46967 7.46967C4.17678 7.76256 4.17678 8.23744 4.46967 8.53033L6.46967 10.5303C6.76256 10.8232 7.23744 10.8232 7.53033 10.5303C7.53021 10.5304 7.53045 10.5302 7.53033 10.5303L11.5303 6.53033Z", "clip-rule": "evenodd" } })]);
+}, _ = [], a = /* @__PURE__ */ r(
+  s,
+  n,
+  _,
+  !1,
+  null,
+  "50484a8e",
+  null,
+  null
+);
+const v = a.exports;
+export {
+  v as C
+};
+//# sourceMappingURL=checkmark-small.1371dd20.js.map