@adyen/bento-vue2 2.0.1 → 2.1.0

package/dist/chunks/{fixed-scroller.YC4bZifw.js → fixed-scroller.CHmrgoTQ.js}

@@ -1,5 +1,5 @@
 import { ref as r, onMounted as C, computed as i, watch as S, nextTick as L, defineComponent as W } from "vue";
-import { B as w } from "./button.DII5Ifwa.js";
+import { B as w } from "./button.tsTeQRcP.js";
 import { u as z } from "./index.CPOlyau9.js";
 import { C as k, a as F } from "./chevron-left.BdXFLX5u.js";
 import { o as x } from "./resize.Bqks3WUm.js";
@@ -140,4 +140,4 @@ const H = M.exports;
 export {
   H as F
 };
-//# sourceMappingURL=fixed-scroller.YC4bZifw.js.map
+//# sourceMappingURL=fixed-scroller.CHmrgoTQ.js.map

package/dist/chunks/{fixed-scroller.YC4bZifw.js.map → fixed-scroller.CHmrgoTQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fixed-scroller.YC4bZifw.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.maskStyle - CSS custom properties for the content mask, based on the rendered button widths\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n\n            if (totalContentWidth.value < visibleSpaceWidth.value) {\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    // Rendered width (including padding) of each button overlay, used to drive the\n    // content mask so the fade matches the area each button occupies. They are 0 when\n    // the corresponding button is hidden, which leaves that edge of the content unmasked.\n    const leftButtonOverlayWidth = ref(0);\n    const rightButtonOverlayWidth = ref(0);\n\n    // Buttons are conditionally rendered, so measure them after the visibility update is applied.\n    watch(\n        shouldShowLeftButton,\n        async shown => {\n            if (!shown) {\n                leftButtonOverlayWidth.value = 0;\n\n                return;\n            }\n\n            await nextTick();\n            leftButtonOverlayWidth.value = leftButtonRef.value?.offsetWidth ?? 0;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        shouldShowRightButton,\n        async shown => {\n            if (!shown) {\n                rightButtonOverlayWidth.value = 0;\n\n                return;\n            }\n\n            await nextTick();\n            rightButtonOverlayWidth.value = rightButtonRef.value?.offsetWidth ?? 0;\n        },\n        { immediate: true }\n    );\n\n    /**\n     * CSS custom properties used by the container mask to match the visible button overlays.\n     */\n    const maskStyle = computed(() => ({\n        '--fixed-scroller-mask-left': `${leftButtonOverlayWidth.value}px`,\n        '--fixed-scroller-mask-right': `${rightButtonOverlayWidth.value}px`,\n    }));\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n        maskStyle,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\" :style=\"maskStyle\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div\n            v-if=\"shouldShowLeftButton\"\n            ref=\"leftButtonRef\"\n            class=\"b-fixed-scroller__left b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div\n            v-if=\"shouldShowRightButton\"\n            ref=\"rightButtonRef\"\n            class=\"b-fixed-scroller__right b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\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 contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const props = defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        centered: { type: Boolean, default: false },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, maskStyle, scrollLeft, scrollRight } =\n        useFixedScroller({\n            contentRef,\n            containerRef: fixedScrollerRef,\n            leftButtonRef,\n            rightButtonRef,\n        });\n\n    const buttonConditionalClasses = computed(() => ({\n        'b-fixed-scroller__button--centered': props.centered,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","leftButtonOverlayWidth","rightButtonOverlayWidth","watch","shown","nextTick","maskStyle","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight","buttonConditionalClasses","props"],"mappings":"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"}
+{"version":3,"file":"fixed-scroller.CHmrgoTQ.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.maskStyle - CSS custom properties for the content mask, based on the rendered button widths\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n\n            if (totalContentWidth.value < visibleSpaceWidth.value) {\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    // Rendered width (including padding) of each button overlay, used to drive the\n    // content mask so the fade matches the area each button occupies. They are 0 when\n    // the corresponding button is hidden, which leaves that edge of the content unmasked.\n    const leftButtonOverlayWidth = ref(0);\n    const rightButtonOverlayWidth = ref(0);\n\n    // Buttons are conditionally rendered, so measure them after the visibility update is applied.\n    watch(\n        shouldShowLeftButton,\n        async shown => {\n            if (!shown) {\n                leftButtonOverlayWidth.value = 0;\n\n                return;\n            }\n\n            await nextTick();\n            leftButtonOverlayWidth.value = leftButtonRef.value?.offsetWidth ?? 0;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        shouldShowRightButton,\n        async shown => {\n            if (!shown) {\n                rightButtonOverlayWidth.value = 0;\n\n                return;\n            }\n\n            await nextTick();\n            rightButtonOverlayWidth.value = rightButtonRef.value?.offsetWidth ?? 0;\n        },\n        { immediate: true }\n    );\n\n    /**\n     * CSS custom properties used by the container mask to match the visible button overlays.\n     */\n    const maskStyle = computed(() => ({\n        '--fixed-scroller-mask-left': `${leftButtonOverlayWidth.value}px`,\n        '--fixed-scroller-mask-right': `${rightButtonOverlayWidth.value}px`,\n    }));\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n        maskStyle,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\" :style=\"maskStyle\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div\n            v-if=\"shouldShowLeftButton\"\n            ref=\"leftButtonRef\"\n            class=\"b-fixed-scroller__left b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div\n            v-if=\"shouldShowRightButton\"\n            ref=\"rightButtonRef\"\n            class=\"b-fixed-scroller__right b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\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 contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const props = defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        centered: { type: Boolean, default: false },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, maskStyle, scrollLeft, scrollRight } =\n        useFixedScroller({\n            contentRef,\n            containerRef: fixedScrollerRef,\n            leftButtonRef,\n            rightButtonRef,\n        });\n\n    const buttonConditionalClasses = computed(() => ({\n        'b-fixed-scroller__button--centered': props.centered,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","leftButtonOverlayWidth","rightButtonOverlayWidth","watch","shown","nextTick","maskStyle","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight","buttonConditionalClasses","props"],"mappings":"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"}

package/dist/chunks/{footer-actions.C9STwwcv.js → footer-actions.B8f-gEQV.js}

@@ -1,7 +1,7 @@
 import { defineComponent as i, toRefs as r, computed as l, onMounted as c } from "vue";
-import { B as u } from "./typography.D1OZJbEa.js";
-import { b as _ } from "./button.DII5Ifwa.js";
-import { B as d } from "./button-actions.bkcLUE1G.js";
+import { B as u } from "./typography.Cd386LC_.js";
+import { b as _ } from "./button.tsTeQRcP.js";
+import { B as d } from "./button-actions.CdetBz3J.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/footer-actions.css";
 const p = {}, g = /* @__PURE__ */ i({
@@ -93,4 +93,4 @@ const w = b.exports;
 export {
   w as F
 };
-//# sourceMappingURL=footer-actions.C9STwwcv.js.map
+//# sourceMappingURL=footer-actions.B8f-gEQV.js.map

package/dist/chunks/{footer-actions.C9STwwcv.js.map → footer-actions.B8f-gEQV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"footer-actions.C9STwwcv.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, type PropType, toRefs } from 'vue';\n    import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"footer-actions.B8f-gEQV.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, type PropType, toRefs } from 'vue';\n    import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{form-layout-group.D4T0Z5xk.js → form-layout-group.BSC2esG8.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, computed as a } from "vue";
-import { E as l } from "./error-message.DKnoUezI.js";
+import { E as l } from "./error-message.B-n8wzFo.js";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/form-layout-group.css";
 const t = [
@@ -81,4 +81,4 @@ const v = f.exports;
 export {
   v as B
 };
-//# sourceMappingURL=form-layout-group.D4T0Z5xk.js.map
+//# sourceMappingURL=form-layout-group.BSC2esG8.js.map

package/dist/chunks/{form-layout-group.D4T0Z5xk.js.map → form-layout-group.BSC2esG8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-layout-group.D4T0Z5xk.js","sources":["../../src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../src/components/form-layout/components/form-layout-group/form-layout-group.vue"],"sourcesContent":["export type BentoLayoutGroupProportions =\n    | '33-33-33'\n    | '50-50'\n    | '25-75'\n    | '75-25'\n    | '33-66'\n    | '66-33'\n    | '25'\n    | '33'\n    | '50'\n    | '100';\n\nexport const BentoLayoutGroupProportions = [\n    '100',\n    '50',\n    '33',\n    '25',\n    '66-33',\n    '33-66',\n    '75-25',\n    '25-75',\n    '50-50',\n    '33-33-33',\n];\n","<template>\n    <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n        <error-message v-if=\"!!errorMessage\" :error-message=\"errorMessage\" class=\"b-form-layout-group__error-message\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType } from 'vue';\n    import { ErrorMessage } from '@/internal';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    // Default proportion\n    const DEFAULT_PROPORTION = 100;\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two columns are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '33-33-33'\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n            validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n        },\n\n        /**\n         * The error message to be displayed for the whole group.\n         *\n         * If set, individual error messages for all components within this group will be hidden.\n         * This is particularly useful for field pairs where a single group error is displayed.\n         */\n        errorMessage: { type: String, default: null },\n    });\n\n    // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n    const computedLayout = computed(() =>\n        BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n    );\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsupported\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n        // Assings the correct layout class\n        [`b-form-layout-group--${computedLayout.value}`]: true,\n        'b-form-layout-group--group-error-messages': !!props.errorMessage,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n"],"names":["BentoLayoutGroupProportions","__default__","DEFAULT_PROPORTION","computedLayout","computed","props","conditionalClasses"],"mappings":";;;;AAYO,MAAAA,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCkEIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5EAC,IAAA,KA0CAC,IAAAC;AAAA,MAAuB,MAAAJ,EAAA,SAAAK,EAAA,MAAA,IAAAA,EAAA,SAAAH;AAAA,IACiD,GAGxEI,IAAAF,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAJ,EAAA,SAAAK,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAF,EAAA,KAAA,EAAA,GAAA;AAAA,MAE/B,6CAAA,CAAA,CAAAE,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form-layout-group.BSC2esG8.js","sources":["../../src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../src/components/form-layout/components/form-layout-group/form-layout-group.vue"],"sourcesContent":["export type BentoLayoutGroupProportions =\n    | '33-33-33'\n    | '50-50'\n    | '25-75'\n    | '75-25'\n    | '33-66'\n    | '66-33'\n    | '25'\n    | '33'\n    | '50'\n    | '100';\n\nexport const BentoLayoutGroupProportions = [\n    '100',\n    '50',\n    '33',\n    '25',\n    '66-33',\n    '33-66',\n    '75-25',\n    '25-75',\n    '50-50',\n    '33-33-33',\n];\n","<template>\n    <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n        <error-message v-if=\"!!errorMessage\" :error-message=\"errorMessage\" class=\"b-form-layout-group__error-message\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType } from 'vue';\n    import { ErrorMessage } from '@/internal';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    // Default proportion\n    const DEFAULT_PROPORTION = 100;\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two columns are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '33-33-33'\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n            validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n        },\n\n        /**\n         * The error message to be displayed for the whole group.\n         *\n         * If set, individual error messages for all components within this group will be hidden.\n         * This is particularly useful for field pairs where a single group error is displayed.\n         */\n        errorMessage: { type: String, default: null },\n    });\n\n    // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n    const computedLayout = computed(() =>\n        BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n    );\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsupported\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n        // Assings the correct layout class\n        [`b-form-layout-group--${computedLayout.value}`]: true,\n        'b-form-layout-group--group-error-messages': !!props.errorMessage,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n"],"names":["BentoLayoutGroupProportions","__default__","DEFAULT_PROPORTION","computedLayout","computed","props","conditionalClasses"],"mappings":";;;;AAYO,MAAAA,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCkEIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5EAC,IAAA,KA0CAC,IAAAC;AAAA,MAAuB,MAAAJ,EAAA,SAAAK,EAAA,MAAA,IAAAA,EAAA,SAAAH;AAAA,IACiD,GAGxEI,IAAAF,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAJ,EAAA,SAAAK,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAF,EAAA,KAAA,EAAA,GAAA;AAAA,MAE/B,6CAAA,CAAA,CAAAE,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{form-layout-title.C0lwzPZz.js → form-layout-title.b2BMYjnl.js}

@@ -1,9 +1,9 @@
 import { defineComponent as n, useSlots as c, computed as i, provide as f, toRef as m } from "vue";
-import { B as p } from "./alert.DJDHwVeR.js";
+import { B as p } from "./alert.BddJPWMN.js";
 import { u } from "./use-has-slot.C9lQZ6nz.js";
 import { F as y } from "./form-layout.types.bZW9iR6_.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as d, a as v } from "./typography.D1OZJbEa.js";
+import { B as d, a as v } from "./typography.Cd386LC_.js";
 import { u as g } from "./index.CPOlyau9.js";
 import "../assets/form-layout-title.css";
 const b = {}, h = /* @__PURE__ */ n({
@@ -149,4 +149,4 @@ export {
   U as b,
   J as f
 };
-//# sourceMappingURL=form-layout-title.C0lwzPZz.js.map
+//# sourceMappingURL=form-layout-title.b2BMYjnl.js.map

package/dist/chunks/{form-layout-title.C0lwzPZz.js.map → form-layout-title.b2BMYjnl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-layout-title.C0lwzPZz.js","sources":["../../src/components/form-layout/form-layout.vue","../../src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\" @submit=\"emit('submit', $event)\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"submit\"]);\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","import { type BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert v-if=\"hasSlot('message')\" :id=\"id\" variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, useSlots } from 'vue';\n    import {\n        type BentoFormLayoutFieldTipTypeOption,\n        BentoFormLayoutFieldTipTypeOptions,\n    } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n        /**\n         * Unique identifier to the form field. Used for accessibility.\n         */\n        id: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography\n            v-if=\"hasSlot('description') || allFieldsRequired\"\n            class=\"b-form-layout-title__description\"\n            el=\"span\"\n            wide\n        >\n            <slot name=\"description\" />\n            <template v-if=\"allFieldsRequired\">\n                {{ hasSlot('description') ? ` ${t('requiredFields')}` : t('requiredFields') }}\n            </template>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n\n        /**\n         * Defines if the Form Layout title displays\n         * a message indicating that all fields are required.\n         */\n        allFieldsRequired: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organize related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-form-layout-title',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$2","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$1","__default__","messages","useI18n","isSection","conditionalClasses"],"mappings":";;;;;;;;AAwFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;iBA5DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAiBAI,IAAAC,EAAA,MAAAC,EAAA,OAAA,SAAA,KAAA,GACAC,IAAAF,EAAA,MAAAH,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAM,EAAAC,GAAAC,EAAAJ,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;qBC9CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GC+DHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AA3BA,UAAAZ,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsDAa,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApEAd,IAAAC,EAAA,GACA,EAAA,EAAA,IAAAc,EAAA,GAkCAC,IAAAX,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form-layout-title.b2BMYjnl.js","sources":["../../src/components/form-layout/form-layout.vue","../../src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\" @submit=\"emit('submit', $event)\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"submit\"]);\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","import { type BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert v-if=\"hasSlot('message')\" :id=\"id\" variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, useSlots } from 'vue';\n    import {\n        type BentoFormLayoutFieldTipTypeOption,\n        BentoFormLayoutFieldTipTypeOptions,\n    } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n        /**\n         * Unique identifier to the form field. Used for accessibility.\n         */\n        id: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography\n            v-if=\"hasSlot('description') || allFieldsRequired\"\n            class=\"b-form-layout-title__description\"\n            el=\"span\"\n            wide\n        >\n            <slot name=\"description\" />\n            <template v-if=\"allFieldsRequired\">\n                {{ hasSlot('description') ? ` ${t('requiredFields')}` : t('requiredFields') }}\n            </template>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n\n        /**\n         * Defines if the Form Layout title displays\n         * a message indicating that all fields are required.\n         */\n        allFieldsRequired: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organize related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-form-layout-title',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$2","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$1","__default__","messages","useI18n","isSection","conditionalClasses"],"mappings":";;;;;;;;AAwFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;iBA5DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAiBAI,IAAAC,EAAA,MAAAC,EAAA,OAAA,SAAA,KAAA,GACAC,IAAAF,EAAA,MAAAH,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAM,EAAAC,GAAAC,EAAAJ,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;qBC9CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GC+DHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AA3BA,UAAAZ,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsDAa,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApEAd,IAAAC,EAAA,GACA,EAAA,EAAA,IAAAc,EAAA,GAkCAC,IAAAX,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{header-with-views.BqobE7IF.js → header-with-views.BJCjvhem.js}

@@ -1,12 +1,12 @@
 import { getCurrentInstance as _, ref as c, reactive as ze, computed as S, watch as B, nextTick as te, defineComponent as ue, toRef as Be, onMounted as be, useSlots as Ue } from "vue";
-import { B as de } from "./button.DII5Ifwa.js";
-import { B as Le } from "./checkbox.D5xZ5Nnh.js";
-import { u as X, h as _e, f as ye, c as ve, B as Ne } from "./button-actions.bkcLUE1G.js";
-import { B as Ge } from "./modal.B3-pmL5s.js";
-import { B as $e } from "./typography.D1OZJbEa.js";
+import { B as de } from "./button.tsTeQRcP.js";
+import { B as Le } from "./checkbox.CnuIUi4-.js";
+import { u as X, h as _e, f as ye, c as ve, B as Ne } from "./button-actions.CdetBz3J.js";
+import { B as Ge } from "./modal.UkzON4bz.js";
+import { B as $e } from "./typography.Cd386LC_.js";
 import { u as qe } from "./use-has-slot.C9lQZ6nz.js";
 import { g as Q } from "./generate-uid.DBWe4g6T.js";
-import { B as Ke } from "./button-actions-with-menu.BY394ars.js";
+import { B as Ke } from "./button-actions-with-menu.1vZJWN1K.js";
 import { u as se, g as Ye, a as je } from "./index.CPOlyau9.js";
 import { B as Je } from "./bin.DEuK6FKk.js";
 import { D as Xe } from "./dot.BzjMWDGe.js";
@@ -15,15 +15,15 @@ import { n as d } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { R as Qe } from "./refresh.DG69D4K2.js";
 import { h as He, p as We } from "./index.CL3TXc0a.js";
 import { B as et } from "./divider.KxXy6nzJ.js";
-import { B as tt } from "./input-field.D912rZS_.js";
+import { B as tt } from "./input-field.90DWNO1a.js";
 import "./index.Cl4_42j5.js";
-import { g as st } from "./dropdown.Bnq4kP7k.js";
-import { F as at } from "./field-label.C7BCsofY.js";
+import { g as st } from "./dropdown.CpZQYisR.js";
+import { F as at } from "./field-label.BQaDr37D.js";
 import { G as it } from "./grab.D-sx9XVE.js";
 import { u as J } from "./on-click-outside.BgIzQ2G1.js";
-import { I as nt } from "./info-icon-with-popover.BvYyGm4D.js";
-import { T as lt } from "./title-details.ChwPP7C5.js";
-import { u as rt } from "./use-bento-toast-controller.A5xraVqa.js";
+import { I as nt } from "./info-icon-with-popover.BzGVcMqy.js";
+import { T as lt } from "./title-details.BhR2nis-.js";
+import { u as rt } from "./use-bento-toast-controller.DMA9d_oD.js";
 import "../assets/header-with-views.css";
 const ot = {
   __name: "download",
@@ -1243,10 +1243,10 @@ var i5 = function() {
   "9a246341"
 );
 const r5 = l5.exports, o5 = {
-  i18n: { messages: Oa }
+  i18n: { messages: Oa },
+  name: "bento-header-with-views"
 }, c5 = /* @__PURE__ */ ue({
   ...o5,
-  __name: "header-with-views",
   props: {
     actions: { default: () => [] },
     title: { default: null },
@@ -1522,10 +1522,10 @@ var u5 = function() {
   d5,
   !1,
   null,
-  "afffc3f4"
+  "53b01de6"
 );
 const O5 = _5.exports;
 export {
   O5 as h
 };
-//# sourceMappingURL=header-with-views.BqobE7IF.js.map
+//# sourceMappingURL=header-with-views.BJCjvhem.js.map