@adyen/bento-vue2 1.9.0 → 1.11.0

package/dist/focus-trap.js

@@ -1,4 +1,4 @@
-import { B as a } from "./chunks/index.6cef7328.js";
+import { B as a } from "./chunks/index.7d2ea1de.js";
 export {
   a as BentoFocusTrap
 };

package/dist/form-layout.js

@@ -3,8 +3,8 @@ import { BentoAlert as d } from "./alert.js";
 import { F as b } from "./chunks/form-layout.types.a7a1438d.js";
 import { u as m } from "./chunks/use-has-slot.fbeb19ec.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as u, c as C } from "./chunks/index.b201e81d.js";
-import "./assets/index37.css";
+import { B as u, c as C } from "./chunks/index.b0a89960.js";
+import "./assets/index29.css";
 const B = {}, $ = /* @__PURE__ */ _({
   ...B,
   __name: "form-layout",

package/dist/form-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout.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-group/form-layout-group.types.ts","../src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../src/components/form-layout/components/form-layout-group/form-layout-group.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\">\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 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 { 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 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 { PropType } from 'vue';\n    import { BentoFormLayoutFieldTipTypeOption, BentoFormLayoutFieldTipTypeOptions } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\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</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","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","import { computed, onMounted, Ref } from 'vue';\nimport { BentoLayoutGroupProportions } from '../form-layout-group.types';\n\nconst DEFAULT_PROPORTION = 100;\n\n/**\n * Wraps a FormLayoutGroup child inside a \"div\" container.\n * This helps preventing the components from re-writing the classes or styles.\n * @param {Element} child - Child element to be wrapped\n * @param {HTMLDivElement} container - Container in which the child will be wrapped into\n * @param {string} containerClass - FormLayoutGroup layout percentage class\n */\nfunction wrapInsideContainer(child: Element, container: HTMLDivElement, containerClass: string) {\n    // Insert container above the child\n    child.parentNode.insertBefore(container, child);\n    // Move child to the container\n    container.appendChild(child);\n    // Apply layout class\n    container.classList.add(containerClass);\n}\n\n/**\n * Calculates the CSS classes based on the percentage\n * for each one of the layouts in format `##-##` or `##`.\n *\n * It receives a layout of type @see BentoLayoutGroupProportions to\n * generate the class and apply it to the children of the @see BentoFormLayoutGroup component\n *\n * @param {Ref<BentoLayoutGroupProportions>} layoutProp Layout string in the format `##` or `##-##`\n * @param {Ref<HTMLElement>} formLayoutGroupRef Reference to an HTML element of type BentoFormLayoutGroup\n */\nexport const useFormLayoutGroupPercentage = (\n    layoutProp: Ref<BentoLayoutGroupProportions>,\n    formLayoutGroupRef: Ref<HTMLElement>\n) => {\n    // Split the `##-##` format into individual values [##, ##]\n    const getLayoutValues = layout => layout.split?.('-').map(value => parseInt(value, 10));\n    // Split the values only if the are in BentoLayoutGroupProportions, otherwise return 100%\n    const layout = computed(() =>\n        BentoLayoutGroupProportions.includes(layoutProp.value) ? getLayoutValues(layoutProp.value) : DEFAULT_PROPORTION\n    );\n\n    onMounted(() => {\n        // Apply class to every immediate child\n        const layoutClassName = formLayoutGroupRef.value.classList[0];\n        const immediateChildren = formLayoutGroupRef.value.querySelectorAll(`.${layoutClassName} > *`); // Get immediate children\n\n        immediateChildren.forEach((child, index) => {\n            const containerClass = `${layoutClassName}--${layout.value[index] || '100'}`; // 100% default\n            wrapInsideContainer(child, document.createElement('div'), containerClass);\n        });\n    });\n};\n","<template>\n    <div ref=\"formLayoutGroup\" class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, toRef } from 'vue';\n    import { useFormLayoutGroupPercentage } from './composable/use-form-layout-group-percentage';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\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 colums 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    const formLayoutGroup = ref(null);\n    useFormLayoutGroupPercentage(toRef(props, 'layout'), formLayoutGroup);\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsopprted\n        // \"form-layout.scss\" depends on this class\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\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","<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 v-if=\"hasSlot('description')\" class=\"b-form-layout-title__description\" el=\"span\" wide>\n            <slot name=\"description\" />\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\n    const slots = useSlots();\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    // 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, organise 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</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","DEFAULT_PROPORTION","wrapInsideContainer","child","container","containerClass","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","index","__default__$1","formLayoutGroup","ref","conditionalClasses","__default__","isSection"],"mappings":";;;;;;;AAsFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBA1DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,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;;;;;;;;;;;;;;;;;;qBC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GCiDHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBCxCGC,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCpBAC,IAAA;AASA,SAAAC,EAAAC,GAAAC,GAAAC,GAAA;AAEI,EAAAF,EAAA,WAAA,aAAAC,GAAAD,CAAA,GAEAC,EAAA,YAAAD,CAAA,GAEAC,EAAA,UAAA,IAAAC,CAAA;AACJ;AAYa,MAAAC,IAAA,CAAAC,GAAAC,MAAA;AAKT,QAAAC,IAAA,CAAAC,MAAA;;AAAA,YAAAC,IAAAD,EAAA,UAAA,gBAAAC,EAAA,KAAAD,GAAA,KAAA,IAAA,CAAAE,MAAA,SAAAA,GAAA,EAAA;AAAA,KAEAC,IAAArB;AAAA,IAAe,MAAAQ,EAAA,SAAAO,EAAA,KAAA,IAAAE,EAAAF,EAAA,KAAA,IAAAN;AAAA,EACkF;AAGjG,EAAAa,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAGA,IAFAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EAEA,QAAA,CAAAZ,GAAAa,MAAA;AACI,YAAAX,IAAA,GAAAU,MAAAF,EAAA,MAAAG,CAAA,KAAA;AACA,MAAAd,EAAAC,GAAA,SAAA,cAAA,KAAA,GAAAE,CAAA;AAAA,IAAwE,CAAA;AAAA,EAC3E,CAAA;AAET,GCqBIY,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/BAC,IAAAC,EAAA,IAAA;AACA,IAAAb,EAAAT,EAAAJ,GAAA,QAAA,GAAAyB,CAAA;AAEA,UAAAE,IAAA5B,EAAA,OAAA;AAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA,IAG0C,EAAA;;;;;;;;;;;;;;;;;sBCwBrF4B,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAlC,IAAAC,EAAA,GAyBAkC,IAAA9B,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiC,IAAA5B,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form-layout.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-group/form-layout-group.types.ts","../src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../src/components/form-layout/components/form-layout-group/form-layout-group.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\">\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 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 { 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 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 { PropType } from 'vue';\n    import { BentoFormLayoutFieldTipTypeOption, BentoFormLayoutFieldTipTypeOptions } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\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</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","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","import { computed, onMounted, Ref } from 'vue';\nimport { BentoLayoutGroupProportions } from '../form-layout-group.types';\n\nconst DEFAULT_PROPORTION = 100;\n\n/**\n * Wraps a FormLayoutGroup child inside a \"div\" container.\n * This helps preventing the components from re-writing the classes or styles.\n * @param child Child element to be wrapped\n * @param container Container in which the child will be wrapped into\n * @param containerClass FormLayoutGroup layout percentage class\n */\nfunction wrapInsideContainer(child: Element, container: HTMLDivElement, containerClass: string) {\n    // Insert container above the child\n    child.parentNode.insertBefore(container, child);\n    // Move child to the container\n    container.appendChild(child);\n    // Apply layout class\n    container.classList.add(containerClass);\n}\n\n/**\n * Calculates the CSS classes based on the percentage\n * for each one of the layouts in format `##-##` or `##`.\n *\n * It receives a layout of type `BentoLayoutGroupProportions` to\n * generate the class and apply it to the children of the `BentoFormLayoutGroup` component\n *\n * @param layoutProp Layout string in the format `##` or `##-##`\n * @param formLayoutGroupRef Reference to an HTML element of type BentoFormLayoutGroup\n */\nexport const useFormLayoutGroupPercentage = (\n    layoutProp: Ref<BentoLayoutGroupProportions>,\n    formLayoutGroupRef: Ref<HTMLElement>\n) => {\n    // Split the `##-##` format into individual values [##, ##]\n    const getLayoutValues = layout => layout.split?.('-').map(value => parseInt(value, 10));\n    // Split the values only if the are in BentoLayoutGroupProportions, otherwise return 100%\n    const layout = computed(() =>\n        BentoLayoutGroupProportions.includes(layoutProp.value) ? getLayoutValues(layoutProp.value) : DEFAULT_PROPORTION\n    );\n\n    onMounted(() => {\n        // Apply class to every immediate child\n        const layoutClassName = formLayoutGroupRef.value.classList[0];\n        const immediateChildren = formLayoutGroupRef.value.querySelectorAll(`.${layoutClassName} > *`); // Get immediate children\n\n        immediateChildren.forEach((child, index) => {\n            const containerClass = `${layoutClassName}--${layout.value[index] || '100'}`; // 100% default\n            wrapInsideContainer(child, document.createElement('div'), containerClass);\n        });\n    });\n};\n","<template>\n    <div ref=\"formLayoutGroup\" class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, toRef } from 'vue';\n    import { useFormLayoutGroupPercentage } from './composable/use-form-layout-group-percentage';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\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 colums 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    const formLayoutGroup = ref(null);\n    useFormLayoutGroupPercentage(toRef(props, 'layout'), formLayoutGroup);\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsopprted\n        // \"form-layout.scss\" depends on this class\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\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","<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 v-if=\"hasSlot('description')\" class=\"b-form-layout-title__description\" el=\"span\" wide>\n            <slot name=\"description\" />\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\n    const slots = useSlots();\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    // 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, organise 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</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","DEFAULT_PROPORTION","wrapInsideContainer","child","container","containerClass","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","index","__default__$1","formLayoutGroup","ref","conditionalClasses","__default__","isSection"],"mappings":";;;;;;;AAsFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBA1DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,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;;;;;;;;;;;;;;;;;;qBC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GCiDHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBCxCGC,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCpBAC,IAAA;AASA,SAAAC,EAAAC,GAAAC,GAAAC,GAAA;AAEI,EAAAF,EAAA,WAAA,aAAAC,GAAAD,CAAA,GAEAC,EAAA,YAAAD,CAAA,GAEAC,EAAA,UAAA,IAAAC,CAAA;AACJ;AAYa,MAAAC,IAAA,CAAAC,GAAAC,MAAA;AAKT,QAAAC,IAAA,CAAAC,MAAA;;AAAA,YAAAC,IAAAD,EAAA,UAAA,gBAAAC,EAAA,KAAAD,GAAA,KAAA,IAAA,CAAAE,MAAA,SAAAA,GAAA,EAAA;AAAA,KAEAC,IAAArB;AAAA,IAAe,MAAAQ,EAAA,SAAAO,EAAA,KAAA,IAAAE,EAAAF,EAAA,KAAA,IAAAN;AAAA,EACkF;AAGjG,EAAAa,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAGA,IAFAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EAEA,QAAA,CAAAZ,GAAAa,MAAA;AACI,YAAAX,IAAA,GAAAU,MAAAF,EAAA,MAAAG,CAAA,KAAA;AACA,MAAAd,EAAAC,GAAA,SAAA,cAAA,KAAA,GAAAE,CAAA;AAAA,IAAwE,CAAA;AAAA,EAC3E,CAAA;AAET,GCqBIY,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/BAC,IAAAC,EAAA,IAAA;AACA,IAAAb,EAAAT,EAAAJ,GAAA,QAAA,GAAAyB,CAAA;AAEA,UAAAE,IAAA5B,EAAA,OAAA;AAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA,IAG0C,EAAA;;;;;;;;;;;;;;;;;sBCwBrF4B,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAlC,IAAAC,EAAA,GAyBAkC,IAAA9B,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiC,IAAA5B,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/header.js

@@ -1,15 +1,15 @@
 import { defineComponent as O, computed as v } from "vue";
-import { B as C } from "./chunks/button-actions-with-menu.32770485.js";
+import { B as C } from "./chunks/button-actions-with-menu.767344df.js";
 import { BentoInfoIcon as E } from "./info-icon.js";
 import { u as A } from "./chunks/use-has-slot.fbeb19ec.js";
-import { B as U, c as T, a as X } from "./chunks/index.b201e81d.js";
+import { B as U, c as T, a as X } from "./chunks/index.b0a89960.js";
 import { u as w } from "./chunks/i18n.eb5b985b.js";
 import { c as p, a as P } from "./chunks/index.86453263.js";
 import { r as c, t as i, e as g, g as D, d as R, f as H } from "./chunks/index.f55fdc32.js";
 import { e as B } from "./chunks/index.fdf12170.js";
 import { e as Y } from "./chunks/index.d80206ed.js";
 import { n as G } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index29.css";
+import "./assets/index38.css";
 function L(e, t) {
   c(2, arguments);
   var a = i(e), n = i(t), l = a.getFullYear() - n.getFullYear(), r = a.getMonth() - n.getMonth();

package/dist/index.js

@@ -3,66 +3,68 @@ var i = (e, t, o) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writab
 var r = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
 import "./chunks/index.4c062058.js";
 import { reactive as m } from "vue";
-import { g as p } from "./chunks/unique-id.a2a2b458.js";
+import { g as s } from "./chunks/unique-id.a2a2b458.js";
 import { BentoAccordion as T, BentoAccordionItem as C } from "./accordion.js";
 import { BentoActionBar as D } from "./action-bar.js";
-import { BentoAlert as I, BentoAlertEvent as b, BentoAlertTypeOption as E, BentoAlertVariant as L } from "./alert.js";
-import { a as F, b as V, B as k } from "./chunks/button.7dd8d4de.js";
-import { BentoColumnOverflow as G, BentoDataGrid as w, BentoDatagridAriaSortValue as M, BentoDatagridEvent as O, BentoDatagridSortDirection as R, BentoDatagridStyleState as _ } from "./data-grid.js";
+import { BentoAlert as b, BentoAlertEvent as I, BentoAlertTypeOption as E, BentoAlertVariant as L } from "./alert.js";
+import { a as F, b as V, B as k } from "./chunks/button.bb5b4909.js";
+import { BentoColumnOverflow as G, BentoDataGrid as w, BentoDatagridAriaSortValue as M, BentoDatagridEvent as O, BentoDatagridSortDirection as R, BentoDatagridStyleState as N } from "./data-grid.js";
 import { BentoCard as q, BentoCardBackground as z, BentoCardTitleSize as U } from "./card.js";
 import { BentoDatePicker as W, BentoDatePickerEvent as Y } from "./date-picker.js";
-import { B as H, a as $ } from "./chunks/index.16914bb1.js";
-import { B as Q, u as X } from "./chunks/dropdown.6461dbe3.js";
+import { B as H, a as $ } from "./chunks/index.179d485c.js";
+import { B as Q, u as X } from "./chunks/dropdown.4152cc00.js";
 import { BentoDropdownAvatar as tt, BentoDropdownCountry as et, BentoDropdownCurrency as ot, BentoDropdownPaymentMethod as nt, BentoDropdownTag as rt } from "./dropdown.js";
-import { B as Bt, b as it, a as mt } from "./chunks/checkbox.65743b08.js";
-import { BentoClickOutside as st } from "./click-outside.js";
+import { B as Bt, b as it, a as mt } from "./chunks/checkbox.c684c20a.js";
+import { BentoClickOutside as pt } from "./click-outside.js";
 import { BentoCodeSnippet as ut, BentoCodeSnippetEvent as lt, BentoCodeSnippetSupportedLanguage as ft, BentoCodeSnippetVariant as xt } from "./code-snippet.js";
-import { BentoCountry as ct, BentoCountryCode as gt, BentoCountryVariant as St, useCountryCapital as Tt, useCountryName as Ct, useCountryPhoneCode as ht } from "./country.js";
-import { BentoCurrency as vt, BentoCurrencyISOCode as It } from "./currency.js";
-import { B as Et, a as Lt } from "./chunks/index.322692c8.js";
-import { BentoDivider as Ft } from "./divider.js";
-import { BentoEmptyState as kt, BentoEmptyStateImage as At, BentoEmptyStateImageVariant as Gt, BentoEmptyStateVariant as wt } from "./empty-state.js";
-import { BentoFilterBar as Ot, BentoFilterBarEvent as Rt, BentoFilterEvent as _t, BentoFilterItemType as Nt } from "./filter-bar.js";
-import { BentoFormLayout as zt, BentoFormLayoutFieldTip as Ut, BentoFormLayoutGroup as Kt, BentoFormLayoutTitle as Wt } from "./form-layout.js";
-import { BentoImage as jt, BentoImageAspectRatio as Ht, BentoImageObjectFit as $t } from "./image.js";
-import { BentoInfoIcon as Qt } from "./info-icon.js";
-import { BentoInputField as Zt, BentoInputFieldElementPosition as te, BentoInputFieldEvent as ee, BentoInputFieldStateClass as oe, BentoInputFieldType as ne, BentoInputFieldVariant as re } from "./input-field.js";
-import { BentoLoadingIndicator as Be, BentoLoadingIndicatorEvent as ie } from "./loading-indicator.js";
-import { BentoLink as pe, BentoLinkVariant as se } from "./link.js";
-import { B as ue, a as le } from "./chunks/index.f358c4bd.js";
-import { BentoModal as xe } from "./modal.js";
-import { b as ce, d as ge, e as Se, c as Te, a as Ce, B as he } from "./chunks/base-modal.75319f4e.js";
-import { BentoHeader as ve } from "./header.js";
-import { BentoPagination as be } from "./pagination.js";
-import { BentoPaymentMethod as Le, BentoPaymentMethodType as Pe } from "./payment-method.js";
-import { a as Ve, B as ke } from "./chunks/index.d1beb704.js";
-import { BentoRadioGroup as Ge, BentoRadioGroupVariant as we } from "./radio-group.js";
-import { BentoSearchBar as Oe, BentoSearchBarEvent as Re, BentoSearchBarInternalEvent as _e } from "./search-bar.js";
-import { BentoSegmentedControl as qe, BentoSegmentedControlEvent as ze } from "./segmented-control.js";
-import { BentoSidepanel as Ke, BentoSidepanelAnimation as We, BentoSidepanelEvent as Ye, BentoSidepanelPage as je } from "./sidepanel.js";
-import { BentoStatus as $e, BentoStatusVariant as Je } from "./status.js";
-import { BentoStep as Xe, BentoStepper as Ze, BentoStepperTypeOption as to, BentoStepperVariantOption as eo } from "./stepper.js";
-import { B as no, a as ro } from "./chunks/index.0890dc99.js";
-import { BentoSummaryGrid as Bo, BentoSummaryGridItemAmount as io, BentoSummaryGridItemCustom as mo, BentoSummaryGridItemNumeric as po, BentoSummaryGridItemPercentage as so, BentoSummaryGridItemSize as uo, BentoSummaryGridItemText as lo, BentoSummaryGridItemTrendDirection as fo } from "./summary-grid.js";
-import { BentoTab as yo, BentoTabs as co } from "./tabs.js";
-import { BentoTag as So, BentoTagVariant as To } from "./tag.js";
-import { BentoTextarea as ho } from "./textarea.js";
-import { BentoTimeline as vo, BentoTimelineGapUnit as Io, BentoTimelineItem as bo, BentoTimelineItemVariant as Eo, BentoTimelineShowMorePlacement as Lo } from "./timeline.js";
-import { BentoToast as Fo } from "./toast.js";
-import { u as ko } from "./chunks/toastController.fd667b68.js";
-import { BentoToggle as Go, BentoToggleLabelPosition as wo, BentoTogglePropClass as Mo } from "./toggle.js";
-import { BentoTutorial as Ro } from "./tutorial.js";
-import { B as No, c as qo, b as zo, a as Uo } from "./chunks/index.b201e81d.js";
-import { BentoButtonActions as Wo, BentoButtonActionsLayout as Yo, BentoButtonActionsLayoutBasic as jo, BentoButtonActionsLayoutExtended as Ho } from "./button.js";
-import { B as Jo, a as Qo } from "./chunks/loading-button.459b9ab4.js";
-import { b as Zo, b as tn } from "./chunks/calendar.a885d8fc.js";
-import { BentoCheckboxGroup as on, BentoCheckboxGroupVariant as nn } from "./checkbox.js";
-import { D as an } from "./chunks/date-input.9186a0bf.js";
-import { a as mn, B as pn } from "./chunks/keyboard-navigation.ca47dfa8.js";
-import { a as dn, b as un } from "./chunks/listbox.a117e6d4.js";
-import { B as fn } from "./chunks/directive.0408e565.js";
-import { b as yn, B as cn, a as gn } from "./chunks/tooltip.b8929659.js";
-class s {
+import { BentoCountry as yt } from "./country.js";
+import { c as gt, B as Tt, a as Ct, u as ht, b as Dt } from "./chunks/country.types.002caff2.js";
+import { BentoCurrency as bt, BentoCurrencyISOCode as It } from "./currency.js";
+import { B as Lt, a as Pt } from "./chunks/index.720f0cbf.js";
+import { B as Vt } from "./chunks/index.1e8c900a.js";
+import { BentoEmptyState as At, BentoEmptyStateImage as Gt, BentoEmptyStateImageVariant as wt, BentoEmptyStateVariant as Mt } from "./empty-state.js";
+import { BentoFilterBar as Rt, BentoFilterBarEvent as Nt, BentoFilterEvent as _t, BentoFilterItemType as qt } from "./filter-bar.js";
+import { BentoFormLayout as Ut, BentoFormLayoutFieldTip as Kt, BentoFormLayoutGroup as Wt, BentoFormLayoutTitle as Yt } from "./form-layout.js";
+import { BentoImage as Ht, BentoImageAspectRatio as $t, BentoImageObjectFit as Jt } from "./image.js";
+import { BentoInfoIcon as Xt } from "./info-icon.js";
+import { BentoInputField as te, BentoInputFieldElementPosition as ee, BentoInputFieldEvent as oe, BentoInputFieldStateClass as ne, BentoInputFieldType as re, BentoInputFieldVariant as ae } from "./input-field.js";
+import { BentoLoadingIndicator as ie, BentoLoadingIndicatorEvent as me } from "./loading-indicator.js";
+import { BentoLink as pe, BentoLinkVariant as de } from "./link.js";
+import { B as le, a as fe } from "./chunks/index.f2223abb.js";
+import { BentoModal as ce } from "./modal.js";
+import { b as Se, d as ge, e as Te, c as Ce, a as he, B as De } from "./chunks/base-modal.5640a66a.js";
+import { BentoHeader as be } from "./header.js";
+import { BentoPagination as Ee } from "./pagination.js";
+import { BentoPaymentMethod as Pe, BentoPaymentMethodType as Fe } from "./payment-method.js";
+import { a as ke, B as Ae } from "./chunks/index.f18f79eb.js";
+import { BentoRadioGroup as we, BentoRadioGroupVariant as Me } from "./radio-group.js";
+import { BentoSearchBar as Re, BentoSearchBarEvent as Ne, BentoSearchBarInternalEvent as _e } from "./search-bar.js";
+import { BentoSecondaryNav as ze } from "./secondary-nav.js";
+import { BentoSegmentedControl as Ke, BentoSegmentedControlEvent as We } from "./segmented-control.js";
+import { BentoSidepanel as je, BentoSidepanelAnimation as He, BentoSidepanelEvent as $e, BentoSidepanelPage as Je } from "./sidepanel.js";
+import { BentoStatus as Xe, BentoStatusVariant as Ze } from "./status.js";
+import { BentoStep as eo, BentoStepper as oo, BentoStepperTypeOption as no, BentoStepperVariantOption as ro } from "./stepper.js";
+import { B as Bo, a as io } from "./chunks/index.75f0e99f.js";
+import { BentoSummaryGrid as so, BentoSummaryGridItemAmount as po, BentoSummaryGridItemCustom as uo, BentoSummaryGridItemNumeric as lo, BentoSummaryGridItemPercentage as fo, BentoSummaryGridItemSize as xo, BentoSummaryGridItemText as co, BentoSummaryGridItemTrendDirection as yo } from "./summary-grid.js";
+import { BentoTab as go, BentoTabs as To } from "./tabs.js";
+import { BentoTag as ho, BentoTagVariant as Do } from "./tag.js";
+import { BentoTextarea as bo } from "./textarea.js";
+import { BentoTimeline as Eo, BentoTimelineGapUnit as Lo, BentoTimelineItem as Po, BentoTimelineItemVariant as Fo, BentoTimelineShowMorePlacement as Vo, BentoTimelineStatus as ko } from "./timeline.js";
+import { BentoToast as Go } from "./toast.js";
+import { u as Mo } from "./chunks/toastController.fd667b68.js";
+import { BentoToggle as Ro, BentoToggleLabelPosition as No, BentoTogglePropClass as _o } from "./toggle.js";
+import { BentoTutorial as zo } from "./tutorial.js";
+import { B as Ko, c as Wo, b as Yo, a as jo } from "./chunks/index.b0a89960.js";
+import { BentoButtonActions as $o, BentoButtonActionsLayout as Jo, BentoButtonActionsLayoutBasic as Qo, BentoButtonActionsLayoutExtended as Xo } from "./button.js";
+import { B as tn, a as en } from "./chunks/loading-button.fb025a2e.js";
+import { b as nn, b as rn } from "./chunks/calendar.4ab3c2dc.js";
+import { BentoCheckboxGroup as Bn, BentoCheckboxGroupVariant as mn } from "./checkbox.js";
+import { D as pn } from "./chunks/date-input.9186a0bf.js";
+import { a as un, B as ln } from "./chunks/keyboard-navigation.ca47dfa8.js";
+import { a as xn, b as cn } from "./chunks/listbox.7cf6d6b4.js";
+import { B as Sn } from "./chunks/directive.0408e565.js";
+import { b as Tn, B as Cn, a as hn } from "./chunks/tooltip.f48beb54.js";
+class p {
   constructor() {
     r(this, "_state");
     this._state = m({ queue: [] });
@@ -74,7 +76,7 @@ class s {
     this._state.queue.splice(this._state.queue.indexOf(t), 1);
   }
   addToast(t) {
-    const o = p("toast"), n = {
+    const o = s("toast"), n = {
       ...t,
       id: o,
       dismiss: () => this.dismissToast(n)
@@ -89,7 +91,7 @@ const a = (e) => {
   document.body.classList.add(e);
 }, u = {
   install: async (e, t) => {
-    t != null && t.withToast && (e.prototype.$bentoToastController = new s()), (t == null ? void 0 : t.theme) === "b-legacy-theme" ? (a(
+    t != null && t.withToast && (e.prototype.$bentoToastController = new p()), (t == null ? void 0 : t.theme) === "b-legacy-theme" ? (a(
       "b-legacy-theme"
       /* LEGACY */
     ), await import("@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css?used")) : (t == null ? void 0 : t.theme) === "b-styleguide-theme" ? (a(
@@ -97,20 +99,20 @@ const a = (e) => {
       /* STYLEGUIDE */
     ), await import("@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css?used")) : await import("@adyen/bento-design-tokens/dist/css/bento/variables.css?used"), t != null && t.withUtilityClasses && await import("@adyen/bento-design-tokens/dist/css/bento/utility.css?used");
   }
-}, c = u;
+}, y = u;
 export {
   T as BentoAccordion,
   C as BentoAccordionItem,
   D as BentoActionBar,
-  I as BentoAlert,
-  b as BentoAlertEvent,
+  b as BentoAlert,
+  I as BentoAlertEvent,
   E as BentoAlertTypeOption,
   L as BentoAlertVariant,
   F as BentoButton,
-  Wo as BentoButtonActions,
-  Yo as BentoButtonActionsLayout,
-  jo as BentoButtonActionsLayoutBasic,
-  Ho as BentoButtonActionsLayoutExtended,
+  $o as BentoButtonActions,
+  Jo as BentoButtonActionsLayout,
+  Qo as BentoButtonActionsLayoutBasic,
+  Xo as BentoButtonActionsLayoutExtended,
   V as BentoButtonPropClass,
   k as BentoButtonVariant,
   q as BentoCard,
@@ -118,144 +120,146 @@ export {
   U as BentoCardTitleSize,
   Bt as BentoCheckbox,
   it as BentoCheckboxEvent,
-  on as BentoCheckboxGroup,
-  nn as BentoCheckboxGroupVariant,
+  Bn as BentoCheckboxGroup,
+  mn as BentoCheckboxGroupVariant,
   mt as BentoCheckboxState,
-  st as BentoClickOutside,
-  fn as BentoClickOutsideDirective,
+  pt as BentoClickOutside,
+  Sn as BentoClickOutsideDirective,
   ut as BentoCodeSnippet,
   lt as BentoCodeSnippetEvent,
   ft as BentoCodeSnippetSupportedLanguage,
   xt as BentoCodeSnippetVariant,
   G as BentoColumnOverflow,
-  ct as BentoCountry,
+  yt as BentoCountry,
   gt as BentoCountryCode,
-  St as BentoCountryVariant,
-  vt as BentoCurrency,
+  Tt as BentoCountryVariant,
+  bt as BentoCurrency,
   It as BentoCurrencyISOCode,
   w as BentoDataGrid,
   M as BentoDatagridAriaSortValue,
   O as BentoDatagridEvent,
   R as BentoDatagridSortDirection,
-  _ as BentoDatagridStyleState,
-  Et as BentoDate,
-  Lt as BentoDateFormat,
+  N as BentoDatagridStyleState,
+  Lt as BentoDate,
+  Pt as BentoDateFormat,
   W as BentoDatePicker,
   Y as BentoDatePickerEvent,
-  Zo as BentoDatePickerFirstDayOfWeek,
+  nn as BentoDatePickerFirstDayOfWeek,
   H as BentoDateRangePicker,
   $ as BentoDateRangePickerEvent,
-  tn as BentoDateRangePickerFirstDayOfWeek,
-  Ft as BentoDivider,
+  rn as BentoDateRangePickerFirstDayOfWeek,
+  Vt as BentoDivider,
   Q as BentoDropdown,
   tt as BentoDropdownAvatar,
   et as BentoDropdownCountry,
   ot as BentoDropdownCurrency,
   nt as BentoDropdownPaymentMethod,
   rt as BentoDropdownTag,
-  kt as BentoEmptyState,
-  At as BentoEmptyStateImage,
-  Gt as BentoEmptyStateImageVariant,
-  wt as BentoEmptyStateVariant,
-  Ot as BentoFilterBar,
-  Rt as BentoFilterBarEvent,
+  At as BentoEmptyState,
+  Gt as BentoEmptyStateImage,
+  wt as BentoEmptyStateImageVariant,
+  Mt as BentoEmptyStateVariant,
+  Rt as BentoFilterBar,
+  Nt as BentoFilterBarEvent,
   _t as BentoFilterEvent,
-  Nt as BentoFilterItemType,
-  zt as BentoFormLayout,
-  Ut as BentoFormLayoutFieldTip,
-  Kt as BentoFormLayoutGroup,
-  Wt as BentoFormLayoutTitle,
-  ve as BentoHeader,
-  jt as BentoImage,
-  Ht as BentoImageAspectRatio,
-  $t as BentoImageObjectFit,
-  Qt as BentoInfoIcon,
-  Zt as BentoInputField,
-  te as BentoInputFieldElementPosition,
-  ee as BentoInputFieldEvent,
-  oe as BentoInputFieldStateClass,
-  ne as BentoInputFieldType,
-  re as BentoInputFieldVariant,
-  mn as BentoKeyboardNavigationDirective,
-  pn as BentoKeyboardNavigationKeyDownEvent,
+  qt as BentoFilterItemType,
+  Ut as BentoFormLayout,
+  Kt as BentoFormLayoutFieldTip,
+  Wt as BentoFormLayoutGroup,
+  Yt as BentoFormLayoutTitle,
+  be as BentoHeader,
+  Ht as BentoImage,
+  $t as BentoImageAspectRatio,
+  Jt as BentoImageObjectFit,
+  Xt as BentoInfoIcon,
+  te as BentoInputField,
+  ee as BentoInputFieldElementPosition,
+  oe as BentoInputFieldEvent,
+  ne as BentoInputFieldStateClass,
+  re as BentoInputFieldType,
+  ae as BentoInputFieldVariant,
+  un as BentoKeyboardNavigationDirective,
+  ln as BentoKeyboardNavigationKeyDownEvent,
   pe as BentoLink,
-  se as BentoLinkVariant,
-  dn as BentoListboxEvent,
-  un as BentoListboxLazyLoadType,
-  Jo as BentoLoadingButton,
-  Qo as BentoLoadingButtonState,
-  Be as BentoLoadingIndicator,
-  ie as BentoLoadingIndicatorEvent,
-  ue as BentoMenu,
-  le as BentoMenuEvent,
-  xe as BentoModal,
-  ce as BentoModalColumnLayoutVariant,
+  de as BentoLinkVariant,
+  xn as BentoListboxEvent,
+  cn as BentoListboxLazyLoadType,
+  tn as BentoLoadingButton,
+  en as BentoLoadingButtonState,
+  ie as BentoLoadingIndicator,
+  me as BentoLoadingIndicatorEvent,
+  le as BentoMenu,
+  fe as BentoMenuEvent,
+  ce as BentoModal,
+  Se as BentoModalColumnLayoutVariant,
   ge as BentoModalDialogType,
-  Se as BentoModalEvent,
-  Te as BentoModalRole,
-  Ce as BentoModalSize,
-  he as BentoModalVariant,
-  be as BentoPagination,
-  Le as BentoPaymentMethod,
-  Pe as BentoPaymentMethodType,
-  Ve as BentoPopover,
-  ke as BentoPopoverPositions,
-  Ge as BentoRadioGroup,
-  we as BentoRadioGroupVariant,
-  Oe as BentoSearchBar,
-  Re as BentoSearchBarEvent,
+  Te as BentoModalEvent,
+  Ce as BentoModalRole,
+  he as BentoModalSize,
+  De as BentoModalVariant,
+  Ee as BentoPagination,
+  Pe as BentoPaymentMethod,
+  Fe as BentoPaymentMethodType,
+  ke as BentoPopover,
+  Ae as BentoPopoverPositions,
+  we as BentoRadioGroup,
+  Me as BentoRadioGroupVariant,
+  Re as BentoSearchBar,
+  Ne as BentoSearchBarEvent,
   _e as BentoSearchBarInternalEvent,
-  qe as BentoSegmentedControl,
-  ze as BentoSegmentedControlEvent,
-  Ke as BentoSidepanel,
-  We as BentoSidepanelAnimation,
-  Ye as BentoSidepanelEvent,
-  je as BentoSidepanelPage,
-  $e as BentoStatus,
-  Je as BentoStatusVariant,
-  Xe as BentoStep,
-  Ze as BentoStepper,
-  to as BentoStepperTypeOption,
-  eo as BentoStepperVariantOption,
-  no as BentoStructuredList,
-  ro as BentoStructuredListItem,
-  Bo as BentoSummaryGrid,
-  io as BentoSummaryGridItemAmount,
-  mo as BentoSummaryGridItemCustom,
-  po as BentoSummaryGridItemNumeric,
-  so as BentoSummaryGridItemPercentage,
-  uo as BentoSummaryGridItemSize,
-  lo as BentoSummaryGridItemText,
-  fo as BentoSummaryGridItemTrendDirection,
-  yo as BentoTab,
-  co as BentoTabs,
-  So as BentoTag,
-  To as BentoTagVariant,
-  ho as BentoTextarea,
+  ze as BentoSecondaryNav,
+  Ke as BentoSegmentedControl,
+  We as BentoSegmentedControlEvent,
+  je as BentoSidepanel,
+  He as BentoSidepanelAnimation,
+  $e as BentoSidepanelEvent,
+  Je as BentoSidepanelPage,
+  Xe as BentoStatus,
+  Ze as BentoStatusVariant,
+  eo as BentoStep,
+  oo as BentoStepper,
+  no as BentoStepperTypeOption,
+  ro as BentoStepperVariantOption,
+  Bo as BentoStructuredList,
+  io as BentoStructuredListItem,
+  so as BentoSummaryGrid,
+  po as BentoSummaryGridItemAmount,
+  uo as BentoSummaryGridItemCustom,
+  lo as BentoSummaryGridItemNumeric,
+  fo as BentoSummaryGridItemPercentage,
+  xo as BentoSummaryGridItemSize,
+  co as BentoSummaryGridItemText,
+  yo as BentoSummaryGridItemTrendDirection,
+  go as BentoTab,
+  To as BentoTabs,
+  ho as BentoTag,
+  Do as BentoTagVariant,
+  bo as BentoTextarea,
   d as BentoTheme,
-  vo as BentoTimeline,
-  Io as BentoTimelineGapUnit,
-  bo as BentoTimelineItem,
-  Eo as BentoTimelineItemVariant,
-  Lo as BentoTimelineShowMorePlacement,
-  Fo as BentoToast,
-  Go as BentoToggle,
-  wo as BentoToggleLabelPosition,
-  Mo as BentoTogglePropClass,
-  yn as BentoTooltipDirective,
-  cn as BentoTooltipPosition,
-  gn as BentoTooltipState,
-  Ro as BentoTutorial,
-  No as BentoTypography,
-  qo as BentoTypographyElement,
-  zo as BentoTypographyModifier,
-  Uo as BentoTypographyVariant,
-  an as DateFormat,
-  c as default,
-  ko as useBentoToastController,
-  Tt as useCountryCapital,
-  Ct as useCountryName,
-  ht as useCountryPhoneCode,
+  Eo as BentoTimeline,
+  Lo as BentoTimelineGapUnit,
+  Po as BentoTimelineItem,
+  Fo as BentoTimelineItemVariant,
+  Vo as BentoTimelineShowMorePlacement,
+  ko as BentoTimelineStatus,
+  Go as BentoToast,
+  Ro as BentoToggle,
+  No as BentoToggleLabelPosition,
+  _o as BentoTogglePropClass,
+  Tn as BentoTooltipDirective,
+  Cn as BentoTooltipPosition,
+  hn as BentoTooltipState,
+  zo as BentoTutorial,
+  Ko as BentoTypography,
+  Wo as BentoTypographyElement,
+  Yo as BentoTypographyModifier,
+  jo as BentoTypographyVariant,
+  pn as DateFormat,
+  y as default,
+  Mo as useBentoToastController,
+  Ct as useCountryCapital,
+  ht as useCountryName,
+  Dt as useCountryPhoneCode,
   X as useSearchBarFilter
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/plugins/toastController.ts","../src/install.ts"],"sourcesContent":["import { reactive } from 'vue';\nimport { generateUid } from '@/utils/ts/unique-id';\nimport { BentoToastItem } from '@/components/toast/components/toast-item';\n\n/* eslint-disable no-underscore-dangle */\nexport default class ToastController {\n    get state(): { queue: Array<BentoToastItem> } {\n        return this._state;\n    }\n\n    private _state: { queue: Array<BentoToastItem> };\n\n    constructor() {\n        this._state = reactive({ queue: [] });\n    }\n\n    private dismissToast(toast: BentoToastItem): void {\n        this._state.queue.splice(this._state.queue.indexOf(toast), 1);\n    }\n\n    public addToast(params: BentoToastItem) {\n        const id = generateUid('toast');\n        const toast = {\n            ...params,\n            id,\n            dismiss: () => this.dismissToast(toast),\n        };\n\n        // new messages always appear in front\n        this._state.queue.push(toast);\n\n        // return API to manipulate toast\n        return {\n            dismiss: () => this.dismissToast(toast),\n        };\n    }\n}\n/* eslint-enable no-underscore-dangle */\n","import type { PluginObject } from 'vue';\nimport { isVue2 } from 'vue-demi';\nimport ToastController from './plugins/toastController';\n\nexport enum BentoTheme {\n    LEGACY = 'b-legacy-theme',\n    STYLEGUIDE = 'b-styleguide-theme',\n    BENTO = '',\n}\n\ninterface BentoVuePlugin {\n    theme: BentoTheme;\n    withToast: boolean;\n}\n\nconst setTheme = (theme: BentoTheme) => {\n    document.body.classList.add(theme);\n};\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n    install: async (Vue, options: { theme: BentoTheme; withToast: boolean; withUtilityClasses: boolean }) => {\n        if (options?.withToast) {\n            if (isVue2) {\n                // Adds a new property to the Vue instance\n                // eslint-disable-next-line no-param-reassign\n                (Vue as any).prototype.$bentoToastController = new ToastController();\n            } else {\n                // eslint-disable-next-line no-param-reassign\n                (Vue as any).config.globalProperties.$bentoToastController = new ToastController();\n            }\n        }\n        // Make sure to put all awaited CSS imports below this point and not above!\n        if (options?.theme === BentoTheme.LEGACY) {\n            setTheme(BentoTheme.LEGACY);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css');\n        } else if (options?.theme === BentoTheme.STYLEGUIDE) {\n            setTheme(BentoTheme.STYLEGUIDE);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n        } else {\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n        }\n\n        if (options?.withUtilityClasses) {\n            await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n        }\n    },\n};\n\nexport default plugin;\n"],"names":["ToastController","__publicField","reactive","toast","params","id","generateUid","BentoTheme","setTheme","theme","plugin","Vue","options","BentoVue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAqBA,EAAgB;AAAA,EAOjC,cAAc;AAFN,IAAAC,EAAA;AAGJ,SAAK,SAASC,EAAS,EAAE,OAAO,CAAA,EAAI,CAAA;AAAA,EACxC;AAAA,EARA,IAAI,QAA0C;AAC1C,WAAO,KAAK;AAAA,EAChB;AAAA,EAQQ,aAAaC,GAA6B;AACzC,SAAA,OAAO,MAAM,OAAO,KAAK,OAAO,MAAM,QAAQA,CAAK,GAAG,CAAC;AAAA,EAChE;AAAA,EAEO,SAASC,GAAwB;AAC9B,UAAAC,IAAKC,EAAY,OAAO,GACxBH,IAAQ;AAAA,MACV,GAAGC;AAAA,MACH,IAAAC;AAAA,MACA,SAAS,MAAM,KAAK,aAAaF,CAAK;AAAA,IAAA;AAIrC,gBAAA,OAAO,MAAM,KAAKA,CAAK,GAGrB;AAAA,MACH,SAAS,MAAM,KAAK,aAAaA,CAAK;AAAA,IAAA;AAAA,EAE9C;AACJ;AChCY,IAAAI,sBAAAA,OACRA,EAAA,SAAS,kBACTA,EAAA,aAAa,sBACbA,EAAA,QAAQ,IAHAA,IAAAA,KAAA,CAAA,CAAA;AAWZ,MAAMC,IAAW,CAACC,MAAsB;AAC3B,WAAA,KAAK,UAAU,IAAIA,CAAK;AACrC,GAEMC,IAAuC;AAAA,EACzC,SAAS,OAAOC,GAAKC,MAAoF;AACrG,IAAIA,KAAA,QAAAA,EAAS,cAIJD,EAAY,UAAU,wBAAwB,IAAIX,EAAgB,KAOvEY,KAAA,gBAAAA,EAAS,WAAU,oBACnBJ;AAAA,MAAS;AAAA;AAAA,IAAiB,GAC1B,MAAM,OAAO,qEAAgE,MACtEI,KAAA,gBAAAA,EAAS,WAAU,wBAC1BJ;AAAA,MAAS;AAAA;AAAA,IAAqB,GAC9B,MAAM,OAAO,yEAAoE,KAEjF,MAAM,OAAO,8DAAyD,GAGtEI,KAAA,QAAAA,EAAS,sBACT,MAAM,OAAO,4DAAuD;AAAA,EAE5E;AACJ,GAEAC,IAAeH;"}
+{"version":3,"file":"index.js","sources":["../src/plugins/toastController.ts","../src/install.ts"],"sourcesContent":["import { reactive } from 'vue';\nimport { generateUid } from '@/utils/ts/unique-id';\nimport { BentoToastItem } from '@/components/toast/components/toast-item';\n\n/* eslint-disable no-underscore-dangle */\nexport default class ToastController {\n    get state(): { queue: Array<BentoToastItem> } {\n        return this._state;\n    }\n\n    private _state: { queue: Array<BentoToastItem> };\n\n    constructor() {\n        this._state = reactive({ queue: [] });\n    }\n\n    private dismissToast(toast: BentoToastItem): void {\n        this._state.queue.splice(this._state.queue.indexOf(toast), 1);\n    }\n\n    public addToast(params: BentoToastItem) {\n        const id = generateUid('toast');\n        const toast = {\n            ...params,\n            id,\n            dismiss: () => this.dismissToast(toast),\n        };\n\n        // new messages always appear in front\n        this._state.queue.push(toast);\n\n        // return API to manipulate toast\n        return {\n            dismiss: () => this.dismissToast(toast),\n        };\n    }\n}\n/* eslint-enable no-underscore-dangle */\n","import type { PluginObject } from 'vue';\nimport { isVue2 } from 'vue-demi';\nimport ToastController from './plugins/toastController';\n\nexport enum BentoTheme {\n    LEGACY = 'b-legacy-theme',\n    STYLEGUIDE = 'b-styleguide-theme',\n    BENTO = '',\n}\n\ninterface BentoVuePlugin {\n    theme: BentoTheme;\n    withToast: boolean;\n}\n\nconst setTheme = (theme: BentoTheme) => {\n    document.body.classList.add(theme);\n};\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n    install: async (Vue, options: { theme: BentoTheme; withToast: boolean; withUtilityClasses: boolean }) => {\n        if (options?.withToast) {\n            if (isVue2) {\n                // Adds a new property to the Vue instance\n                // eslint-disable-next-line no-param-reassign\n                (Vue as any).prototype.$bentoToastController = new ToastController();\n            } else {\n                // eslint-disable-next-line no-param-reassign\n                (Vue as any).config.globalProperties.$bentoToastController = new ToastController();\n            }\n        }\n        // Make sure to put all awaited CSS imports below this point and not above!\n        if (options?.theme === BentoTheme.LEGACY) {\n            setTheme(BentoTheme.LEGACY);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css');\n        } else if (options?.theme === BentoTheme.STYLEGUIDE) {\n            setTheme(BentoTheme.STYLEGUIDE);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n        } else {\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n        }\n\n        if (options?.withUtilityClasses) {\n            await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n        }\n    },\n};\n\nexport default plugin;\n"],"names":["ToastController","__publicField","reactive","toast","params","id","generateUid","BentoTheme","setTheme","theme","plugin","Vue","options","BentoVue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAqBA,EAAgB;AAAA,EAOjC,cAAc;AAFN,IAAAC,EAAA;AAGJ,SAAK,SAASC,EAAS,EAAE,OAAO,CAAA,EAAI,CAAA;AAAA,EACxC;AAAA,EARA,IAAI,QAA0C;AAC1C,WAAO,KAAK;AAAA,EAChB;AAAA,EAQQ,aAAaC,GAA6B;AACzC,SAAA,OAAO,MAAM,OAAO,KAAK,OAAO,MAAM,QAAQA,CAAK,GAAG,CAAC;AAAA,EAChE;AAAA,EAEO,SAASC,GAAwB;AAC9B,UAAAC,IAAKC,EAAY,OAAO,GACxBH,IAAQ;AAAA,MACV,GAAGC;AAAA,MACH,IAAAC;AAAA,MACA,SAAS,MAAM,KAAK,aAAaF,CAAK;AAAA,IAAA;AAIrC,gBAAA,OAAO,MAAM,KAAKA,CAAK,GAGrB;AAAA,MACH,SAAS,MAAM,KAAK,aAAaA,CAAK;AAAA,IAAA;AAAA,EAE9C;AACJ;AChCY,IAAAI,sBAAAA,OACRA,EAAA,SAAS,kBACTA,EAAA,aAAa,sBACbA,EAAA,QAAQ,IAHAA,IAAAA,KAAA,CAAA,CAAA;AAWZ,MAAMC,IAAW,CAACC,MAAsB;AAC3B,WAAA,KAAK,UAAU,IAAIA,CAAK;AACrC,GAEMC,IAAuC;AAAA,EACzC,SAAS,OAAOC,GAAKC,MAAoF;AACrG,IAAIA,KAAA,QAAAA,EAAS,cAIJD,EAAY,UAAU,wBAAwB,IAAIX,EAAgB,KAOvEY,KAAA,gBAAAA,EAAS,WAAU,oBACnBJ;AAAA,MAAS;AAAA;AAAA,IAAiB,GAC1B,MAAM,OAAO,qEAAgE,MACtEI,KAAA,gBAAAA,EAAS,WAAU,wBAC1BJ;AAAA,MAAS;AAAA;AAAA,IAAqB,GAC9B,MAAM,OAAO,yEAAoE,KAEjF,MAAM,OAAO,8DAAyD,GAGtEI,KAAA,QAAAA,EAAS,sBACT,MAAM,OAAO,4DAAuD;AAAA,EAE5E;AACJ,GAEAC,IAAeH;"}

package/dist/info-icon.js

@@ -1,8 +1,8 @@
 import { defineComponent as r } from "vue";
-import { c as i } from "./chunks/index.152b2b16.js";
+import { c as i } from "./chunks/index.58282364.js";
 import { n as s } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { b as a } from "./chunks/tooltip.b8929659.js";
-import "./assets/index31.css";
+import { b as a } from "./chunks/tooltip.f48beb54.js";
+import "./assets/index35.css";
 let n = 0;
 const l = {
   beforeCreate() {