@adyen/bento-vue2 1.2.0 → 1.3.0

package/dist/radio-group.js

@@ -1,18 +1,19 @@
-import { defineComponent as p, toRefs as C, computed as o, toRef as S } from "vue";
-import { B as I, b as B, a as V, d as A } from "./chunks/index.175f9e2d.js";
-import { u as R } from "./chunks/aria-label.ac9651a5.js";
+import { defineComponent as y, toRefs as S, computed as o, toRef as b } from "vue";
+import { B, b as I, a as R, d as T } from "./chunks/index.56858f4e.js";
+import { u as V } from "./chunks/aria-label.ac9651a5.js";
 import { g as f } from "./chunks/unique-id.a2a2b458.js";
-import { u as T } from "./chunks/use-has-slot.068222e6.js";
-import { u as D } from "./chunks/use-default-slot-validator.83d977a1.js";
-import { g as L } from "./chunks/get-slot-text.e5c766d0.js";
-import { n as b } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { C as k } from "./chunks/controls-group.9d58a091.js";
-import { E as O } from "./chunks/error-message.a581a172.js";
-import "./assets/index7.css";
-var i = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(i || {}), d = /* @__PURE__ */ ((a) => (a.HORIZONTAL = "horizontal", a.VERTICAL = "vertical", a))(d || {}), n = /* @__PURE__ */ ((a) => (a.UPDATE = "update:model-value", a))(n || {});
-const x = p({
+import { u as A } from "./chunks/use-has-slot.068222e6.js";
+import { u as L } from "./chunks/use-default-slot-validator.83d977a1.js";
+import { g as D } from "./chunks/get-slot-text.e5c766d0.js";
+import { n as m } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { u as x } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { C as O } from "./chunks/controls-group.b827382b.js";
+import { E as k } from "./chunks/error-message.0433b539.js";
+import "./assets/index22.css";
+var d = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(d || {}), u = /* @__PURE__ */ ((a) => (a.HORIZONTAL = "horizontal", a.VERTICAL = "vertical", a))(u || {}), n = /* @__PURE__ */ ((a) => (a.UPDATE = "update:model-value", a))(n || {});
+const M = y({
   name: "radio-button",
-  components: { BentoTypography: I },
+  components: { BentoTypography: B },
   props: {
     /**
      * Disable the radio button (optional)
@@ -53,136 +54,132 @@ const x = p({
   },
   emits: [n.UPDATE],
   setup(a, { slots: e, emit: r }) {
-    const t = T(e), { value: u } = C(a), c = f("radio-button"), _ = f("description"), l = t("default"), s = t("description");
-    D("radio-button", l, s);
-    const y = o(() => ({
-      [`b-radio-button--${i.DISABLED}`]: a.disabled,
-      [`b-radio-button--${i.READONLY}`]: a.readonly
-    })), m = o(() => ({
-      [`b-radio-button__input--${i.ERROR}`]: a.hasError
-    })), g = R({
-      ariaLabel: L(e)("default"),
-      label: u.value
-    }), h = o(() => a.hasError), v = o(() => a.value === a.modelValue);
+    const t = A(e), { value: l } = S(a), c = f("radio-button"), p = f("description"), s = t("default"), i = t("description");
+    L("radio-button", s, i);
+    const _ = o(() => ({
+      [`b-radio-button--${d.DISABLED}`]: a.disabled,
+      [`b-radio-button--${d.READONLY}`]: a.readonly
+    })), g = o(() => ({
+      [`b-radio-button__input--${d.ERROR}`]: a.hasError
+    })), h = V({
+      ariaLabel: D(e)("default"),
+      label: l.value
+    }), v = o(() => a.hasError), E = o(() => a.value === a.modelValue);
     return {
       // Values
-      ariaLabel: g,
-      ariaInvalid: h,
-      isChecked: v,
-      defaultSlotValue: l,
-      descriptionSlotValue: s,
-      conditionalClassContainer: y,
-      conditionalClassInput: m,
+      ariaLabel: h,
+      ariaInvalid: v,
+      isChecked: E,
+      defaultSlotValue: s,
+      descriptionSlotValue: i,
+      conditionalClassContainer: _,
+      conditionalClassInput: g,
       radioButtonId: c,
-      descriptionId: _,
+      descriptionId: p,
       // Events
       onChange: () => {
         !a.disabled && !a.readonly && r(n.UPDATE, a.value);
       },
-      onClick: (E) => {
-        a.readonly && E.preventDefault();
+      onClick: (C) => {
+        a.readonly && C.preventDefault();
       },
       // Enums
-      BentoTypographyVariant: B,
-      BentoTypographyElement: V
+      BentoTypographyVariant: I,
+      BentoTypographyElement: R
     };
   }
 });
-var M = function() {
+var P = function() {
   var e = this, r = e._self._c;
-  return e._self._setupProxy, r("div", { staticClass: "b-radio-button", class: e.conditionalClassContainer, attrs: { "data-testid": "radio-button-container" } }, [r("input", { staticClass: "b-radio-button__input", class: e.conditionalClassInput, attrs: { id: e.radioButtonId, "aria-checked": e.isChecked, "aria-label": e.ariaLabel, "aria-invalid": e.ariaInvalid, "aria-describedby": e.descriptionSlotValue ? e.descriptionId : "", disabled: e.disabled, "aria-readonly": e.readonly, type: "radio", role: "radio" }, domProps: { checked: e.isChecked, value: e.value }, on: { click: e.onClick, change: e.onChange } }), e.defaultSlotValue ? r("label", { staticClass: "b-radio-button__label-container", attrs: { for: e.radioButtonId } }, [e.defaultSlotValue ? r("bento-typography", { staticClass: "b-radio-button__label", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("default")], 2) : e._e(), e.defaultSlotValue && e.descriptionSlotValue ? r("bento-typography", { staticClass: "b-radio-button__description", attrs: { id: e.descriptionId, el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("description")], 2) : e._e()], 1) : e._e()]);
-}, P = [], N = /* @__PURE__ */ b(
-  x,
+  return e._self._setupProxy, r("div", { staticClass: "b-radio-button", class: e.conditionalClassContainer, attrs: { "data-testid": "radio-button-container" } }, [r("input", { staticClass: "b-radio-button__input", class: e.conditionalClassInput, attrs: { id: e.radioButtonId, "aria-checked": e.isChecked, "aria-label": e.ariaLabel, "aria-invalid": e.ariaInvalid, "aria-describedby": e.descriptionSlotValue ? e.descriptionId : "", disabled: e.disabled, "aria-readonly": e.readonly ? e.readonly : void 0, type: "radio", role: "radio" }, domProps: { checked: e.isChecked, value: e.value }, on: { click: e.onClick, change: e.onChange } }), e.defaultSlotValue ? r("label", { staticClass: "b-radio-button__label-container", attrs: { for: e.radioButtonId } }, [e.defaultSlotValue ? r("bento-typography", { staticClass: "b-radio-button__label", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("default")], 2) : e._e(), e.defaultSlotValue && e.descriptionSlotValue ? r("bento-typography", { staticClass: "b-radio-button__description", attrs: { id: e.descriptionId, el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("description")], 2) : e._e()], 1) : e._e()]);
+}, N = [], U = /* @__PURE__ */ m(
   M,
   P,
+  N,
   !1,
   null,
-  "1a39f1ee",
+  "6afbb307",
   null,
   null
 );
-const U = N.exports, $ = p({
+const $ = U.exports, q = y({
   name: "bento-radio-group",
-  components: { ControlsGroup: k, ErrorMessage: O, RadioButton: U },
+  components: { ControlsGroup: O, ErrorMessage: k, RadioButton: $ },
   props: {
+    /**
+     * Descriptive supporting text visbile underneath the label.
+     */
+    description: { type: String, default: null },
     /**
      * If set to true, renders all radio-buttons in the group in a disabled state.
      */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
+    disabled: { type: Boolean, default: !1 },
     /**
      * If string is passed, all radio-buttons in an error state and renders the string beneath the buttons.
      */
-    errorMessage: {
-      type: String,
-      default: null
-    },
+    errorMessage: { type: String, default: null },
     /**
      * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.
      */
-    formId: {
-      type: String,
-      default: null
-    },
+    formId: { type: String, default: null },
     /**
      * If set to true, renders all radio-buttons in the group in an error state.
      *
      * @deprecated Use "errorMessage" prop instead
      */
-    hasError: {
-      type: Boolean,
-      default: !1
-    },
+    hasError: { type: Boolean, default: !1 },
+    /**
+     * Shows/hides the group label.
+     */
+    hideLabel: { type: Boolean, default: null },
     /**
      * The radio group's items.
      */
-    items: {
-      type: Array,
-      required: !0
-    },
+    items: { type: Array, required: !0 },
     /**
      * The name associated with the group. Required for accessibility purposes.
      */
-    label: {
-      type: String,
-      required: !0
-    },
+    label: { type: String, required: !0 },
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.
+     * Defaults to no value selected.
+     */
+    modelValue: { type: [Number, String, null], default: null },
+    /**
+     * Indicates the field is optional.
+     */
+    optional: { type: Boolean, default: !1 },
     /**
      * If set to true, renders all radio-buttons in the group in a readonly state.
      */
-    readonly: {
-      type: Boolean,
-      default: !1
-    },
+    readonly: { type: Boolean, default: !1 },
     /**
-     * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.
-     * Defaults to no value selected.
+     * Indicates the field is required.
      */
-    modelValue: {
-      type: [Number, String, null],
-      default: null
-    },
+    required: { type: Boolean, default: !1 },
+    /**
+     * Tooltip message.
+     */
+    tooltipText: { type: String, default: null },
     /**
      * The radio group's layout. It can be vertical or horizontal. Defaults to vertical.
      */
     variant: {
       type: String,
-      default: d.VERTICAL,
-      validator: (a) => Object.values(d).includes(a)
+      default: u.VERTICAL,
+      validator: (a) => Object.values(u).includes(a)
     }
   },
   emits: [n.UPDATE],
   setup(a, { emit: e }) {
-    const r = S(a, "modelValue"), t = f("error"), u = o(
-      () => !a.disabled && !a.readonly && (!!a.errorMessage || a.hasError)
-    ), c = o(() => !a.disabled && !a.readonly && !!a.errorMessage), _ = o(() => ({
-      "b-radio-group__buttons--horizontal": a.variant === d.HORIZONTAL
-    })), l = (s) => {
-      e(n.UPDATE, s);
+    const r = b(a, "modelValue"), t = f("error"), { isReadOnly: l } = x(b(a, "readonly")), c = o(
+      () => !a.disabled && !l.value && (!!a.errorMessage || a.hasError)
+    ), p = o(() => !a.disabled && !l.value && !!a.errorMessage), s = o(() => ({
+      "b-radio-group__buttons--horizontal": a.variant === u.HORIZONTAL
+    })), i = (_) => {
+      e(n.UPDATE, _);
     };
-    return a.hasError && A(
+    return a.hasError && T(
       'BentoRadioGroup "hasError" property',
       `Use the BentoRadioGroup "errorMessage" property instead to indicate that there is a modifier error.
                     Having the field as "undefined" will hide/remove the error.
@@ -192,34 +189,35 @@ const U = N.exports, $ = p({
       // Values
       inputValue: r,
       errorId: t,
-      shouldShowError: u,
-      shouldShowErrorMessage: c,
-      conditionalClasses: _,
+      isReadOnly: l,
+      shouldShowError: c,
+      shouldShowErrorMessage: p,
+      conditionalClasses: s,
       // Methods
-      onInput: l
+      onInput: i
     };
   }
 });
 var w = function() {
   var e = this, r = e._self._c;
-  return e._self._setupProxy, r("div", { staticClass: "b-radio-group" }, [r("controls-group", { staticClass: "b-radio-group__buttons", class: e.conditionalClasses, attrs: { form: e.formId, disabled: e.disabled, label: e.label, "aria-describedby": e.shouldShowErrorMessage ? e.errorId : "" } }, e._l(e.items, function(t) {
-    return r("radio-button", { key: t.value, attrs: { "model-value": e.inputValue, value: t.value, disabled: e.disabled || t.disabled, readonly: e.readonly || t.readonly, "has-error": e.shouldShowError || t.hasError }, on: { "update:model-value": e.onInput }, scopedSlots: e._u([t.description ? { key: "description", fn: function() {
+  return e._self._setupProxy, r("div", { staticClass: "b-radio-group" }, [r("controls-group", { staticClass: "b-radio-group__buttons", class: e.conditionalClasses, attrs: { "aria-describedby": e.shouldShowErrorMessage ? e.errorId : "", description: e.description, disabled: e.disabled, form: e.formId, label: e.label, optional: e.optional, required: e.required, "hide-label": e.hideLabel, "tooltip-text": e.tooltipText } }, e._l(e.items, function(t) {
+    return r("radio-button", { key: t.value, attrs: { "model-value": e.inputValue, value: t.value, disabled: e.disabled || t.disabled, readonly: e.isReadOnly || t.readonly, "has-error": e.shouldShowError || t.hasError }, on: { "update:model-value": e.onInput }, scopedSlots: e._u([t.description ? { key: "description", fn: function() {
       return [e._v(e._s(t.description))];
     }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(t.label) + " ")]);
   }), 1), e.shouldShowErrorMessage ? r("error-message", { staticClass: "b-radio-group__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e()], 1);
-}, G = [], H = /* @__PURE__ */ b(
-  $,
+}, F = [], G = /* @__PURE__ */ m(
+  q,
   w,
-  G,
+  F,
   !1,
   null,
-  "851fe60e",
+  "fc63e591",
   null,
   null
 );
-const ae = H.exports;
+const te = G.exports;
 export {
-  ae as BentoRadioGroup,
-  d as BentoRadioGroupVariant
+  te as BentoRadioGroup,
+  u as BentoRadioGroupVariant
 };
 //# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sources":["../src/components/radio-group/components/radio-button/radio-button.types.ts","../src/components/radio-group/radio-group.types.ts","../src/components/radio-group/components/radio-button/radio-button.vue","../src/components/radio-group/radio-group.vue"],"sourcesContent":["export enum BentoRadioButtonStateClass {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n","export enum BentoRadioGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoRadioGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    readonly?: boolean;\n    hasError?: boolean;\n}\n\nexport type BentoRadioGroupItems = Array<BentoRadioGroupItem>;\n\nexport enum BentoRadioGroupEvent {\n    UPDATE = 'update:model-value',\n}\n","<template>\n    <div class=\"b-radio-button\" data-testid=\"radio-button-container\" :class=\"conditionalClassContainer\">\n        <input\n            :id=\"radioButtonId\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"ariaInvalid\"\n            :aria-describedby=\"descriptionSlotValue ? descriptionId : ''\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-radio-button__input\"\n            :class=\"conditionalClassInput\"\n            role=\"radio\"\n            @click=\"onClick\"\n            @change=\"onChange\"\n        />\n        <label v-if=\"defaultSlotValue\" :for=\"radioButtonId\" class=\"b-radio-button__label-container\">\n            <bento-typography\n                v-if=\"defaultSlotValue\"\n                class=\"b-radio-button__label\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"defaultSlotValue && descriptionSlotValue\"\n                :id=\"descriptionId\"\n                class=\"b-radio-button__description\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, defineComponent, toRefs } from 'vue';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { BentoRadioButtonStateClass } from './radio-button.types';\n    import { BentoRadioGroupEvent } from '../../radio-group.types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    /**\n     * Radio buttons are used when two or more options are mutually exclusive,\n     * the user can only select a single option from a list of pre-defined options.\n     * The label tag area is also clickable.\n     * Only to be used internally.\n     *\n     * @usage\n     * import { RadioButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { RadioButton },\n     *     template: `\n     *         <radio-button\n     *             disabled\n     *             value=\"inputRadio\"\n     *         >\n     *             Label text\n     *             <template #description>Description text below label</template>\n     *         </radio-button>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'radio-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows radio-button in error state (optional)\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on radio component.\n             */\n            modelValue: {\n                type: [String, Number],\n                default: null,\n            },\n            /**\n             * Sets the radio button to readonly (optional)\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates the value of the input that will be returned when it's checked\n             */\n            value: {\n                type: [String, Number],\n                required: true,\n            },\n        },\n        emits: [BentoRadioGroupEvent.UPDATE],\n        setup(props, { slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n            const { value } = toRefs(props);\n            const radioButtonId = generateUid('radio-button');\n            const descriptionId = generateUid('description');\n\n            const defaultSlotValue = hasSlot('default');\n            const descriptionSlotValue = hasSlot('description');\n\n            useDefaultSlotValidator('radio-button', defaultSlotValue, descriptionSlotValue);\n\n            const conditionalClassContainer = computed(() => ({\n                [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled,\n                [`b-radio-button--${BentoRadioButtonStateClass.READONLY}`]: props.readonly,\n            }));\n            const conditionalClassInput = computed(() => ({\n                [`b-radio-button__input--${BentoRadioButtonStateClass.ERROR}`]: props.hasError,\n            }));\n\n            const ariaLabel = useAriaLabel({\n                ariaLabel: getSlotText(slots)('default'),\n                label: value.value as string,\n            });\n            const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(() => props.hasError);\n\n            const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n\n            const onChange = () => {\n                if (!props.disabled && !props.readonly) {\n                    emit(BentoRadioGroupEvent.UPDATE, props.value);\n                }\n            };\n\n            // readonly attr doesn't work with radio button, so we need to manually ignore the click instead\n            const onClick = event => {\n                if (props.readonly) {\n                    event.preventDefault();\n                }\n            };\n\n            return {\n                // Values\n                ariaLabel,\n                ariaInvalid,\n                isChecked,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClassContainer,\n                conditionalClassInput,\n                radioButtonId,\n                descriptionId,\n\n                // Events\n                onChange,\n                onClick,\n\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-button.scss\" />\n","<template>\n    <div class=\"b-radio-group\">\n        <controls-group\n            class=\"b-radio-group__buttons\"\n            :class=\"conditionalClasses\"\n            :form=\"formId\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :aria-describedby=\"shouldShowErrorMessage ? errorId : ''\"\n        >\n            <radio-button\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :readonly=\"readonly || item.readonly\"\n                :has-error=\"shouldShowError || item.hasError\"\n                @update:model-value=\"onInput\"\n            >\n                {{ item.label }}\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n            </radio-button>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-radio-group__error-message\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRef } from 'vue';\n    import { ControlsGroup, ErrorMessage } from '@/components/internal';\n    import RadioButton from './components/radio-button/radio-button.vue';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoRadioGroupEvent, BentoRadioGroupItems, BentoRadioGroupVariant } from './radio-group.types';\n\n    /**\n     * A radio group component should be used whenever it is necessary to use a set of radio buttons\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoRadioGroup, BentoRadioGroupVariant } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoRadioGroup },\n     *     template: `\n     *             <bento-radio-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n     *                 ]\"\n     *                 :variant=\"BentoRadioGroupVariant.HORIZONTAL\"\n     *              />\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: 'bento-radio-group',\n        components: { ControlsGroup, ErrorMessage, RadioButton },\n        props: {\n            /**\n             * If set to true, renders all radio-buttons in the group in a disabled state.\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If string is passed, all radio-buttons in an error state and renders the string beneath the buttons.\n             */\n            errorMessage: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.\n             */\n            formId: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders all radio-buttons in the group in an error state.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The radio group's items.\n             */\n            items: {\n                type: Array as PropType<BentoRadioGroupItems>,\n                required: true,\n            },\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * If set to true, renders all radio-buttons in the group in a readonly state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\n             * Defaults to no value selected.\n             */\n            modelValue: {\n                type: [Number, String, null],\n                default: null,\n            },\n            /**\n             * The radio group's layout. It can be vertical or horizontal. Defaults to vertical.\n             */\n            variant: {\n                type: String as PropType<BentoRadioGroupVariant | `${BentoRadioGroupVariant}`>,\n                default: BentoRadioGroupVariant.VERTICAL,\n                validator: (value: BentoRadioGroupVariant) => Object.values(BentoRadioGroupVariant).includes(value),\n            },\n        },\n        emits: [BentoRadioGroupEvent.UPDATE],\n        setup(props, { emit }) {\n            const inputValue = toRef(props, 'modelValue');\n            const errorId = generateUid('error');\n\n            const shouldShowError = computed(\n                () => !props.disabled && !props.readonly && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n            const conditionalClasses = computed(() => ({\n                'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL,\n            }));\n\n            const onInput = value => {\n                emit(BentoRadioGroupEvent.UPDATE, value);\n            };\n\n            if (props.hasError) {\n                deprecate(\n                    'BentoRadioGroup \"hasError\" property',\n                    `Use the BentoRadioGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n                    Having the field as \"undefined\" will hide/remove the error.\n                    <bento-radio-group errorMessage=\"Error message text\" />`,\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Values\n                inputValue,\n                errorId,\n                shouldShowError,\n                shouldShowErrorMessage,\n                conditionalClasses,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-group.scss\" />\n"],"names":["BentoRadioButtonStateClass","BentoRadioButtonStateClass2","BentoRadioGroupVariant","BentoRadioGroupVariant2","BentoRadioGroupEvent","BentoRadioGroupEvent2","_sfc_main$1","defineComponent","BentoTypography","props","slots","emit","hasSlot","useHasSlot","value","toRefs","radioButtonId","generateUid","descriptionId","defaultSlotValue","descriptionSlotValue","useDefaultSlotValidator","conditionalClassContainer","computed","conditionalClassInput","ariaLabel","useAriaLabel","getSlotText","ariaInvalid","isChecked","event","BentoTypographyVariant","BentoTypographyElement","_sfc_main","ControlsGroup","ErrorMessage","RadioButton","inputValue","toRef","errorId","shouldShowError","shouldShowErrorMessage","conditionalClasses","onInput","deprecate"],"mappings":"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"}
+{"version":3,"file":"radio-group.js","sources":["../src/components/radio-group/components/radio-button/radio-button.types.ts","../src/components/radio-group/radio-group.types.ts","../src/components/radio-group/components/radio-button/radio-button.vue","../src/components/radio-group/radio-group.vue"],"sourcesContent":["export enum BentoRadioButtonStateClass {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n","export enum BentoRadioGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoRadioGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    readonly?: boolean;\n    hasError?: boolean;\n}\n\nexport type BentoRadioGroupItems = Array<BentoRadioGroupItem>;\n\nexport enum BentoRadioGroupEvent {\n    UPDATE = 'update:model-value',\n}\n","<template>\n    <div class=\"b-radio-button\" data-testid=\"radio-button-container\" :class=\"conditionalClassContainer\">\n        <input\n            :id=\"radioButtonId\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"ariaInvalid\"\n            :aria-describedby=\"descriptionSlotValue ? descriptionId : ''\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly ? readonly : undefined\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-radio-button__input\"\n            :class=\"conditionalClassInput\"\n            role=\"radio\"\n            @click=\"onClick\"\n            @change=\"onChange\"\n        />\n        <label v-if=\"defaultSlotValue\" :for=\"radioButtonId\" class=\"b-radio-button__label-container\">\n            <bento-typography\n                v-if=\"defaultSlotValue\"\n                class=\"b-radio-button__label\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"defaultSlotValue && descriptionSlotValue\"\n                :id=\"descriptionId\"\n                class=\"b-radio-button__description\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, defineComponent, toRefs } from 'vue';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { BentoRadioButtonStateClass } from './radio-button.types';\n    import { BentoRadioGroupEvent } from '../../radio-group.types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    /**\n     * Radio buttons are used when two or more options are mutually exclusive,\n     * the user can only select a single option from a list of pre-defined options.\n     * The label tag area is also clickable.\n     * Only to be used internally.\n     *\n     * @usage\n     * import { RadioButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { RadioButton },\n     *     template: `\n     *         <radio-button\n     *             disabled\n     *             value=\"inputRadio\"\n     *         >\n     *             Label text\n     *             <template #description>Description text below label</template>\n     *         </radio-button>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'radio-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows radio-button in error state (optional)\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on radio component.\n             */\n            modelValue: {\n                type: [String, Number],\n                default: null,\n            },\n            /**\n             * Sets the radio button to readonly (optional)\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates the value of the input that will be returned when it's checked\n             */\n            value: {\n                type: [String, Number],\n                required: true,\n            },\n        },\n        emits: [BentoRadioGroupEvent.UPDATE],\n        setup(props, { slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n            const { value } = toRefs(props);\n            const radioButtonId = generateUid('radio-button');\n            const descriptionId = generateUid('description');\n\n            const defaultSlotValue = hasSlot('default');\n            const descriptionSlotValue = hasSlot('description');\n\n            useDefaultSlotValidator('radio-button', defaultSlotValue, descriptionSlotValue);\n\n            const conditionalClassContainer = computed(() => ({\n                [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled,\n                [`b-radio-button--${BentoRadioButtonStateClass.READONLY}`]: props.readonly,\n            }));\n            const conditionalClassInput = computed(() => ({\n                [`b-radio-button__input--${BentoRadioButtonStateClass.ERROR}`]: props.hasError,\n            }));\n\n            const ariaLabel = useAriaLabel({\n                ariaLabel: getSlotText(slots)('default'),\n                label: value.value as string,\n            });\n            const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(() => props.hasError);\n\n            const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n\n            const onChange = () => {\n                if (!props.disabled && !props.readonly) {\n                    emit(BentoRadioGroupEvent.UPDATE, props.value);\n                }\n            };\n\n            // readonly attr doesn't work with radio button, so we need to manually ignore the click instead\n            const onClick = event => {\n                if (props.readonly) {\n                    event.preventDefault();\n                }\n            };\n\n            return {\n                // Values\n                ariaLabel,\n                ariaInvalid,\n                isChecked,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClassContainer,\n                conditionalClassInput,\n                radioButtonId,\n                descriptionId,\n\n                // Events\n                onChange,\n                onClick,\n\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-button.scss\" />\n","<template>\n    <div class=\"b-radio-group\">\n        <controls-group\n            class=\"b-radio-group__buttons\"\n            :aria-describedby=\"shouldShowErrorMessage ? errorId : ''\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :hide-label=\"hideLabel\"\n            :tooltip-text=\"tooltipText\"\n        >\n            <radio-button\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :has-error=\"shouldShowError || item.hasError\"\n                @update:model-value=\"onInput\"\n            >\n                {{ item.label }}\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n            </radio-button>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-radio-group__error-message\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRef } from 'vue';\n    import { ControlsGroup, ErrorMessage } from '@/components/internal';\n    import RadioButton from './components/radio-button/radio-button.vue';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoRadioGroupEvent, BentoRadioGroupItems, BentoRadioGroupVariant } from './radio-group.types';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    /**\n     * A radio group component should be used whenever it is necessary to use a set of radio buttons\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoRadioGroup, BentoRadioGroupVariant } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoRadioGroup },\n     *     template: `\n     *             <bento-radio-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n     *                 ]\"\n     *                 :variant=\"BentoRadioGroupVariant.HORIZONTAL\"\n     *              />\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: 'bento-radio-group',\n        components: { ControlsGroup, ErrorMessage, RadioButton },\n        props: {\n            /**\n             * Descriptive supporting text visbile underneath the label.\n             */\n            description: { type: String, default: null },\n\n            /**\n             * If set to true, renders all radio-buttons in the group in a disabled state.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * If string is passed, all radio-buttons in an error state and renders the string beneath the buttons.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.\n             */\n            formId: { type: String, default: null },\n\n            /**\n             * If set to true, renders all radio-buttons in the group in an error state.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * Shows/hides the group label.\n             */\n            hideLabel: { type: Boolean, default: null },\n\n            /**\n             * The radio group's items.\n             */\n            items: { type: Array as PropType<BentoRadioGroupItems>, required: true },\n\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n\n            /**\n             * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\n             * Defaults to no value selected.\n             */\n            modelValue: { type: [Number, String, null], default: null },\n\n            /**\n             * Indicates the field is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * If set to true, renders all radio-buttons in the group in a readonly state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Indicates the field is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Tooltip message.\n             */\n            tooltipText: { type: String, default: null },\n\n            /**\n             * The radio group's layout. It can be vertical or horizontal. Defaults to vertical.\n             */\n            variant: {\n                type: String as PropType<BentoRadioGroupVariant | `${BentoRadioGroupVariant}`>,\n                default: BentoRadioGroupVariant.VERTICAL,\n                validator: (value: BentoRadioGroupVariant) => Object.values(BentoRadioGroupVariant).includes(value),\n            },\n        },\n        emits: [BentoRadioGroupEvent.UPDATE],\n        setup(props, { emit }) {\n            const inputValue = toRef(props, 'modelValue');\n            const errorId = generateUid('error');\n            const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n            const shouldShowError = computed(\n                () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n            const conditionalClasses = computed(() => ({\n                'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL,\n            }));\n\n            const onInput = value => {\n                emit(BentoRadioGroupEvent.UPDATE, value);\n            };\n\n            if (props.hasError) {\n                deprecate(\n                    'BentoRadioGroup \"hasError\" property',\n                    `Use the BentoRadioGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n                    Having the field as \"undefined\" will hide/remove the error.\n                    <bento-radio-group errorMessage=\"Error message text\" />`,\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Values\n                inputValue,\n                errorId,\n                isReadOnly,\n                shouldShowError,\n                shouldShowErrorMessage,\n                conditionalClasses,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-group.scss\" />\n"],"names":["BentoRadioButtonStateClass","BentoRadioButtonStateClass2","BentoRadioGroupVariant","BentoRadioGroupVariant2","BentoRadioGroupEvent","BentoRadioGroupEvent2","_sfc_main$1","defineComponent","BentoTypography","props","slots","emit","hasSlot","useHasSlot","value","toRefs","radioButtonId","generateUid","descriptionId","defaultSlotValue","descriptionSlotValue","useDefaultSlotValidator","conditionalClassContainer","computed","conditionalClassInput","ariaLabel","useAriaLabel","getSlotText","ariaInvalid","isChecked","event","BentoTypographyVariant","BentoTypographyElement","_sfc_main","ControlsGroup","ErrorMessage","RadioButton","inputValue","toRef","errorId","isReadOnly","useFormLayoutFieldLoading","shouldShowError","shouldShowErrorMessage","conditionalClasses","onInput","deprecate"],"mappings":"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"}

package/dist/search-bar.js

@@ -4,8 +4,8 @@ import { d as f } from "./chunks/debounce.f8d92e44.js";
 import { S as m } from "./chunks/search.a8055e95.js";
 import { C as _ } from "./chunks/cross-circle-fill.d5e9ae44.js";
 import { n as h } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { u as R } from "./chunks/dropdown.368486b1.js";
-import "./assets/index8.css";
+import { u as R } from "./chunks/dropdown.c05678d0.js";
+import "./assets/index31.css";
 var a = /* @__PURE__ */ ((r) => (r.CLEAR = "clear", r.ESCAPE = "escape-pressed", r.INPUT = "input", r.UPDATE = "update:search-term", r))(a || {}), b = /* @__PURE__ */ ((r) => (r.CLEAR = "search-clear", r.INPUT = "search-input", r.UPDATE = "update:search-term", r))(b || {});
 const y = {
   "en-US": {

package/dist/segmented-control.js

@@ -1,10 +1,10 @@
 import { defineComponent as _, computed as a, toRef as f, ref as m, onMounted as v, onUnmounted as C } from "vue";
-import { B as h, a as y, b as B } from "./chunks/index.175f9e2d.js";
+import { B as h, a as y, b as B } from "./chunks/index.56858f4e.js";
 import { g as p } from "./chunks/unique-id.a2a2b458.js";
-import { C as k } from "./chunks/listbox.f51e92cd.js";
+import { C as k } from "./chunks/listbox.116ed0c1.js";
 import { n as b } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as S } from "./chunks/dropdown.368486b1.js";
-import "./assets/index23.css";
+import { B as S } from "./chunks/dropdown.c05678d0.js";
+import "./assets/index33.css";
 const I = _({
   name: "bento-segmented-control-button",
   components: { BentoTypography: h, CheckmarkIcon: k },

package/dist/sidepanel.js

@@ -0,0 +1,218 @@
+import { defineComponent as O, ref as r, inject as b, computed as c, watch as A, nextTick as S, toRefs as x, provide as N } from "vue";
+import { B as R, a as L } from "./chunks/button.d0c9527d.js";
+import { B as U, a as F, b as G } from "./chunks/index.56858f4e.js";
+import { F as $ } from "./chunks/footer-actions.67642347.js";
+import { A as H } from "./chunks/arrow-left.1d5d08bd.js";
+import { u as w } from "./chunks/i18n.155748d6.js";
+import { n as V } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as Y } from "./chunks/index.133e4da0.js";
+import { C as j } from "./chunks/cross.a2cadac5.js";
+import "./assets/index32.css";
+var h = /* @__PURE__ */ ((l) => (l.UPDATE_ACTIVE_PAGE = "update:active-page", l.UPDATE_IS_OPEN = "update:is-open", l))(h || {}), E = /* @__PURE__ */ ((l) => (l.TRANSITION_LEVEL_DEEPER = "b-sidepanel-page__animation--level-deeper", l.TRANSITION_LEVEL_UPPER = "b-sidepanel-page__animation--level-upper", l))(E || {});
+const k = Symbol("sidepanel registerPage injection key"), D = Symbol("sidepanel config data injection key"), J = {
+  "en-US": {
+    goToPreviousPage: "Go to previous page"
+  }
+}, K = {
+  i18n: { messages: J }
+}, z = /* @__PURE__ */ O({
+  ...K,
+  __name: "sidepanel-page",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Text label that is displayed left to the action buttons
+     */
+    actionsLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * If passed - sets first button color to red
+     */
+    destructiveActions: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Identifier of the page, used with activePage prop to handle sidepanel navigation
+     */
+    pageId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior
+     * Used when the back button should not take the user to the natural previous page
+     * Set to `null` to hide back button in the page
+     */
+    previousPage: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Title of the sidepanel page
+     */
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  setup(l) {
+    const a = l, { t } = w(), e = r(null), o = r(!1), f = r(!0), i = r(!1), p = b(k);
+    p({ title: a.title, pageId: a.pageId });
+    const { activePage: s, animation: _, goToPreviousPage: g, hasPreviousPages: u, isOpen: d } = b(D), v = c(() => s.value ? s.value === a.pageId : !0), T = c(() => a.previousPage ? !0 : a.previousPage === null ? !1 : u.value && v.value), I = c(() => ({
+      "b-sidepanel-page__header--with-border": o.value && !f.value
+    })), C = c(() => ({
+      "b-sidepanel-page__actions--with-border": o.value && !i.value
+    })), m = () => {
+      e.value && (f.value = e.value.scrollTop === 0, i.value = e.value.scrollHeight - e.value.clientHeight === e.value.scrollTop);
+    }, P = async (n) => {
+      n && (await S(), o.value = e.value && e.value.scrollHeight > e.value.clientHeight);
+    };
+    return A(() => d.value, P, { immediate: !0 }), A(() => v.value, P, { immediate: !0 }), { __sfc: !0, props: a, t, contentElement: e, hasScroll: o, isScrollAtTop: f, isScrollAtBottom: i, registerPage: p, activePage: s, animation: _, goToPreviousPage: g, hasPreviousPages: u, isOpen: d, showPage: v, showBackButton: T, headerConditionalClasses: I, actionsConditionalClasses: C, onScroll: m, calculateScroll: P, updateAnimation: () => {
+      _.value === E.TRANSITION_LEVEL_UPPER && (_.value = E.TRANSITION_LEVEL_DEEPER);
+    }, BentoButton: R, BentoButtonVariant: L, BentoTypography: U, BentoTypographyElement: F, BentoTypographyVariant: G, FooterActions: $, ArrowLeftIcon: H };
+  }
+});
+var M = function() {
+  var a = this, t = a._self._c, e = a._self._setupProxy;
+  return t("Transition", { attrs: { name: e.animation, mode: "out-in" }, on: { "after-leave": e.updateAnimation } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showPage, expression: "showPage" }], staticClass: "b-sidepanel-page" }, [t("div", { staticClass: "b-sidepanel-page__header", class: e.headerConditionalClasses }, [e.showBackButton ? t(e.BentoButton, { attrs: { variant: e.BentoButtonVariant.TERTIARY }, on: { click: function(o) {
+    return e.goToPreviousPage(a.previousPage);
+  } } }, [t(e.ArrowLeftIcon, { attrs: { "svg-title": e.t("goToPreviousPage") } })], 1) : a._e(), t(e.BentoTypography, { staticClass: "b-sidepanel-page__title", attrs: { el: e.BentoTypographyElement.H2, variant: e.BentoTypographyVariant.TITLE } }, [a._v(" " + a._s(a.title) + " ")])], 1), t("div", { ref: "contentElement", staticClass: "b-sidepanel-page__content", on: { scroll: e.onScroll } }, [t(e.BentoTypography, { attrs: { el: e.BentoTypographyElement.DIV, variant: e.BentoTypographyVariant.BODY } }, [a._t("default")], 2)], 1), a.actions ? t("div", { staticClass: "b-sidepanel-page__actions", class: e.actionsConditionalClasses }, [t(e.FooterActions, { attrs: { actions: a.actions, "actions-label": a.actionsLabel, "destructive-actions": a.destructiveActions } })], 1) : a._e()])]);
+}, q = [], Q = /* @__PURE__ */ V(
+  z,
+  M,
+  q,
+  !1,
+  null,
+  "29ddfe34",
+  null,
+  null
+);
+const _e = Q.exports, W = {
+  "en-US": {
+    close: "Close"
+  }
+}, X = {
+  i18n: { messages: W }
+}, Z = /* @__PURE__ */ O({
+  ...X,
+  __name: "sidepanel",
+  props: {
+    /**
+     * The id of the current active page
+     * Should be the same id as the BentoSidepanelPage to be displayed
+     * If the component only has one page, it can be left null/undefined.
+     */
+    activePage: {
+      type: String,
+      default: null
+    },
+    /**
+     * If set to true, it allows the sidepanel to be closed
+     */
+    isDismissible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel
+     */
+    isOpen: {
+      type: Boolean,
+      default: null
+    }
+  },
+  setup(l, { emit: a }) {
+    const t = l, { activePage: e, isOpen: o } = x(t), { t: f } = w(), i = r(null), p = r([]), s = r([]), _ = c(() => s.value.length > 1), g = r(E.TRANSITION_LEVEL_DEEPER), u = r(!1), d = c(() => s.value[s.value.length - 1]), v = c(() => p.value.some((n) => n.pageId === e.value)), T = (n) => {
+      if (n) {
+        const y = s.value.indexOf(n);
+        y !== -1 ? s.value = s.value.slice(0, y + 1) : s.value = [n];
+      } else
+        s.value.pop();
+      g.value = E.TRANSITION_LEVEL_UPPER, a(h.UPDATE_ACTIVE_PAGE, d.value);
+    };
+    A(
+      () => e.value,
+      async () => {
+        if (await S(), e.value && !v.value) {
+          console.error(`The activePage passed "${e.value}" does not match the id of any SidepanelPage`);
+          return;
+        }
+        e.value !== d.value && s.value.push(e.value);
+      },
+      { immediate: !0 }
+    );
+    const I = c(() => ({
+      "b-sidepanel__hide": u.value
+    })), C = (n) => {
+      u.value && n.pseudoElement === "::backdrop" && (i.value.close(), s.value[0] && a(h.UPDATE_ACTIVE_PAGE, s.value[0]), s.value = [], u.value = !1, a(h.UPDATE_IS_OPEN, !1));
+    }, m = (n) => {
+      n && n.preventDefault(), i.value.open && (u.value = !0);
+    }, P = ({ target: n }) => {
+      n && n.tagName === "DIALOG" && m();
+    };
+    A(
+      () => o.value,
+      async () => {
+        await S(), i.value && (o.value ? (i.value.showModal(), s.value.length || s.value.push(e.value)) : i.value.open && m());
+      },
+      { immediate: !0 }
+    );
+    const B = ({ title: n, pageId: y }) => {
+      p.value.push({ title: n, pageId: y });
+    };
+    return N(D, {
+      activePage: e,
+      animation: g,
+      goToPreviousPage: T,
+      hasPreviousPages: _,
+      isOpen: o
+    }), N(k, B), { __sfc: !0, props: t, emit: a, activePage: e, isOpen: o, t: f, sidepanel: i, pages: p, previousPages: s, hasPreviousPages: _, animation: g, isClosing: u, lastPage: d, isActivePageValid: v, goToPreviousPage: T, conditionalClasses: I, closeSidepanelAfterAnimation: C, startCloseSidepanelAnimation: m, closeSidepanelOnClickOutside: P, registerPage: B, BentoButton: R, BentoButtonVariant: L, BentoFocusTrap: Y, CrossIcon: j };
+  }
+});
+var ee = function() {
+  var a = this, t = a._self._c, e = a._self._setupProxy;
+  return t("dialog", { ref: "sidepanel", staticClass: "b-sidepanel", class: e.conditionalClasses, on: { animationend: e.closeSidepanelAfterAnimation, click: function(o) {
+    a.isDismissible && e.closeSidepanelOnClickOutside(o);
+  }, keydown: function(o) {
+    return !o.type.indexOf("key") && a._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : e.startCloseSidepanelAnimation.apply(null, arguments);
+  } } }, [t(e.BentoFocusTrap, [t("div", { staticClass: "b-sidepanel__close-button" }, [t(e.BentoButton, { attrs: { variant: e.BentoButtonVariant.TERTIARY }, on: { click: e.startCloseSidepanelAnimation } }, [t(e.CrossIcon, { attrs: { "svg-title": e.t("close") } })], 1)], 1), a._t("default")], 2)], 1);
+}, ae = [], te = /* @__PURE__ */ V(
+  Z,
+  ee,
+  ae,
+  !1,
+  null,
+  "039416a2",
+  null,
+  null
+);
+const de = te.exports;
+export {
+  de as BentoSidepanel,
+  E as BentoSidepanelAnimation,
+  h as BentoSidepanelEvent,
+  _e as BentoSidepanelPage
+};
+//# sourceMappingURL=sidepanel.js.map