@adyen/bento-vue2 1.25.0 → 1.26.0

package/dist/chunks/{index.9536a077.js → index.7eefc59c.js}

@@ -1,8 +1,8 @@
 import { ref as o, computed as n, defineComponent as c, toRefs as _ } from "vue";
-import { B as u } from "./index.d97166c6.js";
+import { B as u } from "./index.dd30e538.js";
 import "./index.4c062058.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/index14.css";
+import "../assets/index5.css";
 const d = (t) => {
   const a = o(t);
   return n(() => a.value ? a.value.trim().charAt(0).toUpperCase() : null);
@@ -46,4 +46,4 @@ export {
   r as a,
   d as u
 };
-//# sourceMappingURL=index.9536a077.js.map
+//# sourceMappingURL=index.7eefc59c.js.map

package/dist/chunks/{index.9536a077.js.map → index.7eefc59c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.9536a077.js","sources":["../../src/composables/initials.ts","../../src/components/avatar-image/avatar-image.types.ts","../../src/components/avatar-image/avatar-image.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"Profile picture\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Avatar color. Defaults to yellow.\n             */\n            color?: BentoAvatarImageColor;\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src?: string;\n\n            /**\n             * Name of the user that will be used to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username?: string;\n\n            /**\n             * Variants supported for small and large.\n             * Default - large\n             */\n            variant?: BentoAvatarImageVariant;\n        }>(),\n        {\n            color: BentoAvatarImageColor.YELLOW,\n            src: null,\n            username: null,\n            variant: BentoAvatarImageVariant.LARGE,\n        }\n    );\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'avatar-image',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__","toRefs","props","initials","conditionalClasses"],"mappings":";;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACyDR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;iBAZA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,OAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,OAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.7eefc59c.js","sources":["../../src/composables/initials.ts","../../src/components/avatar-image/avatar-image.types.ts","../../src/components/avatar-image/avatar-image.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"Profile picture\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Avatar color. Defaults to yellow.\n             */\n            color?: BentoAvatarImageColor;\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src?: string;\n\n            /**\n             * Name of the user that will be used to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username?: string;\n\n            /**\n             * Variants supported for small and large.\n             * Default - large\n             */\n            variant?: BentoAvatarImageVariant;\n        }>(),\n        {\n            color: BentoAvatarImageColor.YELLOW,\n            src: null,\n            username: null,\n            variant: BentoAvatarImageVariant.LARGE,\n        }\n    );\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'avatar-image',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__","toRefs","props","initials","conditionalClasses"],"mappings":";;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACyDR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;iBAZA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,OAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,OAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{index.939dd5cf.js → index.885d05a9.js}

@@ -1,6 +1,6 @@
 import { defineComponent as t, inject as r, ref as i, computed as o } from "vue";
 import { n as a } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/index16.css";
+import "../assets/index14.css";
 const c = Symbol("divider inverse style injection key"), d = {}, l = /* @__PURE__ */ t({
   ...d,
   __name: "divider",
@@ -29,4 +29,4 @@ export {
   C as B,
   c as D
 };
-//# sourceMappingURL=index.939dd5cf.js.map
+//# sourceMappingURL=index.885d05a9.js.map

package/dist/chunks/{index.939dd5cf.js.map → index.885d05a9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.939dd5cf.js","sources":["../../src/components/divider/divider.keys.ts","../../src/components/divider/divider.vue"],"sourcesContent":["export const DIVIDER_INVERSE_INJECTION_KEY = Symbol('divider inverse style injection key');\n","<template>\n    <div class=\"b-divider\">\n        <hr class=\"b-divider__horizontal-rule\" :class=\"conditionalClasses\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref } from 'vue';\n    import { DIVIDER_INVERSE_INJECTION_KEY } from './divider.keys';\n\n    const isInverseColorSet = inject(DIVIDER_INVERSE_INJECTION_KEY, ref(false));\n\n    const conditionalClasses = computed(() => ({\n        'b-divider--inverse': isInverseColorSet.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Divider component is a thin line that helps separate content and group them visually into sections.\n     *\n     * @example\n     * import { BentoDivider } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDivider },\n     *     template: `<bento-divider />`\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./divider.scss\" />\n"],"names":["DIVIDER_INVERSE_INJECTION_KEY","__default__","isInverseColorSet","inject","ref","conditionalClasses","computed"],"mappings":";;;AAAa,MAAAA,IAAA,OAAA,qCAAA,GC8BTC,IAAA,CAAA;;;;AApBA,UAAAC,IAAAC,EAAAH,GAAAI,EAAA,EAAA,CAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,sBAAAJ,EAAA;AAAA,IACC,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.885d05a9.js","sources":["../../src/components/divider/divider.keys.ts","../../src/components/divider/divider.vue"],"sourcesContent":["export const DIVIDER_INVERSE_INJECTION_KEY = Symbol('divider inverse style injection key');\n","<template>\n    <div class=\"b-divider\">\n        <hr class=\"b-divider__horizontal-rule\" :class=\"conditionalClasses\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref } from 'vue';\n    import { DIVIDER_INVERSE_INJECTION_KEY } from './divider.keys';\n\n    const isInverseColorSet = inject(DIVIDER_INVERSE_INJECTION_KEY, ref(false));\n\n    const conditionalClasses = computed(() => ({\n        'b-divider--inverse': isInverseColorSet.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Divider component is a thin line that helps separate content and group them visually into sections.\n     *\n     * @example\n     * import { BentoDivider } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDivider },\n     *     template: `<bento-divider />`\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./divider.scss\" />\n"],"names":["DIVIDER_INVERSE_INJECTION_KEY","__default__","isInverseColorSet","inject","ref","conditionalClasses","computed"],"mappings":";;;AAAa,MAAAA,IAAA,OAAA,qCAAA,GC8BTC,IAAA,CAAA;;;;AApBA,UAAAC,IAAAC,EAAAH,GAAAI,EAAA,EAAA,CAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,sBAAAJ,EAAA;AAAA,IACC,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{index.4b6211c7.js → index.8b8c3b16.js}

@@ -1,25 +1,25 @@
 import { reactive as J, defineComponent as ke, ref as M, computed as k, onMounted as We, toRaw as qe, toRef as fe, watch as Ve } from "vue";
-import { a as He } from "./index.ec632d95.js";
-import { B as Ee } from "./index.d97166c6.js";
+import { a as He } from "./index.15b088b9.js";
+import { B as Ee } from "./index.dd30e538.js";
+import { c as je, B as Ke } from "./dropdown-default-textbox.54ca1b18.js";
 import { g as V } from "./unique-id.a2a2b458.js";
 import { u as re } from "./i18n.eb5b985b.js";
-import { t as se, f as $ } from "./index.9e40ffeb.js";
+import { t as se, f as $ } from "./index.b21197ca.js";
 import { r as Q, t as j, e as S, d as oe, f as ie } from "./index.f55fdc32.js";
-import { f as pe, v as je, D as E } from "./date-input.9186a0bf.js";
-import { u as Ke } from "./use-form-layout-loading.d03e5d48.js";
+import { f as pe, v as ze, D as E } from "./date-input.9186a0bf.js";
+import { u as Je } from "./use-form-layout-loading.d03e5d48.js";
 import "./index.4c062058.js";
-import { BentoInputField as ze } from "../input-field.js";
-import { B as Je } from "./dropdown.7d4a8dfc.js";
-import { BentoSegmentedControl as Qe } from "../segmented-control.js";
+import { BentoInputField as Qe } from "../input-field.js";
+import { B as Xe } from "./dropdown.10c034aa.js";
+import { BentoSegmentedControl as Ze } from "../segmented-control.js";
 import { d as z } from "./debounce.b5ef6acf.js";
-import { u as Xe } from "./use-has-slot.fbeb19ec.js";
-import { s as H, c as ge, i as B, d as Ze, e as ve, f as et, g as _e, h as tt, j as at, C as F, u as nt } from "./calendar.7d3e2db0.js";
+import { u as et } from "./use-has-slot.fbeb19ec.js";
+import { s as H, c as ge, i as B, d as tt, e as ve, f as at, g as _e, h as nt, j as rt, C as F, u as st } from "./calendar.640b8d25.js";
 import { e as O } from "./index.fdf12170.js";
 import { e as Te } from "./index.d80206ed.js";
 import { n as Se } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { c as rt, B as st } from "./dropdown-default-textbox.a1c0c0fb.js";
-import { E as ot, F as it } from "./error-message.db315e68.js";
-import "../assets/index2.css";
+import { E as ot, F as it } from "./error-message.31ec12b7.js";
+import "../assets/index13.css";
 function Re(t, e) {
   Q(2, arguments);
   var n = j(t), d = j(e);
@@ -51,13 +51,13 @@ const ct = ({
       D = H(l.earliest);
     else {
       const f = ge(D, { weekStartsOn: t });
-      B(D, f) || (D = H(Ze(ve(D, { weekStartsOn: t }), 1)));
+      B(D, f) || (D = H(tt(ve(D, { weekStartsOn: t }), 1)));
     }
     if (l.latest)
       r = O(l.latest);
     else {
       const f = ve(r, { weekStartsOn: t });
-      B(r, f) || (r = O(et(ge(r, { weekStartsOn: t }), 1)));
+      B(r, f) || (r = O(at(ge(r, { weekStartsOn: t }), 1)));
     }
   }
   if ((l == null ? void 0 : l.type) === "monthly") {
@@ -65,13 +65,13 @@ const ct = ({
       D = H(l.earliest);
     else {
       const f = _e(D);
-      B(D, f) || (D = _e(tt(D, 1)));
+      B(D, f) || (D = _e(nt(D, 1)));
     }
     if (l.latest)
       r = O(l.latest);
     else {
       const f = Te(r);
-      B(r, f) || (r = Te(at(r, 1)));
+      B(r, f) || (r = Te(rt(r, 1)));
     }
   }
   return { min: D, max: r };
@@ -121,9 +121,9 @@ const mt = /[\d]/, ft = /^\d{2}$/, pt = /^\d{2}:\d{2}$/, gt = (t) => {
   i18n: { messages: vt },
   name: "date-range-picker-calendar",
   components: {
-    BentoDropdown: Je,
-    BentoInputField: ze,
-    BentoSegmentedControl: Qe,
+    BentoDropdown: Xe,
+    BentoInputField: Qe,
+    BentoSegmentedControl: Ze,
     BentoTypography: Ee,
     Calendar: F
   },
@@ -229,7 +229,7 @@ const mt = /[\d]/, ft = /^\d{2}$/, pt = /^\d{2}:\d{2}$/, gt = (t) => {
       adjustEndDateInputForWeekly: _,
       adjustStartDateInputForMonthly: X,
       adjustEndDateInputForMonthly: Z
-    } = nt(t.firstDayOfWeek), { savedRanges: R, saveRange: le, resetSavedRanges: ee } = Dt(), C = () => {
+    } = st(t.firstDayOfWeek), { savedRanges: R, saveRange: le, resetSavedRanges: ee } = Dt(), C = () => {
       t != null && t.quickSelectRanges && (f.value = ne);
     }, T = (a) => a ? $(a, E.NUMERIC_DATE_YEAR_FIRST, {
       locale: D[d.value.substring(0, 2)] || S
@@ -340,7 +340,7 @@ const mt = /[\d]/, ft = /^\d{2}$/, pt = /^\d{2}:\d{2}$/, gt = (t) => {
     }, Ie), Fe = (a) => {
       C(), o.endDate = pe(a), he(o.endDate);
     }, Pe = (a) => {
-      je(a);
+      ze(a);
     }, Ae = z((a) => {
       if (te(a)) {
         c.value = !1, r.startDate = U(r.startDate, a);
@@ -439,7 +439,7 @@ const mt = /[\d]/, ft = /^\d{2}$/, pt = /^\d{2}:\d{2}$/, gt = (t) => {
       quickSelectRangeDefaultItems: G,
       formInputWrapperConditionalClasses: Y,
       // Methods
-      hasSlot: Xe(n),
+      hasSlot: et(n),
       t: l,
       // Events
       onDateInput: Me,
@@ -527,11 +527,11 @@ const bt = {
     BentoTypography: Ee,
     BentoPopover: He,
     DateRangePickerCalendar: b,
-    DropdownInputDefault: rt,
+    DropdownInputDefault: je,
     ErrorMessage: ot,
     FieldLabel: it
   },
-  directives: { BentoClickOutsideDirective: st },
+  directives: { BentoClickOutsideDirective: Ke },
   props: {
     /**
      * Allows user to enter time values in the form
@@ -618,7 +618,7 @@ const bt = {
   setup(t, { emit: e }) {
     const { locale: n, t: d } = re(), l = { de: oe, enUS: S, fr: ie }, D = V("bento-date-range-picker-container"), r = V("bento-date-range-picker-label"), f = V("bento-date-range-picker-description"), Y = V("bento-date-range-picker-error"), G = V("bento-date-range-picker-date-error"), y = k(
       () => t.label || d("dateRangePicker", { name: D })
-    ), g = M(!1), P = M(null), u = M(!1), { isReadOnly: A } = Ke(fe(t, "readonly"));
+    ), g = M(!1), P = M(null), u = M(!1), { isReadOnly: A } = Je(fe(t, "readonly"));
     Ve(
       () => t.disabled,
       () => {
@@ -709,4 +709,4 @@ export {
   L as a,
   Re as i
 };
-//# sourceMappingURL=index.4b6211c7.js.map
+//# sourceMappingURL=index.8b8c3b16.js.map