@adyen/bento-vue3 1.89.2 → 1.91.0

package/dist/chunks/{checkbox.C6ATh8f5.js.map → checkbox.BPrymcRl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox.C6ATh8f5.js","sources":["../../../vue2/src/components/checkbox/checkbox.types.ts","../../../vue2/src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTagProps } from '../tag/tag.types';\nimport {\n    CheckboxInputState as BentoCheckboxState,\n    type CheckboxInputType as BentoCheckboxType,\n    type MultiCheckboxInputType as BentoMultiCheckboxType,\n} from '@/internal/checkbox-input/checkbox-input.types';\n\nexport { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType };\n\nexport enum BentoCheckboxEvent {\n    UPDATE = 'update:model-value',\n    INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = BentoTagProps;\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\" v-bind=\"styleAttrs\" :aria-hidden=\"getAriaHidden($attrs)\">\n        <checkbox-input\n            v-bind=\"$attrs\"\n            ref=\"input\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"ariaDescribedBy\"\n            :aria-required=\"required\"\n            :disabled=\"disabled\"\n            :has-error=\"shouldShowError\"\n            :indeterminate=\"isIndeterminate\"\n            :value=\"value\"\n            :model-value=\"modelValue\"\n            :readonly=\"readonly\"\n            @update:model-value=\"onChange\"\n        />\n        <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n            <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n                <span><slot /></span>\n                <bento-typography v-if=\"optional\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >({{ t('optional') }})</bento-typography\n                >\n                <bento-typography v-else-if=\"required\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >*</bento-typography\n                >\n                <bento-tag v-if=\"tag\" class=\"b-checkbox__label-tag\" v-bind=\"tag\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                class=\"b-checkbox__description\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n            <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n                <slot name=\"content\"></slot>\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import {\n        computed,\n        defineComponent,\n        type HTMLAttributes,\n        onMounted,\n        type PropType,\n        ref,\n        toRefs,\n        useAttrs,\n    } from 'vue';\n    import {\n        BentoCheckboxEvent,\n        BentoCheckboxState,\n        type BentoCheckboxTag,\n        type BentoCheckboxType,\n        type BentoMultiCheckboxType,\n    } from './checkbox.types';\n    import { BentoTypography } from '@/components/typography';\n    import { CheckboxInput } from '@/components/internal/checkbox-input';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { BentoTag } from '@/components/tag';\n    import { type BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Checkboxes are used to make a binary choice about an option.\n     * The label tag area is also clickable.\n     *\n     * @usage\n     * import { BentoCheckbox } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckbox },\n     *     template: `\n     *         <bento-checkbox>\n     *             Label text\n     *             <template #description>Sub label text</template>\n     *         </bento-checkbox>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-checkbox',\n        i18n: { messages },\n        components: {\n            BentoTag,\n            BentoTypography,\n            CheckboxInput,\n            ErrorMessage,\n        },\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Setting this property to true will disable the checkbox in your form.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Renders the checkbox in an error state with an error message.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Setting this property to true will show the checkbox in error state.\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * The :indeterminate CSS pseudo-class represents any form element\n             * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n             * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n             * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n             * This property lets you control the input.indeterminate native property.\n             */\n            indeterminate: { type: Boolean, default: false },\n\n            /**\n             * When handling a single checkbox with a singular state, use a boolean.\n             *\n             * When handling multiple checkboxes, use an array of keys.\n             * These keys exist as a set \"value\" prop for each checkbox.\n             */\n            modelValue: {\n                type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n                default: false,\n            },\n\n            /**\n             * Highlights the checkbox is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the checkbox to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Highlights the checkbox is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Sets the properties of the BentoTag component that is placed next to the label.\n             * {@see BentoTag}\n             */\n            tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined },\n\n            /**\n             * The value of the component. The DOM API casts this to a string.\n             * The browser uses \"on\" as the default value.\n             *\n             * In the case of multiple checkboxes this value is used as a unique key.\n             */\n            value: { type: [String, Number], default: null },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { attrs, emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const descriptionId = generateUid('description');\n            const errorId = generateUid('error');\n            const hasSlot = useHasSlot(slots);\n\n            const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n            const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n            const isChecked = computed(() => {\n                if (!isCheckboxGroup.value) {\n                    return modelValue.value as boolean;\n                }\n\n                return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n            });\n            const isIndeterminate = computed(() => indeterminate.value);\n\n            const shouldShowError = computed(\n                () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n            );\n            const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n            // Content slot logic\n            const hasContentSlot = computed(() => hasSlot('content'));\n            const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n            const contentSlotAvailable = computed(\n                () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n            );\n\n            // ARIA fields\n            const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n                () =>\n                    `${shouldShowErrorMessage.value ? errorId : ''} ${\n                        defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n                    }`.trim() || null\n            );\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const checkboxTranslation = ref();\n            // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3\n            onMounted(() => {\n                checkboxTranslation.value = t('checkbox');\n            });\n            // Only add aria-label if no label slot is present\n            const computedAriaLabel = computed(\n                () =>\n                    useAriaLabel({\n                        ariaLabel: ariaLabelAttribute.value as string,\n                        // TODO: take this line away when the aria-label props is removed\n                        label: ariaLabel,\n                        defaultFallback: hasSlot('default')\n                            ? (getSlotText(slots)('default') as string)\n                            : checkboxTranslation.value,\n                    }).value\n            );\n            const getAriaHidden = (attributes: HTMLAttributes) => attributes?.['aria-hidden'];\n\n            const styleAttrs = computed(() => {\n                const { style, class: cls } = useAttrs();\n                return {\n                    class: cls as HTMLAttributes['class'],\n                    style: style as HTMLAttributes['style'],\n                };\n            });\n\n            const conditionalClass = computed(() => ({\n                [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n                [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n            }));\n\n            const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => {\n                if (disabled.value) {\n                    return;\n                }\n                emit(BentoCheckboxEvent.UPDATE, newValue);\n                emit(BentoCheckboxEvent.INPUT, newValue);\n            };\n\n            return {\n                // Values\n                descriptionId,\n                errorId,\n                ariaDescribedBy,\n                computedAriaLabel,\n                conditionalClass,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isIndeterminate,\n                shouldShowError,\n                shouldShowErrorMessage,\n                contentSlotAvailable,\n                hasContentSlot,\n                styleAttrs,\n\n                // Methods\n                hasSlot,\n                onChange,\n                getAriaHidden,\n\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox.scss\" />\n"],"names":["BentoCheckboxEvent","BentoCheckboxEvent2","_sfc_main","defineComponent","messages","BentoTag","BentoTypography","CheckboxInput","ErrorMessage","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","checkboxTranslation","onMounted","computedAriaLabel","useAriaLabel","getAriaHidden","attributes","styleAttrs","style","cls","useAttrs","conditionalClass","CheckboxInputState","newValue","_hoisted_1","_ctx","$attrs","createVNode","_component_checkbox_input","mergeProps","required","openBlock","createElementBlock","_hoisted_2","createBlock","_component_bento_typography","createElementVNode","createTextVNode","toDisplayString","createCommentVNode","_component_bento_tag","tag","renderSlot","_component_error_message"],"mappings":"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"}
+{"version":3,"file":"checkbox.BPrymcRl.js","sources":["../../../vue2/src/components/checkbox/checkbox.types.ts","../../../vue2/src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTagProps } from '../tag/tag.types';\nimport {\n    CheckboxInputState as BentoCheckboxState,\n    type CheckboxInputType as BentoCheckboxType,\n    type MultiCheckboxInputType as BentoMultiCheckboxType,\n} from '@/internal/checkbox-input/checkbox-input.types';\n\nexport { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType };\n\nexport enum BentoCheckboxEvent {\n    UPDATE = 'update:model-value',\n    INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = BentoTagProps;\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\" v-bind=\"styleAttrs\" :aria-hidden=\"getAriaHidden($attrs)\">\n        <checkbox-input\n            v-bind=\"$attrs\"\n            ref=\"input\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"ariaDescribedBy\"\n            :aria-required=\"required\"\n            :disabled=\"disabled\"\n            :has-error=\"shouldShowError\"\n            :indeterminate=\"isIndeterminate\"\n            :value=\"value\"\n            :model-value=\"modelValue\"\n            :readonly=\"readonly\"\n            @update:model-value=\"onChange\"\n        />\n        <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n            <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n                <span><slot /></span>\n                <bento-typography v-if=\"optional\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >({{ t('optional') }})</bento-typography\n                >\n                <bento-typography v-else-if=\"required\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >*</bento-typography\n                >\n                <bento-tag v-if=\"tag\" class=\"b-checkbox__label-tag\" v-bind=\"tag\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                class=\"b-checkbox__description\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n            <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n                <slot name=\"content\"></slot>\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import {\n        computed,\n        defineComponent,\n        type HTMLAttributes,\n        onMounted,\n        type PropType,\n        ref,\n        toRefs,\n        useAttrs,\n    } from 'vue';\n    import {\n        BentoCheckboxEvent,\n        BentoCheckboxState,\n        type BentoCheckboxTag,\n        type BentoCheckboxType,\n        type BentoMultiCheckboxType,\n    } from './checkbox.types';\n    import { BentoTypography } from '@/components/typography';\n    import { CheckboxInput } from '@/components/internal/checkbox-input';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { BentoTag } from '@/components/tag';\n    import { type BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Checkboxes are used to make a binary choice about an option.\n     * The label tag area is also clickable.\n     *\n     * @usage\n     * import { BentoCheckbox } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckbox },\n     *     template: `\n     *         <bento-checkbox>\n     *             Label text\n     *             <template #description>Sub label text</template>\n     *         </bento-checkbox>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-checkbox',\n        i18n: { messages },\n        components: {\n            BentoTag,\n            BentoTypography,\n            CheckboxInput,\n            ErrorMessage,\n        },\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Setting this property to true will disable the checkbox in your form.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Renders the checkbox in an error state with an error message.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Setting this property to true will show the checkbox in error state.\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * The :indeterminate CSS pseudo-class represents any form element\n             * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n             * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n             * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n             * This property lets you control the input.indeterminate native property.\n             */\n            indeterminate: { type: Boolean, default: false },\n\n            /**\n             * When handling a single checkbox with a singular state, use a boolean.\n             *\n             * When handling multiple checkboxes, use an array of keys.\n             * These keys exist as a set \"value\" prop for each checkbox.\n             */\n            modelValue: {\n                type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n                default: false,\n            },\n\n            /**\n             * Highlights the checkbox is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the checkbox to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Highlights the checkbox is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Sets the properties of the BentoTag component that is placed next to the label.\n             * {@see BentoTag}\n             */\n            tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined },\n\n            /**\n             * The value of the component. The DOM API casts this to a string.\n             * The browser uses \"on\" as the default value.\n             *\n             * In the case of multiple checkboxes this value is used as a unique key.\n             */\n            value: { type: [String, Number], default: null },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { attrs, emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const descriptionId = generateUid('description');\n            const errorId = generateUid('error');\n            const hasSlot = useHasSlot(slots);\n\n            const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n            const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n            const isChecked = computed(() => {\n                if (!isCheckboxGroup.value) {\n                    return modelValue.value as boolean;\n                }\n\n                return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n            });\n            const isIndeterminate = computed(() => indeterminate.value);\n\n            const shouldShowError = computed(\n                () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n            );\n            const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n            // Content slot logic\n            const hasContentSlot = computed(() => hasSlot('content'));\n            const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n            const contentSlotAvailable = computed(\n                () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n            );\n\n            // ARIA fields\n            const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n                () =>\n                    `${shouldShowErrorMessage.value ? errorId : ''} ${\n                        defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n                    }`.trim() || null\n            );\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const checkboxTranslation = ref();\n            // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3\n            onMounted(() => {\n                checkboxTranslation.value = t('checkbox');\n            });\n            // Only add aria-label if no label slot is present\n            const computedAriaLabel = computed(\n                () =>\n                    useAriaLabel({\n                        ariaLabel: ariaLabelAttribute.value as string,\n                        // TODO: take this line away when the aria-label props is removed\n                        label: ariaLabel,\n                        defaultFallback: hasSlot('default')\n                            ? (getSlotText(slots)('default') as string)\n                            : checkboxTranslation.value,\n                    }).value\n            );\n            const getAriaHidden = (attributes: HTMLAttributes) => attributes?.['aria-hidden'];\n\n            const styleAttrs = computed(() => {\n                const { style, class: cls } = useAttrs();\n                return {\n                    class: cls as HTMLAttributes['class'],\n                    style: style as HTMLAttributes['style'],\n                };\n            });\n\n            const conditionalClass = computed(() => ({\n                [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n                [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n            }));\n\n            const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => {\n                if (disabled.value) {\n                    return;\n                }\n                emit(BentoCheckboxEvent.UPDATE, newValue);\n                emit(BentoCheckboxEvent.INPUT, newValue);\n            };\n\n            return {\n                // Values\n                descriptionId,\n                errorId,\n                ariaDescribedBy,\n                computedAriaLabel,\n                conditionalClass,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isIndeterminate,\n                shouldShowError,\n                shouldShowErrorMessage,\n                contentSlotAvailable,\n                hasContentSlot,\n                styleAttrs,\n\n                // Methods\n                hasSlot,\n                onChange,\n                getAriaHidden,\n\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox.scss\" />\n"],"names":["BentoCheckboxEvent","BentoCheckboxEvent2","_sfc_main","defineComponent","messages","BentoTag","BentoTypography","CheckboxInput","ErrorMessage","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","checkboxTranslation","onMounted","computedAriaLabel","useAriaLabel","getAriaHidden","attributes","styleAttrs","style","cls","useAttrs","conditionalClass","CheckboxInputState","newValue","_hoisted_1","_ctx","$attrs","createVNode","_component_checkbox_input","mergeProps","required","openBlock","createElementBlock","_hoisted_2","createBlock","_component_bento_typography","createElementVNode","createTextVNode","toDisplayString","createCommentVNode","_component_bento_tag","tag","renderSlot","_component_error_message"],"mappings":"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"}

package/dist/chunks/chip.DFldnqfz.js

@@ -0,0 +1,72 @@
+import { defineComponent as v, computed as t, openBlock as _, createBlock as b, unref as o, normalizeClass as h, withCtx as a, createVNode as n, createTextVNode as B, toDisplayString as y } from "vue";
+import { B as C } from "./base-button.CvHl36Ue.js";
+import { B as g } from "./typography.B3J6_tYk.js";
+import { C as R } from "./cross-small.Bjq2Gqvh.js";
+import { u as k } from "./index.B875RXHM.js";
+import { t as x } from "./truncate.DmCXQmeb.js";
+import { _ as E } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/chip.css";
+const s = {
+  "de-DE": { remove: "Entfernen" },
+  "en-GB": { remove: "Remove" },
+  "en-US": { remove: "Remove" },
+  "es-ES": { remove: "Eliminar" },
+  "es-MX": { remove: "Eliminar" },
+  "fr-FR": { remove: "Supprimer" },
+  "it-IT": { remove: "Rimuovi" },
+  "ja-JP": { remove: "削除" },
+  "pt-BR": { remove: "Retirar" },
+  "zh-CN": { remove: "移除" }
+}, I = { i18n: { messages: s } }, L = /* @__PURE__ */ v({
+  ...I,
+  __name: "chip",
+  props: {
+    label: {},
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    condensed: { type: Boolean, default: !1 },
+    characterLimit: { default: null }
+  },
+  emits: ["click"],
+  setup(i, { emit: l }) {
+    const e = i, c = l, { t: m } = k({ messages: s }), d = t(
+      () => e.characterLimit ? x(e.label, e.characterLimit) : e.label
+    ), p = t(
+      () => e.condensed ? "caption" : "body"
+    ), u = t(() => ({
+      "b-chip--condensed": e.condensed,
+      "b-chip--readonly": e.readonly && !e.disabled,
+      "b-chip--error": e.error
+    }));
+    return (f, r) => (_(), b(o(C), {
+      class: h(["b-chip", u.value]),
+      disabled: f.disabled,
+      onClick: r[0] || (r[0] = (S) => c("click"))
+    }, {
+      iconRight: a(() => [
+        n(o(R), {
+          "svg-title": o(m)("remove"),
+          class: "b-chip__icon"
+        }, null, 8, ["svg-title"])
+      ]),
+      default: a(() => [
+        n(o(g), {
+          el: "span",
+          variant: p.value,
+          class: "b-chip__text"
+        }, {
+          default: a(() => [
+            B(y(d.value), 1)
+          ]),
+          _: 1
+        }, 8, ["variant"])
+      ]),
+      _: 1
+    }, 8, ["disabled", "class"]));
+  }
+}), F = /* @__PURE__ */ E(L, [["__scopeId", "data-v-c5b0d9dd"]]);
+export {
+  F as B
+};
+//# sourceMappingURL=chip.DFldnqfz.js.map

package/dist/chunks/{chip.CdgpQyXN.js.map → chip.DFldnqfz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chip.CdgpQyXN.js","sources":["../../../vue2/src/components/chip/chip.vue"],"sourcesContent":["<template>\n    <base-button class=\"b-chip\" :disabled=\"disabled\" :class=\"conditionalClasses\" @click=\"emit('click')\">\n        <bento-typography el=\"span\" :variant=\"computedTypographyVariant\" class=\"b-chip__text\">\n            {{ computedLabel }}\n        </bento-typography>\n        <template #iconRight><cross-small-icon :svg-title=\"t('remove')\" class=\"b-chip__icon\" /></template>\n    </base-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { BaseButton } from '@/components/internal/base-button';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import CrossSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { truncate } from '@/utils/ts/truncate';\n\n    import type { BentoChipProps } from './chip.types';\n\n    import messages from './messages.json';\n    import { computed } from 'vue';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoChipProps>(), {\n        disabled: false,\n        readonly: false,\n        error: false,\n        condensed: false,\n        characterLimit: null,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits when chip is clicked\n         */\n        (e: 'click'): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const computedLabel = computed(() =>\n        props.characterLimit ? truncate(props.label, props.characterLimit) : props.label\n    );\n\n    const computedTypographyVariant = computed<`${BentoTypographyVariant}`>(() =>\n        props.condensed ? 'caption' : 'body'\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-chip--condensed': props.condensed,\n        'b-chip--readonly': props.readonly && !props.disabled,\n        'b-chip--error': props.error,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Chip is a dismissible tag-like component that can be used to display selected items, which may need to be removed by the user.\n     *\n     * @example\n     * import { BentoChip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoChip },\n     *     template: `\n     *          <bento-chip\n     *              label=\"Label\"\n     *              :character-limit=\"20\"\n     *              condensed\n     *              @click=\"removeChip()\"\n     *\n     *          />\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./chip.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","useI18n","computedLabel","computed","truncate","computedTypographyVariant","conditionalClasses"],"mappings":";;;;;;;;;;;;GA4EIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;AApDA,UAAAC,IAAAC,GAQAC,IAAAC,GAOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAEAO,IAAAC;AAAA,MAAsB,MAAAP,EAAA,iBAAAQ,EAAAR,EAAA,OAAAA,EAAA,cAAA,IAAAA,EAAA;AAAA,IACyD,GAG/ES,IAAAF;AAAA,MAAkC,MAAAP,EAAA,YAAA,YAAA;AAAA,IACA,GAGlCU,IAAAH,EAAA,OAAA;AAAA,MAA2C,qBAAAP,EAAA;AAAA,MACZ,oBAAAA,EAAA,YAAA,CAAAA,EAAA;AAAA,MACkB,iBAAAA,EAAA;AAAA,IACtB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"chip.DFldnqfz.js","sources":["../../../vue2/src/components/chip/chip.vue"],"sourcesContent":["<template>\n    <base-button class=\"b-chip\" :disabled=\"disabled\" :class=\"conditionalClasses\" @click=\"emit('click')\">\n        <bento-typography el=\"span\" :variant=\"computedTypographyVariant\" class=\"b-chip__text\">\n            {{ computedLabel }}\n        </bento-typography>\n        <template #iconRight><cross-small-icon :svg-title=\"t('remove')\" class=\"b-chip__icon\" /></template>\n    </base-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { BaseButton } from '@/components/internal/base-button';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import CrossSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { truncate } from '@/utils/ts/truncate';\n\n    import type { BentoChipProps } from './chip.types';\n\n    import messages from './messages.json';\n    import { computed } from 'vue';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoChipProps>(), {\n        disabled: false,\n        readonly: false,\n        error: false,\n        condensed: false,\n        characterLimit: null,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits when chip is clicked\n         */\n        (e: 'click'): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const computedLabel = computed(() =>\n        props.characterLimit ? truncate(props.label, props.characterLimit) : props.label\n    );\n\n    const computedTypographyVariant = computed<`${BentoTypographyVariant}`>(() =>\n        props.condensed ? 'caption' : 'body'\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-chip--condensed': props.condensed,\n        'b-chip--readonly': props.readonly && !props.disabled,\n        'b-chip--error': props.error,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Chip is a dismissible tag-like component that can be used to display selected items, which may need to be removed by the user.\n     *\n     * @example\n     * import { BentoChip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoChip },\n     *     template: `\n     *          <bento-chip\n     *              label=\"Label\"\n     *              :character-limit=\"20\"\n     *              condensed\n     *              @click=\"removeChip()\"\n     *\n     *          />\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./chip.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","useI18n","computedLabel","computed","truncate","computedTypographyVariant","conditionalClasses"],"mappings":";;;;;;;;;;;;;;;;;;;GA4EIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;AApDA,UAAAC,IAAAC,GAQAC,IAAAC,GAOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAEAO,IAAAC;AAAA,MAAsB,MAAAP,EAAA,iBAAAQ,EAAAR,EAAA,OAAAA,EAAA,cAAA,IAAAA,EAAA;AAAA,IACyD,GAG/ES,IAAAF;AAAA,MAAkC,MAAAP,EAAA,YAAA,YAAA;AAAA,IACA,GAGlCU,IAAAH,EAAA,OAAA;AAAA,MAA2C,qBAAAP,EAAA;AAAA,MACZ,oBAAAA,EAAA,YAAA,CAAAA,EAAA;AAAA,MACkB,iBAAAA,EAAA;AAAA,IACtB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{click-outside.BPylIosK.js → click-outside.B0whuTUU.js}

@@ -1,5 +1,5 @@
 import { defineComponent as i, ref as l, h as s } from "vue";
-import { o as d } from "./on-click-outside.ZUMLlxE_.js";
+import { o as d } from "./on-click-outside.BgIzQ2G1.js";
 const u = /* @__PURE__ */ i({
   name: "bento-click-outside",
   props: {
@@ -17,4 +17,4 @@ const u = /* @__PURE__ */ i({
 export {
   u as B
 };
-//# sourceMappingURL=click-outside.BPylIosK.js.map
+//# sourceMappingURL=click-outside.B0whuTUU.js.map

package/dist/chunks/{click-outside.BPylIosK.js.map → click-outside.B0whuTUU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"click-outside.BPylIosK.js","sources":["../../../vue2/src/components/click-outside/click-outside.ts"],"sourcesContent":["import { defineComponent, h, ref } from 'vue';\nimport { onClickOutside } from '@/directives/click-outside/on-click-outside';\n\nexport const BentoClickOutside = /* #__PURE__ */ defineComponent({\n    name: 'bento-click-outside',\n    props: {\n        /**\n         * Sets the HTML DOM element.\n         */\n        el: { type: String, default: 'div' },\n    },\n    emits: ['handler'],\n    setup(props, { emit, slots }) {\n        const target = ref(null);\n\n        onClickOutside(target, event => emit('handler', event));\n\n        return () => h(props.el, { ref: target }, slots.default?.());\n    },\n});\n"],"names":["BentoClickOutside","defineComponent","props","emit","slots","target","ref","onClickOutside","event","h"],"mappings":";;AAGO,MAAMA,IAAoC,gBAAAC,EAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIH,IAAI,EAAE,MAAM,QAAQ,SAAS,MAAA;AAAA,EAAM;AAAA,EAEvC,OAAO,CAAC,SAAS;AAAA,EACjB,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC1B,UAAMC,IAASC,EAAI,IAAI;AAEvB,WAAAC,EAAeF,GAAQ,CAAAG,MAASL,EAAK,WAAWK,CAAK,CAAC,GAE/C,MAAMC,EAAEP,EAAM,IAAI,EAAE,KAAKG,EAAA,GAAUD,EAAM,WAAW;AAAA,EAC/D;AACJ,CAAC;"}
+{"version":3,"file":"click-outside.B0whuTUU.js","sources":["../../../vue2/src/components/click-outside/click-outside.ts"],"sourcesContent":["import { defineComponent, h, ref } from 'vue';\nimport { onClickOutside } from '@/directives/click-outside/on-click-outside';\n\nexport const BentoClickOutside = /* #__PURE__ */ defineComponent({\n    name: 'bento-click-outside',\n    props: {\n        /**\n         * Sets the HTML DOM element.\n         */\n        el: { type: String, default: 'div' },\n    },\n    emits: ['handler'],\n    setup(props, { emit, slots }) {\n        const target = ref(null);\n\n        onClickOutside(target, event => emit('handler', event));\n\n        return () => h(props.el, { ref: target }, slots.default?.());\n    },\n});\n"],"names":["BentoClickOutside","defineComponent","props","emit","slots","target","ref","onClickOutside","event","h"],"mappings":";;AAGO,MAAMA,IAAoC,gBAAAC,EAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIH,IAAI,EAAE,MAAM,QAAQ,SAAS,MAAA;AAAA,EAAM;AAAA,EAEvC,OAAO,CAAC,SAAS;AAAA,EACjB,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC1B,UAAMC,IAASC,EAAI,IAAI;AAEvB,WAAAC,EAAeF,GAAQ,CAAAG,MAASL,EAAK,WAAWK,CAAK,CAAC,GAE/C,MAAMC,EAAEP,EAAM,IAAI,EAAE,KAAKG,EAAA,GAAUD,EAAM,WAAW;AAAA,EAC/D;AACJ,CAAC;"}

package/dist/chunks/{code-snippet.DgAuuZF5.js → code-snippet.BG5ZmCrb.js}

@@ -1,23 +1,23 @@
-import { defineComponent as ee, useAttrs as te, ref as y, computed as m, shallowRef as $, onMounted as ae, watch as ne, watchEffect as oe, resolveComponent as se, openBlock as s, createElementBlock as _, normalizeClass as w, createElementVNode as S, createBlock as f, unref as r, mergeProps as re, createCommentVNode as u, createVNode as C, withCtx as h, createTextVNode as Q, toDisplayString as x, renderSlot as le, normalizeProps as ie, guardReactiveProps as ce } from "vue";
-import { s as de, H as pe, t as e, L as ue, a as ge, b as fe, c as me, p as he, j as be, d as Oe, x as ve, e as ye, E as _e, h as Se, k as Ce, i as Ne, C as N, f as Y, g as E, l as Pe, m as ke } from "./codemirror.Bzus_EPG.js";
-import { c as Le, d as Te, e as xe, f as Ee } from "./es6.C1DXQV6f.js";
-import { B as Ie } from "./dropdown.MhmX1P9o.js";
-import { B as W } from "./button.DWF7FSIw.js";
-import { B as D } from "./typography.B3J6_tYk.js";
+import { defineComponent as ee, useAttrs as te, ref as y, computed as f, shallowRef as V, onMounted as ne, watch as ae, watchEffect as oe, resolveComponent as se, openBlock as s, createElementBlock as S, normalizeClass as $, createElementVNode as _, createBlock as m, unref as r, mergeProps as re, createCommentVNode as u, createVNode as N, withCtx as h, createTextVNode as w, toDisplayString as P, renderSlot as ie, normalizeProps as le, guardReactiveProps as ce } from "vue";
+import { s as de, H as pe, t as e, L as ue, a as ge, b as me, c as fe, p as he, j as be, d as Oe, x as ve, e as ye, E as Se, h as _e, k as Ne, i as Ce, C, f as Q, g as k, l as Te, m as xe } from "./codemirror.Bzus_EPG.js";
+import { c as Ee, d as Le, e as Pe, f as ke } from "./es6.C1DXQV6f.js";
+import { B as Ie } from "./dropdown.DHoL50gV.js";
+import { B as Y } from "./button.DWF7FSIw.js";
+import { B as W } from "./typography.B3J6_tYk.js";
 import { B as Ae } from "./loading-indicator.BPol9I84.js";
 import { u as Re } from "./index.B875RXHM.js";
 import { E as Be } from "./expand.BrywY9jl.js";
-import { h as Ve } from "./base-modal.C2-JyHC_.js";
-import { C as $e } from "./copy.C2kQ1PbI.js";
-import { _ as we } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { h as De } from "./base-modal.BxcS7Pao.js";
+import { C as Ve } from "./copy.CL893i9-.js";
+import { _ as $e } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/code-snippet.css";
-const Qe = {
-  red: Le,
-  orange: Ee,
-  green: Te,
-  blue: xe,
+const we = {
+  red: Ee,
+  orange: ke,
+  green: Le,
+  blue: Pe,
   invalid: "#ffffff"
-}, Ye = (t, l) => pe.define([
+}, Qe = (t, i) => pe.define([
   {
     tag: e.keyword,
     color: t.red
@@ -35,7 +35,7 @@ const Qe = {
     color: t.red
   },
   {
-    tag: [e.definition(e.name), ...l !== "json" ? [e.separator] : []],
+    tag: [e.definition(e.name), ...i !== "json" ? [e.separator] : []],
     color: t.red
   },
   {
@@ -84,9 +84,9 @@ const Qe = {
     tag: e.invalid,
     color: t.invalid
   }
-]), We = (t) => de(Ye(Qe, t));
+]), Ye = (t) => de(Qe(we, t));
 var I = /* @__PURE__ */ ((t) => (t.INLINE = "inline", t.SINGLELINE = "singleline", t.MULTILINE = "multiline", t))(I || {}), d = /* @__PURE__ */ ((t) => (t.JSON = "json", t.XML = "xml", t.JAVA = "java", t.JAVASCRIPT = "javascript", t.PYTHON = "python", t.CSV = "csv", t))(d || {}), b = /* @__PURE__ */ ((t) => (t.ACTION = "action", t.CHANGE = "change", t))(b || {});
-const De = me.deserialize({
+const We = fe.deserialize({
   version: 14,
   states: "nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_",
   stateData: "g~OWOS~OQPORPOSPO~OQRSR~",
@@ -100,9 +100,9 @@ const De = me.deserialize({
   topRules: { Program: [0, 1] },
   tokenPrec: 18
 }), Me = ge.define({
-  parser: De.configure({
+  parser: We.configure({
     props: [
-      fe({
+      me({
         Separator: e.separator,
         Value: e.string,
         String: e.string,
@@ -112,43 +112,50 @@ const De = me.deserialize({
     ]
   })
 });
-function Ze() {
+function je() {
   return new ue(Me);
 }
-const He = {
+const ze = {
   [d.JSON]: ye,
   [d.XML]: ve,
   [d.JAVASCRIPT]: Oe,
   [d.JAVA]: be,
   [d.PYTHON]: he,
-  [d.CSV]: Ze
-}, je = (t) => async () => He[t], Je = (t, l) => {
-  const a = t.doc.lineAt(l.from), o = /^\s*/.exec(a.text);
+  [d.CSV]: je
+}, Ze = (t) => async () => ze[t], He = (t, i) => {
+  const n = t.doc.lineAt(i.from), o = /^\s*/.exec(n.text);
   return o ? o[0] : "";
-}, Ue = {
+}, Je = {
   key: "Enter",
-  run: ({ state: t, dispatch: l }) => {
-    const a = t.changeByRange((o) => {
+  run: ({ state: t, dispatch: i }) => {
+    const n = t.changeByRange((o) => {
       const p = `
-${Je(t, o)}`;
+${He(t, o)}`;
       return {
         changes: { from: o.from, to: o.to, insert: p },
-        range: _e.cursor(o.from + p.length)
+        range: Se.cursor(o.from + p.length)
       };
     });
-    return l(t.update(a, { scrollIntoView: !0, userEvent: "input" })), !0;
+    return i(t.update(n, { scrollIntoView: !0, userEvent: "input" })), !0;
   }
 }, M = {
+  "de-DE": { codeSnippet: "Codeausschnitt", expand: "Anzeigen", nothingToDisplay: "Nichts anzuzeigen", run: "Lauf" },
+  "en-GB": { codeSnippet: "Code snippet", expand: "Expand", nothingToDisplay: "Nothing to display", run: "Run" },
   "en-US": { codeSnippet: "Code snippet", expand: "Expand", nothingToDisplay: "Nothing to display", run: "Run" },
+  "es-ES": { codeSnippet: "Fragmento de código", expand: "Ampliar", nothingToDisplay: "No hay nada que mostrar", run: "Ejecutar" },
+  "es-MX": { codeSnippet: "Fragmento de código", expand: "Ampliar", nothingToDisplay: "Nada que mostrar", run: "Ejecutar" },
+  "fr-FR": { codeSnippet: "Extrait de code", expand: "Développer", nothingToDisplay: "Rien à afficher", run: "Exécuter" },
+  "it-IT": { codeSnippet: "Frammento di codice", expand: "Espandi", nothingToDisplay: "Niente da visualizzare", run: "Corri" },
   "ja-JP": { codeSnippet: "コードスニペット", expand: "展開", nothingToDisplay: "表示するものがありません", run: "実行" },
-  "pt-BR": { codeSnippet: "Trecho de código", expand: "Expandir", nothingToDisplay: "Nada para exibir", run: "Executar" }
-}, ze = {
+  "pt-BR": { codeSnippet: "Trecho de código", expand: "Expandir", nothingToDisplay: "Nada a mostrar", run: "Executar" },
+  "zh-CN": { codeSnippet: "代码片段", expand: "展开", nothingToDisplay: "暂无内容可显示", run: "运行" }
+}, Ue = {
   key: 0,
   class: "b-code-snippet__action-bar"
-}, Ge = { class: "b-code-snippet__action-bar--start" }, Xe = { class: "b-code-snippet__action-bar--end" }, Fe = {
+}, Fe = { class: "b-code-snippet__action-bar--start" }, Ge = { class: "b-code-snippet__action-bar--end" }, Xe = {
   key: 1,
   class: "b-code-snippet__code-area"
-}, Ke = { key: 2 }, qe = { class: "b-code-snippet__empty-state" }, et = {
+}, qe = { key: 2 }, Ke = { class: "b-code-snippet__empty-state" }, et = {
   i18n: { messages: M },
   name: "bento-code-snippet"
 }, tt = /* @__PURE__ */ ee({
@@ -165,124 +172,124 @@ ${Je(t, o)}`;
     variant: { default: I.MULTILINE }
   },
   emits: [b.ACTION, b.CHANGE],
-  setup(t, { emit: l }) {
-    const a = t, o = l, A = te(), { t: p } = Re({ messages: M }), R = y(null), P = [], Z = () => {
-    }, H = m(() => a.langLabel ?? a.lang.toUpperCase()), O = m(() => a.variant === I.INLINE), j = m(() => ({
+  setup(t, { emit: i }) {
+    const n = t, o = i, A = te(), { t: p } = Re({ messages: M }), R = y(null), T = [], j = () => {
+    }, z = f(() => n.langLabel ?? n.lang.toUpperCase()), O = f(() => n.variant === I.INLINE), Z = f(() => ({
       "b-code-snippet--inline": O.value,
       "b-code-snippet--scrollable": !O.value
-    })), J = m(() => ({
-      "b-code-snippet__code-area-content--editable": a.editable
-    })), U = je(a.lang), B = $(), V = $(), z = new N(), G = new N(), X = new N(), F = new N(), i = y(null), k = y(0), K = m(() => a.actionableText || p("run"));
-    ae(async () => {
-      const n = await U();
-      i.value = a.content;
-      const c = ({ state: T }) => {
-        i.value = T.doc.toString();
+    })), H = f(() => ({
+      "b-code-snippet__code-area-content--editable": n.editable
+    })), J = Ze(n.lang), B = V(), D = V(), U = new C(), F = new C(), G = new C(), X = new C(), l = y(null), x = y(0), q = f(() => n.actionableText || p("run"));
+    ne(async () => {
+      const a = await J();
+      l.value = n.content;
+      const c = ({ state: L }) => {
+        l.value = L.doc.toString();
       }, v = [
-        Se(),
-        Ce.of([Ne, Ue]),
-        z.of(n()),
-        G.of(We(a.lang)),
-        X.of(Y.readOnly.of(!a.editable)),
-        F.of(
-          E.contentAttributes.of({
+        _e(),
+        Ne.of([Ce, Je]),
+        U.of(a()),
+        F.of(Ye(n.lang)),
+        G.of(Q.readOnly.of(!n.editable)),
+        X.of(
+          k.contentAttributes.of({
             "aria-label": A["aria-label"] ?? p("codeSnippet"),
             ...!O.value && { tabindex: "0" }
           })
         ),
-        E.updateListener.of((T) => c(T))
+        k.updateListener.of((L) => c(L))
       ];
-      a.variant === "multiline" && v.push([Pe(), ke()]);
-      const g = Y.create({
-        doc: a.content,
+      n.variant === "multiline" && v.push([Te(), xe()]);
+      const g = Q.create({
+        doc: n.content,
         extensions: [...v]
       });
-      k.value = g.doc.length, V.value = new E({
+      x.value = g.doc.length, D.value = new k({
         state: g,
         parent: B.value
       });
-    }), ne(
-      () => a.content,
+    }), ae(
+      () => n.content,
       () => {
-        if (a.content !== i.value) {
-          const n = a.content.length;
-          V.value.dispatch({
+        if (n.content !== l.value) {
+          const a = n.content.length;
+          D.value.dispatch({
             changes: {
               from: 0,
-              to: k.value,
-              insert: a.content
+              to: x.value,
+              insert: n.content
             }
-          }), k.value = n;
+          }), x.value = a;
         }
       }
     );
-    const q = () => {
-      o(b.ACTION, i.value);
+    const K = () => {
+      o(b.ACTION, l.value);
     };
     oe(() => {
-      i.value !== null && o(b.CHANGE, i.value);
+      l.value !== null && o(b.CHANGE, l.value);
     });
-    const L = y(!1);
-    return (n, c) => {
+    const E = y(!1);
+    return (a, c) => {
       const v = se("bento-code-snippet");
-      return s(), _("div", {
-        class: w(["b-code-snippet", j.value])
+      return s(), S("div", {
+        class: $(["b-code-snippet", Z.value])
       }, [
-        O.value ? u("", !0) : (s(), _("section", ze, [
-          S("div", Ge, [
-            P.length > 0 ? (s(), f(r(Ie), re({
+        O.value ? u("", !0) : (s(), S("section", Ue, [
+          _("div", Fe, [
+            T.length > 0 ? (s(), m(r(Ie), re({
               key: 0,
               modelValue: R.value,
               "onUpdate:modelValue": c[0] || (c[0] = (g) => R.value = g)
-            }, n.$props, {
-              disabled: P.length === 1,
-              items: P,
+            }, a.$props, {
+              disabled: T.length === 1,
+              items: T,
               class: "b-code-snippet__language-picker",
-              onInput: Z
+              onInput: j
             }), null, 16, ["modelValue", "disabled"])) : u("", !0),
-            C(r(D), {
+            N(r(W), {
               el: "span",
               stronger: ""
             }, {
               default: h(() => [
-                Q(x(H.value), 1)
+                w(P(z.value), 1)
               ]),
               _: 1
             })
           ]),
-          S("div", Xe, [
-            n.loading ? (s(), f(r(Ae), { key: 0 })) : u("", !0),
-            i.value !== null ? (s(), f(r($e), {
+          _("div", Ge, [
+            a.loading ? (s(), m(r(Ae), { key: 0 })) : u("", !0),
+            l.value !== null ? (s(), m(r(Ve), {
               key: 1,
               class: "b-structured-list__icon",
-              text: i.value
+              text: l.value
             }, null, 8, ["text"])) : u("", !0),
-            n.expandable ? (s(), f(r(W), {
+            a.expandable ? (s(), m(r(Y), {
               key: 2,
               variant: "tertiary",
               condensed: "",
               "aria-label": r(p)("expand"),
-              onClick: c[1] || (c[1] = (g) => L.value = !0)
+              onClick: c[1] || (c[1] = (g) => E.value = !0)
             }, {
               iconLeft: h(() => [
-                C(r(Be))
+                N(r(Be))
               ]),
               _: 1
             }, 8, ["aria-label"])) : u("", !0),
-            n.actionable ? (s(), f(r(W), {
+            a.actionable ? (s(), m(r(Y), {
               key: 3,
               variant: "primary",
               tertiary: "",
               condensed: "",
-              onClick: q
+              onClick: K
             }, {
               iconLeft: h(() => [
-                C(r(D), {
+                N(r(W), {
                   el: "span",
                   class: "b-code-snippet__action-button"
                 }, {
                   default: h(() => [
-                    Q(x(K.value), 1)
+                    w(P(q.value), 1)
                   ]),
                   _: 1
                 })
@@ -291,40 +298,40 @@ ${Je(t, o)}`;
             })) : u("", !0)
           ])
         ])),
-        n.content || n.editable ? (s(), _("code", Fe, [
-          S("div", {
+        a.content || a.editable ? (s(), S("code", Xe, [
+          _("div", {
             ref_key: "container",
             ref: B,
-            class: w(["b-code-snippet__code-area-content", J.value])
+            class: $(["b-code-snippet__code-area-content", H.value])
           }, null, 2)
-        ])) : (s(), _("section", Ke, [
-          le(n.$slots, "empty-state", {}, () => [
-            S("div", qe, x(r(p)("nothingToDisplay")), 1)
+        ])) : (s(), S("section", qe, [
+          ie(a.$slots, "empty-state", {}, () => [
+            _("div", Ke, P(r(p)("nothingToDisplay")), 1)
           ], !0)
         ])),
-        n.expandable ? (s(), f(Ve, {
+        a.expandable ? (s(), m(De, {
           key: 3,
           class: "b-code-snippet__modal",
           "hide-close-button": !0,
           "custom-padding": "0px",
           "is-dismissible": !0,
-          "is-open": L.value,
+          "is-open": E.value,
           size: "large",
-          onCloseModal: c[2] || (c[2] = (g) => L.value = !1)
+          onCloseModal: c[2] || (c[2] = (g) => E.value = !1)
         }, {
           content: h(() => [
-            C(v, ie(ce({ ...n.$props, expandable: !1 })), null, 16)
+            N(v, le(ce({ ...a.$props, expandable: !1 })), null, 16)
           ]),
           _: 1
         }, 8, ["is-open"])) : u("", !0)
       ], 2);
     };
   }
-}), ft = /* @__PURE__ */ we(tt, [["__scopeId", "data-v-56590288"]]);
+}), mt = /* @__PURE__ */ $e(tt, [["__scopeId", "data-v-56590288"]]);
 export {
   b as B,
   d as a,
   I as b,
-  ft as c
+  mt as c
 };
-//# sourceMappingURL=code-snippet.DgAuuZF5.js.map
+//# sourceMappingURL=code-snippet.BG5ZmCrb.js.map