@adyen/bento-vue2 1.5.0 → 1.6.0

package/dist/focus-trap.js

@@ -1,4 +1,4 @@
-import { B as a } from "./chunks/index.0f8690c4.js";
+import { B as a } from "./chunks/index.74258013.js";
 export {
   a as BentoFocusTrap
 };

package/dist/form-layout.js

@@ -1,10 +1,10 @@
-import { defineComponent as _, useSlots as p, computed as n, provide as v, toRef as f, onMounted as g, ref as L } from "vue";
-import { BentoAlert as m } from "./alert.js";
-import { u as d } from "./chunks/use-has-slot.6052d56a.js";
-import { F as b } from "./chunks/form-layout.types.a7a1438d.js";
+import { defineComponent as _, useSlots as p, computed as a, provide as v, toRef as f, onMounted as g, ref as h } from "vue";
+import { BentoAlert as d } from "./alert.js";
+import { u as m } from "./chunks/use-has-slot.6052d56a.js";
+import { F as L } from "./chunks/form-layout.types.a7a1438d.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as i, c as h } from "./chunks/index.1645ffcb.js";
-import "./assets/index18.css";
+import { B as u, c as b } from "./chunks/index.74da0d41.js";
+import "./assets/index40.css";
 const C = {}, $ = /* @__PURE__ */ _({
   ...C,
   __name: "form-layout",
@@ -20,48 +20,59 @@ const C = {}, $ = /* @__PURE__ */ _({
     loading: { type: Boolean, default: !1 }
   },
   setup(o) {
-    const t = o, e = p(), s = d(e), r = n(() => t.form ? "form" : "div"), a = n(() => s("actions-left") || s("actions-right"));
-    return v(b, f(t, "loading")), { __sfc: !0, slots: e, hasSlot: s, props: t, formLayoutElement: r, hasActions: a, BentoAlert: m };
+    const t = o, s = p(), e = m(s), r = a(() => t.form ? "form" : "div"), n = a(() => e("actions-left") || e("actions-right"));
+    return v(L, f(t, "loading")), { __sfc: !0, slots: s, hasSlot: e, props: t, formLayoutElement: r, hasActions: n, BentoAlert: d };
   }
 });
 var B = function() {
-  var t = this, e = t._self._c, s = t._self._setupProxy;
-  return e(s.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [s.hasSlot("error-message") ? e(s.BentoAlert, { staticClass: "b-form-layout__error-message", attrs: { type: "critical" }, scopedSlots: t._u([{ key: "description", fn: function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s(e.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [e.hasSlot("error-message") ? s(e.BentoAlert, { staticClass: "b-form-layout__error-message", attrs: { type: "critical" }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("error-message")];
-  }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), s.hasActions ? e("div", { staticClass: "b-form-layout__actions-container" }, [e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
-}, x = [], F = /* @__PURE__ */ l(
+  }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), e.hasActions ? s("div", { staticClass: "b-form-layout__actions-container" }, [s("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), s("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
+}, F = [], T = /* @__PURE__ */ l(
   $,
   B,
-  x,
+  F,
   !1,
   null,
   "178aebc7",
   null,
   null
 );
-const Q = F.exports, T = {}, S = /* @__PURE__ */ _({
-  ...T,
+const W = T.exports, x = ["warning", "critical", "highlight", "success"], S = {}, A = /* @__PURE__ */ _({
+  ...S,
   __name: "form-layout-field-tip",
+  props: {
+    /**
+     * Type of a alert; set a distinctive icon and color. Defaults to highlight.
+     * @values highlight, success, critical, warning
+     */
+    type: {
+      type: String,
+      default: "highlight",
+      validator: (o) => x.includes(o)
+    }
+  },
   setup(o) {
-    return { __sfc: !0, BentoAlert: m };
+    return { __sfc: !0, BentoAlert: d };
   }
 });
-var A = function() {
-  var t = this, e = t._self._c, s = t._self._setupProxy;
-  return e("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), e(s.BentoAlert, { attrs: { variant: "tip", type: "warning" }, scopedSlots: t._u([{ key: "description", fn: function() {
+var O = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), s(e.BentoAlert, { attrs: { variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("message")];
   }, proxy: !0 }], null, !0) })], 2);
-}, O = [], E = /* @__PURE__ */ l(
-  S,
+}, E = [], G = /* @__PURE__ */ l(
   A,
   O,
+  E,
   !1,
   null,
-  "f5604b8a",
+  "52686d0f",
   null,
   null
 );
-const W = E.exports, u = [
+const X = G.exports, i = [
   "100",
   "50",
   "33",
@@ -72,21 +83,21 @@ const W = E.exports, u = [
   "25-75",
   "50-50",
   "33-33-33"
-], G = 100, P = (o, t) => {
-  const e = (r) => {
-    var a;
-    return (a = r.split) == null ? void 0 : a.call(r, "-").map((c) => parseInt(c, 10));
-  }, s = n(
-    () => u.includes(o.value) ? e(o.value) : G
+], P = 100, R = (o, t) => {
+  const s = (r) => {
+    var n;
+    return (n = r.split) == null ? void 0 : n.call(r, "-").map((c) => parseInt(c, 10));
+  }, e = a(
+    () => i.includes(o.value) ? s(o.value) : P
   );
   g(() => {
     const r = t.value.classList[0];
     t.value.querySelectorAll(`.${r} > *`).forEach((c, y) => {
-      c.classList.add(`${r}--${s.value[y] || "100"}`);
+      c.classList.add(`${r}--${e.value[y] || "100"}`);
     });
   });
-}, R = {}, I = /* @__PURE__ */ _({
-  ...R,
+}, I = {}, N = /* @__PURE__ */ _({
+  ...I,
   __name: "form-layout-group",
   props: {
     /**
@@ -115,35 +126,35 @@ const W = E.exports, u = [
     layout: {
       type: String,
       default: "100",
-      validator: (o) => u.includes(o)
+      validator: (o) => i.includes(o)
     }
   },
   setup(o) {
-    const t = o, e = L(null);
-    P(f(t, "layout"), e);
-    const s = n(() => ({
+    const t = o, s = h(null);
+    R(f(t, "layout"), s);
+    const e = a(() => ({
       // Transform into column if the layout is unsopprted
       // "form-layout.scss" depends on this class
-      "b-form-layout-group--column": !u.includes(t.layout)
+      "b-form-layout-group--column": !i.includes(t.layout)
     }));
-    return { __sfc: !0, props: t, formLayoutGroup: e, conditionalClasses: s };
+    return { __sfc: !0, props: t, formLayoutGroup: s, conditionalClasses: e };
   }
 });
-var N = function() {
-  var t = this, e = t._self._c, s = t._self._setupProxy;
-  return e("div", { ref: "formLayoutGroup", staticClass: "b-form-layout-group", class: s.conditionalClasses }, [t._t("default")], 2);
-}, k = [], q = /* @__PURE__ */ l(
-  I,
+var k = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { ref: "formLayoutGroup", staticClass: "b-form-layout-group", class: e.conditionalClasses }, [t._t("default")], 2);
+}, q = [], w = /* @__PURE__ */ l(
   N,
   k,
+  q,
   !1,
   null,
-  "39e9662c",
+  "ccb524d7",
   null,
   null
 );
-const X = q.exports, w = {}, D = /* @__PURE__ */ _({
-  ...w,
+const Z = w.exports, D = {}, M = /* @__PURE__ */ _({
+  ...D,
   __name: "form-layout-title",
   props: {
     /**
@@ -160,36 +171,36 @@ const X = q.exports, w = {}, D = /* @__PURE__ */ _({
      * @values h1, h2, h3, h4, h5, h6, div, p, span
      */
     el: {
-      type: i.props.el.type,
+      type: u.props.el.type,
       required: !0,
-      validator: (o) => Object.values(h).includes(o)
+      validator: (o) => Object.values(b).includes(o)
     }
   },
   setup(o) {
-    const t = o, e = p(), s = n(() => !t.subsection), r = d(e), a = n(() => ({
+    const t = o, s = p(), e = a(() => !t.subsection), r = m(s), n = a(() => ({
       "b-form-layout-title--subsection": t.subsection
     }));
-    return { __sfc: !0, slots: e, props: t, isSection: s, hasSlot: r, conditionalClasses: a, BentoTypography: i };
+    return { __sfc: !0, slots: s, props: t, isSection: e, hasSlot: r, conditionalClasses: n, BentoTypography: u };
   }
 });
-var M = function() {
-  var t = this, e = t._self._c, s = t._self._setupProxy;
-  return e("div", { staticClass: "b-form-layout-title", class: s.conditionalClasses }, [e(s.BentoTypography, { attrs: { el: t.el, variant: "title", medium: s.isSection } }, [t._t("default")], 2), s.hasSlot("description") ? e(s.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description")], 2) : t._e()], 1);
-}, U = [], Y = /* @__PURE__ */ l(
-  D,
+var U = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { staticClass: "b-form-layout-title", class: e.conditionalClasses }, [s(e.BentoTypography, { attrs: { el: t.el, variant: "title", medium: e.isSection } }, [t._t("default")], 2), e.hasSlot("description") ? s(e.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description")], 2) : t._e()], 1);
+}, Y = [], j = /* @__PURE__ */ l(
   M,
   U,
+  Y,
   !1,
   null,
   "03648a9d",
   null,
   null
 );
-const Z = Y.exports;
+const tt = j.exports;
 export {
-  Q as BentoFormLayout,
-  W as BentoFormLayoutFieldTip,
-  X as BentoFormLayoutGroup,
-  Z as BentoFormLayoutTitle
+  W as BentoFormLayout,
+  X as BentoFormLayoutFieldTip,
+  Z as BentoFormLayoutGroup,
+  tt as BentoFormLayoutTitle
 };
 //# sourceMappingURL=form-layout.js.map

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-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","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert variant=\"tip\" type=\"warning\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoAlert } from '@/components/alert';\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 * 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        immediateChildren.forEach((child, index) => {\n            child.classList.add(`${layoutClassName}--${layout.value[index] || '100'}`); // 100% default\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, defineProps, 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","__default__$2","BentoLayoutGroupProportions","DEFAULT_PROPORTION","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","child","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;;;;;;;;;;;;;;;;;;qBCTAK,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;qBC1BGC,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCpBAC,IAAA,KAYaC,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,IAAAhB;AAAA,IAAe,MAAAO,EAAA,SAAAG,EAAA,KAAA,IAAAE,EAAAF,EAAA,KAAA,IAAAF;AAAA,EACkF;AAGjG,EAAAS,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAEA,IADAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EACA,QAAA,CAAAC,GAAAC,MAAA;AACI,MAAAD,EAAA,UAAA,IAAA,GAAAD,MAAAF,EAAA,MAAAI,CAAA,KAAA,OAAA;AAAA,IAAyE,CAAA;AAAA,EAC5E,CAAA;AAET,GCuCIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/BAC,IAAAC,EAAA,IAAA;AACA,IAAAd,EAAAJ,EAAAJ,GAAA,QAAA,GAAAqB,CAAA;AAEA,UAAAE,IAAAxB,EAAA,OAAA;AAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAO,EAAA,SAAAN,EAAA,MAAA;AAAA,IAG0C,EAAA;;;;;;;;;;;;;;;;;qBCwBrFwB,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDA9B,IAAAC,EAAA,GAyBA8B,IAAA1B,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACA6B,IAAAxB,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 * 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        immediateChildren.forEach((child, index) => {\n            child.classList.add(`${layoutClassName}--${layout.value[index] || '100'}`); // 100% default\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","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","child","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBCxCGC,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCpBAC,IAAA,KAYaC,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,IAAAjB;AAAA,IAAe,MAAAQ,EAAA,SAAAG,EAAA,KAAA,IAAAE,EAAAF,EAAA,KAAA,IAAAF;AAAA,EACkF;AAGjG,EAAAS,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAEA,IADAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EACA,QAAA,CAAAC,GAAAC,MAAA;AACI,MAAAD,EAAA,UAAA,IAAA,GAAAD,MAAAF,EAAA,MAAAI,CAAA,KAAA,OAAA;AAAA,IAAyE,CAAA;AAAA,EAC5E,CAAA;AAET,GCuCIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/BAC,IAAAC,EAAA,IAAA;AACA,IAAAd,EAAAL,EAAAJ,GAAA,QAAA,GAAAsB,CAAA;AAEA,UAAAE,IAAAzB,EAAA,OAAA;AAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA,IAG0C,EAAA;;;;;;;;;;;;;;;;;qBCwBrFyB,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDA/B,IAAAC,EAAA,GAyBA+B,IAAA3B,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACA8B,IAAAzB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/header.js

@@ -1,15 +1,15 @@
-import { defineComponent as A, computed as p } from "vue";
-import { BentoMenu as C } from "./menu.js";
+import { defineComponent as A, computed as _ } from "vue";
+import { BentoMenu as O } from "./menu.js";
 import { BentoButtonActions as E } from "./button.js";
 import { n as I } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoInfoIcon as w } from "./info-icon.js";
 import { u as U } from "./chunks/use-has-slot.6052d56a.js";
-import { B, c as b, a as X } from "./chunks/index.1645ffcb.js";
-import { u as R } from "./chunks/i18n.155748d6.js";
-import { c as _, a as H } from "./chunks/index.86453263.js";
-import { r as l, t as i, e as g, g as y, d as P, f as Y } from "./chunks/index.f55fdc32.js";
+import { B, c as b, a as X } from "./chunks/index.74da0d41.js";
+import { u as P } from "./chunks/i18n.155748d6.js";
+import { c as p, a as R } from "./chunks/index.86453263.js";
+import { r as l, t as i, e as g, g as y, d as H, f as Y } from "./chunks/index.f55fdc32.js";
 import { e as F } from "./chunks/index.fdf12170.js";
-import "./assets/index37.css";
+import "./assets/index36.css";
 function G(e, t) {
   l(2, arguments);
   var n = i(e), a = i(t), s = n.getFullYear() - a.getFullYear(), r = n.getMonth() - a.getMonth();
@@ -42,13 +42,13 @@ function z(e) {
 }
 function j(e, t) {
   l(2, arguments);
-  var n = i(e), a = i(t), s = _(n, a), r = Math.abs(G(n, a)), c;
+  var n = i(e), a = i(t), s = p(n, a), r = Math.abs(G(n, a)), c;
   if (r < 1)
     c = 0;
   else {
     n.getMonth() === 1 && n.getDate() > 27 && n.setDate(30), n.setMonth(n.getMonth() - s * r);
-    var u = _(n, a) === -s;
-    z(i(e)) && r === 1 && _(e, a) === 1 && (u = !1), c = s * (r - Number(u));
+    var u = p(n, a) === -s;
+    z(i(e)) && r === 1 && p(e, a) === 1 && (u = !1), c = s * (r - Number(u));
   }
   return c === 0 ? 0 : c;
 }
@@ -64,14 +64,14 @@ function Q(e, t) {
   var a = n.locale || g;
   if (!a.formatDistance)
     throw new RangeError("locale must contain formatDistance property");
-  var s = _(e, t);
+  var s = p(e, t);
   if (isNaN(s))
     throw new RangeError("Invalid time value");
-  var r = H(n);
+  var r = R(n);
   r.addSuffix = !!n.addSuffix, r.comparison = s;
   var c, u;
   s > 0 ? (c = i(t), u = i(e)) : (c = i(e), u = i(t));
-  var f = k(u, c), x = (y(u) - y(c)) / 1e3, o = Math.round((f - x) / 60), d;
+  var f = k(u, c), x = (y(u) - y(c)) / 1e3, o = Math.round((f - x) / 60), m;
   if (o < 2)
     return n.includeSeconds ? f < 5 ? a.formatDistance("lessThanXSeconds", 5, r) : f < 10 ? a.formatDistance("lessThanXSeconds", 10, r) : f < 20 ? a.formatDistance("lessThanXSeconds", 20, r) : f < 40 ? a.formatDistance("halfAMinute", null, r) : f < 60 ? a.formatDistance("lessThanXMinutes", 1, r) : a.formatDistance("xMinutes", 1, r) : o === 0 ? a.formatDistance("lessThanXMinutes", 1, r) : a.formatDistance("xMinutes", o, r);
   if (o < 45)
@@ -79,22 +79,22 @@ function Q(e, t) {
   if (o < 90)
     return a.formatDistance("aboutXHours", 1, r);
   if (o < D) {
-    var S = Math.round(o / 60);
-    return a.formatDistance("aboutXHours", S, r);
+    var N = Math.round(o / 60);
+    return a.formatDistance("aboutXHours", N, r);
   } else {
     if (o < J)
       return a.formatDistance("xDays", 1, r);
     if (o < h) {
-      var N = Math.round(o / D);
-      return a.formatDistance("xDays", N, r);
+      var S = Math.round(o / D);
+      return a.formatDistance("xDays", S, r);
     } else if (o < K)
-      return d = Math.round(o / h), a.formatDistance("aboutXMonths", d, r);
+      return m = Math.round(o / h), a.formatDistance("aboutXMonths", m, r);
   }
-  if (d = j(u, c), d < 12) {
-    var O = Math.round(o / h);
-    return a.formatDistance("xMonths", O, r);
+  if (m = j(u, c), m < 12) {
+    var C = Math.round(o / h);
+    return a.formatDistance("xMonths", C, r);
   } else {
-    var M = d % 12, v = Math.floor(d / 12);
+    var M = m % 12, v = Math.floor(m / 12);
     return M < 3 ? a.formatDistance("aboutXYears", v, r) : M < 9 ? a.formatDistance("overXYears", v, r) : a.formatDistance("almostXYears", v + 1, r);
   }
 }
@@ -153,7 +153,7 @@ const Z = {}, tt = /* @__PURE__ */ A({
     }
   },
   setup(e) {
-    const t = e, n = p(() => t.actions.slice(0, t.displayedActions)), a = p(
+    const t = e, n = _(() => t.actions.slice(0, t.displayedActions)), a = _(
       () => t.displayedActions && t.displayedActions < t.actions.length ? t.actions.slice(t.displayedActions, t.actions.length).map((s) => ({
         text: s.title,
         handler: s.event,
@@ -162,7 +162,7 @@ const Z = {}, tt = /* @__PURE__ */ A({
         disabled: s.disabled
       })) : []
     );
-    return { __sfc: !0, props: t, computedActions: n, computedMenuActions: a, BentoMenu: C, BentoButtonActions: E };
+    return { __sfc: !0, props: t, computedActions: n, computedMenuActions: a, BentoMenu: O, BentoButtonActions: E };
   }
 });
 var et = function() {
@@ -179,7 +179,7 @@ var et = function() {
   null
 );
 const rt = at.exports;
-var m = /* @__PURE__ */ ((e) => (e.PAGE = "page", e.COMPONENT = "component", e))(m || {});
+var d = /* @__PURE__ */ ((e) => (e.PAGE = "page", e.COMPONENT = "component", e))(d || {});
 const st = {
   "en-US": {
     lastUpdated: "Last updated: {date} ago"
@@ -199,8 +199,8 @@ const st = {
      */
     variant: {
       type: String,
-      default: m.PAGE,
-      validator: (e) => Object.values(m).includes(e)
+      default: d.PAGE,
+      validator: (e) => Object.values(d).includes(e)
     },
     /**
      * Text used as a title
@@ -223,12 +223,14 @@ const st = {
     lastUpdated: { type: [Date, Number], default: null }
   },
   setup(e, { slots: t }) {
-    const { t: n, locale: a } = R(), s = { de: P, enUS: g, fr: Y }, r = p(() => ({
-      el: e.variant === m.PAGE ? b.H1 : b.H2,
+    const { t: n, locale: a } = P(), s = { de: H, enUS: g, fr: Y }, r = _(() => ({
+      "b-header--component": e.variant === d.COMPONENT
+    })), c = _(() => ({
+      el: e.variant === d.PAGE ? b.H1 : b.H2,
       variant: X.TITLE,
-      medium: e.variant === m.COMPONENT,
-      large: e.variant === m.PAGE
-    })), c = p(
+      medium: e.variant === d.COMPONENT,
+      large: e.variant === d.PAGE
+    })), u = _(
       () => e.lastUpdated ? n("lastUpdated", {
         date: V(e.lastUpdated, {
           locale: s[a.value.substring(0, 2)] || g
@@ -237,21 +239,22 @@ const st = {
     );
     return {
       hasSlot: U(t),
-      timestamp: c,
-      typography: r
+      conditionalClasses: r,
+      timestamp: u,
+      typography: c
     };
   }
 });
 var it = function() {
   var t = this, n = t._self._c;
-  return t._self._setupProxy, n("div", { staticClass: "b-header" }, [n("div", { staticClass: "b-header__wrapper" }, [n("div", { staticClass: "b-header__title" }, [n("div", [n("bento-typography", t._b({ staticClass: "b-header__text" }, "bento-typography", t.typography, !1), [t._v(t._s(t.title))]), t.infoIconTooltipText ? n("bento-info-icon", { staticClass: "b-header__tooltip", attrs: { "tooltip-text": t.infoIconTooltipText } }) : t._e()], 1), t.lastUpdated ? n("bento-typography", { staticClass: "b-header__timestamp", attrs: { el: "div", variant: "caption" } }, [t._v(" " + t._s(t.timestamp) + " ")]) : t._e()], 1), t.actions ? n("button-actions-with-menu", { staticClass: "b-header__actions", attrs: { actions: t.actions, "displayed-actions": 2 } }) : t._e()], 1)]);
+  return t._self._setupProxy, n("div", { staticClass: "b-header", class: t.conditionalClasses }, [n("div", { staticClass: "b-header__wrapper" }, [n("div", { staticClass: "b-header__title" }, [n("div", [n("bento-typography", t._b({ staticClass: "b-header__text" }, "bento-typography", t.typography, !1), [t._v(t._s(t.title))]), t.infoIconTooltipText ? n("bento-info-icon", { staticClass: "b-header__tooltip", attrs: { "tooltip-text": t.infoIconTooltipText } }) : t._e()], 1), t.lastUpdated ? n("bento-typography", { staticClass: "b-header__timestamp", attrs: { el: "div", variant: "caption" } }, [t._v(" " + t._s(t.timestamp) + " ")]) : t._e()], 1), t.actions ? n("button-actions-with-menu", { staticClass: "b-header__actions", attrs: { actions: t.actions, "displayed-actions": 2 } }) : t._e()], 1)]);
 }, ct = [], ut = /* @__PURE__ */ I(
   ot,
   it,
   ct,
   !1,
   null,
-  "2c272b7c",
+  "7b42ede3",
   null,
   null
 );