@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/accordion.js

@@ -1,206 +1,98 @@
-import { defineComponent as r, computed as l } from "vue";
-import { g as h } from "./chunks/unique-id.a2a2b458.js";
-import { n } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { C as u, a as m } from "./chunks/chevron-down.b851a6da.js";
-import "./assets/index.css";
-const d = Symbol("accordion injection key");
-var o = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.GHOST = "ghost", e))(o || {}), a = /* @__PURE__ */ ((e) => (e.GROUPED = "grouped", e.SEPARATE = "separate", e))(a || {}), c = /* @__PURE__ */ ((e) => (e.LEFT = "left", e))(c || {});
-const _ = r({
-  name: "adl-accordion",
+import { defineComponent as u, provide as b, toRef as y, ref as c, inject as C, watch as l, nextTick as g } from "vue";
+import { n as m } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as x } from "./chunks/index.45295dd3.js";
+import { C as T, a as N } from "./chunks/chevron-up.674ec2e5.js";
+import { g as p } from "./chunks/unique-id.a2a2b458.js";
+import "./assets/index20.css";
+const f = Symbol("accordion title size injection key"), O = {}, E = /* @__PURE__ */ u({
+  ...O,
+  __name: "accordion",
   props: {
     /**
-     * Indicates if all accordion items can be expanded simultaneously.
-     * If this option is toggled in Storybook a refresh is required.
-     *  - true: all accordion items can be expanded at a time
-     *  - false: only one accordion item can be expanded at a time
+     * Controls accordion title size.
+     * @values default, small
      */
-    simultaneouslyExpandAllTabs: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Grouped represents if the accordion is grouped inside a container or not
-     * - true: grouped inside a container
-     * - false: independent accordion item
-     */
-    grouped: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Indicates the position of caret in the accordion. The default is right.
-     * - true:  caret is on right
-     * - false: caret is on left
-     */
-    caretRight: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Variant represents accordion variant
-     * @values enum AccordionVariant
-     */
-    variant: {
+    titleSize: {
       type: String,
-      default: o.PRIMARY,
-      validator: (e) => Object.values(o).includes(e)
+      default: "default"
     }
   },
-  data() {
-    return {
-      accordion: {
-        items: [],
-        simultaneouslyExpandAllTabs: this.simultaneouslyExpandAllTabs,
-        variant: this.variant,
-        grouped: this.grouped,
-        caretRight: this.caretRight
-      }
-    };
-  },
-  computed: {
-    conditionalClasses() {
-      return {
-        [`ds-accordion--${o.GHOST}`]: this.variant === o.GHOST,
-        [`ds-accordion--${a.GROUPED}`]: this.grouped,
-        [`ds-accordion--${a.SEPARATE}`]: !this.grouped
-      };
-    }
-  },
-  provide() {
-    const e = l(
-      () => ({
-        caretRight: this.caretRight,
-        grouped: this.grouped,
-        variant: this.variant,
-        simultaneouslyExpandAllTabs: this.simultaneouslyExpandAllTabs,
-        registerItem: this.registerItem,
-        getItem: this.getItem,
-        open: this.open,
-        close: this.close
-      })
-    );
-    return {
-      [d]: e
-    };
-  },
-  methods: {
-    getUniqueId() {
-      return h("accordion-item");
-    },
-    registerItem(e = !1) {
-      var s;
-      const t = this.getUniqueId, i = t();
-      return (s = this.accordion.items) == null || s.push({ id: i, opened: e }), { id: i, opened: e };
-    },
-    getItem(e) {
-      return this.accordion.items.find((t) => t.id === e);
-    },
-    open(e) {
-      if (this.accordion.simultaneouslyExpandAllTabs)
-        this.accordion.items.find((t) => t.id === e).opened = !0;
-      else {
-        const t = this.accordion.items.map((i) => ({ id: i.id, opened: i.id === e }));
-        this.accordion.items = t;
-      }
-    },
-    close(e) {
-      this.accordion.items.find((t) => t.id === e).opened = !1;
-    }
+  setup(o) {
+    const e = o;
+    return b(f, y(e, "titleSize")), { __sfc: !0, props: e };
   }
 });
-var p = function() {
-  var t = this, i = t._self._c;
-  return t._self._setupProxy, i("div", { staticClass: "adl2-accordion", class: t.conditionalClasses, attrs: { "data-testid": "adl-accordion" } }, [t._t("default")], 2);
-}, v = [], f = /* @__PURE__ */ n(
-  _,
-  p,
-  v,
+var S = function() {
+  var e = this, n = e._self._c;
+  return e._self._setupProxy, n("div", { staticClass: "b-accordion" }, [e._t("default")], 2);
+}, $ = [], w = /* @__PURE__ */ m(
+  E,
+  S,
+  $,
   !1,
   null,
-  "64fb63a8",
+  "fb182a1c",
   null,
   null
 );
-const E = f.exports, g = r({
-  name: "adl-accordion-item",
-  components: { ChevronDown: u, ChevronUp: m },
-  // Props attribute is required by provide/inject. Do not delete.
+const M = w.exports, z = {}, A = /* @__PURE__ */ u({
+  ...z,
+  __name: "accordion-item",
   props: {
     /**
-     * Injected tabs prop that contains all the required tab query methods.
-     * NOTE: This Prop defintion can be removed when the following issue is resolved:
-     * https://github.com/vuejs/vue/issues/8969
+     * Sets the title of the accordion item.
      */
-    accordion: { type: Object, default: null }
-  },
-  inject: { accordion: { from: d } },
-  data: () => ({
-    item: {
-      id: void 0,
-      opened: !1
-    }
-  }),
-  computed: {
-    accordionProvider() {
-      return this.accordion;
-    },
-    showContent() {
-      var e;
-      return (e = this.accordionProvider.getItem(this.item.id)) == null ? void 0 : e.opened;
-    },
-    conditionalClasses() {
-      return {
-        [`adl-accordion-item__caret-${c.LEFT}`]: !this.accordionProvider.caretRight,
-        [`adl-accordion-item--${o.GHOST}`]: this.accordionProvider.variant === o.GHOST,
-        [`adl-accordion-item--${a.GROUPED}`]: this.accordionProvider.grouped,
-        [`adl-accordion-item--${a.SEPARATE}`]: !this.accordionProvider.grouped
-      };
-    },
-    shouldShowIcon() {
-      return !!this.$slots.default;
-    },
-    shouldShowTitle() {
-      return !!this.$slots.title;
-    },
-    shouldShowSubtitle() {
-      return !!this.$slots.subtitle;
+    title: {
+      type: String,
+      required: !0
     },
-    shouldShowPicture() {
-      return !!this.$slots.picture;
+    /**
+     * Controls if the content is visible or hidden.
+     */
+    isExpanded: {
+      type: Boolean,
+      default: !1
     }
   },
-  created() {
-    this.item = this.accordionProvider.registerItem();
-  },
-  methods: {
-    toggle() {
-      this.showContent ? this.accordionProvider.close(this.item.id) : this.accordionProvider.open(this.item.id);
-    },
-    start(e) {
-      e.style.height = `${e.scrollHeight}px`;
-    },
-    end(e) {
-      e.style.height = "";
-    }
+  emits: ["update:is-expanded"],
+  setup(o, { emit: e }) {
+    const n = o, t = "b-accordion-item__animation--content", a = c(null), s = c(n.isExpanded), r = c(null), v = p("accordionItemButton"), I = p("accordionItemContent"), h = C(f, "default"), _ = () => {
+      var d;
+      const i = ((d = a.value) == null ? void 0 : d.scrollHeight) || null;
+      r.value = s.value ? `${i}px` : "0";
+    };
+    return l(
+      () => n.isExpanded,
+      (i) => {
+        s.value = i;
+      }
+    ), l(
+      s,
+      async (i) => {
+        e("update:is-expanded", i), await g(), _();
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, CONTENT_TRANSITION_NAME: t, props: n, emit: e, contentDiv: a, isOpen: s, itemHeight: r, buttonId: v, contentId: I, titleSize: h, setItemHeight: _, BentoTypography: x, ChevronDownIcon: T, ChevronUpIcon: N };
   }
 });
-var C = function() {
-  var t = this, i = t._self._c;
-  return t._self._setupProxy, i("div", { staticClass: "adl-accordion-item", class: t.conditionalClasses, attrs: { "data-testid": "accordion-item" } }, [i("h2", [i("button", { staticClass: "adl-accordion-item__header", attrs: { type: "button", "aria-expanded": `${t.showContent}`, "aria-controls": t.item.id }, on: { click: t.toggle } }, [t.shouldShowIcon ? i("span", { attrs: { "aria-hidden": "true" } }, [t._t("default")], 2) : t._e(), i("span", { staticClass: "adl-accordion-item__header--main-content" }, [t.shouldShowPicture ? i("div", { staticClass: "adl-accordion-item__picture", attrs: { "aria-hidden": "true", "data-testid": "adl-accordion-item-picture" } }, [t._t("picture")], 2) : t._e(), i("div", [t.shouldShowTitle ? i("div", { staticClass: "adl-accordion-item__title" }, [t._t("title")], 2) : t._e(), t.shouldShowSubtitle ? i("div", { staticClass: "adl-accordion-item__subtitle" }, [t._t("subtitle")], 2) : t._e()])]), t.showContent ? i("span", { staticClass: "adl-accordion-item__caret", attrs: { "aria-hidden": "true", "data-testid": "accordion-item-icon-show" } }, [i("chevron-up", { attrs: { "svg-title": "show accordion item" } })], 1) : t._e(), t.showContent ? t._e() : i("span", { staticClass: "adl-accordion-item__caret", attrs: { "aria-hidden": "true", "data-testid": "accordion-item-icon-hide" } }, [i("chevron-down", { attrs: { "svg-title": "hide accordion item" } })], 1)])]), i("transition", { attrs: { name: "adl-accordion-item" }, on: { enter: t.start, "after-enter": t.end, "before-leave": t.start, "after-leave": t.end } }, [i("div", { directives: [{ name: "show", rawName: "v-show", value: t.showContent, expression: "showContent" }], staticClass: "adl-accordion-item__content", attrs: { id: t.item.id } }, [i("div", { staticClass: "adl-accordion-item__description" }, [t._t("content")], 2)])])], 1);
-}, w = [], I = /* @__PURE__ */ n(
-  g,
-  C,
-  w,
+var B = function() {
+  var e = this, n = e._self._c, t = e._self._setupProxy;
+  return n("div", { staticClass: "b-accordion-item" }, [n(t.BentoTypography, { attrs: { el: "h3", variant: t.titleSize === "small" ? "body" : "title", strongest: t.titleSize === "small" } }, [n("button", { staticClass: "b-accordion-item__button", attrs: { id: t.buttonId, "aria-controls": t.contentId, "aria-expanded": `${t.isOpen}`, type: "button" }, on: { click: function(a) {
+    t.isOpen = !t.isOpen;
+  } } }, [t.isOpen ? n(t.ChevronUpIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": "collapse", "aria-hidden": "true" } }) : n(t.ChevronDownIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": "expand", "aria-hidden": "true" } }), e._v(" " + e._s(e.title) + " ")], 1)]), n("Transition", { attrs: { name: t.CONTENT_TRANSITION_NAME } }, [n("div", { directives: [{ name: "show", rawName: "v-show", value: t.isOpen, expression: "isOpen" }], staticClass: "b-accordion-item__container", style: t.itemHeight ? { "max-height": t.itemHeight } : {}, attrs: { id: t.contentId, "aria-labelledby": t.buttonId, role: "region" } }, [n("div", { ref: "contentDiv", staticClass: "b-accordion-item__content" }, [e._t("default")], 2)])])], 1);
+}, H = [], R = /* @__PURE__ */ m(
+  A,
+  B,
+  H,
   !1,
   null,
-  "7721fcf1",
+  "cd8dfa4c",
   null,
   null
 );
-const R = I.exports;
+const P = R.exports;
 export {
-  E as AdlAccordion,
-  R as AdlAccordionItem,
-  o as AdlAccordionVariant
+  M as BentoAccordion,
+  P as BentoAccordionItem
 };
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../src/components/accordion/accordion.keys.ts","../src/components/accordion/accordion.types.ts","../src/components/accordion/accordion.vue","../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_INJECTION_KEY = Symbol('accordion injection key');\n","export enum AdlAccordionVariant {\n    PRIMARY = 'primary',\n    GHOST = 'ghost',\n}\n\nexport enum AdlAccordionPropClass {\n    GROUPED = 'grouped',\n    SEPARATE = 'separate',\n}\n\nexport enum AdlAccordionCaretPosition {\n    LEFT = 'left',\n}\n\nexport interface AdlAccordionItem {\n    id: string;\n    opened: boolean;\n}\n\nexport interface AdlAccordion {\n    caretRight: boolean;\n    grouped: boolean;\n    variant: AdlAccordionVariant;\n    registerItem: (opened?: boolean) => AdlAccordionItem;\n    getItem: (itemId: string) => AdlAccordionItem;\n    open: (itemId: string) => void;\n    close: (itemId: string) => void;\n}\n","<template>\n    <div class=\"adl2-accordion\" :class=\"conditionalClasses\" data-testid=\"adl-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-nocheck - Ignoring because 2.7.13 breaks the types inside data\n    import { computed, ComputedRef, defineComponent, PropType } from 'vue';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { ACCORDION_INJECTION_KEY } from './accordion.keys';\n    import { AdlAccordion, AdlAccordionItem, AdlAccordionPropClass, AdlAccordionVariant } from './accordion.types';\n\n    export default defineComponent({\n        name: `adl-accordion`,\n        props: {\n            /**\n             * Indicates if all accordion items can be expanded simultaneously.\n             * If this option is toggled in Storybook a refresh is required.\n             *  - true: all accordion items can be expanded at a time\n             *  - false: only one accordion item can be expanded at a time\n             */\n            simultaneouslyExpandAllTabs: {\n                type: Boolean,\n                default: true,\n            },\n            /**\n             * Grouped represents if the accordion is grouped inside a container or not\n             * - true: grouped inside a container\n             * - false: independent accordion item\n             */\n            grouped: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates the position of caret in the accordion. The default is right.\n             * - true:  caret is on right\n             * - false: caret is on left\n             */\n            caretRight: {\n                type: Boolean,\n                default: true,\n            },\n            /**\n             * Variant represents accordion variant\n             * @values enum AccordionVariant\n             */\n            variant: {\n                type: String as PropType<AdlAccordionVariant>,\n                default: AdlAccordionVariant.PRIMARY,\n                validator: (value: AdlAccordionVariant) => Object.values(AdlAccordionVariant).includes(value),\n            },\n        },\n        data() {\n            return {\n                accordion: {\n                    items: [],\n                    simultaneouslyExpandAllTabs: this.simultaneouslyExpandAllTabs,\n                    variant: this.variant,\n                    grouped: this.grouped,\n                    caretRight: this.caretRight,\n                },\n            };\n        },\n        computed: {\n            conditionalClasses(): { [x: string]: boolean } {\n                return {\n                    [`ds-accordion--${AdlAccordionVariant.GHOST}`]: this.variant === AdlAccordionVariant.GHOST,\n                    [`ds-accordion--${AdlAccordionPropClass.GROUPED}`]: this.grouped,\n                    [`ds-accordion--${AdlAccordionPropClass.SEPARATE}`]: !this.grouped,\n                };\n            },\n        },\n        provide() {\n            const accordion: ComputedRef<AdlAccordion> = computed<AdlAccordion>(\n                () =>\n                    ({\n                        caretRight: this.caretRight,\n                        grouped: this.grouped,\n                        variant: this.variant,\n                        simultaneouslyExpandAllTabs: this.simultaneouslyExpandAllTabs,\n                        registerItem: this.registerItem,\n                        getItem: this.getItem,\n                        open: this.open,\n                        close: this.close,\n                    } as AdlAccordion)\n            );\n            return {\n                [ACCORDION_INJECTION_KEY]: accordion,\n            };\n        },\n        methods: {\n            getUniqueId(): string {\n                return generateUid('accordion-item');\n            },\n            registerItem(opened = false): AdlAccordionItem {\n                // TODO: the casting below has been done due to Vue 2.7 making all method types return as type unknown\n                const getUniqueId = this.getUniqueId as () => string;\n                const itemId = getUniqueId();\n                this.accordion.items?.push({ id: itemId, opened });\n                return { id: itemId, opened };\n            },\n            getItem(itemId: string): AdlAccordionItem {\n                return this.accordion.items.find(item => item.id === itemId);\n            },\n            open(itemId: string): void {\n                if (this.accordion.simultaneouslyExpandAllTabs) {\n                    this.accordion.items.find(item => item.id === itemId).opened = true;\n                } else {\n                    const newItems = this.accordion.items.map(item => ({ id: item.id, opened: item.id === itemId }));\n                    this.accordion.items = newItems;\n                }\n            },\n            close(itemId: string): void {\n                this.accordion.items.find(item => item.id === itemId).opened = false;\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"adl-accordion-item\" :class=\"conditionalClasses\" data-testid=\"accordion-item\">\n        <!-- TODO: decide what kind of heading level to assign! -->\n        <h2>\n            <button\n                type=\"button\"\n                :aria-expanded=\"`${showContent}`\"\n                :aria-controls=\"item.id\"\n                class=\"adl-accordion-item__header\"\n                @click=\"toggle\"\n            >\n                <span v-if=\"shouldShowIcon\" aria-hidden=\"true\">\n                    <slot />\n                </span>\n                <span class=\"adl-accordion-item__header--main-content\">\n                    <div\n                        v-if=\"shouldShowPicture\"\n                        aria-hidden=\"true\"\n                        class=\"adl-accordion-item__picture\"\n                        data-testid=\"adl-accordion-item-picture\"\n                    >\n                        <slot name=\"picture\" />\n                    </div>\n                    <div>\n                        <div v-if=\"shouldShowTitle\" class=\"adl-accordion-item__title\">\n                            <slot name=\"title\" />\n                        </div>\n                        <div v-if=\"shouldShowSubtitle\" class=\"adl-accordion-item__subtitle\">\n                            <slot name=\"subtitle\" />\n                        </div>\n                    </div>\n                </span>\n                <span\n                    v-if=\"showContent\"\n                    aria-hidden=\"true\"\n                    class=\"adl-accordion-item__caret\"\n                    data-testid=\"accordion-item-icon-show\"\n                >\n                    <chevron-up svg-title=\"show accordion item\" />\n                </span>\n                <span\n                    v-if=\"!showContent\"\n                    aria-hidden=\"true\"\n                    class=\"adl-accordion-item__caret\"\n                    data-testid=\"accordion-item-icon-hide\"\n                >\n                    <chevron-down svg-title=\"hide accordion item\" />\n                </span>\n            </button>\n        </h2>\n        <transition\n            name=\"adl-accordion-item\"\n            @enter=\"start\"\n            @after-enter=\"end\"\n            @before-leave=\"start\"\n            @after-leave=\"end\"\n        >\n            <div v-show=\"showContent\" :id=\"item.id\" class=\"adl-accordion-item__content\">\n                <div class=\"adl-accordion-item__description\">\n                    <slot name=\"content\" />\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        AdlAccordion,\n        AdlAccordionCaretPosition,\n        AdlAccordionPropClass,\n        AdlAccordionVariant,\n    } from '../accordion.types';\n    import { ACCORDION_INJECTION_KEY } from '../accordion.keys';\n    import ChevronUp from '@adyen/ui-assets-icons-16/vue/chevron-up';\n    import ChevronDown from '@adyen/ui-assets-icons-16/vue/chevron-down';\n\n    export default defineComponent({\n        name: 'adl-accordion-item',\n        components: { ChevronDown, ChevronUp },\n        // Props attribute is required by provide/inject. Do not delete.\n        props: {\n            /**\n             * Injected tabs prop that contains all the required tab query methods.\n             * NOTE: This Prop defintion can be removed when the following issue is resolved:\n             * https://github.com/vuejs/vue/issues/8969\n             */\n            accordion: { type: Object as PropType<AdlAccordion>, default: null },\n        },\n        inject: { accordion: { from: ACCORDION_INJECTION_KEY } },\n        data: () => ({\n            item: {\n                id: undefined,\n                opened: false,\n            },\n        }),\n        computed: {\n            accordionProvider(): AdlAccordion {\n                return this.accordion;\n            },\n            showContent(): boolean {\n                return this.accordionProvider.getItem(this.item.id)?.opened;\n            },\n            conditionalClasses(): { [key: string]: boolean } {\n                return {\n                    [`adl-accordion-item__caret-${AdlAccordionCaretPosition.LEFT}`]: !this.accordionProvider.caretRight,\n                    [`adl-accordion-item--${AdlAccordionVariant.GHOST}`]:\n                        this.accordionProvider.variant === AdlAccordionVariant.GHOST,\n                    [`adl-accordion-item--${AdlAccordionPropClass.GROUPED}`]: this.accordionProvider.grouped,\n                    [`adl-accordion-item--${AdlAccordionPropClass.SEPARATE}`]: !this.accordionProvider.grouped,\n                };\n            },\n            shouldShowIcon(): boolean {\n                return !!this.$slots.default;\n            },\n            shouldShowTitle(): boolean {\n                return !!this.$slots.title;\n            },\n            shouldShowSubtitle(): boolean {\n                return !!this.$slots.subtitle;\n            },\n            shouldShowPicture(): boolean {\n                return !!this.$slots.picture;\n            },\n        },\n        created() {\n            this.item = this.accordionProvider.registerItem();\n        },\n        methods: {\n            toggle() {\n                if (this.showContent) {\n                    this.accordionProvider.close(this.item.id);\n                } else {\n                    this.accordionProvider.open(this.item.id);\n                }\n            },\n            start(el) {\n                // eslint-disable-next-line no-param-reassign\n                el.style.height = `${el.scrollHeight}px`;\n            },\n            end(el) {\n                // eslint-disable-next-line no-param-reassign\n                el.style.height = '';\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_INJECTION_KEY","AdlAccordionVariant","AdlAccordionVariant2","AdlAccordionPropClass","AdlAccordionPropClass2","AdlAccordionCaretPosition","AdlAccordionCaretPosition2","_sfc_main$1","defineComponent","value","accordion","computed","generateUid","opened","getUniqueId","itemId","_a","item","newItems","_sfc_main","ChevronDownIcon","ChevronUpIcon","el"],"mappings":"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"}
+{"version":3,"file":"accordion.js","sources":["../src/components/accordion/accordion.keys.ts","../src/components/accordion/accordion.vue","../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon v-if=\"isOpen\" class=\"b-accordion-item__icon\" svg-title=\"collapse\" aria-hidden=\"true\" />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" svg-title=\"expand\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div\n                v-show=\"isOpen\"\n                :id=\"contentId\"\n                :aria-labelledby=\"buttonId\"\n                role=\"region\"\n                class=\"b-accordion-item__container\"\n                :style=\"itemHeight ? { 'max-height': itemHeight } : {}\"\n            >\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { inject, nextTick, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/utils/ts/unique-id';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n    const itemHeight = ref<string | null>(null);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const setItemHeight = () => {\n        const maxHeight = contentDiv.value?.scrollHeight || null;\n        itemHeight.value = isOpen.value ? `${maxHeight}px` : '0';\n    };\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        isOpen,\n        async value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            await nextTick();\n            setItemHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","__default__","CONTENT_TRANSITION_NAME","contentDiv","ref","isOpen","itemHeight","buttonId","generateUid","contentId","titleSize","inject","setItemHeight","maxHeight","_a","watch","value","emit","nextTick"],"mappings":";;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,GCqDTC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;qBCmHAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;iBAxFAC,IAAA,wCA2BAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAJ,EAAA,UAAA,GACAM,IAAAF,EAAA,IAAA,GAGAG,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAf,GAAA,SAAA,GAGAgB,IAAA,MAAA;;AACI,YAAAC,MAAAC,IAAAX,EAAA,UAAA,gBAAAW,EAAA,iBAAA;AACA,MAAAR,EAAA,QAAAD,EAAA,QAAA,GAAAQ,QAAA;AAAA,IAAqD;AAGzD,WAAAE;AAAA,MAAA,MAAAf,EAAA;AAAA,MACgB,CAAAgB,MAAA;AAER,QAAAX,EAAA,QAAAW;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAAV;AAAA,MACI,OAAAW,MAAA;AAGI,QAAAC,EAAA,sBAAAD,CAAA,GAEA,MAAAE,EAAA,GACAN,EAAA;AAAA,MAAc;AAAA,MAClB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/alert.js

@@ -1,34 +1,34 @@
-import { defineComponent as T, computed as n, onMounted as S } from "vue";
-import { B, a as L } from "./chunks/button.d0c9527d.js";
-import { B as H, a as C, b as i } from "./chunks/index.56858f4e.js";
-import { C as E, I as _ } from "./chunks/info-filled.48f3268f.js";
-import { n as m } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { C as u } from "./chunks/cross-circle-fill.d5e9ae44.js";
-import { C as d } from "./chunks/checkmark-circle-fill.2cfbb81b.js";
-import { u as w } from "./chunks/use-has-slot.068222e6.js";
+import { defineComponent as y, computed as n, onMounted as T } from "vue";
+import { B as S, c as L, a as i } from "./chunks/index.45295dd3.js";
+import { a as H } from "./chunks/button.fb307df3.js";
+import { C as w, I as C } from "./chunks/info-filled.48f3268f.js";
+import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { C as _ } from "./chunks/cross-circle-fill.d5e9ae44.js";
+import { C as u } from "./chunks/checkmark-circle-fill.2cfbb81b.js";
+import { u as E } from "./chunks/use-has-slot.6052d56a.js";
 import { u as R } from "./chunks/i18n.155748d6.js";
-import "./assets/index3.css";
-var o = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.TIP = "tip", e))(o || {}), s = /* @__PURE__ */ ((e) => (e.WARNING = "warning", e.CRITICAL = "critical", e.HIGHLIGHT = "highlight", e.SUCCESS = "success", e))(s || {}), l = /* @__PURE__ */ ((e) => (e.CLOSE_ALERT = "close-alert", e))(l || {});
-let p = 0;
-const V = {
+import "./assets/index17.css";
+var r = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.TIP = "tip", e))(r || {}), a = /* @__PURE__ */ ((e) => (e.WARNING = "warning", e.CRITICAL = "critical", e.HIGHLIGHT = "highlight", e.SUCCESS = "success", e))(a || {}), l = /* @__PURE__ */ ((e) => (e.CLOSE_ALERT = "close-alert", e))(l || {});
+let d = 0;
+const G = {
   beforeCreate() {
-    this.uuid = p.toString(), p += 1;
+    this.uuid = d.toString(), d += 1;
   }
 };
-var G = function() {
-  var t = this, a = t._self._c;
-  return a("svg", t._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? a("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), a("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M15.349 11.5376L9.99897 2.19758C9.79966 1.85738 9.51482 1.57524 9.17274 1.37919C8.83066 1.18314 8.44325 1.07999 8.04897 1.07999C7.65469 1.07999 7.26727 1.18314 6.92519 1.37919C6.58311 1.57524 6.29827 1.85738 6.09897 2.19758L0.648967 11.5376C0.450427 11.8833 0.347305 12.2755 0.350155 12.6742C0.353005 13.0728 0.461725 13.4636 0.665188 13.8064C0.868651 14.1493 1.15955 14.4319 1.50812 14.6254C1.85668 14.8188 2.2504 14.9162 2.64897 14.9076H13.399C13.7933 14.9073 14.1807 14.8034 14.5222 14.6063C14.8638 14.4092 15.1475 14.1258 15.345 13.7845C15.5425 13.4431 15.6468 13.0559 15.6475 12.6615C15.6482 12.2672 15.5453 11.8796 15.349 11.5376ZM7.24897 5.32758C7.24897 5.12866 7.32798 4.9379 7.46864 4.79725C7.60929 4.65659 7.80006 4.57758 7.99897 4.57758C8.19788 4.57758 8.38864 4.65659 8.5293 4.79725C8.66995 4.9379 8.74897 5.12866 8.74897 5.32758V8.32758C8.74897 8.52649 8.66995 8.71725 8.5293 8.85791C8.38864 8.99856 8.19788 9.07758 7.99897 9.07758C7.80006 9.07758 7.60929 8.99856 7.46864 8.85791C7.32798 8.71725 7.24897 8.52649 7.24897 8.32758V5.32758ZM7.99897 12.3276C7.80119 12.3276 7.60785 12.2689 7.4434 12.159C7.27895 12.0492 7.15077 11.893 7.07509 11.7103C6.9994 11.5275 6.9796 11.3265 7.01818 11.1325C7.05677 10.9385 7.15201 10.7603 7.29186 10.6205C7.43171 10.4806 7.6099 10.3854 7.80388 10.3468C7.99786 10.3082 8.19893 10.328 8.38165 10.4037C8.56438 10.4794 8.72056 10.6076 8.83044 10.772C8.94032 10.9365 8.99897 11.1298 8.99897 11.3276C8.99897 11.5928 8.89361 11.8471 8.70607 12.0347C8.51854 12.2222 8.26418 12.3276 7.99897 12.3276Z", "clip-rule": "evenodd" } })]);
-}, $ = [], A = /* @__PURE__ */ m(
-  V,
+var $ = function() {
+  var t = this, s = t._self._c;
+  return s("svg", t._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M15.349 11.5376L9.99897 2.19758C9.79966 1.85738 9.51482 1.57524 9.17274 1.37919C8.83066 1.18314 8.44325 1.07999 8.04897 1.07999C7.65469 1.07999 7.26727 1.18314 6.92519 1.37919C6.58311 1.57524 6.29827 1.85738 6.09897 2.19758L0.648967 11.5376C0.450427 11.8833 0.347305 12.2755 0.350155 12.6742C0.353005 13.0728 0.461725 13.4636 0.665188 13.8064C0.868651 14.1493 1.15955 14.4319 1.50812 14.6254C1.85668 14.8188 2.2504 14.9162 2.64897 14.9076H13.399C13.7933 14.9073 14.1807 14.8034 14.5222 14.6063C14.8638 14.4092 15.1475 14.1258 15.345 13.7845C15.5425 13.4431 15.6468 13.0559 15.6475 12.6615C15.6482 12.2672 15.5453 11.8796 15.349 11.5376ZM7.24897 5.32758C7.24897 5.12866 7.32798 4.9379 7.46864 4.79725C7.60929 4.65659 7.80006 4.57758 7.99897 4.57758C8.19788 4.57758 8.38864 4.65659 8.5293 4.79725C8.66995 4.9379 8.74897 5.12866 8.74897 5.32758V8.32758C8.74897 8.52649 8.66995 8.71725 8.5293 8.85791C8.38864 8.99856 8.19788 9.07758 7.99897 9.07758C7.80006 9.07758 7.60929 8.99856 7.46864 8.85791C7.32798 8.71725 7.24897 8.52649 7.24897 8.32758V5.32758ZM7.99897 12.3276C7.80119 12.3276 7.60785 12.2689 7.4434 12.159C7.27895 12.0492 7.15077 11.893 7.07509 11.7103C6.9994 11.5275 6.9796 11.3265 7.01818 11.1325C7.05677 10.9385 7.15201 10.7603 7.29186 10.6205C7.43171 10.4806 7.6099 10.3854 7.80388 10.3468C7.99786 10.3082 8.19893 10.328 8.38165 10.4037C8.56438 10.4794 8.72056 10.6076 8.83044 10.772C8.94032 10.9365 8.99897 11.1298 8.99897 11.3276C8.99897 11.5928 8.89361 11.8471 8.70607 12.0347C8.51854 12.2222 8.26418 12.3276 7.99897 12.3276Z", "clip-rule": "evenodd" } })]);
+}, B = [], A = /* @__PURE__ */ v(
   G,
   $,
+  B,
   !1,
   null,
   "1b1bf797",
   null,
   null
 );
-const f = A.exports, x = {
+const p = A.exports, x = {
   "en-US": {
     highlightIcon: "Highlight icon",
     successIcon: "Success icon",
@@ -36,10 +36,10 @@ const f = A.exports, x = {
     warningIcon: "Warning icon",
     close: "Close"
   }
-}, D = T({
+}, V = y({
   i18n: { messages: x },
   name: "bento-alert",
-  components: { CrossSmall: E, BentoButton: B, Warning: f, CrossCircle: u, CheckedCircle: d, Info: _, BentoTypography: H },
+  components: { CrossSmall: w, BentoButton: H, Warning: p, CrossCircle: _, CheckedCircle: u, Info: C, BentoTypography: S },
   props: {
     /**
      * Adds a close button on the right side of the alert
@@ -54,8 +54,8 @@ const f = A.exports, x = {
      */
     type: {
       type: String,
-      default: s.HIGHLIGHT,
-      validator: (e) => Object.values(s).includes(e)
+      default: a.HIGHLIGHT,
+      validator: (e) => Object.values(a).includes(e)
     },
     /**
      * Variant for the alert
@@ -63,67 +63,64 @@ const f = A.exports, x = {
      */
     variant: {
       type: String,
-      default: o.DEFAULT,
-      validator: (e) => Object.values(o).includes(e)
+      default: r.DEFAULT,
+      validator: (e) => Object.values(r).includes(e)
     }
   },
   emits: [l.CLOSE_ALERT],
-  setup(e, { slots: t, emit: a }) {
-    const { t: c } = R(), r = n(() => e.variant === o.TIP), v = n(() => ({
+  setup(e, { slots: t, emit: s }) {
+    const { t: c } = R(), o = n(() => e.variant === r.TIP), m = n(() => ({
       [`b-alert--${e.type}`]: e.type,
-      [`b-alert--${o.TIP}`]: r.value
-    })), g = n(() => c(`${e.type}Icon`)), h = n(() => {
+      [`b-alert--${r.TIP}`]: o.value
+    })), f = n(() => c(`${e.type}Icon`)), g = n(() => {
       switch (e.type) {
-        case s.CRITICAL:
+        case a.CRITICAL:
+          return _;
+        case a.SUCCESS:
           return u;
-        case s.SUCCESS:
-          return d;
-        case s.WARNING:
-          return f;
-        case s.HIGHLIGHT:
+        case a.WARNING:
+          return p;
+        case a.HIGHLIGHT:
         default:
-          return _;
+          return C;
       }
-    }), I = n(() => ({
-      el: C.DIV,
-      variant: r.value ? i.CAPTION : i.BODY,
+    }), h = n(() => ({
+      el: L.DIV,
+      variant: o.value ? i.CAPTION : i.BODY,
       wide: !0
-    })), y = n(() => e.type === s.HIGHLIGHT ? "status" : "alert"), b = () => {
-      a(l.CLOSE_ALERT);
+    })), I = n(() => e.type === a.HIGHLIGHT ? "status" : "alert"), b = () => {
+      s(l.CLOSE_ALERT);
     };
-    return S(() => {
+    return T(() => {
       if (!t.default && !t.description)
         throw new Error("Alert Component requires a title or a description");
     }), {
       // Values
-      alertConditionalClasses: v,
-      computedRole: y,
-      descriptionTypography: I,
-      iconComponent: h,
-      iconSvgTitle: g,
-      isTipVariant: r,
+      alertConditionalClasses: m,
+      computedRole: I,
+      descriptionTypography: h,
+      iconComponent: g,
+      iconSvgTitle: f,
+      isTipVariant: o,
       // Methods
       onCloseButtonClick: b,
-      hasSlot: w(t),
+      hasSlot: E(t),
       t: c,
       // Enums
-      BentoButtonVariant: L,
-      BentoAlertTypeOption: s,
-      BentoTypographyVariant: i,
-      BentoTypographyElement: C
+      BentoTypographyVariant: i
     };
   }
 });
 var k = function() {
-  var t = this, a = t._self._c;
-  return t._self._setupProxy, a("div", { staticClass: "b-alert", attrs: { role: t.computedRole } }, [a("div", { staticClass: "b-alert__inner-container", class: t.alertConditionalClasses }, [a("div", { staticClass: "b-alert__icon" }, [a(t.iconComponent, { tag: "component", attrs: { "aria-hidden": "true", "svg-title": t.iconSvgTitle } })], 1), a("div", { staticClass: "b-alert__content" }, [t.hasSlot("default") && !t.isTipVariant ? a("bento-typography", { staticClass: "b-alert__title", attrs: { el: t.BentoTypographyElement.DIV, variant: t.BentoTypographyVariant.BODY, strongest: "", wide: "" } }, [t._t("default")], 2) : t._e(), t.hasSlot("description") ? a("bento-typography", t._b({ staticClass: "b-alert__description", attrs: { "data-testid": "alert-description" } }, "bento-typography", t.descriptionTypography, !1), [t._t("description")], 2) : t._e(), t.hasSlot("actions") && !t.isTipVariant ? a("div", { staticClass: "b-alert__actions", attrs: { "data-testid": "alert-actions" } }, [t._t("actions")], 2) : t._e()], 1), t.closeButton && !t.isTipVariant ? a("bento-button", { staticClass: "b-alert__close-button", attrs: { variant: t.BentoButtonVariant.TERTIARY, type: "button" }, on: { click: t.onCloseButtonClick } }, [a("cross-small", { attrs: { "svg-title": t.t("close") } })], 1) : t._e()], 1)]);
-}, F = [], N = /* @__PURE__ */ m(
-  D,
+  var t = this, s = t._self._c;
+  return t._self._setupProxy, s("div", { staticClass: "b-alert", attrs: { role: t.computedRole } }, [s("div", { staticClass: "b-alert__inner-container", class: t.alertConditionalClasses }, [s("div", { staticClass: "b-alert__icon" }, [s(t.iconComponent, { tag: "component", attrs: { "aria-hidden": "true", "svg-title": t.iconSvgTitle } })], 1), s("div", { staticClass: "b-alert__content" }, [t.hasSlot("default") && !t.isTipVariant ? s("bento-typography", { staticClass: "b-alert__title", attrs: { el: "div", variant: "body", strongest: "", wide: "" } }, [t._t("default")], 2) : t._e(), t.hasSlot("description") ? s("bento-typography", t._b({ staticClass: "b-alert__description", attrs: { "data-testid": "alert-description" } }, "bento-typography", t.descriptionTypography, !1), [t._t("description")], 2) : t._e(), t.hasSlot("actions") && !t.isTipVariant ? s("div", { staticClass: "b-alert__actions", attrs: { "data-testid": "alert-actions" } }, [t._t("actions")], 2) : t._e()], 1), t.closeButton && !t.isTipVariant ? s("bento-button", { staticClass: "b-alert__close-button", attrs: { variant: "tertiary", type: "button" }, on: { click: t.onCloseButtonClick } }, [s("cross-small", { attrs: { "svg-title": t.t("close") } })], 1) : t._e()], 1)]);
+}, F = [], N = /* @__PURE__ */ v(
+  V,
   k,
   F,
   !1,
   null,
-  "1e5ff0dc",
+  "cc29b5e1",
   null,
   null
 );
@@ -131,7 +128,7 @@ const z = N.exports;
 export {
   z as BentoAlert,
   l as BentoAlertEvent,
-  s as BentoAlertTypeOption,
-  o as BentoAlertVariant
+  a as BentoAlertTypeOption,
+  r as BentoAlertVariant
 };
 //# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../src/components/alert/alert.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/warning-filled.vue","../src/components/alert/alert.vue"],"sourcesContent":["export enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" fill-rule=\"evenodd\" d=\"M15.349 11.5376L9.99897 2.19758C9.79966 1.85738 9.51482 1.57524 9.17274 1.37919C8.83066 1.18314 8.44325 1.07999 8.04897 1.07999C7.65469 1.07999 7.26727 1.18314 6.92519 1.37919C6.58311 1.57524 6.29827 1.85738 6.09897 2.19758L0.648967 11.5376C0.450427 11.8833 0.347305 12.2755 0.350155 12.6742C0.353005 13.0728 0.461725 13.4636 0.665188 13.8064C0.868651 14.1493 1.15955 14.4319 1.50812 14.6254C1.85668 14.8188 2.2504 14.9162 2.64897 14.9076H13.399C13.7933 14.9073 14.1807 14.8034 14.5222 14.6063C14.8638 14.4092 15.1475 14.1258 15.345 13.7845C15.5425 13.4431 15.6468 13.0559 15.6475 12.6615C15.6482 12.2672 15.5453 11.8796 15.349 11.5376ZM7.24897 5.32758C7.24897 5.12866 7.32798 4.9379 7.46864 4.79725C7.60929 4.65659 7.80006 4.57758 7.99897 4.57758C8.19788 4.57758 8.38864 4.65659 8.5293 4.79725C8.66995 4.9379 8.74897 5.12866 8.74897 5.32758V8.32758C8.74897 8.52649 8.66995 8.71725 8.5293 8.85791C8.38864 8.99856 8.19788 9.07758 7.99897 9.07758C7.80006 9.07758 7.60929 8.99856 7.46864 8.85791C7.32798 8.71725 7.24897 8.52649 7.24897 8.32758V5.32758ZM7.99897 12.3276C7.80119 12.3276 7.60785 12.2689 7.4434 12.159C7.27895 12.0492 7.15077 11.893 7.07509 11.7103C6.9994 11.5275 6.9796 11.3265 7.01818 11.1325C7.05677 10.9385 7.15201 10.7603 7.29186 10.6205C7.43171 10.4806 7.6099 10.3854 7.80388 10.3468C7.99786 10.3082 8.19893 10.328 8.38165 10.4037C8.56438 10.4794 8.72056 10.6076 8.83044 10.772C8.94032 10.9365 8.99897 11.1298 8.99897 11.3276C8.99897 11.5928 8.89361 11.8471 8.70607 12.0347C8.51854 12.2222 8.26418 12.3276 7.99897 12.3276Z\" clip-rule=\"evenodd\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\n</style>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    :el=\"BentoTypographyElement.DIV\"\n                    :variant=\"BentoTypographyVariant.BODY\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoButtonVariant } from '@/core/components/button/button.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert :type=\"BentoAlertTypeOption.HIGHLIGHT\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-alert',\n        components: { CrossSmall, BentoButton, Warning, CrossCircle, CheckedCircle, Info, BentoTypography },\n        props: {\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton: {\n                type: Boolean,\n                default: false,\n            },\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<BentoAlertTypeOption | `${BentoAlertTypeOption}`>,\n                default: BentoAlertTypeOption.HIGHLIGHT,\n                validator: (value: BentoAlertTypeOption) => Object.values(BentoAlertTypeOption).includes(value),\n            },\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant: {\n                type: String as PropType<BentoAlertVariant | `${BentoAlertVariant}`>,\n                default: BentoAlertVariant.DEFAULT,\n                validator: (value: BentoAlertVariant) => Object.values(BentoAlertVariant).includes(value),\n            },\n        },\n        emits: [BentoAlertEvent.CLOSE_ALERT],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n            const alertConditionalClasses = computed(() => ({\n                [`b-alert--${props.type}`]: props.type,\n                [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n            }));\n\n            const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n            const iconComponent = computed(() => {\n                switch (props.type) {\n                    case BentoAlertTypeOption.CRITICAL:\n                        return CrossCircle;\n                    case BentoAlertTypeOption.SUCCESS:\n                        return CheckedCircle;\n                    case BentoAlertTypeOption.WARNING:\n                        return Warning;\n                    case BentoAlertTypeOption.HIGHLIGHT:\n                    default:\n                        return Info;\n                }\n            });\n\n            const descriptionTypography = computed(() => ({\n                el: BentoTypographyElement.DIV,\n                variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n                wide: true,\n            }));\n\n            const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n            const onCloseButtonClick = () => {\n                emit(BentoAlertEvent.CLOSE_ALERT);\n            };\n\n            onMounted(() => {\n                if (!slots.default && !slots.description) {\n                    throw new Error('Alert Component requires a title or a description');\n                }\n            });\n\n            return {\n                // Values\n                alertConditionalClasses,\n                computedRole,\n                descriptionTypography,\n                iconComponent,\n                iconSvgTitle,\n                isTipVariant,\n\n                // Methods\n                onCloseButtonClick,\n                hasSlot: useHasSlot(slots),\n                t,\n\n                // Enums\n                BentoButtonVariant,\n                BentoAlertTypeOption,\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","CrossIcon","BentoButton","Warning","CrossCircleIcon","CheckedCircleIcon","InfoIcon","BentoTypography","value","props","slots","emit","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","onMounted","useHasSlot","BentoButtonVariant"],"mappings":"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","x_google_ignoreList":[1]}
+{"version":3,"file":"alert.js","sources":["../src/components/alert/alert.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/warning-filled.vue","../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" fill-rule=\"evenodd\" d=\"M15.349 11.5376L9.99897 2.19758C9.79966 1.85738 9.51482 1.57524 9.17274 1.37919C8.83066 1.18314 8.44325 1.07999 8.04897 1.07999C7.65469 1.07999 7.26727 1.18314 6.92519 1.37919C6.58311 1.57524 6.29827 1.85738 6.09897 2.19758L0.648967 11.5376C0.450427 11.8833 0.347305 12.2755 0.350155 12.6742C0.353005 13.0728 0.461725 13.4636 0.665188 13.8064C0.868651 14.1493 1.15955 14.4319 1.50812 14.6254C1.85668 14.8188 2.2504 14.9162 2.64897 14.9076H13.399C13.7933 14.9073 14.1807 14.8034 14.5222 14.6063C14.8638 14.4092 15.1475 14.1258 15.345 13.7845C15.5425 13.4431 15.6468 13.0559 15.6475 12.6615C15.6482 12.2672 15.5453 11.8796 15.349 11.5376ZM7.24897 5.32758C7.24897 5.12866 7.32798 4.9379 7.46864 4.79725C7.60929 4.65659 7.80006 4.57758 7.99897 4.57758C8.19788 4.57758 8.38864 4.65659 8.5293 4.79725C8.66995 4.9379 8.74897 5.12866 8.74897 5.32758V8.32758C8.74897 8.52649 8.66995 8.71725 8.5293 8.85791C8.38864 8.99856 8.19788 9.07758 7.99897 9.07758C7.80006 9.07758 7.60929 8.99856 7.46864 8.85791C7.32798 8.71725 7.24897 8.52649 7.24897 8.32758V5.32758ZM7.99897 12.3276C7.80119 12.3276 7.60785 12.2689 7.4434 12.159C7.27895 12.0492 7.15077 11.893 7.07509 11.7103C6.9994 11.5275 6.9796 11.3265 7.01818 11.1325C7.05677 10.9385 7.15201 10.7603 7.29186 10.6205C7.43171 10.4806 7.6099 10.3854 7.80388 10.3468C7.99786 10.3082 8.19893 10.328 8.38165 10.4037C8.56438 10.4794 8.72056 10.6076 8.83044 10.772C8.94032 10.9365 8.99897 11.1298 8.99897 11.3276C8.99897 11.5928 8.89361 11.8471 8.70607 12.0347C8.51854 12.2222 8.26418 12.3276 7.99897 12.3276Z\" clip-rule=\"evenodd\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\n</style>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-alert',\n        components: { CrossSmall, BentoButton, Warning, CrossCircle, CheckedCircle, Info, BentoTypography },\n        props: {\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton: {\n                type: Boolean,\n                default: false,\n            },\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<BentoAlertTypeOption | `${BentoAlertTypeOption}`>,\n                default: BentoAlertTypeOption.HIGHLIGHT,\n                validator: (value: BentoAlertTypeOption) => Object.values(BentoAlertTypeOption).includes(value),\n            },\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant: {\n                type: String as PropType<BentoAlertVariant | `${BentoAlertVariant}`>,\n                default: BentoAlertVariant.DEFAULT,\n                validator: (value: BentoAlertVariant) => Object.values(BentoAlertVariant).includes(value),\n            },\n        },\n        emits: [BentoAlertEvent.CLOSE_ALERT],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n            const alertConditionalClasses = computed(() => ({\n                [`b-alert--${props.type}`]: props.type,\n                [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n            }));\n\n            const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n            const iconComponent = computed(() => {\n                switch (props.type) {\n                    case BentoAlertTypeOption.CRITICAL:\n                        return CrossCircle;\n                    case BentoAlertTypeOption.SUCCESS:\n                        return CheckedCircle;\n                    case BentoAlertTypeOption.WARNING:\n                        return Warning;\n                    case BentoAlertTypeOption.HIGHLIGHT:\n                    default:\n                        return Info;\n                }\n            });\n\n            const descriptionTypography = computed(() => ({\n                el: BentoTypographyElement.DIV,\n                variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n                wide: true,\n            }));\n\n            const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n            const onCloseButtonClick = () => {\n                emit(BentoAlertEvent.CLOSE_ALERT);\n            };\n\n            onMounted(() => {\n                if (!slots.default && !slots.description) {\n                    throw new Error('Alert Component requires a title or a description');\n                }\n            });\n\n            return {\n                // Values\n                alertConditionalClasses,\n                computedRole,\n                descriptionTypography,\n                iconComponent,\n                iconSvgTitle,\n                isTipVariant,\n\n                // Methods\n                onCloseButtonClick,\n                hasSlot: useHasSlot(slots),\n                t,\n\n                // Enums\n                BentoTypographyVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","CrossIcon","BentoButton","Warning","CrossCircleIcon","CheckedCircleIcon","InfoIcon","BentoTypography","value","props","slots","emit","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","onMounted","useHasSlot"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/assets/base-button.css

@@ -1 +1 @@
-button[data-v-f1ba2191]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-f1ba2191]:focus-visible{outline:none}.b-base-button[data-v-f1ba2191]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;cursor:pointer;display:flex;padding:0}.b-base-button[data-v-f1ba2191],.b-base-button[data-v-f1ba2191]:before,.b-base-button[data-v-f1ba2191]:after{box-sizing:border-box}.b-base-button *[data-v-f1ba2191],.b-base-button *[data-v-f1ba2191]:before,.b-base-button *[data-v-f1ba2191]:after{box-sizing:border-box}.b-base-button[data-v-f1ba2191] ::-webkit-scrollbar{height:14px;width:14px}.b-base-button[data-v-f1ba2191] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-base-button[data-v-f1ba2191]:disabled{cursor:not-allowed}.b-base-button__icon-left[data-v-f1ba2191],.b-base-button__icon-right[data-v-f1ba2191]{align-items:center;display:flex}
+button[data-v-9322c44a]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-9322c44a]:focus-visible{outline:none}.b-base-button[data-v-9322c44a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;cursor:pointer;display:flex;padding:0}.b-base-button[data-v-9322c44a],.b-base-button[data-v-9322c44a]:before,.b-base-button[data-v-9322c44a]:after{box-sizing:border-box}.b-base-button *[data-v-9322c44a],.b-base-button *[data-v-9322c44a]:before,.b-base-button *[data-v-9322c44a]:after{box-sizing:border-box}.b-base-button[data-v-9322c44a] ::-webkit-scrollbar{height:14px;width:14px}.b-base-button[data-v-9322c44a] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-base-button[data-v-9322c44a]:disabled{cursor:not-allowed}.b-base-button__icon-left[data-v-9322c44a],.b-base-button__icon-right[data-v-9322c44a]{align-items:center;display:flex}

package/dist/assets/base-modal.css

@@ -0,0 +1 @@
+.b-modal-base[data-v-550ed75e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-modal-base[data-v-550ed75e],.b-modal-base[data-v-550ed75e]:before,.b-modal-base[data-v-550ed75e]:after{box-sizing:border-box}.b-modal-base *[data-v-550ed75e],.b-modal-base *[data-v-550ed75e]:before,.b-modal-base *[data-v-550ed75e]:after{box-sizing:border-box}.b-modal-base[data-v-550ed75e] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-base[data-v-550ed75e] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-legacy-theme .b-modal-base__container[data-v-550ed75e]::backdrop{background-color:#99a0ab}.b-modal-base__container[data-v-550ed75e]{border:none;margin:auto;opacity:0;padding:var(--b-modal-padding);transition-duration:.15s;transition-property:opacity,transform}.b-modal-base__container--visible[data-v-550ed75e]{opacity:1;transform:translateY(0);transition-timing-function:ease-out}.b-modal-base__container--overflow-visible[data-v-550ed75e]{overflow:visible}.b-modal-base__container--column-layout .b-modal-base__header[data-v-550ed75e]{padding-bottom:var(--b-modal-container-gap)}.b-modal-base__container--column-layout .b-modal-base__header-container[data-v-550ed75e]{padding-bottom:0}.b-modal-base__container--column-layout .b-modal-base__actions[data-v-550ed75e]{padding-top:var(--b-modal-container-gap)}.b-modal-base__container--column-layout .b-modal-base__actions-container[data-v-550ed75e]{padding-top:0}.b-modal-base__container[data-v-550ed75e]:not(.b-modal-base__container--visible){opacity:0;transform:translateY(24px);transition-timing-function:ease-in}.b-modal-base__container[data-v-550ed75e]::backdrop{background-color:#7b8390;opacity:.5}.b-modal-base__container--small[data-v-550ed75e]{width:480px}.b-modal-base__container--medium[data-v-550ed75e]{width:600px}.b-modal-base__container--large[data-v-550ed75e]{width:800px}.b-modal-base__container[data-v-550ed75e],.b-modal-base__header-container[data-v-550ed75e],.b-modal-base__actions-container[data-v-550ed75e]{background-color:var(--b-modal-container-background-color);border-radius:var(--b-modal-border-radius)}.b-modal-base__wrapper[data-v-550ed75e]{display:flex;flex-direction:column}.b-modal-base__divider[data-v-550ed75e]{margin-left:-24px;width:calc(100% + 48px)}.b-modal-base__header-container[data-v-550ed75e],.b-modal-base__actions-container[data-v-550ed75e]{padding:16px 24px;position:sticky}.b-modal-base__header-container[data-v-550ed75e]{border-bottom-left-radius:0;border-bottom-right-radius:0;top:0}.b-modal-base__actions-container[data-v-550ed75e]{border-top-left-radius:0;border-top-right-radius:0;bottom:0}.b-modal-base__header[data-v-550ed75e]{align-items:center;display:flex;justify-content:space-between}.b-modal-base__content[data-v-550ed75e]{padding:var(--b-modal-container-gap) 24px}.b-modal-base__content--with-header[data-v-550ed75e]{padding-top:0}.b-modal-base__content--with-actions[data-v-550ed75e]{padding-bottom:0}.b-modal-base__grid[data-v-550ed75e]>:nth-child(1){border-right:var(--b-modal-container-column-layout-border);padding:var(--b-modal-container-column-layout-padding);padding-left:0}.b-modal-base__grid[data-v-550ed75e]>:nth-child(2){padding:var(--b-modal-container-column-layout-padding);padding-left:var(--b-modal-container-column-layout-padding-left);padding-right:0}