@adyen/bento-vue2 1.83.1 → 1.84.0

package/dist/chunks/{constructNow.BhymNmy5.js.map → constructNow.DuaJst0D.js.map}

@@ -1 +1 @@
-{"version":3,"file":"constructNow.BhymNmy5.js","sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/constructNow.js"],"sourcesContent":["import { constructFrom } from \"./constructFrom.js\";\n\n/**\n * @name constructNow\n * @category Generic Helpers\n * @summary Constructs a new current date using the passed value constructor.\n * @pure false\n *\n * @description\n * The function constructs a new current date using the constructor from\n * the reference date. It helps to build generic functions that accept date\n * extensions and use the current date.\n *\n * It defaults to `Date` if the passed reference date is a number or a string.\n *\n * @param date - The reference date to take constructor from\n *\n * @returns Current date initialized using the given date constructor\n *\n * @example\n * import { constructNow, isSameDay } from 'date-fns'\n *\n * function isToday<DateType extends Date>(\n *   date: DateArg<DateType>,\n * ): boolean {\n *   // If we were to use `new Date()` directly, the function would  behave\n *   // differently in different timezones and return false for the same date.\n *   return isSameDay(date, constructNow(date));\n * }\n */\nexport function constructNow(date) {\n  return constructFrom(date, Date.now());\n}\n\n// Fallback for modularized imports:\nexport default constructNow;\n"],"names":["constructNow","date","constructFrom"],"mappings":";AA8BO,SAASA,EAAaC,GAAM;AACjC,SAAOC,EAAcD,GAAM,KAAK,IAAG,CAAE;AACvC;","x_google_ignoreList":[0]}
+{"version":3,"file":"constructNow.DuaJst0D.js","sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/constructNow.js"],"sourcesContent":["import { constructFrom } from \"./constructFrom.js\";\n\n/**\n * @name constructNow\n * @category Generic Helpers\n * @summary Constructs a new current date using the passed value constructor.\n * @pure false\n *\n * @description\n * The function constructs a new current date using the constructor from\n * the reference date. It helps to build generic functions that accept date\n * extensions and use the current date.\n *\n * It defaults to `Date` if the passed reference date is a number or a string.\n *\n * @param date - The reference date to take constructor from\n *\n * @returns Current date initialized using the given date constructor\n *\n * @example\n * import { constructNow, isSameDay } from 'date-fns'\n *\n * function isToday<DateType extends Date>(\n *   date: DateArg<DateType>,\n * ): boolean {\n *   // If we were to use `new Date()` directly, the function would  behave\n *   // differently in different timezones and return false for the same date.\n *   return isSameDay(date, constructNow(date));\n * }\n */\nexport function constructNow(date) {\n  return constructFrom(date, Date.now());\n}\n\n// Fallback for modularized imports:\nexport default constructNow;\n"],"names":["constructNow","date","constructFrom"],"mappings":";AA8BO,SAASA,EAAaC,GAAM;AACjC,SAAOC,EAAcD,GAAM,KAAK,IAAG,CAAE;AACvC;","x_google_ignoreList":[0]}

package/dist/chunks/{controls-group.BqPxnEl3.js → controls-group.D4eW9DtP.js}

@@ -1,7 +1,7 @@
 import { defineComponent as c, useAttrs as u, useSlots as b, computed as a } from "vue";
 import { d as f, B as _ } from "./typography.Bq-EGj9y.js";
 import { u as m } from "./use-has-slot.C9lQZ6nz.js";
-import { F as h } from "./field-label.BpeaR4Qc.js";
+import { F as h } from "./field-label.CEkJnsiL.js";
 import { n as y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/controls-group.css";
 const g = {}, C = /* @__PURE__ */ c({
@@ -81,4 +81,4 @@ const F = v.exports;
 export {
   F as C
 };
-//# sourceMappingURL=controls-group.BqPxnEl3.js.map
+//# sourceMappingURL=controls-group.D4eW9DtP.js.map

package/dist/chunks/{controls-group.BqPxnEl3.js.map → controls-group.D4eW9DtP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"controls-group.BqPxnEl3.js","sources":["../../src/components/internal/controls-group/controls-group.vue"],"sourcesContent":["<template>\n    <fieldset\n        class=\"b-controls-group\"\n        :class=\"conditionalClasses\"\n        :form=\"form\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"ariaAttributes['aria-describedby']\"\n    >\n        <legend class=\"b-controls-group__label-container\" :class=\"legendConditionalClasses\">\n            <field-label\n                v-if=\"label\"\n                class=\"b-controls-group__label\"\n                :label=\"label\"\n                :tooltip-text=\"tooltipText\"\n                :optional=\"optional\"\n                :required=\"required\"\n            />\n            <bento-typography\n                v-if=\"description || hasSlot('description')\"\n                class=\"b-controls-group__description\"\n                el=\"span\"\n            >\n                <slot name=\"description\">\n                    {{ description }}\n                </slot>\n            </bento-typography>\n        </legend>\n        <slot />\n    </fieldset>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { FieldLabel } from '@/components/internal/field-label';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useHasSlot } from '@/composables';\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * The name of the component to cite when throwing a depreacte error.\n         */\n        componentName: { type: String, required: true },\n\n        /**\n         * Sets all child controls of the <fieldset> as disabled.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * The value of the id attribute of a <form> element the <fieldset> is to part of, even if it is not inside the form itself.\n         */\n        form: { type: String, default: null },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         * The label is shown when `hideLabel` is set to `true` or if `description` is passed\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n    });\n\n    const ariaAttributes = computed(() => ({\n        'aria-describedby': attrs['aria-describedby']?.toString() as string,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        'b-controls-group--disabled': props.disabled,\n    }));\n\n    const legendConditionalClasses = computed(() => {\n        const isLabelAndDescriptionPresent = props.label && (props.description || hasSlot('description'));\n        const shouldShowLabel = isLabelAndDescriptionPresent || props.hideLabel === false;\n\n        return {\n            'b-controls-group__label-container--hidden': !shouldShowLabel,\n        };\n    });\n\n    // eslint-disable-next-line eqeqeq -- Needs to show deprecate message when hideLabel is not set and no description available\n    const hasNoPropsDefined = !(props.description || hasSlot('description')) && props.hideLabel == undefined;\n    if (hasNoPropsDefined) {\n        deprecate(\n            `${props.componentName}: The property \\`label\\` will always be rendered by default.`,\n            `After version 2.0.0, the label will be shown by default.\n            To continue hiding the label set \\`:hide-label=\"true\"\\`.  Up until version 2.0.0, to display the label set \\`hide-label=\"false\"\\`.\n            \\`label\\` will always be rendered when \\`description\\` is passed alongside with \\`label\\``,\n            `2.0.0`\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A controls group components should be used whenever it is necessary to group a set of controls (i.e. radio buttons or checkboxes)\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * NOTE: This component should not be used by itself but more implemented by other exported components\n     * @example\n     * import { ControlsGroup, BentoCheckbox, BentoRadioButton } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { ControlsGroup, BentoRadioButton },\n     *     template: `\n     *             <controls-group\n     *                 label=\"Your group label\"\n     *                 description=\"Description\"\n     *             >\n     *                 <bento-radio-button\n     *                      disabled\n     *                      value=\"inputRadio\"\n     *                 >\n     *                      Label text\n     *                 </bento-radio-button>\n     *                 <bento-radio-button\n     *                      value=\"inputRadio\"\n     *                 >\n     *                      Another label text\n     *                 </bento-radio-button>\n     *             </controls-group>\n     *     `\n     * };\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./controls-group.scss\" />\n"],"names":["__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","ariaAttributes","computed","_a","conditionalClasses","props","legendConditionalClasses","hasNoPropsDefined","deprecate"],"mappings":";;;;;;AAuJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjHAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAkDAI,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,qBAAAC,IAAAR,EAAA,kBAAA,MAAA,gBAAAQ,EAAA;AAAA,MACqB;AAAA,KAAA,GAG5DC,IAAAF,EAAA,OAAA;AAAA,MAA2C,8BAAAG,EAAA;AAAA,IACH,EAAA,GAGxCC,IAAAJ,EAAA,OAII;AAAA,MAAO,6CAAA,EAHPG,EAAA,UAAAA,EAAA,eAAAN,EAAA,aAAA,MACAM,EAAA,cAAA;AAAA,IAGkD,EAClD,GAIJE,IAAA,EAAAF,EAAA,eAAAN,EAAA,aAAA,MAAAM,EAAA,aAAA;AACA,WAAAE,KACIC;AAAA,MAAA,GAAAH,EAAA,aAAA;AAAA,MAC0B;AAAA,MACtB;AAAA,IAGA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"controls-group.D4eW9DtP.js","sources":["../../src/components/internal/controls-group/controls-group.vue"],"sourcesContent":["<template>\n    <fieldset\n        class=\"b-controls-group\"\n        :class=\"conditionalClasses\"\n        :form=\"form\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"ariaAttributes['aria-describedby']\"\n    >\n        <legend class=\"b-controls-group__label-container\" :class=\"legendConditionalClasses\">\n            <field-label\n                v-if=\"label\"\n                class=\"b-controls-group__label\"\n                :label=\"label\"\n                :tooltip-text=\"tooltipText\"\n                :optional=\"optional\"\n                :required=\"required\"\n            />\n            <bento-typography\n                v-if=\"description || hasSlot('description')\"\n                class=\"b-controls-group__description\"\n                el=\"span\"\n            >\n                <slot name=\"description\">\n                    {{ description }}\n                </slot>\n            </bento-typography>\n        </legend>\n        <slot />\n    </fieldset>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { FieldLabel } from '@/components/internal/field-label';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useHasSlot } from '@/composables';\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * The name of the component to cite when throwing a depreacte error.\n         */\n        componentName: { type: String, required: true },\n\n        /**\n         * Sets all child controls of the <fieldset> as disabled.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * The value of the id attribute of a <form> element the <fieldset> is to part of, even if it is not inside the form itself.\n         */\n        form: { type: String, default: null },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         * The label is shown when `hideLabel` is set to `true` or if `description` is passed\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n    });\n\n    const ariaAttributes = computed(() => ({\n        'aria-describedby': attrs['aria-describedby']?.toString() as string,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        'b-controls-group--disabled': props.disabled,\n    }));\n\n    const legendConditionalClasses = computed(() => {\n        const isLabelAndDescriptionPresent = props.label && (props.description || hasSlot('description'));\n        const shouldShowLabel = isLabelAndDescriptionPresent || props.hideLabel === false;\n\n        return {\n            'b-controls-group__label-container--hidden': !shouldShowLabel,\n        };\n    });\n\n    // eslint-disable-next-line eqeqeq -- Needs to show deprecate message when hideLabel is not set and no description available\n    const hasNoPropsDefined = !(props.description || hasSlot('description')) && props.hideLabel == undefined;\n    if (hasNoPropsDefined) {\n        deprecate(\n            `${props.componentName}: The property \\`label\\` will always be rendered by default.`,\n            `After version 2.0.0, the label will be shown by default.\n            To continue hiding the label set \\`:hide-label=\"true\"\\`.  Up until version 2.0.0, to display the label set \\`hide-label=\"false\"\\`.\n            \\`label\\` will always be rendered when \\`description\\` is passed alongside with \\`label\\``,\n            `2.0.0`\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A controls group components should be used whenever it is necessary to group a set of controls (i.e. radio buttons or checkboxes)\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * NOTE: This component should not be used by itself but more implemented by other exported components\n     * @example\n     * import { ControlsGroup, BentoCheckbox, BentoRadioButton } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { ControlsGroup, BentoRadioButton },\n     *     template: `\n     *             <controls-group\n     *                 label=\"Your group label\"\n     *                 description=\"Description\"\n     *             >\n     *                 <bento-radio-button\n     *                      disabled\n     *                      value=\"inputRadio\"\n     *                 >\n     *                      Label text\n     *                 </bento-radio-button>\n     *                 <bento-radio-button\n     *                      value=\"inputRadio\"\n     *                 >\n     *                      Another label text\n     *                 </bento-radio-button>\n     *             </controls-group>\n     *     `\n     * };\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./controls-group.scss\" />\n"],"names":["__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","ariaAttributes","computed","_a","conditionalClasses","props","legendConditionalClasses","hasNoPropsDefined","deprecate"],"mappings":";;;;;;AAuJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjHAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAkDAI,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,qBAAAC,IAAAR,EAAA,kBAAA,MAAA,gBAAAQ,EAAA;AAAA,MACqB;AAAA,KAAA,GAG5DC,IAAAF,EAAA,OAAA;AAAA,MAA2C,8BAAAG,EAAA;AAAA,IACH,EAAA,GAGxCC,IAAAJ,EAAA,OAII;AAAA,MAAO,6CAAA,EAHPG,EAAA,UAAAA,EAAA,eAAAN,EAAA,aAAA,MACAM,EAAA,cAAA;AAAA,IAGkD,EAClD,GAIJE,IAAA,EAAAF,EAAA,eAAAN,EAAA,aAAA,MAAAM,EAAA,aAAA;AACA,WAAAE,KACIC;AAAA,MAAA,GAAAH,EAAA,aAAA;AAAA,MAC0B;AAAA,MACtB;AAAA,IAGA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{copy.I2GvwCvt.js → copy.C0q7xgXs.js}

@@ -1,14 +1,14 @@
 import { defineComponent as C, ref as a, computed as c } from "vue";
-import { B as m } from "./button.C5GvPqe5.js";
+import { B as m } from "./button.DIU6m9wD.js";
 import { d as y } from "./popper-container.Cdokz_NE.js";
 import { u as x } from "./index.B6WW_F-J.js";
 /* empty css              */
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { b } from "./tooltip.C6YCavPw.js";
+import { b as T } from "./tooltip.C6YCavPw.js";
 import "../assets/copy.css";
 var n = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.COPYING = "copying", r.ERROR = "error", r))(n || {});
 let l = 0;
-const T = {
+const b = {
   beforeCreate() {
     this.uuid = l.toString(), l += 1;
   }
@@ -16,15 +16,15 @@ const T = {
 var g = function() {
   var t = this, o = t._self._c;
   return o("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"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#001222", d: "M8 1.25C9.51878 1.25 10.75 2.48122 10.75 4V5.25H12C13.5188 5.25 14.75 6.48122 14.75 8V12C14.75 13.5188 13.5188 14.75 12 14.75H8C6.48122 14.75 5.25 13.5188 5.25 12V10.75H4C2.48122 10.75 1.25 9.51878 1.25 8V4C1.25 2.48122 2.48122 1.25 4 1.25H8ZM8 6.75C7.30964 6.75 6.75 7.30964 6.75 8V12C6.75 12.6904 7.30964 13.25 8 13.25H12C12.6904 13.25 13.25 12.6904 13.25 12V8C13.25 7.30964 12.6904 6.75 12 6.75H8ZM4 2.75C3.30964 2.75 2.75 3.30964 2.75 4V8C2.75 8.69036 3.30964 9.25 4 9.25H5.25V8C5.25 6.48122 6.48122 5.25 8 5.25H9.25V4C9.25 3.30964 8.69036 2.75 8 2.75H4Z" } })]);
-}, R = [], P = /* @__PURE__ */ p(
-  T,
+}, R = [], h = /* @__PURE__ */ p(
+  b,
   g,
   R,
   !1,
   null,
   null
 );
-const h = P.exports, w = {
+const P = h.exports, w = {
   "en-US": {
     copied: "Copied!",
     copy: "Copy",
@@ -32,17 +32,19 @@ const h = P.exports, w = {
   },
   "ja-JP": {
     copied: "コピーしました！",
-    copy: "コピー"
+    copy: "コピー",
+    copyFailed: "コピーに失敗しました。手動で試してみてください。"
   },
   "pt-BR": {
     copied: "Copiado!",
-    copy: "Copiar"
+    copy: "Copiar",
+    copyFailed: "Falha ao copiar. Tente manualmente."
   }
-}, k = {
+}, F = {
   i18n: { messages: w },
   name: "copy"
-}, H = /* @__PURE__ */ C({
-  ...k,
+}, k = /* @__PURE__ */ C({
+  ...F,
   props: {
     button: { default: () => ({ variant: "tertiary" }) },
     buttonText: { default: void 0 },
@@ -70,27 +72,27 @@ const h = P.exports, w = {
           return e("copy");
       }
     }), v = c(() => o.buttonText ? void 0 : e("copy"));
-    return { __sfc: !0, emit: t, props: o, t: e, copyState: s, showScreenReaderAlert: i, onClickCopy: u, resetText: _, copyText: d, svgTitle: v, BentoButton: m, vBentoTooltipDirective: b, CopyIcon: h };
+    return { __sfc: !0, emit: t, props: o, t: e, copyState: s, showScreenReaderAlert: i, onClickCopy: u, resetText: _, copyText: d, svgTitle: v, BentoButton: m, vBentoTooltipDirective: T, CopyIcon: P };
   }
 });
-var V = function() {
+var H = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o("div", { staticClass: "b-copy", on: { mouseleave: e.resetText, focusout: e.resetText } }, [t.$slots.default ? o("span", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:[tooltipPosition]", value: e.copyText, expression: "copyText", arg: t.tooltipPosition }], on: { click: e.onClickCopy } }, [t._t("default")], 2) : o(e.BentoButton, t._b({ directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:[tooltipPosition]", value: e.copyText, expression: "copyText", arg: t.tooltipPosition }], on: { click: e.onClickCopy }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [o(e.CopyIcon, { attrs: { "svg-title": e.svgTitle } })];
   }, proxy: !0 }, t.buttonText ? { key: "default", fn: function() {
     return [t._v(" " + t._s(t.buttonText) + " ")];
   }, proxy: !0 } : null], null, !0) }, "bento-button", t.button, !1)), e.showScreenReaderAlert ? o("div", { staticClass: "b-copy__screen-reader-alert", attrs: { role: "alert" } }, [t._v(t._s(e.t("copied")))]) : t._e()], 1);
-}, B = [], $ = /* @__PURE__ */ p(
+}, V = [], B = /* @__PURE__ */ p(
+  k,
   H,
   V,
-  B,
   !1,
   null,
   "b9d54f2c"
 );
-const L = $.exports;
+const L = B.exports;
 export {
   L as C,
   n as a
 };
-//# sourceMappingURL=copy.I2GvwCvt.js.map
+//# sourceMappingURL=copy.C0q7xgXs.js.map

package/dist/chunks/{copy.I2GvwCvt.js.map → copy.C0q7xgXs.js.map}

@@ -1 +1 @@
-{"version":3,"file":"copy.I2GvwCvt.js","sources":["../../src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../src/components/internal/copy/copy.vue"],"sourcesContent":["import { type PopperContainerPosition } from '@/components/popper-container';\nimport type { BentoButton } from '@/components/button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport interface BentoCopyButtonProps {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n}\n\nexport interface BentoCopyProps {\n    /**\n     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n     */\n    button?: BentoCopyButtonProps;\n    /**\n     * Sets the button text of the copy button.\n     */\n    buttonText?: string;\n    /**\n     * Defines the string that will get copied to the clipboard\n     */\n    text: string;\n    /**\n     * Position the tooltip should take if space is available. Defaults to 'top'\n     */\n    tooltipPosition?: PopperContainerPosition;\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=\"M8 1.25C9.51878 1.25 10.75 2.48122 10.75 4V5.25H12C13.5188 5.25 14.75 6.48122 14.75 8V12C14.75 13.5188 13.5188 14.75 12 14.75H8C6.48122 14.75 5.25 13.5188 5.25 12V10.75H4C2.48122 10.75 1.25 9.51878 1.25 8V4C1.25 2.48122 2.48122 1.25 4 1.25H8ZM8 6.75C7.30964 6.75 6.75 7.30964 6.75 8V12C6.75 12.6904 7.30964 13.25 8 13.25H12C12.6904 13.25 13.25 12.6904 13.25 12V8C13.25 7.30964 12.6904 6.75 12 6.75H8ZM4 2.75C3.30964 2.75 2.75 3.30964 2.75 4V8C2.75 8.69036 3.30964 9.25 4 9.25H5.25V8C5.25 6.48122 6.48122 5.25 8 5.25H9.25V4C9.25 3.30964 8.69036 2.75 8 2.75H4Z\"/></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    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoCopyButtonProps, type BentoCopyProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const emit = defineEmits([\"click\"]);\n\n    const props = defineProps({\n  button: { default: () => ({ variant: 'tertiary' }) as BentoCopyButtonProps },\n  buttonText: { default: undefined },\n  text: null,\n  tooltipPosition: { default: PopperContainerPosition.TOP }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n    const showScreenReaderAlert = ref(false);\n    const onClickCopy = async (event: MouseEvent) => {\n        try {\n            await navigator.clipboard.writeText(props.text);\n            copyState.value = CopyTooltipState.COPYING;\n            showScreenReaderAlert.value = true;\n        } catch {\n            copyState.value = CopyTooltipState.ERROR;\n        }\n\n        emit('click', event);\n    };\n\n    const resetText = () => {\n        copyState.value = CopyTooltipState.DEFAULT;\n        showScreenReaderAlert.value = false;\n    };\n\n    const copyText = computed(() => {\n        switch (copyState.value) {\n            case CopyTooltipState.COPYING:\n                return t('copied');\n            case CopyTooltipState.ERROR:\n                return t('copyFailed');\n            default:\n                return t('copy');\n        }\n    });\n\n    const svgTitle = computed(() => (props.buttonText ? undefined : t('copy')));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'copy',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","_sfc_main$1","__default__","messages","t","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","event","props","emit","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACIZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GC8EIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;iBApDA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAAT,EAAA,OAAA,GAEAU,IAAAD,EAAA,EAAA,GACAE,IAAA,OAAAC,MAAA;AACI,UAAA;AACI,cAAA,UAAA,UAAA,UAAAC,EAAA,IAAA,GACAL,EAAA,QAAAR,EAAA,SACAU,EAAA,QAAA;AAAA,MAA8B,QAAA;AAE9B,QAAAF,EAAA,QAAAR,EAAA;AAAA,MAAmC;AAGvC,MAAAc,EAAA,SAAAF,CAAA;AAAA,IAAmB,GAGvBG,IAAA,MAAA;AACI,MAAAP,EAAA,QAAAR,EAAA,SACAU,EAAA,QAAA;AAAA,IAA8B,GAGlCM,IAAAC,EAAA,MAAA;AACI,cAAAT,EAAA,OAAA;AAAA,QAAyB,KAAAR,EAAA;AAEjB,iBAAAM,EAAA,QAAA;AAAA,QAAiB,KAAAN,EAAA;AAEjB,iBAAAM,EAAA,YAAA;AAAA,QAAqB;AAErB,iBAAAA,EAAA,MAAA;AAAA,MAAe;AAAA,IACvB,CAAA,GAGJY,IAAAD,EAAA,MAAAJ,EAAA,aAAA,SAAAP,EAAA,MAAA,CAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"copy.C0q7xgXs.js","sources":["../../src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../src/components/internal/copy/copy.vue"],"sourcesContent":["import { type PopperContainerPosition } from '@/components/popper-container';\nimport type { BentoButton } from '@/components/button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport interface BentoCopyButtonProps {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n}\n\nexport interface BentoCopyProps {\n    /**\n     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n     */\n    button?: BentoCopyButtonProps;\n    /**\n     * Sets the button text of the copy button.\n     */\n    buttonText?: string;\n    /**\n     * Defines the string that will get copied to the clipboard\n     */\n    text: string;\n    /**\n     * Position the tooltip should take if space is available. Defaults to 'top'\n     */\n    tooltipPosition?: PopperContainerPosition;\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=\"M8 1.25C9.51878 1.25 10.75 2.48122 10.75 4V5.25H12C13.5188 5.25 14.75 6.48122 14.75 8V12C14.75 13.5188 13.5188 14.75 12 14.75H8C6.48122 14.75 5.25 13.5188 5.25 12V10.75H4C2.48122 10.75 1.25 9.51878 1.25 8V4C1.25 2.48122 2.48122 1.25 4 1.25H8ZM8 6.75C7.30964 6.75 6.75 7.30964 6.75 8V12C6.75 12.6904 7.30964 13.25 8 13.25H12C12.6904 13.25 13.25 12.6904 13.25 12V8C13.25 7.30964 12.6904 6.75 12 6.75H8ZM4 2.75C3.30964 2.75 2.75 3.30964 2.75 4V8C2.75 8.69036 3.30964 9.25 4 9.25H5.25V8C5.25 6.48122 6.48122 5.25 8 5.25H9.25V4C9.25 3.30964 8.69036 2.75 8 2.75H4Z\"/></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    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoCopyButtonProps, type BentoCopyProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const emit = defineEmits([\"click\"]);\n\n    const props = defineProps({\n  button: { default: () => ({ variant: 'tertiary' }) as BentoCopyButtonProps },\n  buttonText: { default: undefined },\n  text: null,\n  tooltipPosition: { default: PopperContainerPosition.TOP }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n    const showScreenReaderAlert = ref(false);\n    const onClickCopy = async (event: MouseEvent) => {\n        try {\n            await navigator.clipboard.writeText(props.text);\n            copyState.value = CopyTooltipState.COPYING;\n            showScreenReaderAlert.value = true;\n        } catch {\n            copyState.value = CopyTooltipState.ERROR;\n        }\n\n        emit('click', event);\n    };\n\n    const resetText = () => {\n        copyState.value = CopyTooltipState.DEFAULT;\n        showScreenReaderAlert.value = false;\n    };\n\n    const copyText = computed(() => {\n        switch (copyState.value) {\n            case CopyTooltipState.COPYING:\n                return t('copied');\n            case CopyTooltipState.ERROR:\n                return t('copyFailed');\n            default:\n                return t('copy');\n        }\n    });\n\n    const svgTitle = computed(() => (props.buttonText ? undefined : t('copy')));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'copy',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","_sfc_main$1","__default__","messages","t","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","event","props","emit","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACIZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC8EIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;iBApDA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAAT,EAAA,OAAA,GAEAU,IAAAD,EAAA,EAAA,GACAE,IAAA,OAAAC,MAAA;AACI,UAAA;AACI,cAAA,UAAA,UAAA,UAAAC,EAAA,IAAA,GACAL,EAAA,QAAAR,EAAA,SACAU,EAAA,QAAA;AAAA,MAA8B,QAAA;AAE9B,QAAAF,EAAA,QAAAR,EAAA;AAAA,MAAmC;AAGvC,MAAAc,EAAA,SAAAF,CAAA;AAAA,IAAmB,GAGvBG,IAAA,MAAA;AACI,MAAAP,EAAA,QAAAR,EAAA,SACAU,EAAA,QAAA;AAAA,IAA8B,GAGlCM,IAAAC,EAAA,MAAA;AACI,cAAAT,EAAA,OAAA;AAAA,QAAyB,KAAAR,EAAA;AAEjB,iBAAAM,EAAA,QAAA;AAAA,QAAiB,KAAAN,EAAA;AAEjB,iBAAAM,EAAA,YAAA;AAAA,QAAqB;AAErB,iBAAAA,EAAA,MAAA;AAAA,MAAe;AAAA,IACvB,CAAA,GAGJY,IAAAD,EAAA,MAAAJ,EAAA,aAAA,SAAAP,EAAA,MAAA,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{country.BPrh4fXO.js → country.DyrDj95W.js}

@@ -1,6 +1,6 @@
 import { defineComponent as _, toRefs as p, ref as y, watch as d, inject as f } from "vue";
 import { d as v, B as C } from "./typography.Bq-EGj9y.js";
-import { B as o, a as b, u as h } from "./country.types.C0Q_hhgJ.js";
+import { B as o, a as b, u as h } from "./country.types.DaVCMxk-.js";
 import { u as L } from "./index.B6WW_F-J.js";
 import { S as N } from "./summary-grid.keys.Xx-W5a2w.js";
 import { u as B, a as O } from "./use-country-phon-code.Bui3zD6W.js";
@@ -66,4 +66,4 @@ const Y = M.exports;
 export {
   Y as c
 };
-//# sourceMappingURL=country.BPrh4fXO.js.map
+//# sourceMappingURL=country.DyrDj95W.js.map

package/dist/chunks/{country.BPrh4fXO.js.map → country.DyrDj95W.js.map}

@@ -1 +1 @@
-{"version":3,"file":"country.BPrh4fXO.js","sources":["../../src/components/country/country.vue"],"sourcesContent":["<template>\n    <div class=\"b-country\">\n        <div class=\"b-country__label\">\n            <span v-if=\"isSummaryGridLayout\">{{ countryLabel }}</span>\n            <bento-typography v-else el=\"span\">{{ countryLabel }}</bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { inject, ref, toRefs, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryCapital, useCountryName, useCountryPhoneCode } from './composables';\n    import { BentoCountryCode, type BentoCountryProps, BentoCountryVariant } from './country.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { type BentoSummaryGridLayout } from '@/components/summary-grid';\n    import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  code: { default: BentoCountryCode.UNKNOWN },\n  label: { default: undefined },\n  variant: { default: BentoCountryVariant.NAME }\n});\n\n    const { code, variant, label: customLabel } = toRefs(props);\n    const { locale } = useI18n(undefined, true);\n    const countryName = useCountryName(code, locale);\n    const countryLabel = ref('');\n\n    const getLabel = () => {\n        switch (variant.value) {\n            case BentoCountryVariant.ISO:\n                return code.value;\n            case BentoCountryVariant.PHONE_CODE:\n                return `${code.value} (${useCountryPhoneCode(code).value})`;\n            case BentoCountryVariant.CAPITAL:\n                // TODO: do we need an API OR get a longer translations list???\n                // Need to be able TRANSLATE as well as map...\n                return `${useCountryCapital(code, locale).value} (${countryName.value})`;\n            case BentoCountryVariant.CUSTOM:\n                return customLabel.value;\n            case BentoCountryVariant.NAME:\n            default:\n                return countryName.value;\n        }\n    };\n\n    // Update label if variant prop changes\n    watch(\n        [variant, locale, code],\n        () => {\n            countryLabel.value = getLabel();\n        },\n        { immediate: true }\n    );\n\n    if (variant.value === 'custom' || props.label) {\n        deprecate(\n            'BentoCountry \"custom\" variant and \"label\" prop',\n            'Use any of the other BentoCountry variants instead OR BentoTypography component for custom text',\n            '2.0.0'\n        );\n    }\n\n    /* == Summary-grid styles == */\n    const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        () => ({\n            isSummaryGridLayout: false,\n        })\n    );\n\n    const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A component to display a country's label.\n     * The label comes in four variates: iso code, country name, phone number code or capital city.\n     *\n     * @usage\n     * import { BentoCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCountry },\n     *     template: `\n     *          <bento-country :code=\"BentoCountryCode.NL\" />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-country',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./country.scss\" />\n"],"names":["__default__","code","variant","customLabel","toRefs","props","locale","useI18n","countryName","useCountryName","countryLabel","ref","getLabel","BentoCountryVariant","useCountryPhoneCode","useCountryCapital","watch","deprecate","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout"],"mappings":";;;;;;;;AA2FI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBApEA,EAAA,MAAAC,GAAA,SAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAC,CAAA,GACA,EAAA,QAAAC,EAAA,IAAAC,EAAA,QAAA,EAAA,GACAC,IAAAC,EAAAR,GAAAK,CAAA,GACAI,IAAAC,EAAA,EAAA,GAEAC,IAAA,MAAA;AACI,cAAAV,EAAA,OAAA;AAAA,QAAuB,KAAAW,EAAA;AAEf,iBAAAZ,EAAA;AAAA,QAAY,KAAAY,EAAA;AAEZ,iBAAA,GAAAZ,EAAA,KAAA,KAAAa,EAAAb,CAAA,EAAA,KAAA;AAAA,QAAwD,KAAAY,EAAA;AAIxD,iBAAA,GAAAE,EAAAd,GAAAK,CAAA,EAAA,KAAA,KAAAE,EAAA,KAAA;AAAA,QAAqE,KAAAK,EAAA;AAErE,iBAAAV,EAAA;AAAA,QAAmB,KAAAU,EAAA;AAAA,QACE;AAErB,iBAAAL,EAAA;AAAA,MAAmB;AAAA,IAC3B;AAIJ,IAAAQ;AAAA,MAAA,CAAAd,GAAAI,GAAAL,CAAA;AAAA,MAC0B,MAAA;AAElB,QAAAS,EAAA,QAAAE,EAAA;AAAA,MAA8B;AAAA,MAClC,EAAA,WAAA,GAAA;AAAA,IACkB,IAGtBV,EAAA,UAAA,YAAAG,EAAA,UACIY;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;AAKR,UAAAC,IAAAC;AAAA,MAAmEC;AAAA,MAC/D,OAAA;AAAA,QACO,qBAAA;AAAA,MACkB;AAAA,IACzB,GAGJ,EAAA,qBAAAC,EAAA,IAAAH,EAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"country.DyrDj95W.js","sources":["../../src/components/country/country.vue"],"sourcesContent":["<template>\n    <div class=\"b-country\">\n        <div class=\"b-country__label\">\n            <span v-if=\"isSummaryGridLayout\">{{ countryLabel }}</span>\n            <bento-typography v-else el=\"span\">{{ countryLabel }}</bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { inject, ref, toRefs, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryCapital, useCountryName, useCountryPhoneCode } from './composables';\n    import { BentoCountryCode, type BentoCountryProps, BentoCountryVariant } from './country.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { type BentoSummaryGridLayout } from '@/components/summary-grid';\n    import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  code: { default: BentoCountryCode.UNKNOWN },\n  label: { default: undefined },\n  variant: { default: BentoCountryVariant.NAME }\n});\n\n    const { code, variant, label: customLabel } = toRefs(props);\n    const { locale } = useI18n(undefined, true);\n    const countryName = useCountryName(code, locale);\n    const countryLabel = ref('');\n\n    const getLabel = () => {\n        switch (variant.value) {\n            case BentoCountryVariant.ISO:\n                return code.value;\n            case BentoCountryVariant.PHONE_CODE:\n                return `${code.value} (${useCountryPhoneCode(code).value})`;\n            case BentoCountryVariant.CAPITAL:\n                // TODO: do we need an API OR get a longer translations list???\n                // Need to be able TRANSLATE as well as map...\n                return `${useCountryCapital(code, locale).value} (${countryName.value})`;\n            case BentoCountryVariant.CUSTOM:\n                return customLabel.value;\n            case BentoCountryVariant.NAME:\n            default:\n                return countryName.value;\n        }\n    };\n\n    // Update label if variant prop changes\n    watch(\n        [variant, locale, code],\n        () => {\n            countryLabel.value = getLabel();\n        },\n        { immediate: true }\n    );\n\n    if (variant.value === 'custom' || props.label) {\n        deprecate(\n            'BentoCountry \"custom\" variant and \"label\" prop',\n            'Use any of the other BentoCountry variants instead OR BentoTypography component for custom text',\n            '2.0.0'\n        );\n    }\n\n    /* == Summary-grid styles == */\n    const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        () => ({\n            isSummaryGridLayout: false,\n        })\n    );\n\n    const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A component to display a country's label.\n     * The label comes in four variates: iso code, country name, phone number code or capital city.\n     *\n     * @usage\n     * import { BentoCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCountry },\n     *     template: `\n     *          <bento-country :code=\"BentoCountryCode.NL\" />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-country',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./country.scss\" />\n"],"names":["__default__","code","variant","customLabel","toRefs","props","locale","useI18n","countryName","useCountryName","countryLabel","ref","getLabel","BentoCountryVariant","useCountryPhoneCode","useCountryCapital","watch","deprecate","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout"],"mappings":";;;;;;;;AA2FI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBApEA,EAAA,MAAAC,GAAA,SAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAC,CAAA,GACA,EAAA,QAAAC,EAAA,IAAAC,EAAA,QAAA,EAAA,GACAC,IAAAC,EAAAR,GAAAK,CAAA,GACAI,IAAAC,EAAA,EAAA,GAEAC,IAAA,MAAA;AACI,cAAAV,EAAA,OAAA;AAAA,QAAuB,KAAAW,EAAA;AAEf,iBAAAZ,EAAA;AAAA,QAAY,KAAAY,EAAA;AAEZ,iBAAA,GAAAZ,EAAA,KAAA,KAAAa,EAAAb,CAAA,EAAA,KAAA;AAAA,QAAwD,KAAAY,EAAA;AAIxD,iBAAA,GAAAE,EAAAd,GAAAK,CAAA,EAAA,KAAA,KAAAE,EAAA,KAAA;AAAA,QAAqE,KAAAK,EAAA;AAErE,iBAAAV,EAAA;AAAA,QAAmB,KAAAU,EAAA;AAAA,QACE;AAErB,iBAAAL,EAAA;AAAA,MAAmB;AAAA,IAC3B;AAIJ,IAAAQ;AAAA,MAAA,CAAAd,GAAAI,GAAAL,CAAA;AAAA,MAC0B,MAAA;AAElB,QAAAS,EAAA,QAAAE,EAAA;AAAA,MAA8B;AAAA,MAClC,EAAA,WAAA,GAAA;AAAA,IACkB,IAGtBV,EAAA,UAAA,YAAAG,EAAA,UACIY;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;AAKR,UAAAC,IAAAC;AAAA,MAAmEC;AAAA,MAC/D,OAAA;AAAA,QACO,qBAAA;AAAA,MACkB;AAAA,IACzB,GAGJ,EAAA,qBAAAC,EAAA,IAAAH,EAAA;;;;;;;;;;;;;;;;"}