@adyen/bento-vue3 1.9.0 → 1.11.0

package/dist/focus-trap.js

@@ -1,4 +1,4 @@
-import { B as a } from "./chunks/index.4d2a13e1.js";
+import { B as a } from "./chunks/index.80078bf9.js";
 export {
   a as BentoFocusTrap
 };

package/dist/form-layout.js

@@ -3,8 +3,8 @@ import { BentoAlert as T } from "./alert.js";
 import { F as k } from "./chunks/form-layout.types.a7a1438d.js";
 import { u as F } from "./chunks/use-has-slot.4d98bf29.js";
 import { _ as m } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as y, c as G } from "./chunks/index.75f3672e.js";
-import "./assets/index35.css";
+import { B as y, c as G } from "./chunks/index.09f7f1b5.js";
+import "./assets/index24.css";
 const A = {
   key: 1,
   class: "b-form-layout__actions-container"

package/dist/form-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout.js","sources":["../../vue2/src/components/form-layout/form-layout.vue","../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../vue2/src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.vue","../../vue2/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":";;;;;;;;;;qFAsFIA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qEC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,6CCiDHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qECxCGC,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;;;;;;;;;;qECwBrF4B,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":["../../vue2/src/components/form-layout/form-layout.vue","../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../vue2/src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.vue","../../vue2/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":";;;;;;;;;;qFAsFIA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qEC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,6CCiDHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qECxCGC,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;;;;;;;;;;qECwBrF4B,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 H, computed as g, resolveComponent as _, openBlock as p, createElementBlock as R, normalizeClass as k, createElementVNode as M, createVNode as Y, mergeProps as G, withCtx as I, createTextVNode as S, toDisplayString as E, createBlock as T, createCommentVNode as D } from "vue";
-import { B as L } from "./chunks/button-actions-with-menu.f6dfb14d.js";
+import { B as L } from "./chunks/button-actions-with-menu.2ff339f6.js";
 import { BentoInfoIcon as V } from "./info-icon.js";
 import { u as $ } from "./chunks/use-has-slot.4d98bf29.js";
-import { B as z, c as O, a as W } from "./chunks/index.75f3672e.js";
+import { B as z, c as O, a as W } from "./chunks/index.09f7f1b5.js";
 import { u as j } from "./chunks/i18n.6c402773.js";
 import { c as h, a as q } from "./chunks/index.86453263.js";
 import { r as d, t as c, e as y, g as A, d as F, f as J } from "./chunks/index.f55fdc32.js";
 import { e as K } from "./chunks/index.fdf12170.js";
 import { e as Q } from "./chunks/index.d80206ed.js";
 import { _ as Z } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index36.css";
+import "./assets/index25.css";
 function ee(e, r) {
   d(2, arguments);
   var a = c(e), t = c(r), i = a.getFullYear() - t.getFullYear(), n = a.getMonth() - t.getMonth();

package/dist/index.js

@@ -1,69 +1,72 @@
-var S = Object.defineProperty;
-var h = (t, e, r) => e in t ? S(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
-var f = (t, e, r) => (h(t, typeof e != "symbol" ? e + "" : e, r), r);
-import { reactive as C, defineComponent as b, computed as k, openBlock as a, createElementBlock as v, mergeProps as s, unref as m, createBlock as p, withCtx as l, renderSlot as i, createElementVNode as D } from "vue";
+var T = Object.defineProperty;
+var h = (t, e, n) => e in t ? T(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var f = (t, e, n) => (h(t, typeof e != "symbol" ? e + "" : e, n), n);
+import { reactive as C, defineComponent as b, computed as k, openBlock as r, createElementBlock as v, mergeProps as s, unref as m, createBlock as p, withCtx as l, renderSlot as i, createElementVNode as D } from "vue";
 import { g as I } from "./chunks/unique-id.a2a2b458.js";
 import { BentoActionBar as K } from "./action-bar.js";
 import { BentoAccordion as W, BentoAccordionItem as j } from "./accordion.js";
 import { BentoAlert as J, BentoAlertEvent as X, BentoAlertTypeOption as Y, BentoAlertVariant as Z } from "./alert.js";
-import { a as te, b as oe, B as re } from "./chunks/button.82ed953e.js";
-import { BentoCard as ae, BentoCardBackground as ie, BentoCardTitleSize as Be } from "./card.js";
+import { a as te, b as oe, B as ne } from "./chunks/button.623a46d2.js";
+import { BentoCard as re, BentoCardBackground as ie, BentoCardTitleSize as Be } from "./card.js";
 import { BentoColumnOverflow as me, BentoDataGrid as pe, BentoDatagridAriaSortValue as le, BentoDatagridEvent as de, BentoDatagridSortDirection as ue, BentoDatagridStyleState as fe } from "./data-grid.js";
 import { BentoDatePicker as ye, BentoDatePickerEvent as xe } from "./date-picker.js";
-import { B as Te, a as Se } from "./chunks/index.c6fecf1c.js";
-import { B as Ce, u as be } from "./chunks/dropdown.63de9aac.js";
+import { B as Se, a as Te } from "./chunks/index.ef1c4d59.js";
+import { B as Ce, u as be } from "./chunks/dropdown.96431c25.js";
 import { BentoDropdownAvatar as ve, BentoDropdownCountry as De, BentoDropdownCurrency as Ie, BentoDropdownPaymentMethod as Ee, BentoDropdownTag as Le } from "./dropdown.js";
-import { BentoDivider as Fe } from "./divider.js";
-import { B as Ve, b as we, a as Ae } from "./chunks/checkbox.731dc0ab.js";
+import { B as Fe } from "./chunks/index.113137fb.js";
+import { B as Ve, b as we, a as Ae } from "./chunks/checkbox.d65694f2.js";
 import { BentoClickOutside as Me } from "./click-outside.js";
-import { BentoCodeSnippet as $e, BentoCodeSnippetEvent as Re, BentoCodeSnippetSupportedLanguage as Ue, BentoCodeSnippetVariant as Ne } from "./code-snippet.js";
-import { BentoCountry as ze, BentoCountryCode as Ke, BentoCountryVariant as Qe, useCountryCapital as We, useCountryName as je, useCountryPhoneCode as He } from "./country.js";
-import { BentoCurrency as Xe, BentoCurrencyISOCode as Ye } from "./currency.js";
-import { B as et, a as tt } from "./chunks/index.0ee895e0.js";
-import { BentoEmptyState as rt, BentoEmptyStateImage as nt, BentoEmptyStateImageVariant as at, BentoEmptyStateVariant as it } from "./empty-state.js";
-import { BentoFilterBar as st, BentoFilterBarEvent as mt, BentoFilterEvent as pt, BentoFilterItemType as lt } from "./filter-bar.js";
-import { BentoFormLayout as ut, BentoFormLayoutFieldTip as ft, BentoFormLayoutGroup as ct, BentoFormLayoutTitle as yt } from "./form-layout.js";
-import { BentoImage as gt, BentoImageAspectRatio as Tt, BentoImageObjectFit as St } from "./image.js";
-import { BentoInfoIcon as Ct } from "./info-icon.js";
-import { BentoInputField as kt, BentoInputFieldElementPosition as vt, BentoInputFieldEvent as Dt, BentoInputFieldStateClass as It, BentoInputFieldType as Et, BentoInputFieldVariant as Lt } from "./input-field.js";
-import { BentoLoadingIndicator as Ft, BentoLoadingIndicatorEvent as _t } from "./loading-indicator.js";
-import { B as wt, a as At } from "./chunks/index.73ed22a7.js";
-import { BentoModal as Mt } from "./modal.js";
-import { b as $t, d as Rt, e as Ut, c as Nt, a as qt, B as zt } from "./chunks/base-modal.a629cb32.js";
-import { BentoHeader as Qt } from "./header.js";
-import { BentoPagination as jt } from "./pagination.js";
-import { BentoPaymentMethod as Jt, BentoPaymentMethodType as Xt } from "./payment-method.js";
-import { a as Zt, B as eo } from "./chunks/index.98174339.js";
-import { BentoRadioGroup as oo, BentoRadioGroupVariant as ro } from "./radio-group.js";
-import { BentoSearchBar as ao, BentoSearchBarEvent as io, BentoSearchBarInternalEvent as Bo } from "./search-bar.js";
-import { BentoSegmentedControl as mo, BentoSegmentedControlEvent as po } from "./segmented-control.js";
-import { BentoStatus as uo, BentoStatusVariant as fo } from "./status.js";
-import { BentoStep as yo, BentoStepper as xo, BentoStepperTypeOption as go, BentoStepperVariantOption as To } from "./stepper.js";
-import { B as ho, a as Co } from "./chunks/index.edcaf766.js";
-import { BentoSummaryGrid as ko, BentoSummaryGridItemAmount as vo, BentoSummaryGridItemCustom as Do, BentoSummaryGridItemNumeric as Io, BentoSummaryGridItemPercentage as Eo, BentoSummaryGridItemSize as Lo, BentoSummaryGridItemText as Po, BentoSummaryGridItemTrendDirection as Fo } from "./summary-grid.js";
-import { BentoTab as Vo, BentoTabs as wo } from "./tabs.js";
-import { BentoTag as Go, BentoTagVariant as Mo } from "./tag.js";
-import { BentoTextarea as $o } from "./textarea.js";
-import { BentoTimeline as Uo, BentoTimelineGapUnit as No, BentoTimelineItem as qo, BentoTimelineItemVariant as zo, BentoTimelineShowMorePlacement as Ko } from "./timeline.js";
-import { BentoToast as Wo } from "./toast.js";
-import { u as Ho } from "./chunks/toastController.0b01d2e8.js";
-import { BentoToggle as Xo, BentoToggleLabelPosition as Yo, BentoTogglePropClass as Zo } from "./toggle.js";
-import { B as c } from "./chunks/index.75f3672e.js";
-import { c as tr, b as or, a as rr } from "./chunks/index.75f3672e.js";
-import { D as ar } from "./chunks/date-input.9186a0bf.js";
-import { a as Br, B as sr } from "./chunks/keyboard-navigation.ca47dfa8.js";
-import { a as pr, b as lr } from "./chunks/listbox.ac43f8ab.js";
-import { B as ur } from "./chunks/directive.0408e565.js";
-import { b as cr, B as yr, a as xr } from "./chunks/tooltip.27c32d36.js";
-import { BentoButtonActions as Tr, BentoButtonActionsLayout as Sr, BentoButtonActionsLayoutBasic as hr, BentoButtonActionsLayoutExtended as Cr } from "./button.js";
-import { B as kr, a as vr } from "./chunks/loading-button.4b88e24d.js";
-import { b as Ir, b as Er } from "./chunks/calendar.fa7712e8.js";
-import { BentoCheckboxGroup as Pr, BentoCheckboxGroupVariant as Fr } from "./checkbox.js";
+import { BentoCodeSnippet as $e, BentoCodeSnippetEvent as Re, BentoCodeSnippetSupportedLanguage as Ne, BentoCodeSnippetVariant as Ue } from "./code-snippet.js";
+import { BentoCountry as ze } from "./country.js";
+import { c as Qe, B as We, a as je, u as He, b as Je } from "./chunks/country.types.002caff2.js";
+import { BentoCurrency as Ye, BentoCurrencyISOCode as Ze } from "./currency.js";
+import { B as tt, a as ot } from "./chunks/index.45d00aad.js";
+import { BentoEmptyState as at, BentoEmptyStateImage as rt, BentoEmptyStateImageVariant as it, BentoEmptyStateVariant as Bt } from "./empty-state.js";
+import { BentoFilterBar as mt, BentoFilterBarEvent as pt, BentoFilterEvent as lt, BentoFilterItemType as dt } from "./filter-bar.js";
+import { BentoFormLayout as ft, BentoFormLayoutFieldTip as ct, BentoFormLayoutGroup as yt, BentoFormLayoutTitle as xt } from "./form-layout.js";
+import { BentoImage as St, BentoImageAspectRatio as Tt, BentoImageObjectFit as ht } from "./image.js";
+import { BentoInfoIcon as bt } from "./info-icon.js";
+import { BentoInputField as vt, BentoInputFieldElementPosition as Dt, BentoInputFieldEvent as It, BentoInputFieldStateClass as Et, BentoInputFieldType as Lt, BentoInputFieldVariant as Pt } from "./input-field.js";
+import { BentoLoadingIndicator as _t, BentoLoadingIndicatorEvent as Vt } from "./loading-indicator.js";
+import { B as At, a as Gt } from "./chunks/index.cf561336.js";
+import { BentoModal as Ot } from "./modal.js";
+import { b as Rt, d as Nt, e as Ut, c as qt, a as zt, B as Kt } from "./chunks/base-modal.161ce8f0.js";
+import { BentoHeader as Wt } from "./header.js";
+import { BentoPagination as Ht } from "./pagination.js";
+import { BentoPaymentMethod as Xt, BentoPaymentMethodType as Yt } from "./payment-method.js";
+import { a as eo, B as to } from "./chunks/index.03605cb0.js";
+import { BentoRadioGroup as no, BentoRadioGroupVariant as ao } from "./radio-group.js";
+import { BentoSearchBar as io, BentoSearchBarEvent as Bo, BentoSearchBarInternalEvent as so } from "./search-bar.js";
+import { BentoSecondaryNav as po } from "./secondary-nav.js";
+import { BentoSegmentedControl as uo, BentoSegmentedControlEvent as fo } from "./segmented-control.js";
+import { BentoSidepanel as yo, BentoSidepanelAnimation as xo, BentoSidepanelEvent as go, BentoSidepanelPage as So } from "./sidepanel.js";
+import { BentoStatus as ho, BentoStatusVariant as Co } from "./status.js";
+import { BentoStep as ko, BentoStepper as vo, BentoStepperTypeOption as Do, BentoStepperVariantOption as Io } from "./stepper.js";
+import { B as Lo, a as Po } from "./chunks/index.0a8ddfaa.js";
+import { BentoSummaryGrid as _o, BentoSummaryGridItemAmount as Vo, BentoSummaryGridItemCustom as wo, BentoSummaryGridItemNumeric as Ao, BentoSummaryGridItemPercentage as Go, BentoSummaryGridItemSize as Mo, BentoSummaryGridItemText as Oo, BentoSummaryGridItemTrendDirection as $o } from "./summary-grid.js";
+import { BentoTab as No, BentoTabs as Uo } from "./tabs.js";
+import { BentoTag as zo, BentoTagVariant as Ko } from "./tag.js";
+import { BentoTextarea as Wo } from "./textarea.js";
+import { BentoTimeline as Ho, BentoTimelineGapUnit as Jo, BentoTimelineItem as Xo, BentoTimelineItemVariant as Yo, BentoTimelineShowMorePlacement as Zo, BentoTimelineStatus as en } from "./timeline.js";
+import { BentoToast as on } from "./toast.js";
+import { u as an } from "./chunks/toastController.0b01d2e8.js";
+import { BentoToggle as Bn, BentoToggleLabelPosition as sn, BentoTogglePropClass as mn } from "./toggle.js";
+import { B as c } from "./chunks/index.09f7f1b5.js";
+import { c as ln, b as dn, a as un } from "./chunks/index.09f7f1b5.js";
+import { D as cn } from "./chunks/date-input.9186a0bf.js";
+import { a as xn, B as gn } from "./chunks/keyboard-navigation.ca47dfa8.js";
+import { a as Tn, b as hn } from "./chunks/listbox.dd9883c5.js";
+import { B as bn } from "./chunks/directive.0408e565.js";
+import { b as vn, B as Dn, a as In } from "./chunks/tooltip.785993dd.js";
+import { BentoButtonActions as Ln, BentoButtonActionsLayout as Pn, BentoButtonActionsLayoutBasic as Fn, BentoButtonActionsLayoutExtended as _n } from "./button.js";
+import { B as wn, a as An } from "./chunks/loading-button.30c5fede.js";
+import { b as Mn, b as On } from "./chunks/calendar.b1d05580.js";
+import { BentoCheckboxGroup as Rn, BentoCheckboxGroupVariant as Nn } from "./checkbox.js";
 import { BentoLinkVariant as d } from "./link.js";
 import { RouterLink as y } from "vue-router";
 import { _ as E } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { BentoTutorial as Vr } from "./tutorial.js";
-import "./assets/index13.css";
+import { BentoTutorial as qn } from "./tutorial.js";
+import "./assets/index16.css";
 class L {
   constructor() {
     f(this, "_state");
@@ -76,13 +79,13 @@ class L {
     this._state.queue.splice(this._state.queue.indexOf(e), 1);
   }
   addToast(e) {
-    const r = I("toast"), n = {
+    const n = I("toast"), a = {
       ...e,
-      id: r,
-      dismiss: () => this.dismissToast(n)
+      id: n,
+      dismiss: () => this.dismissToast(a)
     };
-    return this._state.queue.push(n), {
-      dismiss: () => this.dismissToast(n)
+    return this._state.queue.push(a), {
+      dismiss: () => this.dismissToast(a)
     };
   }
 }
@@ -120,18 +123,18 @@ const x = (t) => {
   },
   emits: ["click"],
   setup(t, { emit: e }) {
-    const r = t, n = k(() => ({
-      [`b-link--${d.QUIET}`]: r.variant === d.QUIET
+    const n = t, a = k(() => ({
+      [`b-link--${d.QUIET}`]: n.variant === d.QUIET
     })), u = (o, B) => {
       e("click", o), B && B();
     };
-    return (o, B) => t.external ? (a(), v("a", s({ key: 0 }, o.$attrs, {
+    return (o, B) => t.external ? (r(), v("a", s({ key: 0 }, o.$attrs, {
       href: o.to,
       target: "_blank",
-      class: ["b-link", m(n)],
+      class: ["b-link", m(a)],
       onClick: u
     }), [
-      t.disableTypography ? i(o.$slots, "default", { key: 1 }, void 0, !0) : (a(), p(c, {
+      t.disableTypography ? i(o.$slots, "default", { key: 1 }, void 0, !0) : (r(), p(c, {
         key: 0,
         el: "span",
         variant: "body"
@@ -141,17 +144,17 @@ const x = (t) => {
         ]),
         _: 3
       }))
-    ], 16, P)) : (a(), p(m(y), s({ key: 1 }, o.$props, {
+    ], 16, P)) : (r(), p(m(y), s({ key: 1 }, o.$props, {
       custom: "",
       onClick: u
     }), {
-      default: l(({ href: g, navigate: T }) => [
+      default: l(({ href: g, navigate: S }) => [
         D("a", s(o.$attrs, {
           href: g,
-          class: ["b-link", m(n)],
-          onClick: T
+          class: ["b-link", m(a)],
+          onClick: S
         }), [
-          t.disableTypography ? i(o.$slots, "default", { key: 1 }, void 0, !0) : (a(), p(c, {
+          t.disableTypography ? i(o.$slots, "default", { key: 1 }, void 0, !0) : (r(), p(c, {
             key: 0,
             el: "span",
             variant: "body"
@@ -167,7 +170,7 @@ const x = (t) => {
     }, 16));
   }
 });
-const U = /* @__PURE__ */ E(_, [["__scopeId", "data-v-bdaab366"]]);
+const N = /* @__PURE__ */ E(_, [["__scopeId", "data-v-bdaab366"]]);
 export {
   W as BentoAccordion,
   j as BentoAccordionItem,
@@ -177,45 +180,45 @@ export {
   Y as BentoAlertTypeOption,
   Z as BentoAlertVariant,
   te as BentoButton,
-  Tr as BentoButtonActions,
-  Sr as BentoButtonActionsLayout,
-  hr as BentoButtonActionsLayoutBasic,
-  Cr as BentoButtonActionsLayoutExtended,
+  Ln as BentoButtonActions,
+  Pn as BentoButtonActionsLayout,
+  Fn as BentoButtonActionsLayoutBasic,
+  _n as BentoButtonActionsLayoutExtended,
   oe as BentoButtonPropClass,
-  re as BentoButtonVariant,
-  ae as BentoCard,
+  ne as BentoButtonVariant,
+  re as BentoCard,
   ie as BentoCardBackground,
   Be as BentoCardTitleSize,
   Ve as BentoCheckbox,
   we as BentoCheckboxEvent,
-  Pr as BentoCheckboxGroup,
-  Fr as BentoCheckboxGroupVariant,
+  Rn as BentoCheckboxGroup,
+  Nn as BentoCheckboxGroupVariant,
   Ae as BentoCheckboxState,
   Me as BentoClickOutside,
-  ur as BentoClickOutsideDirective,
+  bn as BentoClickOutsideDirective,
   $e as BentoCodeSnippet,
   Re as BentoCodeSnippetEvent,
-  Ue as BentoCodeSnippetSupportedLanguage,
-  Ne as BentoCodeSnippetVariant,
+  Ne as BentoCodeSnippetSupportedLanguage,
+  Ue as BentoCodeSnippetVariant,
   me as BentoColumnOverflow,
   ze as BentoCountry,
-  Ke as BentoCountryCode,
-  Qe as BentoCountryVariant,
-  Xe as BentoCurrency,
-  Ye as BentoCurrencyISOCode,
+  Qe as BentoCountryCode,
+  We as BentoCountryVariant,
+  Ye as BentoCurrency,
+  Ze as BentoCurrencyISOCode,
   pe as BentoDataGrid,
   le as BentoDatagridAriaSortValue,
   de as BentoDatagridEvent,
   ue as BentoDatagridSortDirection,
   fe as BentoDatagridStyleState,
-  et as BentoDate,
-  tt as BentoDateFormat,
+  tt as BentoDate,
+  ot as BentoDateFormat,
   ye as BentoDatePicker,
   xe as BentoDatePickerEvent,
-  Ir as BentoDatePickerFirstDayOfWeek,
-  Te as BentoDateRangePicker,
-  Se as BentoDateRangePickerEvent,
-  Er as BentoDateRangePickerFirstDayOfWeek,
+  Mn as BentoDatePickerFirstDayOfWeek,
+  Se as BentoDateRangePicker,
+  Te as BentoDateRangePickerEvent,
+  On as BentoDateRangePickerFirstDayOfWeek,
   Fe as BentoDivider,
   Ce as BentoDropdown,
   ve as BentoDropdownAvatar,
@@ -223,104 +226,110 @@ export {
   Ie as BentoDropdownCurrency,
   Ee as BentoDropdownPaymentMethod,
   Le as BentoDropdownTag,
-  rt as BentoEmptyState,
-  nt as BentoEmptyStateImage,
-  at as BentoEmptyStateImageVariant,
-  it as BentoEmptyStateVariant,
-  st as BentoFilterBar,
-  mt as BentoFilterBarEvent,
-  pt as BentoFilterEvent,
-  lt as BentoFilterItemType,
-  ut as BentoFormLayout,
-  ft as BentoFormLayoutFieldTip,
-  ct as BentoFormLayoutGroup,
-  yt as BentoFormLayoutTitle,
-  Qt as BentoHeader,
-  gt as BentoImage,
+  at as BentoEmptyState,
+  rt as BentoEmptyStateImage,
+  it as BentoEmptyStateImageVariant,
+  Bt as BentoEmptyStateVariant,
+  mt as BentoFilterBar,
+  pt as BentoFilterBarEvent,
+  lt as BentoFilterEvent,
+  dt as BentoFilterItemType,
+  ft as BentoFormLayout,
+  ct as BentoFormLayoutFieldTip,
+  yt as BentoFormLayoutGroup,
+  xt as BentoFormLayoutTitle,
+  Wt as BentoHeader,
+  St as BentoImage,
   Tt as BentoImageAspectRatio,
-  St as BentoImageObjectFit,
-  Ct as BentoInfoIcon,
-  kt as BentoInputField,
-  vt as BentoInputFieldElementPosition,
-  Dt as BentoInputFieldEvent,
-  It as BentoInputFieldStateClass,
-  Et as BentoInputFieldType,
-  Lt as BentoInputFieldVariant,
-  Br as BentoKeyboardNavigationDirective,
-  sr as BentoKeyboardNavigationKeyDownEvent,
-  U as BentoLink,
+  ht as BentoImageObjectFit,
+  bt as BentoInfoIcon,
+  vt as BentoInputField,
+  Dt as BentoInputFieldElementPosition,
+  It as BentoInputFieldEvent,
+  Et as BentoInputFieldStateClass,
+  Lt as BentoInputFieldType,
+  Pt as BentoInputFieldVariant,
+  xn as BentoKeyboardNavigationDirective,
+  gn as BentoKeyboardNavigationKeyDownEvent,
+  N as BentoLink,
   d as BentoLinkVariant,
-  pr as BentoListboxEvent,
-  lr as BentoListboxLazyLoadType,
-  kr as BentoLoadingButton,
-  vr as BentoLoadingButtonState,
-  Ft as BentoLoadingIndicator,
-  _t as BentoLoadingIndicatorEvent,
-  wt as BentoMenu,
-  At as BentoMenuEvent,
-  Mt as BentoModal,
-  $t as BentoModalColumnLayoutVariant,
-  Rt as BentoModalDialogType,
+  Tn as BentoListboxEvent,
+  hn as BentoListboxLazyLoadType,
+  wn as BentoLoadingButton,
+  An as BentoLoadingButtonState,
+  _t as BentoLoadingIndicator,
+  Vt as BentoLoadingIndicatorEvent,
+  At as BentoMenu,
+  Gt as BentoMenuEvent,
+  Ot as BentoModal,
+  Rt as BentoModalColumnLayoutVariant,
+  Nt as BentoModalDialogType,
   Ut as BentoModalEvent,
-  Nt as BentoModalRole,
-  qt as BentoModalSize,
-  zt as BentoModalVariant,
-  jt as BentoPagination,
-  Jt as BentoPaymentMethod,
-  Xt as BentoPaymentMethodType,
-  Zt as BentoPopover,
-  eo as BentoPopoverPositions,
-  oo as BentoRadioGroup,
-  ro as BentoRadioGroupVariant,
-  ao as BentoSearchBar,
-  io as BentoSearchBarEvent,
-  Bo as BentoSearchBarInternalEvent,
-  mo as BentoSegmentedControl,
-  po as BentoSegmentedControlEvent,
-  uo as BentoStatus,
-  fo as BentoStatusVariant,
-  yo as BentoStep,
-  xo as BentoStepper,
-  go as BentoStepperTypeOption,
-  To as BentoStepperVariantOption,
-  ho as BentoStructuredList,
-  Co as BentoStructuredListItem,
-  ko as BentoSummaryGrid,
-  vo as BentoSummaryGridItemAmount,
-  Do as BentoSummaryGridItemCustom,
-  Io as BentoSummaryGridItemNumeric,
-  Eo as BentoSummaryGridItemPercentage,
-  Lo as BentoSummaryGridItemSize,
-  Po as BentoSummaryGridItemText,
-  Fo as BentoSummaryGridItemTrendDirection,
-  Vo as BentoTab,
-  wo as BentoTabs,
-  Go as BentoTag,
-  Mo as BentoTagVariant,
-  $o as BentoTextarea,
-  Uo as BentoTimeline,
-  No as BentoTimelineGapUnit,
-  qo as BentoTimelineItem,
-  zo as BentoTimelineItemVariant,
-  Ko as BentoTimelineShowMorePlacement,
-  Wo as BentoToast,
-  Xo as BentoToggle,
-  Yo as BentoToggleLabelPosition,
-  Zo as BentoTogglePropClass,
-  cr as BentoTooltipDirective,
-  yr as BentoTooltipPosition,
-  xr as BentoTooltipState,
-  Vr as BentoTutorial,
+  qt as BentoModalRole,
+  zt as BentoModalSize,
+  Kt as BentoModalVariant,
+  Ht as BentoPagination,
+  Xt as BentoPaymentMethod,
+  Yt as BentoPaymentMethodType,
+  eo as BentoPopover,
+  to as BentoPopoverPositions,
+  no as BentoRadioGroup,
+  ao as BentoRadioGroupVariant,
+  io as BentoSearchBar,
+  Bo as BentoSearchBarEvent,
+  so as BentoSearchBarInternalEvent,
+  po as BentoSecondaryNav,
+  uo as BentoSegmentedControl,
+  fo as BentoSegmentedControlEvent,
+  yo as BentoSidepanel,
+  xo as BentoSidepanelAnimation,
+  go as BentoSidepanelEvent,
+  So as BentoSidepanelPage,
+  ho as BentoStatus,
+  Co as BentoStatusVariant,
+  ko as BentoStep,
+  vo as BentoStepper,
+  Do as BentoStepperTypeOption,
+  Io as BentoStepperVariantOption,
+  Lo as BentoStructuredList,
+  Po as BentoStructuredListItem,
+  _o as BentoSummaryGrid,
+  Vo as BentoSummaryGridItemAmount,
+  wo as BentoSummaryGridItemCustom,
+  Ao as BentoSummaryGridItemNumeric,
+  Go as BentoSummaryGridItemPercentage,
+  Mo as BentoSummaryGridItemSize,
+  Oo as BentoSummaryGridItemText,
+  $o as BentoSummaryGridItemTrendDirection,
+  No as BentoTab,
+  Uo as BentoTabs,
+  zo as BentoTag,
+  Ko as BentoTagVariant,
+  Wo as BentoTextarea,
+  Ho as BentoTimeline,
+  Jo as BentoTimelineGapUnit,
+  Xo as BentoTimelineItem,
+  Yo as BentoTimelineItemVariant,
+  Zo as BentoTimelineShowMorePlacement,
+  en as BentoTimelineStatus,
+  on as BentoToast,
+  Bn as BentoToggle,
+  sn as BentoToggleLabelPosition,
+  mn as BentoTogglePropClass,
+  vn as BentoTooltipDirective,
+  Dn as BentoTooltipPosition,
+  In as BentoTooltipState,
+  qn as BentoTutorial,
   c as BentoTypography,
-  tr as BentoTypographyElement,
-  or as BentoTypographyModifier,
-  rr as BentoTypographyVariant,
-  ar as DateFormat,
+  ln as BentoTypographyElement,
+  dn as BentoTypographyModifier,
+  un as BentoTypographyVariant,
+  cn as DateFormat,
   R as default,
-  Ho as useBentoToastController,
-  We as useCountryCapital,
-  je as useCountryName,
-  He as useCountryPhoneCode,
+  an as useBentoToastController,
+  je as useCountryCapital,
+  He as useCountryName,
+  Je as useCountryPhoneCode,
   be as useSearchBarFilter
 };
 //# sourceMappingURL=index.js.map