@adyen/bento-vue2 1.21.1 → 1.22.0

package/dist/focus-trap.js

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

package/dist/fonts/fonts.css

@@ -1,71 +1,2 @@
-@font-face {
-    font-display: swap;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 100;
-    src: url('./Inter-Thin.woff2') format('woff2'), url('./Inter-Thin.woff') format('woff'),
-        url('./Inter-Thin.ttf') format('truetype'), url('./Inter-Thin.otf') format('opentype');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 200;
-    src: url('./Inter-ExtraLight.woff2') format('woff2'), url('./Inter-ExtraLight.woff') format('woff'),
-        url('./Inter-ExtraLight.ttf') format('truetype'), url('./Inter-ExtraLight.otf') format('opentype');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 300;
-    src: url('./Inter-Light.woff2') format('woff2'), url('./Inter-Light.woff') format('woff'),
-        url('./Inter-Light.ttf') format('truetype'), url('./Inter-Light.otf') format('opentype');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 400;
-    src: url('./Inter-Regular.woff2') format('woff2'), url('./Inter-Regular.woff') format('woff'),
-        url('./Inter-Regular.ttf') format('truetype'), url('./Inter-Regular.otf') format('opentype');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    src: url('./Inter-Medium.woff2') format('woff2'), url('./Inter-Medium.woff') format('woff'),
-        url('./Inter-Medium.ttf') format('truetype'), url('./Inter-Medium.otf') format('opentype');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    src: url('./Inter-SemiBold.woff2') format('woff2'), url('./Inter-SemiBold.woff') format('woff'),
-        url('./Inter-SemiBold.ttf') format('truetype'), url('./Inter-SemiBold.otf') format('opentype');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 700;
-    src: url('./Inter-Bold.woff2') format('woff2'), url('./Inter-Bold.woff') format('woff'),
-        url('./Inter-Bold.ttf') format('truetype'), url('./Inter-Bold.otf') format('opentype');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 800;
-    src: url('./Inter-ExtraBold.woff2') format('woff2'), url('./Inter-ExtraBold.woff') format('woff'),
-        url('./Inter-ExtraBold.ttf') format('truetype'), url('./Inter-ExtraBold.otf') format('opentype');
-}
+/* stylelint-disable-next-line at-rule-disallowed-list */
+@import url("https://bae81f955b.cdn.adyen.com/bento/fonts/fonts.min.css");

package/dist/form-layout.js

@@ -1,12 +1,12 @@
-import { defineComponent as _, useSlots as p, computed as a, provide as g, toRef as f, onMounted as h, ref as L } from "vue";
-import { BentoAlert as d } from "./alert.js";
-import { F as b } from "./chunks/form-layout.types.a7a1438d.js";
-import { u as m } from "./chunks/use-has-slot.fbeb19ec.js";
-import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as u, c as C } from "./chunks/index.7b7ef408.js";
-import "./assets/index47.css";
-const B = {}, $ = /* @__PURE__ */ _({
-  ...B,
+import { defineComponent as a, useSlots as i, computed as r, provide as d, toRef as m } from "vue";
+import { BentoAlert as p } from "./alert.js";
+import { F as y } from "./chunks/form-layout.types.a7a1438d.js";
+import { u as f } from "./chunks/use-has-slot.fbeb19ec.js";
+import { n as _ } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as u, c as v } from "./chunks/index.0c33067d.js";
+import "./assets/index11.css";
+const g = {}, h = /* @__PURE__ */ a({
+  ...g,
   __name: "form-layout",
   props: {
     /**
@@ -19,28 +19,28 @@ const B = {}, $ = /* @__PURE__ */ _({
      */
     loading: { type: Boolean, default: !1 }
   },
-  setup(o) {
-    const t = o, e = p(), s = m(e), n = a(() => t.form ? "form" : "div"), r = a(() => s("actions-left") || s("actions-right"));
-    return g(b, f(t, "loading")), { __sfc: !0, slots: e, hasSlot: s, props: t, formLayoutElement: n, hasActions: r, BentoAlert: d };
+  setup(e) {
+    const t = e, o = i(), s = f(o), n = r(() => t.form ? "form" : "div"), l = r(() => s("actions-left") || s("actions-right"));
+    return d(y, m(t, "loading")), { __sfc: !0, slots: o, hasSlot: s, props: t, formLayoutElement: n, hasActions: l, BentoAlert: p };
   }
 });
-var F = 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 b = function() {
+  var t = this, o = t._self._c, s = t._self._setupProxy;
+  return o(s.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [s.hasSlot("error-message") ? o(s.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);
-}, T = [], x = /* @__PURE__ */ l(
-  $,
-  F,
-  T,
+  }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), s.hasActions ? o("div", { staticClass: "b-form-layout__actions-container" }, [o("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), o("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
+}, L = [], B = /* @__PURE__ */ _(
+  h,
+  b,
+  L,
   !1,
   null,
   "178aebc7",
   null,
   null
 );
-const Z = x.exports, S = ["warning", "critical", "highlight", "success"], A = {}, O = /* @__PURE__ */ _({
-  ...A,
+const H = B.exports, C = ["warning", "critical", "highlight", "success"], F = {}, T = /* @__PURE__ */ a({
+  ...F,
   __name: "form-layout-field-tip",
   props: {
     /**
@@ -50,29 +50,29 @@ const Z = x.exports, S = ["warning", "critical", "highlight", "success"], A = {}
     type: {
       type: String,
       default: "highlight",
-      validator: (o) => S.includes(o)
+      validator: (e) => C.includes(e)
     }
   },
-  setup(o) {
-    return { __sfc: !0, BentoAlert: d };
+  setup(e) {
+    return { __sfc: !0, BentoAlert: p };
   }
 });
-var E = 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: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
+var $ = function() {
+  var t = this, o = t._self._c, s = t._self._setupProxy;
+  return o("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), o(s.BentoAlert, { attrs: { variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("message")];
   }, proxy: !0 }], null, !0) })], 2);
-}, G = [], P = /* @__PURE__ */ l(
-  O,
-  E,
-  G,
+}, x = [], S = /* @__PURE__ */ _(
+  T,
+  $,
+  x,
   !1,
   null,
   "52686d0f",
   null,
   null
 );
-const tt = P.exports, i = [
+const J = S.exports, c = [
   "100",
   "50",
   "33",
@@ -83,26 +83,8 @@ const tt = P.exports, i = [
   "25-75",
   "50-50",
   "33-33-33"
-], R = 100;
-function I(o, t, e) {
-  o.parentNode.insertBefore(t, o), t.appendChild(o), t.classList.add(e);
-}
-const N = (o, t) => {
-  const e = (n) => {
-    var r;
-    return (r = n.split) == null ? void 0 : r.call(n, "-").map((c) => parseInt(c, 10));
-  }, s = a(
-    () => i.includes(o.value) ? e(o.value) : R
-  );
-  h(() => {
-    const n = t.value.classList[0];
-    t.value.querySelectorAll(`.${n} > *`).forEach((c, y) => {
-      const v = `${n}--${s.value[y] || "100"}`;
-      I(c, document.createElement("div"), v);
-    });
-  });
-}, w = {}, k = /* @__PURE__ */ _({
-  ...w,
+], O = {}, A = /* @__PURE__ */ a({
+  ...O,
   __name: "form-layout-group",
   props: {
     /**
@@ -131,35 +113,36 @@ const N = (o, t) => {
     layout: {
       type: String,
       default: "100",
-      validator: (o) => i.includes(o)
+      validator: (e) => c.includes(e)
     }
   },
-  setup(o) {
-    const t = o, e = L(null);
-    N(f(t, "layout"), e);
-    const s = a(() => ({
-      // Transform into column if the layout is unsopprted
-      // "form-layout.scss" depends on this class
-      "b-form-layout-group--column": !i.includes(t.layout)
+  setup(e) {
+    const t = e, o = 100, s = r(
+      () => c.includes(t.layout) ? t.layout : o
+    ), n = r(() => ({
+      // Transform into column if the layout is unsupported
+      "b-form-layout-group--column": !c.includes(t.layout),
+      // Assings the correct layout class
+      [`b-form-layout-group--${s.value}`]: !0
     }));
-    return { __sfc: !0, props: t, formLayoutGroup: e, conditionalClasses: s };
+    return { __sfc: !0, DEFAULT_PROPORTION: o, props: t, computedLayout: s, conditionalClasses: n };
   }
 });
-var q = 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);
-}, D = [], M = /* @__PURE__ */ l(
-  k,
-  q,
-  D,
+var R = function() {
+  var t = this, o = t._self._c, s = t._self._setupProxy;
+  return o("div", { staticClass: "b-form-layout-group", class: s.conditionalClasses }, [t._t("default")], 2);
+}, P = [], E = /* @__PURE__ */ _(
+  A,
+  R,
+  P,
   !1,
   null,
-  "ccb524d7",
+  "f4f09170",
   null,
   null
 );
-const et = M.exports, U = {}, Y = /* @__PURE__ */ _({
-  ...U,
+const K = E.exports, G = {}, I = /* @__PURE__ */ a({
+  ...G,
   __name: "form-layout-title",
   props: {
     /**
@@ -178,34 +161,34 @@ const et = M.exports, U = {}, Y = /* @__PURE__ */ _({
     el: {
       type: u.props.el.type,
       required: !0,
-      validator: (o) => Object.values(C).includes(o)
+      validator: (e) => Object.values(v).includes(e)
     }
   },
-  setup(o) {
-    const t = o, e = p(), s = a(() => !t.subsection), n = m(e), r = a(() => ({
+  setup(e) {
+    const t = e, o = i(), s = r(() => !t.subsection), n = f(o), l = r(() => ({
       "b-form-layout-title--subsection": t.subsection
     }));
-    return { __sfc: !0, slots: e, props: t, isSection: s, hasSlot: n, conditionalClasses: r, BentoTypography: u };
+    return { __sfc: !0, slots: o, props: t, isSection: s, hasSlot: n, conditionalClasses: l, BentoTypography: u };
   }
 });
-var j = 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);
-}, z = [], H = /* @__PURE__ */ l(
-  Y,
-  j,
-  z,
+var N = function() {
+  var t = this, o = t._self._c, s = t._self._setupProxy;
+  return o("div", { staticClass: "b-form-layout-title", class: s.conditionalClasses }, [o(s.BentoTypography, { attrs: { el: t.el, variant: "title", medium: s.isSection } }, [t._t("default")], 2), s.hasSlot("description") ? o(s.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description")], 2) : t._e()], 1);
+}, k = [], w = /* @__PURE__ */ _(
+  I,
+  N,
+  k,
   !1,
   null,
   "03648a9d",
   null,
   null
 );
-const st = H.exports;
+const M = w.exports;
 export {
-  Z as BentoFormLayout,
-  tt as BentoFormLayoutFieldTip,
-  et as BentoFormLayoutGroup,
-  st as BentoFormLayoutTitle
+  H as BentoFormLayout,
+  J as BentoFormLayoutFieldTip,
+  K as BentoFormLayoutGroup,
+  M 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-tip.types.ts","../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../src/components/form-layout/components/form-layout-group/form-layout-group.vue","../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","import { BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n    import { BentoFormLayoutFieldTipTypeOption, BentoFormLayoutFieldTipTypeOptions } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","export type BentoLayoutGroupProportions =\n    | '33-33-33'\n    | '50-50'\n    | '25-75'\n    | '75-25'\n    | '33-66'\n    | '66-33'\n    | '25'\n    | '33'\n    | '50'\n    | '100';\n\nexport const BentoLayoutGroupProportions = [\n    '100',\n    '50',\n    '33',\n    '25',\n    '66-33',\n    '33-66',\n    '75-25',\n    '25-75',\n    '50-50',\n    '33-33-33',\n];\n","import { computed, onMounted, Ref } from 'vue';\nimport { BentoLayoutGroupProportions } from '../form-layout-group.types';\n\nconst DEFAULT_PROPORTION = 100;\n\n/**\n * Wraps a FormLayoutGroup child inside a \"div\" container.\n * This helps preventing the components from re-writing the classes or styles.\n * @param child Child element to be wrapped\n * @param container Container in which the child will be wrapped into\n * @param containerClass FormLayoutGroup layout percentage class\n */\nfunction wrapInsideContainer(child: Element, container: HTMLDivElement, containerClass: string) {\n    // Insert container above the child\n    child.parentNode.insertBefore(container, child);\n    // Move child to the container\n    container.appendChild(child);\n    // Apply layout class\n    container.classList.add(containerClass);\n}\n\n/**\n * Calculates the CSS classes based on the percentage\n * for each one of the layouts in format `##-##` or `##`.\n *\n * It receives a layout of type `BentoLayoutGroupProportions` to\n * generate the class and apply it to the children of the `BentoFormLayoutGroup` component\n *\n * @param layoutProp Layout string in the format `##` or `##-##`\n * @param formLayoutGroupRef Reference to an HTML element of type BentoFormLayoutGroup\n */\nexport const useFormLayoutGroupPercentage = (\n    layoutProp: Ref<BentoLayoutGroupProportions>,\n    formLayoutGroupRef: Ref<HTMLElement>\n) => {\n    // Split the `##-##` format into individual values [##, ##]\n    const getLayoutValues = layout => layout.split?.('-').map(value => parseInt(value, 10));\n    // Split the values only if the are in BentoLayoutGroupProportions, otherwise return 100%\n    const layout = computed(() =>\n        BentoLayoutGroupProportions.includes(layoutProp.value) ? getLayoutValues(layoutProp.value) : DEFAULT_PROPORTION\n    );\n\n    onMounted(() => {\n        // Apply class to every immediate child\n        const layoutClassName = formLayoutGroupRef.value.classList[0];\n        const immediateChildren = formLayoutGroupRef.value.querySelectorAll(`.${layoutClassName} > *`); // Get immediate children\n\n        immediateChildren.forEach((child, index) => {\n            const containerClass = `${layoutClassName}--${layout.value[index] || '100'}`; // 100% default\n            wrapInsideContainer(child, document.createElement('div'), containerClass);\n        });\n    });\n};\n","<template>\n    <div ref=\"formLayoutGroup\" class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, toRef } from 'vue';\n    import { useFormLayoutGroupPercentage } from './composable/use-form-layout-group-percentage';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two colums are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '33-33-33'\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n            validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n        },\n    });\n\n    const formLayoutGroup = ref(null);\n    useFormLayoutGroupPercentage(toRef(props, 'layout'), formLayoutGroup);\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsopprted\n        // \"form-layout.scss\" depends on this class\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography v-if=\"hasSlot('description')\" class=\"b-form-layout-title__description\" el=\"span\" wide>\n            <slot name=\"description\" />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organise related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","DEFAULT_PROPORTION","wrapInsideContainer","child","container","containerClass","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","index","__default__$1","formLayoutGroup","ref","conditionalClasses","__default__","isSection"],"mappings":";;;;;;;AAsFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBA1DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,IAAAC,EAAA,MAAAC,EAAA,OAAA,SAAA,KAAA,GACAC,IAAAF,EAAA,MAAAH,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAM,EAAAC,GAAAC,EAAAJ,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;qBC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GCiDHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBCxCGC,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCpBAC,IAAA;AASA,SAAAC,EAAAC,GAAAC,GAAAC,GAAA;AAEI,EAAAF,EAAA,WAAA,aAAAC,GAAAD,CAAA,GAEAC,EAAA,YAAAD,CAAA,GAEAC,EAAA,UAAA,IAAAC,CAAA;AACJ;AAYa,MAAAC,IAAA,CAAAC,GAAAC,MAAA;AAKT,QAAAC,IAAA,CAAAC,MAAA;;AAAA,YAAAC,IAAAD,EAAA,UAAA,gBAAAC,EAAA,KAAAD,GAAA,KAAA,IAAA,CAAAE,MAAA,SAAAA,GAAA,EAAA;AAAA,KAEAC,IAAArB;AAAA,IAAe,MAAAQ,EAAA,SAAAO,EAAA,KAAA,IAAAE,EAAAF,EAAA,KAAA,IAAAN;AAAA,EACkF;AAGjG,EAAAa,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAGA,IAFAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EAEA,QAAA,CAAAZ,GAAAa,MAAA;AACI,YAAAX,IAAA,GAAAU,MAAAF,EAAA,MAAAG,CAAA,KAAA;AACA,MAAAd,EAAAC,GAAA,SAAA,cAAA,KAAA,GAAAE,CAAA;AAAA,IAAwE,CAAA;AAAA,EAC3E,CAAA;AAET,GCqBIY,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/BAC,IAAAC,EAAA,IAAA;AACA,IAAAb,EAAAT,EAAAJ,GAAA,QAAA,GAAAyB,CAAA;AAEA,UAAAE,IAAA5B,EAAA,OAAA;AAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA,IAG0C,EAAA;;;;;;;;;;;;;;;;;sBCwBrF4B,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAlC,IAAAC,EAAA,GAyBAkC,IAAA9B,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiC,IAAA5B,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}
+{"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/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","<template>\n    <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    // Default proportion\n    const DEFAULT_PROPORTION = 100;\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two 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    // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n    const computedLayout = computed(() =>\n        BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n    );\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsupported\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n        // Assings the correct layout class\n        [`b-form-layout-group--${computedLayout.value}`]: true,\n    }));\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__$1","DEFAULT_PROPORTION","computedLayout","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,GCuDIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAnEAC,IAAA,KAkCAC,IAAAX;AAAA,MAAuB,MAAAQ,EAAA,SAAAP,EAAA,MAAA,IAAAA,EAAA,SAAAS;AAAA,IACiD,GAGxEE,IAAAZ,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAU,EAAA,OAAA,GAAA;AAAA,IAE/B,EAAA;;;;;;;;;;;;;;;;;qBCmBtDE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAlB,IAAAC,EAAA,GAyBAkB,IAAAd,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/header.js

@@ -1,17 +1,17 @@
 import { defineComponent as E, ref as h, computed as T } from "vue";
 import { u as U } from "./chunks/use-has-slot.fbeb19ec.js";
-import { B as C, c as D, a as L } from "./chunks/index.7b7ef408.js";
+import { B as C, c as D, a as L } from "./chunks/index.0c33067d.js";
 import { u as N } from "./chunks/i18n.eb5b985b.js";
-import { B as X } from "./chunks/button-actions-with-menu.6fff0861.js";
+import { B as X } from "./chunks/button-actions-with-menu.ec7dfc53.js";
 import { c as I, a as F } from "./chunks/index.86453263.js";
 import { r as m, t as l, e as O, g as P, d as Y, f as B } from "./chunks/index.f55fdc32.js";
 import { e as G } from "./chunks/index.fdf12170.js";
 import { e as H } from "./chunks/index.d80206ed.js";
-import { a as g } from "./chunks/index.d1910671.js";
+import { a as g } from "./chunks/index.937a82c2.js";
 import { g as W } from "./chunks/unique-id.a2a2b458.js";
-import { I as $ } from "./chunks/info.8b6328aa.js";
+import { I as $ } from "./chunks/info.b11d377e.js";
 import { n as A } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index26.css";
+import "./assets/index12.css";
 function z(o, e) {
   m(2, arguments);
   var n = l(o), t = l(e), c = n.getFullYear() - t.getFullYear(), a = n.getMonth() - t.getMonth();