@adyen/bento-vue2 1.35.0 → 1.36.0

package/dist/chunks/{card.DqxilNhb.js → card.-Ha3buAK.js}

@@ -1,12 +1,12 @@
 import { defineComponent as T, useSlots as I, ref as C, watch as h, computed as n } from "vue";
-import { B as H } from "./typography.CqQaHXhq.js";
-import { C as D, a as M } from "./chevron-up.DqJmLciO.js";
+import { B as H } from "./typography.CwyPJr5u.js";
+import { C as D, a as M } from "./chevron-up.B2uWhZf7.js";
 import { u as U } from "./use-expandable-content-height.GkjjbmPy.js";
 import { u as R } from "./use-has-slot.C9lQZ6nz.js";
 import { g as z } from "./unique-id.XFfoKuc2.js";
 import { u as O } from "./i18n.BQkEbtPM.js";
 import { o as W } from "./resize.Bqks3WUm.js";
-import { c as F, B as N } from "./button-actions.fnn5w4Jz.js";
+import { c as F, B as N } from "./button-actions.C-L0Vb2u.js";
 import { n as P } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/card.css";
 var f = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o))(f || {}), c = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.SMALL = "small", o))(c || {});
@@ -120,4 +120,4 @@ export {
   c as a,
   la as c
 };
-//# sourceMappingURL=card.DqxilNhb.js.map
+//# sourceMappingURL=card.-Ha3buAK.js.map

package/dist/chunks/{card.DqxilNhb.js.map → card.-Ha3buAK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"card.DqxilNhb.js","sources":["../../src/components/card/card.types.ts","../../src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"tabIndex\"\n            :aria-controls=\"expandable ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n  actions: { default: null },\n  actionsLayout: { default: BentoButtonActionsLayout.BUTTONS_END },\n  background: { default: BentoCardBackground.PRIMARY },\n  closed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  expandable: { type: Boolean, default: false },\n  titleSize: { default: BentoCardTitleSize.DEFAULT }\n});\n\n    const emit = defineEmits([\"click\", \"expanded\"]);\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': props.expandable && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            } as InstanceType<typeof BentoTypography>['$props'])\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","emit"],"mappings":"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"}
+{"version":3,"file":"card.-Ha3buAK.js","sources":["../../src/components/card/card.types.ts","../../src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"tabIndex\"\n            :aria-controls=\"expandable ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n  actions: { default: null },\n  actionsLayout: { default: BentoButtonActionsLayout.BUTTONS_END },\n  background: { default: BentoCardBackground.PRIMARY },\n  closed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  expandable: { type: Boolean, default: false },\n  titleSize: { default: BentoCardTitleSize.DEFAULT }\n});\n\n    const emit = defineEmits([\"click\", \"expanded\"]);\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': props.expandable && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            } as InstanceType<typeof BentoTypography>['$props'])\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","emit"],"mappings":"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"}

package/dist/chunks/{checkbox-group.CdMkjLu1.js → checkbox-group.BwFXPTGd.js}

@@ -1,10 +1,10 @@
 import { defineComponent as y, toRef as _, computed as l, watch as c, ref as v } from "vue";
-import { B as E, a as n } from "./checkbox.CVSzcaHk.js";
+import { B as E, a as n } from "./checkbox.CzdtFE34.js";
 import { g as x } from "./unique-id.XFfoKuc2.js";
-import { d as k } from "./typography.CqQaHXhq.js";
+import { d as k } from "./typography.CwyPJr5u.js";
 import { u as C } from "./use-form-layout-loading.D3lALhtC.js";
-import { C as S } from "./controls-group.BES2y5Y7.js";
-import { E as M } from "./error-message.3tVTq0sW.js";
+import { C as S } from "./controls-group.BtkDkKnd.js";
+import { E as M } from "./error-message.DTf7QSTn.js";
 import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/checkbox-group.css";
 var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
@@ -149,4 +149,4 @@ export {
   s as B,
   q as c
 };
-//# sourceMappingURL=checkbox-group.CdMkjLu1.js.map
+//# sourceMappingURL=checkbox-group.BwFXPTGd.js.map

package/dist/chunks/{checkbox-group.CdMkjLu1.js.map → checkbox-group.BwFXPTGd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.CdMkjLu1.js","sources":["../../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import type { BentoCheckboxTag } from '@/components/checkbox';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\ninterface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n    tag?: BentoCheckboxTag;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n            :component-name=\"COMPONENT_NAME\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :hide-label=\"hideLabel\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :tooltip-text=\"tooltipText\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :tag=\"item.tag\"\n                @update:model-value=\"onInput\"\n            >\n                <template #default>{{ item.label }}</template>\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n                <template v-if=\"hasContentSlot('content')\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { BentoCheckboxEvent } from '../../checkbox.types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    /**\n     * The name of the component to be used in the Vue devtools and console warnings.\n     */\n    const COMPONENT_NAME = 'bento-checkbox-group';\n\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: COMPONENT_NAME,\n        components: { BentoCheckbox, ControlsGroup, ErrorMessage },\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * Descriptive supporting text visbile underneath the label.\n             */\n            description: { type: String, default: null },\n\n            /**\n             * If set to true, renders all checkboxes in the group in a disabled state.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Renders all checkboxes in an error state with an error message.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n             */\n            formId: { type: String, default: null },\n\n            /**\n             * If set to true, renders all checkboxes in the group in an error state.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * Shows/hides the group label.\n             */\n            hideLabel: { type: Boolean, default: null },\n\n            /**\n             * The checkbox group's items.\n             */\n            items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true },\n\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n\n            /**\n             * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n             * Defaults to no value selected.\n             */\n            modelValue: { type: Array<number | string | null>, default: () => [] },\n\n            /**\n             * Indicates the field is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * If set to true, renders all checkboxes in the group in a readonly state.\n             */\n            readonly: { 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             * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n             */\n            variant: {\n                type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n                default: BentoCheckboxGroupVariant.VERTICAL,\n                validator: (value: BentoCheckboxGroupVariant) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\n            },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { emit, slots }) {\n            const errorId = generateUid('error');\n            const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n            const shouldShowGroupError = computed(\n                () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowGroupErrorMessage = computed(\n                () => !props.disabled && !isReadOnly.value && !!props.errorMessage\n            );\n\n            const conditionalClasses = computed(() => ({\n                'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n            }));\n\n            // Slots logic\n            // Temporary, use-has-slots composable doesn't currently work for\n            // vue3 named scoped slots\n            const hasContentSlot = name => !!slots[name];\n            const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical');\n\n            watch(\n                shouldShowSlotsError,\n                newValue => {\n                    if (newValue) {\n                        throw new Error('The content slot is only available for the vertical checkbox group layout');\n                    }\n                },\n                { immediate: true }\n            );\n\n            const inputValue = ref(props.modelValue);\n            watch(\n                () => props.modelValue,\n                () => {\n                    inputValue.value = props.modelValue;\n                }\n            );\n\n            const onInput = value => {\n                inputValue.value = value;\n                emit(BentoCheckboxEvent.UPDATE, value);\n                emit(BentoCheckboxEvent.INPUT, value);\n            };\n\n            if (props.hasError) {\n                deprecate(\n                    'BentoCheckboxGroup \"hasError\" property',\n                    `Use the BentoCheckboxGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n                    Having the field as \"undefined\" will hide/remove the error.\n                    <bento-checkbox-group errorMessage=\"Error message text\" />`,\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Values\n                COMPONENT_NAME,\n                errorId,\n                isReadOnly,\n                shouldShowGroupError,\n                shouldShowGroupErrorMessage,\n                conditionalClasses,\n                inputValue,\n                hasContentSlot,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","slots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","onInput","deprecate"],"mappings":"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"}
+{"version":3,"file":"checkbox-group.BwFXPTGd.js","sources":["../../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import type { BentoCheckboxTag } from '@/components/checkbox';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\ninterface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n    tag?: BentoCheckboxTag;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n            :component-name=\"COMPONENT_NAME\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :hide-label=\"hideLabel\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :tooltip-text=\"tooltipText\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :tag=\"item.tag\"\n                @update:model-value=\"onInput\"\n            >\n                <template #default>{{ item.label }}</template>\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n                <template v-if=\"hasContentSlot('content')\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { BentoCheckboxEvent } from '../../checkbox.types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    /**\n     * The name of the component to be used in the Vue devtools and console warnings.\n     */\n    const COMPONENT_NAME = 'bento-checkbox-group';\n\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: COMPONENT_NAME,\n        components: { BentoCheckbox, ControlsGroup, ErrorMessage },\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * Descriptive supporting text visbile underneath the label.\n             */\n            description: { type: String, default: null },\n\n            /**\n             * If set to true, renders all checkboxes in the group in a disabled state.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Renders all checkboxes in an error state with an error message.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n             */\n            formId: { type: String, default: null },\n\n            /**\n             * If set to true, renders all checkboxes in the group in an error state.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * Shows/hides the group label.\n             */\n            hideLabel: { type: Boolean, default: null },\n\n            /**\n             * The checkbox group's items.\n             */\n            items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true },\n\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n\n            /**\n             * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n             * Defaults to no value selected.\n             */\n            modelValue: { type: Array<number | string | null>, default: () => [] },\n\n            /**\n             * Indicates the field is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * If set to true, renders all checkboxes in the group in a readonly state.\n             */\n            readonly: { 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             * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n             */\n            variant: {\n                type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n                default: BentoCheckboxGroupVariant.VERTICAL,\n                validator: (value: BentoCheckboxGroupVariant) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\n            },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { emit, slots }) {\n            const errorId = generateUid('error');\n            const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n            const shouldShowGroupError = computed(\n                () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowGroupErrorMessage = computed(\n                () => !props.disabled && !isReadOnly.value && !!props.errorMessage\n            );\n\n            const conditionalClasses = computed(() => ({\n                'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n            }));\n\n            // Slots logic\n            // Temporary, use-has-slots composable doesn't currently work for\n            // vue3 named scoped slots\n            const hasContentSlot = name => !!slots[name];\n            const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical');\n\n            watch(\n                shouldShowSlotsError,\n                newValue => {\n                    if (newValue) {\n                        throw new Error('The content slot is only available for the vertical checkbox group layout');\n                    }\n                },\n                { immediate: true }\n            );\n\n            const inputValue = ref(props.modelValue);\n            watch(\n                () => props.modelValue,\n                () => {\n                    inputValue.value = props.modelValue;\n                }\n            );\n\n            const onInput = value => {\n                inputValue.value = value;\n                emit(BentoCheckboxEvent.UPDATE, value);\n                emit(BentoCheckboxEvent.INPUT, value);\n            };\n\n            if (props.hasError) {\n                deprecate(\n                    'BentoCheckboxGroup \"hasError\" property',\n                    `Use the BentoCheckboxGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n                    Having the field as \"undefined\" will hide/remove the error.\n                    <bento-checkbox-group errorMessage=\"Error message text\" />`,\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Values\n                COMPONENT_NAME,\n                errorId,\n                isReadOnly,\n                shouldShowGroupError,\n                shouldShowGroupErrorMessage,\n                conditionalClasses,\n                inputValue,\n                hasContentSlot,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","slots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","onInput","deprecate"],"mappings":"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"}

package/dist/chunks/{checkbox-input.Ce0AY_e_.js → checkbox-input.DgfJgZaI.js}

@@ -1,7 +1,6 @@
 import { defineComponent as g, toRefs as x, computed as r } from "vue";
-import { C as E } from "./checkmark-small.C8T8ISN6.js";
-/* empty css              */
-import { n as m } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as E } from "./checkmark-small.BtF8b2gE.js";
+import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/checkbox-input.css";
 var s = /* @__PURE__ */ ((n) => (n.UNCHECKED = "unchecked", n.DISABLED = "disabled", n.ERROR = "error", n.READONLY = "readonly", n))(s || {}), u = /* @__PURE__ */ ((n) => (n.UPDATE = "update:model-value", n))(u || {});
 let v = 0;
@@ -13,7 +12,7 @@ const D = {
 var R = function() {
   var e = this, a = e._self._c;
   return a("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? a("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), a("path", { attrs: { fill: "#00112C", d: "M4.25 7.25H11.75V8.75H4.25V7.25Z" } })]);
-}, A = [], $ = /* @__PURE__ */ m(
+}, A = [], $ = /* @__PURE__ */ h(
   D,
   R,
   A,
@@ -79,15 +78,15 @@ const L = $.exports, N = {
   },
   emits: ["update:model-value"],
   setup(n, { emit: e }) {
-    const a = n, { disabled: t, indeterminate: h, modelValue: l, readonly: _, value: o } = x(a), b = r(() => ({
+    const a = n, { disabled: t, indeterminate: b, modelValue: l, readonly: _, value: o } = x(a), m = r(() => ({
       [`b-checkbox-input--${s.DISABLED}`]: a.disabled,
       [`b-checkbox-input--${s.READONLY}`]: a.readonly
     })), C = r(() => ({
-      [`b-checkbox-input__outline--${s.UNCHECKED}`]: !p.value && !a.indeterminate,
+      [`b-checkbox-input__outline--${s.UNCHECKED}`]: !f.value && !a.indeterminate,
       [`b-checkbox-input__outline--${s.ERROR}`]: a.hasError,
       [`b-checkbox-input__outline--${s.READONLY}`]: a.readonly
-    })), d = r(() => Array.isArray(l.value)), p = r(() => d.value ? l.value.some((i) => i === o.value) : l.value), k = r(() => a.hasError && !a.disabled && !a.readonly);
-    return { __sfc: !0, props: a, emit: e, disabled: t, indeterminate: h, modelValue: l, readonly: _, value: o, conditionalClasses: b, outlineConditionalClasses: C, isCheckboxGroup: d, isChecked: p, ariaInvalid: k, onClick: (i) => {
+    })), d = r(() => Array.isArray(l.value)), f = r(() => d.value ? l.value.some((i) => i === o.value) : l.value), k = r(() => a.hasError && !a.disabled && !a.readonly);
+    return { __sfc: !0, props: a, emit: e, disabled: t, indeterminate: b, modelValue: l, readonly: _, value: o, conditionalClasses: m, outlineConditionalClasses: C, isCheckboxGroup: d, isChecked: f, ariaInvalid: k, onClick: (i) => {
       if (_.value) {
         i.preventDefault();
         return;
@@ -97,8 +96,8 @@ const L = $.exports, N = {
         return;
       const y = i.target.checked;
       if (d.value) {
-        const c = [...l.value], f = c.indexOf(o.value);
-        f === -1 ? c.push(o.value) : c.splice(f, 1), e(u.UPDATE, c);
+        const c = [...l.value], p = c.indexOf(o.value);
+        p === -1 ? c.push(o.value) : c.splice(p, 1), e(u.UPDATE, c);
       } else
         e(u.UPDATE, y);
     }, CheckmarkSmallIcon: E, MinusSmallIcon: L };
@@ -106,19 +105,19 @@ const L = $.exports, N = {
 });
 var w = function() {
   var e = this, a = e._self._c, t = e._self._setupProxy;
-  return a("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses }, [t.indeterminate ? a(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "intermediate" } }) : t.isChecked ? a(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "checked" } }) : e._e(), a("input", { ref: "inputRef", staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses, attrs: { id: e.id, type: "checkbox", "aria-label": e.ariaLabel, "aria-checked": t.isChecked, "aria-describedby": e.ariaDescribedby, "aria-invalid": t.ariaInvalid, disabled: t.disabled, "aria-readonly": t.readonly }, domProps: { checked: t.isChecked, indeterminate: t.indeterminate, value: t.value }, on: { click: t.onClick, change: t.onChange } })], 1);
-}, B = [], I = /* @__PURE__ */ m(
+  return a("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses }, [t.indeterminate ? a(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : t.isChecked ? a(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e._e(), a("input", { ref: "inputRef", staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses, attrs: { id: e.id, type: "checkbox", "aria-label": e.ariaLabel, "aria-checked": t.isChecked, "aria-describedby": e.ariaDescribedby, "aria-invalid": t.ariaInvalid, disabled: t.disabled, "aria-readonly": t.readonly }, domProps: { checked: t.isChecked, indeterminate: t.indeterminate, value: t.value }, on: { click: t.onClick, change: t.onChange } })], 1);
+}, B = [], I = /* @__PURE__ */ h(
   S,
   w,
   B,
   !1,
   null,
-  "79592442"
+  "81344483"
 );
-const T = I.exports;
+const M = I.exports;
 export {
   s as C,
   L as N,
-  T as a
+  M as a
 };
-//# sourceMappingURL=checkbox-input.Ce0AY_e_.js.map
+//# sourceMappingURL=checkbox-input.DgfJgZaI.js.map

package/dist/chunks/checkbox-input.DgfJgZaI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-input.DgfJgZaI.js","sources":["../../../core/src/components/internal/checkbox-input/checkbox-input.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/minus-small.vue","../../src/components/internal/checkbox-input/checkbox-input.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n    UNCHECKED = 'unchecked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum CheckboxInputEvent {\n    UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n    value: string | number;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-checkbox-input\" :class=\"conditionalClasses\">\n        <!-- Don't change order because it matters for CSS. Icons first -->\n        <minus-small-icon v-if=\"indeterminate\" class=\"b-checkbox-input__icon\" svg-title=\"\" aria-hidden=\"true\" />\n        <checkmark-small-icon v-else-if=\"isChecked\" class=\"b-checkbox-input__icon\" svg-title=\"\" aria-hidden=\"true\" />\n        <input\n            :id=\"id\"\n            ref=\"inputRef\"\n            type=\"checkbox\"\n            class=\"b-checkbox-input__outline\"\n            :class=\"outlineConditionalClasses\"\n            :aria-label=\"ariaLabel\"\n            :aria-checked=\"isChecked\"\n            :aria-describedby=\"ariaDescribedby\"\n            :aria-invalid=\"ariaInvalid\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :indeterminate.prop=\"indeterminate\"\n            :value=\"value\"\n            :aria-readonly=\"readonly\"\n            @click=\"onClick\"\n            @change=\"onChange\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, toRefs } from 'vue';\n    import {\n        CheckboxInputEvent,\n        CheckboxInputGroupItems,\n        CheckboxInputState,\n        CheckboxInputType,\n        MultiCheckboxInputType,\n    } from '@/core/components/internal/checkbox-input/checkbox-input.types';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small';\n\n    const props = defineProps({\n        /**\n         * The aria label associated to the input checkbox.\n         */\n        ariaLabel: { type: String, default: '' },\n\n        /**\n         * An additional string that serves as description for the input checkbox (useful if the component shows a description).\n         */\n        ariaDescribedby: { type: String, default: '' },\n\n        /**\n         * Setting this property to true will disable the checkbox in your form.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Setting this property to true will show the checkbox in error state.\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Sets the id of the checkbox. Required for accessibility purposes\n         */\n        id: { type: String, default: null },\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<CheckboxInputType | CheckboxInputGroupItems>,\n            default: false,\n        },\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         * The value of the component. The DOM API casts this to a string.\n         * The browser uses \"on\" as the default value.\n         *\n         * In the case of multiple checkboxes this value is used as a unique key.\n         */\n        value: { type: [String, Number], default: null },\n    });\n\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n    const conditionalClasses = computed(() => ({\n        [`b-checkbox-input--${CheckboxInputState.DISABLED}`]: props.disabled,\n        [`b-checkbox-input--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const outlineConditionalClasses = computed(() => ({\n        [`b-checkbox-input__outline--${CheckboxInputState.UNCHECKED}`]: !isChecked.value && !props.indeterminate,\n        [`b-checkbox-input__outline--${CheckboxInputState.ERROR}`]: props.hasError,\n        [`b-checkbox-input__outline--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n\n    const isChecked = computed(() => {\n        if (!isCheckboxGroup.value) {\n            return modelValue.value as boolean;\n        }\n\n        return (modelValue.value as MultiCheckboxInputType).some(item => item === value.value);\n    });\n\n    const ariaInvalid = computed(() => props.hasError && !props.disabled && !props.readonly);\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (readonly.value) {\n            event.preventDefault();\n            return;\n        }\n    };\n    const onChange = (event: Event) => {\n        if (disabled.value) {\n            return;\n        }\n\n        const newValue: boolean = (event.target as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(modelValue.value as MultiCheckboxInputType)];\n            const index = newCheckedList.indexOf(value.value);\n\n            if (index === -1) {\n                newCheckedList.push(value.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            emit(CheckboxInputEvent.UPDATE, newCheckedList);\n        } else {\n            emit(CheckboxInputEvent.UPDATE, newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component that renders a checkbox input (without label)\n     *\n     * @example\n     * import { BentoCheckboxInput } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckboxInput },\n     *     template: `\n     *      <label for=\"checkbox-id\">Your label</label>\n     *      <span id=\"description-id\">Description</span>\n     *      <bento-checkbox-input id=\"checkbox-id\" aria=label=\"Your label\" aria-describedby=\"description-id\" />\n     *     `\n     * }\n     */\n    export default {\n        name: 'checkbox-input',\n        inheritAttrs: false,\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/internal/checkbox-input/checkbox-input.scss\" />\n"],"names":["CheckboxInputState","CheckboxInputState2","CheckboxInputEvent","CheckboxInputEvent2","uuid","_sfc_main$1","__default__","disabled","indeterminate","modelValue","readonly","value","toRefs","props","conditionalClasses","computed","outlineConditionalClasses","isChecked","isCheckboxGroup","item","ariaInvalid","event","newValue","newCheckedList","index","emit"],"mappings":";;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SACAA,EAAA,WAAA,YAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,sBADQA,IAAAD,KAAA,CAAA,CAAA;ACLZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBC+JIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1EA,EAAA,UAAAC,GAAA,eAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAf,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,MACqB,CAAA,qBAAAb,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,IACA,EAAA,GAGhEG,IAAAD,EAAA,OAAA;AAAA,MAAkD,CAAA,8BAAAf,EAAA,SAAA,EAAA,GAAA,CAAAiB,EAAA,SAAA,CAAAJ,EAAA;AAAA,MAC6C,CAAA,8BAAAb,EAAA,KAAA,EAAA,GAAAa,EAAA;AAAA,MACzB,CAAA,8BAAAb,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,IACG,EAAA,GAGzEK,IAAAH,EAAA,MAAA,MAAA,QAAAN,EAAA,KAAA,CAAA,GAEAQ,IAAAF,EAAA,MACIG,EAAA,QAIAT,EAAA,MAAA,KAAA,CAAAU,MAAAA,MAAAR,EAAA,KAAA,IAHIF,EAAA,KAGiF,GAGzFW,IAAAL,EAAA,MAAAF,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAAA,EAAA,QAAA;gOAGA,CAAAQ,MAAA;AACI,UAAAX,EAAA,OAAA;AACI,QAAAW,EAAA,eAAA;AACA;AAAA,MAAA;AAAA,IACJ,aAEJ,CAAAA,MAAA;AACI,UAAAd,EAAA;AACI;AAGJ,YAAAe,IAAAD,EAAA,OAAA;AAEA,UAAAH,EAAA,OAAA;AACI,cAAAK,IAAA,CAAA,GAAAd,EAAA,KAAA,GACAe,IAAAD,EAAA,QAAAZ,EAAA,KAAA;AAEA,QAAAa,MAAA,KACID,EAAA,KAAAZ,EAAA,KAAA,IAEAY,EAAA,OAAAC,GAAA,CAAA,GAEJC,EAAAvB,EAAA,QAAAqB,CAAA;AAAA,MAA8C;AAE9C,QAAAE,EAAAvB,EAAA,QAAAoB,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/{checkbox.CVSzcaHk.js → checkbox.CzdtFE34.js}

@@ -1,14 +1,14 @@
 import { defineComponent as $, toRefs as k, computed as o, ref as N } from "vue";
-import { B as w } from "./typography.CqQaHXhq.js";
+import { B as w } from "./typography.CwyPJr5u.js";
 import { u as R } from "./use-default-slot-validator.BDn0wkYP.js";
 import { u as j } from "./use-has-slot.C9lQZ6nz.js";
 import { g as C } from "./unique-id.XFfoKuc2.js";
 import { g as f } from "./get-slot-text.Cgn-E48s.js";
 import { u as F } from "./i18n.BQkEbtPM.js";
 import { u as z } from "./aria-label.CaUURpnB.js";
-import { B as H } from "./tag.Bo_6RnVE.js";
-import { a as J, C as B } from "./checkbox-input.Ce0AY_e_.js";
-import { E as O } from "./error-message.3tVTq0sW.js";
+import { B as H } from "./tag.BBZrfh25.js";
+import { a as J, C as B } from "./checkbox-input.DgfJgZaI.js";
+import { E as O } from "./error-message.DTf7QSTn.js";
 import { n as Y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/checkbox.css";
 var i = /* @__PURE__ */ ((a) => (a.UPDATE = "update:model-value", a.INPUT = "input", a))(i || {});
@@ -165,4 +165,4 @@ export {
   be as B,
   i as a
 };
-//# sourceMappingURL=checkbox.CVSzcaHk.js.map
+//# sourceMappingURL=checkbox.CzdtFE34.js.map

package/dist/chunks/{checkbox.CVSzcaHk.js.map → checkbox.CzdtFE34.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox.CVSzcaHk.js","sources":["../../src/components/checkbox/checkbox.types.ts","../../src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTag } from '@/components/tag';\nimport type { BentoCheckboxType, BentoMultiCheckboxType } from '../internal/checkbox-input';\nimport { BentoCheckboxState } from '../internal/checkbox-input';\n\nexport { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType };\n\nexport enum BentoCheckboxEvent {\n    UPDATE = 'update:model-value',\n    INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = InstanceType<typeof BentoTag>['$props'];\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\">\n        <checkbox-input\n            ref=\"input\"\n            v-bind=\"$attrs\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"ariaDescribedBy\"\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                    >({{ t('required') }})</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 { computed, defineComponent, PropType, ref, toRefs } from 'vue';\n    import {\n        BentoCheckboxEvent,\n        BentoCheckboxState,\n        BentoCheckboxTag,\n        BentoCheckboxType,\n        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 type { HTMLAttributes } from 'vue/types/jsx';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\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 { 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        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 ariaChecked = computed<HTMLAttributes['aria-checked']>(() =>\n                isIndeterminate.value ? 'mixed' : `${!!isChecked.value}`\n            );\n\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 computedAriaLabel = 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') ? (getSlotText(slots)('default') as string) : t('checkbox'),\n            });\n\n            const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(() => shouldShowError.value);\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                ariaChecked,\n                ariaDescribedBy,\n                ariaInvalid,\n                computedAriaLabel,\n                conditionalClass,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isCheckboxGroup,\n                isChecked,\n                isIndeterminate,\n                shouldShowError,\n                shouldShowErrorMessage,\n                contentSlotAvailable,\n                hasContentSlot,\n\n                // Methods\n                hasSlot,\n                onChange,\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","ariaChecked","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","computedAriaLabel","useAriaLabel","ariaInvalid","conditionalClass","CheckboxInputState","newValue"],"mappings":"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"}
+{"version":3,"file":"checkbox.CzdtFE34.js","sources":["../../src/components/checkbox/checkbox.types.ts","../../src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTag } from '@/components/tag';\nimport type { BentoCheckboxType, BentoMultiCheckboxType } from '../internal/checkbox-input';\nimport { BentoCheckboxState } from '../internal/checkbox-input';\n\nexport { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType };\n\nexport enum BentoCheckboxEvent {\n    UPDATE = 'update:model-value',\n    INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = InstanceType<typeof BentoTag>['$props'];\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\">\n        <checkbox-input\n            ref=\"input\"\n            v-bind=\"$attrs\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"ariaDescribedBy\"\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                    >({{ t('required') }})</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 { computed, defineComponent, PropType, ref, toRefs } from 'vue';\n    import {\n        BentoCheckboxEvent,\n        BentoCheckboxState,\n        BentoCheckboxTag,\n        BentoCheckboxType,\n        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 type { HTMLAttributes } from 'vue/types/jsx';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\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 { 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        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 ariaChecked = computed<HTMLAttributes['aria-checked']>(() =>\n                isIndeterminate.value ? 'mixed' : `${!!isChecked.value}`\n            );\n\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 computedAriaLabel = 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') ? (getSlotText(slots)('default') as string) : t('checkbox'),\n            });\n\n            const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(() => shouldShowError.value);\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                ariaChecked,\n                ariaDescribedBy,\n                ariaInvalid,\n                computedAriaLabel,\n                conditionalClass,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isCheckboxGroup,\n                isChecked,\n                isIndeterminate,\n                shouldShowError,\n                shouldShowErrorMessage,\n                contentSlotAvailable,\n                hasContentSlot,\n\n                // Methods\n                hasSlot,\n                onChange,\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","ariaChecked","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","computedAriaLabel","useAriaLabel","ariaInvalid","conditionalClass","CheckboxInputState","newValue"],"mappings":"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"}

package/dist/chunks/{checkmark-circle-fill.By9RNf5T.js → checkmark-circle-fill.DVl6QSwm.js}

@@ -1,5 +1,5 @@
-/* empty css              */
 import { n as r } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/cross.css";
 let i = 0;
 const e = {
   beforeCreate() {
@@ -17,8 +17,8 @@ var a = function() {
   null,
   null
 );
-const f = c.exports;
+const o = c.exports;
 export {
-  f as C
+  o as C
 };
-//# sourceMappingURL=checkmark-circle-fill.By9RNf5T.js.map
+//# sourceMappingURL=checkmark-circle-fill.DVl6QSwm.js.map

package/dist/chunks/{checkmark-circle-fill.By9RNf5T.js.map → checkmark-circle-fill.DVl6QSwm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkmark-circle-fill.By9RNf5T.js","sources":["../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@6.0.2_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/checkmark-circle-fill.vue"],"sourcesContent":["\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><g :clip-path=\"'url(#uia-icons-16-checkmark_circle_fill__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25C12.2802 0.25 15.75 3.71979 15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM11.0001 4.93945L7.0001 8.93946L5.00011 6.93947L3.93945 8.00013L7.00011 11.0608L12.0608 6.00011L11.0001 4.93945Z\"/></g><defs><clipPath :id=\"'uia-icons-16-checkmark_circle_fill__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["uuid","_sfc_main"],"mappings":";;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"checkmark-circle-fill.DVl6QSwm.js","sources":["../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/checkmark-circle-fill.vue"],"sourcesContent":["\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><g :clip-path=\"'url(#uia-icons-16-checkmark_circle_fill__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25C12.2802 0.25 15.75 3.71979 15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM11.0001 4.93945L7.0001 8.93946L5.00011 6.93947L3.93945 8.00013L7.00011 11.0608L12.0608 6.00011L11.0001 4.93945Z\"/></g><defs><clipPath :id=\"'uia-icons-16-checkmark_circle_fill__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","_sfc_main"],"mappings":";;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{checkmark-small.C8T8ISN6.js → checkmark-small.BtF8b2gE.js}

@@ -1,5 +1,5 @@
-/* empty css              */
 import { n as r } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/cross.css";
 let e = 0;
 const n = {
   beforeCreate() {
@@ -17,8 +17,8 @@ var a = function() {
   null,
   null
 );
-const m = l.exports;
+const c = l.exports;
 export {
-  m as C
+  c as C
 };
-//# sourceMappingURL=checkmark-small.C8T8ISN6.js.map
+//# sourceMappingURL=checkmark-small.BtF8b2gE.js.map

package/dist/chunks/checkmark-small.BtF8b2gE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkmark-small.BtF8b2gE.js","sources":["../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/checkmark-small.vue"],"sourcesContent":["\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=\"#00112C\" d=\"M12.0608 6.00011L11.0001 4.93945L7.00011 8.93945L5.00011 6.93945L3.93945 8.00011L7.00011 11.0608L12.0608 6.00011Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","_sfc_main"],"mappings":";;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{chevron-left.CvIsaXjZ.js → chevron-left.CtnrsqUy.js}

@@ -1,5 +1,5 @@
-/* empty css              */
 import { n } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/cross.css";
 let e = 0;
 const a = {
   beforeCreate() {
@@ -17,7 +17,7 @@ var l = function() {
   null,
   null
 );
-const m = o.exports;
+const h = o.exports;
 let r = 0;
 const c = {
   beforeCreate() {
@@ -35,9 +35,9 @@ var v = function() {
   null,
   null
 );
-const d = g.exports;
+const m = g.exports;
 export {
-  d as C,
-  m as a
+  m as C,
+  h as a
 };
-//# sourceMappingURL=chevron-left.CvIsaXjZ.js.map
+//# sourceMappingURL=chevron-left.CtnrsqUy.js.map

package/dist/chunks/chevron-left.CtnrsqUy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-left.CtnrsqUy.js","sources":["../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-right.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-left.vue"],"sourcesContent":["\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=\"#00112C\" d=\"M4.43945 12.9999L9.43945 7.99988L4.43945 2.99988L5.50011 1.93922L11.5608 7.99988L5.50011 14.0605L4.43945 12.9999Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\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=\"#00112C\" d=\"M11.5606 3.00011L6.56056 8.00011L11.5606 13.0001L10.4999 14.0608L4.43924 8.00011L10.4999 1.93945L11.5606 3.00011Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid$1","_sfc_main$1","uuid","_sfc_main"],"mappings":";;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;","x_google_ignoreList":[0,1]}

package/dist/chunks/{chevron-up.DqJmLciO.js → chevron-up.B2uWhZf7.js}

@@ -1,5 +1,5 @@
-/* empty css              */
 import { n } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/cross.css";
 let e = 0;
 const i = {
   beforeCreate() {
@@ -17,7 +17,7 @@ var l = function() {
   null,
   null
 );
-const m = _.exports;
+const h = _.exports;
 let r = 0;
 const c = {
   beforeCreate() {
@@ -35,9 +35,9 @@ var v = function() {
   null,
   null
 );
-const d = g.exports;
+const m = g.exports;
 export {
-  m as C,
-  d as a
+  h as C,
+  m as a
 };
-//# sourceMappingURL=chevron-up.DqJmLciO.js.map
+//# sourceMappingURL=chevron-up.B2uWhZf7.js.map

package/dist/chunks/chevron-up.B2uWhZf7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-up.B2uWhZf7.js","sources":["../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-down.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-up.vue"],"sourcesContent":["\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=\"#00112C\" d=\"M2.99988 4.43923L7.99988 9.43923L12.9999 4.43923L14.0605 5.49989L7.99988 11.5605L1.93922 5.49989L2.99988 4.43923Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\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=\"#00112C\" d=\"M12.9999 11.5605L7.99989 6.56055L2.99988 11.5605L1.93922 10.4999L7.99989 4.43923L14.0605 10.4999L12.9999 11.5605Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid$1","_sfc_main$1","uuid","_sfc_main"],"mappings":";;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;","x_google_ignoreList":[0,1]}

package/dist/chunks/{code-snippet.BcZJFqdH.js → code-snippet.DYW7nBqv.js}

@@ -1,15 +1,15 @@
 import { defineComponent as j, ref as d, computed as l, shallowRef as x, onMounted as R, watch as D, watchEffect as J } from "vue";
 import { s as P, H as V, t as n, j as G, x as $, a as U, b as W, p as z, E as F, h as X, k as Y, i as K, c as L, d as N, l as q, e as Q, C as h } from "./codemirror.BlV6WO5w.js";
 import { B as Z, a as ee, b as te, c as ne } from "./es6.BvpG4Oi6.js";
-import { B as ae } from "./dropdown.h_j0DsN2.js";
-import { B as oe } from "./button.B1JELmx-.js";
-import { B as se } from "./typography.CqQaHXhq.js";
+import { B as ae } from "./dropdown.BHJbVSjY.js";
+import { B as oe } from "./button.C_Oq3WUu.js";
+import { B as se } from "./typography.CwyPJr5u.js";
 import { B as ie } from "./loading-indicator.DXc7I1Lm.js";
 import { u as le } from "./i18n.BQkEbtPM.js";
-import { E as re } from "./expand.C263WARj.js";
-import { h as ce } from "./base-modal.HSuNJt-7.js";
-import { C as de } from "./copy.qAUSogPB.js";
-import { B as ge } from "./tooltip.BN6fOXzi.js";
+import { E as re } from "./expand.CwwKq7Uc.js";
+import { h as ce } from "./base-modal.k5uk1jo9.js";
+import { C as de } from "./copy.DUvO5BhX.js";
+import { B as ge } from "./tooltip.CLkOX_2u.js";
 import { n as ue } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/code-snippet.css";
 const pe = {
@@ -312,4 +312,4 @@ export {
   r as b,
   De as c
 };
-//# sourceMappingURL=code-snippet.BcZJFqdH.js.map
+//# sourceMappingURL=code-snippet.DYW7nBqv.js.map