@adyen/bento-vue2 1.81.0 → 1.82.0

package/dist/chunks/layout-row.DwdZbpVG.js

@@ -0,0 +1,87 @@
+import { defineComponent as y, provide as R, toRef as $, computed as s, useSlots as x, inject as E, ref as _, watch as S, nextTick as g, onMounted as z } from "vue";
+import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as T } from "./typography.hlOAxsEn.js";
+import { u as B } from "./use-has-slot.C9lQZ6nz.js";
+import { f as I } from "./index.BDK4hwK_.js";
+import "../assets/layout-row.css";
+const h = /* @__PURE__ */ Symbol("Layout size inject key"), O = {}, P = /* @__PURE__ */ y({
+  ...O,
+  __name: "layout",
+  props: {
+    variant: { default: "page" },
+    size: { default: "full-width" }
+  },
+  setup(n) {
+    const o = n;
+    R(h, $(o, "size"));
+    const l = s(() => ({
+      "b-layout--component": o.variant === "component"
+    })), t = o.variant === "page" ? "main" : "div";
+    return { __sfc: !0, props: o, conditionalClasses: l, wrapperElement: t };
+  }
+});
+var k = function() {
+  var o = this, l = o._self._c, t = o._self._setupProxy;
+  return l(t.wrapperElement, { tag: "component", staticClass: "b-layout", class: t.conditionalClasses }, [o._t("default")], 2);
+}, F = [], M = /* @__PURE__ */ w(
+  P,
+  k,
+  F,
+  !1,
+  null,
+  "79cd6989"
+);
+const Z = M.exports, W = ["3-9", "9-3", "4-8", "8-4", "6-6"], j = {}, N = /* @__PURE__ */ y({
+  ...j,
+  __name: "layout-row",
+  props: {
+    columnsLayout: { default: "6-6" }
+  },
+  setup(n) {
+    const o = n, l = x(), t = B(l), e = E(h, _("full-width")), a = _(null), m = _(null), f = _(null), c = s(() => e.value === "full-width"), d = s(() => W.includes(o.columnsLayout)), C = s(() => `b-layout-row--${e.value}`), b = s(() => ({
+      "b-layout-row__column-wrapper": c.value
+    })), L = s(() => {
+      const u = d.value ? o.columnsLayout.split("-") : [6, 6], r = (i) => c.value ? u[i] : e.value;
+      return {
+        col1: `b-layout-row__column--${r(0)}`,
+        col2: `b-layout-row__column--${r(1)}`
+      };
+    });
+    return S(
+      I("(min-width: 768px)"),
+      async (u) => {
+        var i, p, v;
+        await g();
+        const r = ((i = a.value) == null ? void 0 : i.firstChild) === m.value;
+        u && !r ? (p = a.value) == null || p.prepend(m.value) : !u && (o.columnsLayout === "3-9" || o.columnsLayout === "4-8") && ((v = a.value) == null || v.prepend(f.value));
+      },
+      { immediate: !0 }
+    ), z(() => {
+      if (!c.value && (t("col-1") || t("col-2")))
+        throw new Error(
+          "Column slots can only be used with the `full-width` size. Please check documentation for more info."
+        );
+      if (!d.value)
+        throw new Error(
+          `${o.columnsLayout} is not a valid column layout. Please refer to the documentation for the list of available column layouts.`
+        );
+    }), { __sfc: !0, props: o, slots: l, hasSlot: t, size: e, row: a, col1: m, col2: f, isFullWidth: c, isValidColumnLayout: d, conditionalRowClass: C, conditionalRowWithColumnsClass: b, conditionalColumnClass: L, BentoTypography: T };
+  }
+});
+var Y = function() {
+  var o = this, l = o._self._c, t = o._self._setupProxy;
+  return l(t.BentoTypography, { staticClass: "b-layout-row", class: t.conditionalRowClass, attrs: { el: "div" } }, [t.hasSlot("default") ? l("div", [o._t("default")], 2) : t.hasSlot("col-1") && t.hasSlot("col-2") ? l("div", { ref: "row", class: t.conditionalRowWithColumnsClass }, [l("div", { ref: "col1", class: t.conditionalColumnClass.col1 }, [o._t("col-1")], 2), l("div", { ref: "col2", class: t.conditionalColumnClass.col2 }, [o._t("col-2")], 2)]) : o._e()]);
+}, A = [], H = /* @__PURE__ */ w(
+  N,
+  Y,
+  A,
+  !1,
+  null,
+  "ccc81c6f"
+);
+const q = H.exports;
+export {
+  q as a,
+  Z as l
+};
+//# sourceMappingURL=layout-row.DwdZbpVG.js.map

package/dist/chunks/layout-row.DwdZbpVG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-row.DwdZbpVG.js","sources":["../../src/components/layout/layout.keys.ts","../../src/components/layout/layout.vue","../../src/components/layout/layout.types.ts","../../src/components/layout/components/layout-row/layout-row.vue"],"sourcesContent":["export const LAYOUT_SIZE_INJECTION_KEY = Symbol('Layout size inject key');\n","<template>\n    <component :is=\"wrapperElement\" class=\"b-layout\" :class=\"conditionalClasses\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef } from 'vue';\n    import { type BentoLayoutProps } from './layout.types';\n    import { LAYOUT_SIZE_INJECTION_KEY } from '@/components/layout/layout.keys';\n\n    const props = defineProps({\n  variant: { default: 'page' },\n  size: { default: 'full-width' }\n});\n\n    provide(LAYOUT_SIZE_INJECTION_KEY, toRef(props, 'size'));\n\n    const conditionalClasses = computed(() => ({\n        'b-layout--component': props.variant === 'component',\n    }));\n\n    const wrapperElement = props.variant === 'page' ? 'main' : 'div';\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Layout is a basic scaffolding of a page that defines spacing, some functionality and responsive behaviour of its top level sections.\n     *\n     * @example\n     * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLayout, BentoLayoutRow },\n     *     template: `\n     *          <bento-layout size=\"narrow\">\n     *              <bento-layout-row>\n     *                  Row 1\n     *              </bento-layout-row>\n     *              <bento-layout-row>\n     *                  Row 2\n     *              </bento-layout-row>\n     *          </bento-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./layout.scss\" />\n","/**\n * @private\n */\nexport const BentoLayoutVariantOptions = ['page', 'component'] as const;\nexport const BentoLayoutSizeOptions = ['full-width', 'narrow', 'half-width'] as const;\nexport const BentoLayoutRowColumnLayoutOptions = ['3-9', '9-3', '4-8', '8-4', '6-6'] as const;\n\n// Public\nexport type BentoLayoutVariant = (typeof BentoLayoutVariantOptions)[number];\nexport type BentoLayoutSize = (typeof BentoLayoutSizeOptions)[number];\nexport type BentoLayoutRowColumnLayout = (typeof BentoLayoutRowColumnLayoutOptions)[number];\n\nexport interface BentoLayoutProps {\n    /** Defines if the layout is used in a page or only a section */\n    variant?: BentoLayoutVariant;\n    /** Defines the size of the page */\n    size?: BentoLayoutSize;\n}\n\nexport interface BentoLayoutRowProps {\n    /** Sets the layout of the columns when multiple columns are used */\n    columnsLayout?: BentoLayoutRowColumnLayout;\n}\n","<template>\n    <bento-typography el=\"div\" class=\"b-layout-row\" :class=\"conditionalRowClass\">\n        <div v-if=\"hasSlot('default')\">\n            <slot />\n        </div>\n        <div v-else-if=\"hasSlot('col-1') && hasSlot('col-2')\" ref=\"row\" :class=\"conditionalRowWithColumnsClass\">\n            <div ref=\"col1\" :class=\"conditionalColumnClass.col1\">\n                <slot name=\"col-1\"></slot>\n            </div>\n            <div ref=\"col2\" :class=\"conditionalColumnClass.col2\">\n                <slot name=\"col-2\"></slot>\n            </div>\n        </div>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onMounted, ref, type Ref, useSlots, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import {\n        BentoLayoutRowColumnLayoutOptions,\n        type BentoLayoutRowProps,\n        type BentoLayoutSize,\n    } from '../../layout.types';\n    import { useMediaQuery } from '@vueuse/core';\n\n    import { LAYOUT_SIZE_INJECTION_KEY } from '@/components/layout/layout.keys';\n\n    const props = defineProps({\n  columnsLayout: { default: '6-6' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const size = inject<Ref<BentoLayoutSize>>(LAYOUT_SIZE_INJECTION_KEY, ref('full-width'));\n\n    const row = ref<HTMLElement>(null);\n    const col1 = ref<HTMLElement>(null);\n    const col2 = ref<HTMLElement>(null);\n\n    const isFullWidth = computed(() => size.value === 'full-width');\n    const isValidColumnLayout = computed(() => BentoLayoutRowColumnLayoutOptions.includes(props.columnsLayout));\n\n    const conditionalRowClass = computed(() => `b-layout-row--${size.value}`);\n\n    const conditionalRowWithColumnsClass = computed(() => ({\n        'b-layout-row__column-wrapper': isFullWidth.value,\n    }));\n\n    const conditionalColumnClass = computed(() => {\n        const columns = isValidColumnLayout.value ? props.columnsLayout.split('-') : [6, 6];\n        const getColumnModifier = index => (isFullWidth.value ? columns[index] : size.value);\n\n        return {\n            col1: `b-layout-row__column--${getColumnModifier(0)}`,\n            col2: `b-layout-row__column--${getColumnModifier(1)}`,\n        };\n    });\n\n    watch(\n        useMediaQuery('(min-width: 768px)'),\n        async isLargeScreen => {\n            await nextTick();\n            const areColumnsInTheRightOrder = row.value?.firstChild === col1.value;\n            if (isLargeScreen && !areColumnsInTheRightOrder) {\n                row.value?.prepend(col1.value);\n            } else if (!isLargeScreen && (props.columnsLayout === '3-9' || props.columnsLayout === '4-8')) {\n                row.value?.prepend(col2.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        if (!isFullWidth.value && (hasSlot('col-1') || hasSlot('col-2'))) {\n            throw new Error(\n                'Column slots can only be used with the `full-width` size. Please check documentation for more info.'\n            );\n        }\n\n        if (!isValidColumnLayout.value) {\n            throw new Error(\n                `${props.columnsLayout} is not a valid column layout. Please refer to the documentation for the list of available column layouts.`\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Page row is subcomponent of Layout meant to be used to generate the row layout.\n     *\n     * @example\n     * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLayout, BentoLayoutRow },\n     *     template: `\n     *          <bento-layout>\n     *              <bento-layout-row columns-layout=\"3-9\">\n     *                  <template #col-1>Narrow 3-9</template>\n     *                  <template #col-2>Wide 3-9</template>\n     *              </bento-layout-row>\n     *              <bento-layout-row>\n     *                  <template #col-1>6-6</template>\n     *                  <template #col-2>6-6</template>\n     *              </bento-layout-row>\n     *          </bento-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./layout-row.scss\" />\n"],"names":["LAYOUT_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","conditionalClasses","computed","wrapperElement","BentoLayoutRowColumnLayoutOptions","__default__","slots","useSlots","hasSlot","useHasSlot","size","inject","ref","row","col1","col2","isFullWidth","isValidColumnLayout","conditionalRowClass","conditionalRowWithColumnsClass","conditionalColumnClass","columns","getColumnModifier","index","watch","useMediaQuery","isLargeScreen","nextTick","areColumnsInTheRightOrder","_a","_b","_c","onMounted"],"mappings":";;;;;;AAAa,MAAAA,IAAA,uBAAA,wBAAA,GC8CTC,IAAA,CAAA;;;;;;;;;AA9BA,IAAAC,EAAAF,GAAAG,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,uBAAAF,EAAA,YAAA;AAAA,IACE,EAAA,GAG7CG,IAAAH,EAAA,YAAA,SAAA,SAAA;;;;;;;;;;;;;;;qBCjBGI,IAAA,CAAA,OAAA,OAAA,OAAA,OAAA,KAAA,GC2GHC,IAAA,CAAA;;;;;;;iBA/EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAAf,GAAAgB,EAAA,YAAA,CAAA,GAEAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GAEAI,IAAAd,EAAA,MAAAQ,EAAA,UAAA,YAAA,GACAO,IAAAf,EAAA,MAAAE,EAAA,SAAAJ,EAAA,aAAA,CAAA,GAEAkB,IAAAhB,EAAA,MAAA,iBAAAQ,EAAA,KAAA,EAAA,GAEAS,IAAAjB,EAAA,OAAA;AAAA,MAAuD,gCAAAc,EAAA;AAAA,IACP,EAAA,GAGhDI,IAAAlB,EAAA,MAAA;AACI,YAAAmB,IAAAJ,EAAA,QAAAjB,EAAA,cAAA,MAAA,GAAA,IAAA,CAAA,GAAA,CAAA,GACAsB,IAAA,CAAAC,MAAAP,EAAA,QAAAK,EAAAE,CAAA,IAAAb,EAAA;AAEA,aAAA;AAAA,QAAO,MAAA,yBAAAY,EAAA,CAAA,CAAA;AAAA,QACgD,MAAA,yBAAAA,EAAA,CAAA,CAAA;AAAA,MACA;AAAA,IACvD,CAAA;AAGJ,WAAAE;AAAA,MAAAC,EAAA,oBAAA;AAAA,MACsC,OAAAC,MAAA;;AAE9B,cAAAC,EAAA;AACA,cAAAC,MAAAC,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,gBAAAf,EAAA;AACA,QAAAY,KAAA,CAAAE,KACIE,IAAAjB,EAAA,UAAA,QAAAiB,EAAA,QAAAhB,EAAA,SAA6B,CAAAY,MAAA1B,EAAA,kBAAA,SAAAA,EAAA,kBAAA,YAE7B+B,IAAAlB,EAAA,UAAA,QAAAkB,EAAA,QAAAhB,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBiB,EAAA,MAAA;AACI,UAAA,CAAAhB,EAAA,UAAAR,EAAA,OAAA,KAAAA,EAAA,OAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAIR,UAAA,CAAAS,EAAA;AACI,cAAA,IAAA;AAAA,UAAU,GAAAjB,EAAA,aAAA;AAAA,QACgB;AAAA,IAE9B,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/link.D8qpqg3W.js

@@ -0,0 +1,95 @@
+import { defineComponent as v, computed as r } from "vue";
+import { RouterLink as m } from "vue-router";
+import { g as y } from "./generate-uid.NJ8tVoha.js";
+import { B as k } from "./typography.hlOAxsEn.js";
+import { u as b } from "./index.B6WW_F-J.js";
+/* empty css              */
+import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/link.css";
+var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.QUIET = "quiet", a))(s || {});
+let c = 0;
+const x = {
+  beforeCreate() {
+    this.uuid = c.toString(), c += 1;
+  }
+};
+var h = function() {
+  var t = this, e = t._self._c;
+  return e("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#001222", d: "M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z" } })]);
+}, B = [], C = /* @__PURE__ */ p(
+  x,
+  h,
+  B,
+  !1,
+  null,
+  null
+);
+const T = C.exports, L = {
+  "en-US": {
+    opensInNewTab: "Opens in new tab"
+  }
+}, $ = {
+  name: "bento-link",
+  inheritAttrs: !1,
+  i18n: { messages: L }
+}, I = /* @__PURE__ */ v({
+  ...$,
+  props: {
+    to: null,
+    replace: { type: Boolean },
+    append: { type: Boolean },
+    tag: null,
+    activeClass: null,
+    exact: { type: Boolean },
+    exactPath: { type: Boolean },
+    exactPathActiveClass: null,
+    event: null,
+    exactActiveClass: null,
+    ariaCurrentValue: null,
+    disableTypography: { type: Boolean },
+    external: { type: Boolean },
+    isButton: { type: Boolean },
+    isNotRouting: { type: Boolean },
+    target: { default: null },
+    truncate: { type: Boolean },
+    variant: { default: s.DEFAULT }
+  },
+  emits: ["click"],
+  setup(a, { emit: t }) {
+    const e = a, { t: n } = b(), i = {
+      variant: void 0,
+      isButton: void 0,
+      truncate: void 0,
+      disableTypography: void 0,
+      external: void 0,
+      isNotRouting: void 0
+    }, u = y("external-link"), _ = (o) => o, d = r(() => ({
+      "b-link": !e.isButton,
+      [`b-link--${s.QUIET}`]: e.variant === s.QUIET,
+      "b-link--truncate": e.truncate
+    })), f = r(() => e.external ? e.target ?? "_blank" : e.target), g = r(() => !(e.isButton || e.isNotRouting));
+    return { __sfc: !0, t: n, props: e, nonForwardedProps: i, externalLinkId: u, getAttributeTitle: _, conditionalClasses: d, computedTarget: f, showExternalLinkIcon: g, emit: t, onClick: (o, l) => {
+      t("click", o), l && l();
+    }, RouterLink: m, BentoTypography: k, ExternalLinkIcon: T };
+  }
+});
+var w = function() {
+  var t = this, e = t._self._c, n = t._self._setupProxy;
+  return t.external || t.isNotRouting ? e("a", t._b({ class: n.conditionalClasses, attrs: { "aria-describedby": n.externalLinkId, href: t.$props.to.toString(), title: n.getAttributeTitle(t.$attrs.title), target: n.computedTarget }, on: { click: n.onClick } }, "a", t.$attrs, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2), n.showExternalLinkIcon ? e("span", { staticClass: "b-link__external-link-icon", attrs: { "aria-hidden": "true" } }, [e(n.ExternalLinkIcon)], 1) : t._e(), t.external ? e("span", { staticClass: "b-link--visually-hidden", attrs: { id: n.externalLinkId } }, [t._v(t._s(n.t("opensInNewTab")))]) : t._e()], 2) : e(n.RouterLink, t._b({ class: n.conditionalClasses, attrs: { target: t.target, to: n.props.to, custom: "" }, nativeOn: { click: function(i) {
+    return n.onClick.apply(null, arguments);
+  } } }, "router-link", { ...t.$attrs, ...t.$props, ...n.nonForwardedProps }, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2)], 2);
+}, E = [], R = /* @__PURE__ */ p(
+  I,
+  w,
+  E,
+  !1,
+  null,
+  "7930653c"
+);
+const V = R.exports;
+export {
+  V as B,
+  T as E,
+  s as a
+};
+//# sourceMappingURL=link.D8qpqg3W.js.map

package/dist/chunks/link.D8qpqg3W.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.D8qpqg3W.js","sources":["../../src/components/link/link.types.ts","../../../ui-assets/icons-16/dist/vue/external-link.vue","../../src/components/link/link.vue"],"sourcesContent":["import type { Location } from 'vue-router/types/router.d.ts';\n// TODO: revert to import once fully migrated to Vue 3\n// import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n\n/**\n * Manually defined RouterLinkProps to ensure compatibility\n * with Vue Macros and Vue 2.7 / 3 monorepos.\n */\nexport interface RouterLinkProps {\n    /**\n     * Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to\n     * `router.push()` internally, so the value can be either a string or a location descriptor object.\n     */\n    to: string | Location;\n    /**\n     * Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will\n     * not create a new history record.\n     *\n     * @default false\n     */\n    replace?: boolean;\n    /**\n     * Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating\n     * from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at\n     * `/a/b`.\n     *\n     * @default false\n     */\n    append?: boolean;\n    /**\n     * Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to\n     * render to, and it will still listen to click events for navigation.\n     *\n     * @default \"a\"\n     */\n    tag?: string;\n    /**\n     * Configure the active CSS class applied when the link is active. Note the default value can also be configured\n     * globally via the `linkActiveClass` router constructor option.\n     *\n     * @default \"router-link-active\"\n     */\n    activeClass?: string;\n    /**\n     * The default active class matching behavior is **inclusive match**. For example, `<RouterLink to=\"/a\">` will get\n     * this class applied as long as the current path starts with `/a/` or is `/a`.\n     *\n     * @default false\n     */\n    exact?: boolean;\n    /**\n     * Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections.\n     *\n     * @default false\n     */\n    exactPath?: boolean;\n    /**\n     * Configure the active CSS class applied when the link is active with exact path match. Note the default value can\n     * also be configured globally via the `linkExactPathActiveClass` router constructor option.\n     *\n     * @default \"router-link-exact-path-active\"\n     */\n    exactPathActiveClass?: string;\n\n    /**\n     * Specify the event(s) that can trigger the link navigation.\n     *\n     * @default 'click'\n     */\n    event?: string | ReadonlyArray<string>;\n    /**\n     * Configure the active CSS class applied when the link is active with exact match. Note the default value can also be\n     * configured globally via the `linkExactActiveClass` router constructor option.\n     *\n     * @default \"router-link-exact-active\"\n     */\n    exactActiveClass?: string;\n    /**\n     * Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed\n     * values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the\n     * default of page should be the best fit.\n     *\n     * @default \"page\"\n     */\n    ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n\nexport type BentoLinkProps = RouterLinkProps & {\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link and renders an external link icon.\n     */\n    external?: boolean;\n\n    /**\n     * Set to true if used inside a `BentoButton` component.\n     */\n    isButton?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    isNotRouting?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    /**\n     * Set to true to truncate link. Doesn't work with disableTypography.\n     */\n    truncate?: boolean;\n\n    /**\n     * Link variant type affecting visual style.\n     * @values default, quiet\n     */\n    variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n};\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <a\n        v-if=\"external || isNotRouting\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        :aria-describedby=\"externalLinkId\"\n        :href=\"$props.to.toString()\"\n        :title=\"getAttributeTitle($attrs.title)\"\n        :target=\"computedTarget\"\n        @click=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n        <span v-if=\"showExternalLinkIcon\" aria-hidden=\"true\" class=\"b-link__external-link-icon\">\n            <external-link-icon />\n        </span>\n        <span v-if=\"external\" :id=\"externalLinkId\" class=\"b-link--visually-hidden\">{{ t('opensInNewTab') }}</span>\n    </a>\n    <router-link\n        v-else\n        v-bind=\"{ ...$attrs, ...$props, ...nonForwardedProps }\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\n        :to=\"props.to\"\n        custom\n        @click.native=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script setup lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoLinkProps, BentoLinkVariant } from './link.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { RouterLinkSlotArgument } from 'vue-router/types/router.d.ts';\n    import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  to: null,\n  replace: { type: Boolean },\n  append: { type: Boolean },\n  tag: null,\n  activeClass: null,\n  exact: { type: Boolean },\n  exactPath: { type: Boolean },\n  exactPathActiveClass: null,\n  event: null,\n  exactActiveClass: null,\n  ariaCurrentValue: null,\n  disableTypography: { type: Boolean },\n  external: { type: Boolean },\n  isButton: { type: Boolean },\n  isNotRouting: { type: Boolean },\n  target: { default: null },\n  truncate: { type: Boolean },\n  variant: { default: BentoLinkVariant.DEFAULT }\n});\n\n    // Props that should not be forwarded to the underlying anchor element\n    const nonForwardedProps = {\n        variant: undefined,\n        isButton: undefined,\n        truncate: undefined,\n        disableTypography: undefined,\n        external: undefined,\n        isNotRouting: undefined,\n    };\n\n    const externalLinkId = generateUid('external-link');\n\n    const getAttributeTitle = (attributesTitle: unknown) => attributesTitle as string;\n\n    const conditionalClasses = computed(() => ({\n        'b-link': !props.isButton,\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n        [`b-link--truncate`]: props.truncate,\n    }));\n\n    const computedTarget = computed(() => (props.external ? (props.target ?? '_blank') : props.target));\n    const showExternalLinkIcon = computed(() => !(props.isButton || props.isNotRouting));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n        inheritAttrs: false,\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","uuid","_sfc_main$1","__default__","messages","t","useI18n","nonForwardedProps","externalLinkId","generateUid","getAttributeTitle","attributesTitle","conditionalClasses","computed","props","computedTarget","showExternalLinkIcon","e","navigateCallback","emit"],"mappings":";;;;;;;;AA0FY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACnFZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;GC2GIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAAA,EACQ,MAAA,EAAA,UAAAC,EAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;iBA5EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAwBAC,IAAA;AAAA,MAA0B,SAAA;AAAA,MACb,UAAA;AAAA,MACC,UAAA;AAAA,MACA,mBAAA;AAAA,MACS,UAAA;AAAA,MACT,cAAA;AAAA,IACI,GAGlBC,IAAAC,EAAA,eAAA,GAEAC,IAAA,CAAAC,MAAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAC,EAAA;AAAA,MACtB,CAAA,WAAAf,EAAA,KAAA,EAAA,GAAAe,EAAA,YAAAf,EAAA;AAAA,MACyD,oBAAAe,EAAA;AAAA,IAC9C,EAAA,GAGhCC,IAAAF,EAAA,MAAAC,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAE,IAAAH,EAAA,MAAA,EAAAC,EAAA,YAAAA,EAAA,aAAA;4LAIA,CAAAG,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}

package/dist/chunks/listbox-option-tag.CK628fjn.js

@@ -0,0 +1,44 @@
+import { defineComponent as n, computed as e } from "vue";
+import { B as s } from "./tag.7fp_M9Au.js";
+import { B as r } from "./typography.hlOAxsEn.js";
+import { n as i } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/listbox-option-tag.css";
+const p = n({
+  name: "listbox-tag-option",
+  components: {
+    BentoTag: s,
+    BentoTypography: r
+  },
+  props: {
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(a) {
+    return {
+      // Values
+      variant: e(() => a.option.data)
+    };
+  }
+});
+var l = function() {
+  var t = this, o = t._self._c;
+  return t._self._setupProxy, o("span", { staticClass: "b-listbox-tag-option" }, [o("span", { attrs: { "aria-hidden": !!t.option.label } }, [o("bento-tag", { staticClass: "b-listbox-tag-option__tag", attrs: { label: t.option.value.toString(), variant: t.variant } })], 1), t.option.label ? o("bento-typography", { staticClass: "b-listbox-tag-option__label", attrs: { el: "span" } }, [t._v(" " + t._s(t.option.label) + " ")]) : t._e()], 1);
+}, _ = [], m = /* @__PURE__ */ i(
+  p,
+  l,
+  _,
+  !1,
+  null,
+  "954d4740"
+);
+const v = m.exports;
+export {
+  v as L
+};
+//# sourceMappingURL=listbox-option-tag.CK628fjn.js.map

package/dist/chunks/listbox-option-tag.CK628fjn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option-tag.CK628fjn.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <span class=\"b-listbox-tag-option\">\n        <span :aria-hidden=\"!!option.label\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types/listbox';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/loading-indicator.PxbRzshH.js

@@ -0,0 +1,42 @@
+import { defineComponent as s, onMounted as r, onUnmounted as i, computed as l } from "vue";
+import { n as d } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/loading-indicator.css";
+var t = /* @__PURE__ */ ((a) => (a.START = "loading-start", a.END = "loading-end", a))(t || {});
+const c = {
+  name: "bento-loading-indicator"
+}, _ = /* @__PURE__ */ s({
+  ...c,
+  props: {
+    small: { type: Boolean, default: !1 },
+    large: { type: Boolean, default: !1 },
+    inverse: { type: Boolean, default: !1 }
+  },
+  emits: [],
+  setup(a, { emit: n }) {
+    const e = a;
+    r(() => n(t.START)), i(() => n(t.END));
+    const o = l(() => ({
+      "b-loading-indicator--inverse": e.inverse,
+      "b-loading-indicator--small": e.small,
+      "b-loading-indicator--large": e.large
+    }));
+    return { __sfc: !0, props: e, emit: n, conditionalClasses: o };
+  }
+});
+var p = function() {
+  var n = this, e = n._self._c, o = n._self._setupProxy;
+  return e("div", { staticClass: "b-loading-indicator", class: o.conditionalClasses, attrs: { "aria-hidden": "true", "data-testid": "loading-indicator" } });
+}, f = [], u = /* @__PURE__ */ d(
+  _,
+  p,
+  f,
+  !1,
+  null,
+  "90a47943"
+);
+const v = u.exports;
+export {
+  v as B,
+  t as a
+};
+//# sourceMappingURL=loading-indicator.PxbRzshH.js.map

package/dist/chunks/loading-indicator.PxbRzshH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator.PxbRzshH.js","sources":["../../src/components/loading-indicator/loading-indicator.types.ts","../../src/components/loading-indicator/loading-indicator.vue"],"sourcesContent":["export enum BentoLoadingIndicatorEvent {\n    START = 'loading-start',\n    END = 'loading-end',\n}\n\nexport interface BentoLoadingIndicatorProps {\n    /**\n     * Displays the loading indicator in a small size\n     */\n    small?: boolean;\n    /**\n     * Displays the loading indicator in a large size\n     */\n    large?: boolean;\n    /**\n     * Displays the loading indicator in a white variant\n     */\n    inverse?: boolean;\n}\n","<template>\n    <div class=\"b-loading-indicator\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"loading-indicator\" />\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted } from 'vue';\n    import { BentoLoadingIndicatorEvent, type BentoLoadingIndicatorProps } from './loading-indicator.types';\n\n    const props = defineProps({\n  small: { type: Boolean, default: false },\n  large: { type: Boolean, default: false },\n  inverse: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([]);\n\n    onMounted(() => emit(BentoLoadingIndicatorEvent.START));\n\n    onUnmounted(() => emit(BentoLoadingIndicatorEvent.END));\n\n    const conditionalClasses = computed(() => ({\n        'b-loading-indicator--inverse': props.inverse,\n        'b-loading-indicator--small': props.small,\n        'b-loading-indicator--large': props.large,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A loading indicator component that displays a spinning animation.\n     *\n     * @usage\n     * import { BentoLoadingIndicator } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingIndicator },\n     *     template: `\n     *         <bento-loading-indicator :small=\"true\" />\n     *     `\n     * };\n     */\n    export default {\n        name: 'bento-loading-indicator',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./loading-indicator.scss\" />\n"],"names":["BentoLoadingIndicatorEvent","BentoLoadingIndicatorEvent2","__default__","onMounted","emit","onUnmounted","conditionalClasses","computed","props"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,iBACAA,EAAA,MAAA,eAFQA,IAAAD,KAAA,CAAA,CAAA;ACyCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;AA3BA,IAAAC,EAAA,MAAAC,EAAAJ,EAAA,KAAA,CAAA,GAEAK,EAAA,MAAAD,EAAAJ,EAAA,GAAA,CAAA;AAEA,UAAAM,IAAAC,EAAA,OAAA;AAAA,MAA2C,gCAAAC,EAAA;AAAA,MACD,8BAAAA,EAAA;AAAA,MACF,8BAAAA,EAAA;AAAA,IACA,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/minus-small.DJacLGTw.js

@@ -0,0 +1,27 @@
+/* empty css              */
+import { n as a } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+var i = /* @__PURE__ */ ((r) => (r.UNCHECKED = "unchecked", r.CHECKED = "checked", r.DISABLED = "disabled", r.ERROR = "error", r.READONLY = "readonly", r.INDETERMINATE = "indeterminate", r))(i || {}), n = /* @__PURE__ */ ((r) => (r.UPDATE = "update:model-value", r))(n || {});
+let t = 0;
+const l = {
+  beforeCreate() {
+    this.uuid = t.toString(), t += 1;
+  }
+};
+var o = function() {
+  var s = this, e = s._self._c;
+  return e("svg", s._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", s.$attrs, !1), [s.$attrs["svg-title"] ? e("title", [s._v(s._s(s.$attrs["svg-title"]))]) : s._e(), e("path", { attrs: { fill: "#001222", d: "M4.25 7.25H11.75V8.75H4.25V7.25Z" } })]);
+}, _ = [], d = /* @__PURE__ */ a(
+  l,
+  o,
+  _,
+  !1,
+  null,
+  null
+);
+const m = d.exports;
+export {
+  i as C,
+  m as N,
+  n as a
+};
+//# sourceMappingURL=minus-small.DJacLGTw.js.map

package/dist/chunks/minus-small.DJacLGTw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"minus-small.DJacLGTw.js","sources":["../../src/components/internal/checkbox-input/checkbox-input.types.ts","../../../ui-assets/icons-16/dist/vue/minus-small.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n    UNCHECKED = 'unchecked',\n    CHECKED = 'checked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n    INDETERMINATE = 'indeterminate',\n}\n\nexport enum CheckboxInputEvent {\n    UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n    value: string | number;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["CheckboxInputState","CheckboxInputEvent","uuid","_sfc_main"],"mappings":";;AAGY,IAAAA,sBAAAA,OACRA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,gBAAgB,iBANRA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;ACLZ,IAAAC,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/modal-fullscreen.UqZgbaDw.js

@@ -0,0 +1,221 @@
+import { defineComponent as P, useSlots as x, onMounted as k, useListeners as f, getCurrentInstance as I, toRefs as M, ref as u, computed as w, watch as D, nextTick as R, provide as _ } from "vue";
+import "./index.Cl4_42j5.js";
+import { B as G } from "./toast.DGvNp4ZM.js";
+import { B as J } from "./button.CS_kdxYh.js";
+import { B as $ } from "./focus-trap.CNIU5jOz.js";
+import { B as K } from "./typography.hlOAxsEn.js";
+import { u as E } from "./use-has-slot.C9lQZ6nz.js";
+import { D as U, B as Y, b as j, a as z } from "./dialog-page.krM2wQpm.js";
+import { B as H, i as V } from "./button-actions.N3D-Bb_x.js";
+import { n as S } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as q } from "./cross.CC_B-vG-.js";
+import { u as Q } from "./index.B6WW_F-J.js";
+import { g as W } from "./generate-uid.NJ8tVoha.js";
+import "../assets/modal-fullscreen.css";
+const X = {}, Z = /* @__PURE__ */ P({
+  ...X,
+  __name: "modal-fullscreen-page",
+  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`.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Label shown next to the modal actions
+     */
+    contextualLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Identifier of the page, used with activePage prop to handle sidepanel navigation
+     */
+    pageId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior
+     * Used when the back button should not take the user to the natural previous page
+     * Set to `null` to hide back button in the page
+     */
+    previousPage: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Title of the modal
+     */
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  setup(s) {
+    const e = s, a = x(), t = E(a);
+    return k(() => {
+      if (e.actions && e.actions.length > 2)
+        throw new Error("Not more than 2 action buttons may be provided in Bento Modal Fullscreen");
+    }), { __sfc: !0, props: e, slots: a, hasSlot: t, BentoButtonActions: H, BentoTypography: K, DialogPage: U };
+  }
+});
+var ee = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a(t.DialogPage, { staticClass: "b-modal-fullscreen-page", attrs: { "page-id": e.pageId, "previous-page": e.previousPage, "always-show-border": "" }, scopedSlots: e._u([{ key: "header", fn: function() {
+    return [a("div", { staticClass: "b-modal-fullscreen-page__header" }, [a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title" }, [e.title ? a(t.BentoTypography, { staticClass: "b-modal-fullscreen-page__title", attrs: { el: "h2", variant: "title", title: e.title } }, [e._v(e._s(e.title))]) : e._e()], 1), t.hasSlot("header") ? a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot" }, [e._t("header")], 2) : e._e(), a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions" }, [e.contextualLabel ? a(t.BentoTypography, { staticClass: "b-modal-fullscreen-page__contextual-label", attrs: { el: "span", title: e.contextualLabel } }, [e._v(e._s(e.contextualLabel))]) : e._e(), e.actions ? a(t.BentoButtonActions, { staticClass: "b-modal-fullscreen-page__actions", attrs: { actions: e.actions } }) : e._e(), a("div", { staticClass: "b-modal-fullscreen-page__separator" })], 1)])];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [a("div", { staticClass: "b-modal-fullscreen-page__content" }, [e._t("default")], 2)];
+  }, proxy: !0 }], null, !0) });
+}, te = [], ae = /* @__PURE__ */ S(
+  Z,
+  ee,
+  te,
+  !1,
+  null,
+  "f90522fe"
+);
+const se = ae.exports;
+function le() {
+  var e;
+  if (!window || !f && !I)
+    return {};
+  if (f)
+    return f();
+  const s = I();
+  return ((e = s == null ? void 0 : s.proxy) == null ? void 0 : e.$listeners) || {};
+}
+const oe = {
+  "en-US": {
+    close: "Close"
+  },
+  "ja-JP": {
+    close: "閉じる"
+  },
+  "pt-BR": {
+    close: "Fechar"
+  }
+}, ne = {
+  i18n: { messages: oe }
+}, re = /* @__PURE__ */ P({
+  ...ne,
+  __name: "modal-fullscreen",
+  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`.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * The id of the current active page
+     * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed
+     */
+    activePage: {
+      type: String,
+      default: null
+    },
+    /**
+     * Label shown next to the modal actions
+     */
+    contextualLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Controls the modal's state from the outside. Set it to true to open the modal
+     */
+    isOpen: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Title of the modal
+     */
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["before-close", "update:active-page", "update:is-open"],
+  setup(s, { emit: e }) {
+    const a = s, { activePage: t, isOpen: l } = M(a), { t: A } = Q(), r = u(null), i = u(!1), m = W("modal-fullscreen"), p = u(!1), g = le(), v = x(), L = E(v), O = w(() => ({
+      "b-modal-fullscreen--hide": i.value
+    })), T = () => {
+      i.value && (r.value.close(), n.value[0] && e("update:active-page", n.value[0]), n.value = [], i.value = !1, p.value = !1, e("update:is-open", !1));
+    };
+    function F() {
+      if (g["before-close"]) {
+        e("before-close");
+        return;
+      }
+      d();
+    }
+    const d = () => {
+      r.value.open && (i.value = !0);
+    };
+    D(
+      () => l.value,
+      async () => {
+        await R(), r.value && (l.value ? (p.value = !0, r.value.showModal(), n.value.length || n.value.push(t.value)) : r.value.open && d());
+      },
+      { immediate: !0 }
+    ), _(V, m);
+    const y = u(Y.TRANSITION_LEVEL_DEEPER), c = u([]), n = u([]), h = (o) => e("update:active-page", o);
+    _(j, {
+      activePage: t,
+      animation: y,
+      isOpen: p,
+      pages: c,
+      previousPages: n,
+      updatePage: h
+    });
+    const b = (o) => () => {
+      var B;
+      c.value = (B = c.value) == null ? void 0 : B.filter((N) => N !== o);
+    }, C = (o) => (o && c.value.push(o), { unregisterPage: b(o) });
+    return _(z, C), { __sfc: !0, props: a, emit: e, activePage: t, isOpen: l, t: A, modal: r, isClosing: i, modalFullscreenId: m, internalIsOpen: p, listeners: g, slots: v, hasSlot: L, conditionalClasses: O, closeModalAfterAnimation: T, closeModal: F, startCloseModalAnimation: d, animation: y, pages: c, previousPages: n, updatePage: h, unregisterPage: b, registerPage: C, BentoToast: G, BentoButton: J, BentoFocusTrap: $, BentoModalFullscreenPage: se, CrossIcon: q };
+  }
+});
+var ue = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a("dialog", { ref: "modal", staticClass: "b-modal-fullscreen", class: t.conditionalClasses, attrs: { id: t.modalFullscreenId, "data-dialog-element": "modal-fullscreen" }, on: { animationend: t.closeModalAfterAnimation, keydown: function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : (l.preventDefault(), t.closeModal.apply(null, arguments));
+  } } }, [t.internalIsOpen ? a(t.BentoFocusTrap, { staticClass: "b-modal-fullscreen__wrapper" }, [t.props.activePage ? [e._t("default")] : a(t.BentoModalFullscreenPage, { attrs: { actions: e.actions, "contextual-label": e.contextualLabel, title: e.title }, scopedSlots: e._u([t.hasSlot("default") ? { key: "default", fn: function() {
+    return [e._t("default")];
+  }, proxy: !0 } : null, t.hasSlot("header") ? { key: "header", fn: function() {
+    return [e._t("header")];
+  }, proxy: !0 } : null], null, !0) }), a("div", { staticClass: "b-modal-fullscreen__close-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", "aria-label": t.t("close") }, on: { click: t.closeModal }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [a(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }], null, !1, 4214210411) })], 1)], 2) : e._e(), t.isOpen ? [a(t.BentoToast)] : e._e()], 2);
+}, ie = [], ce = /* @__PURE__ */ S(
+  re,
+  ue,
+  ie,
+  !1,
+  null,
+  "58c5c05a"
+);
+const Pe = ce.exports;
+export {
+  se as B,
+  Pe as m
+};
+//# sourceMappingURL=modal-fullscreen.UqZgbaDw.js.map