@adyen/bento-vue2 1.28.0 → 1.29.0

package/dist/accordion.js

@@ -1,6 +1,104 @@
-import { a as e, b as n } from "./chunks/accordion-item.DmnrjNzw.js";
+import { defineComponent as p, provide as C, toRef as h, ref as l, inject as y, computed as g, watch as _ } from "vue";
+import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as x } from "./chunks/index.e29a6907.js";
+import { C as O, a as T } from "./chunks/chevron-up.bade9c77.js";
+import { g as d } from "./chunks/unique-id.a2a2b458.js";
+import { o as E } from "./chunks/resize.a041304d.js";
+import { u as N } from "./chunks/use-expandable-content-height.62fc84e5.js";
+import "./assets/index3.css";
+const m = Symbol("accordion title size injection key"), S = {}, z = /* @__PURE__ */ p({
+  ...S,
+  __name: "accordion",
+  props: {
+    /**
+     * Controls accordion title size.
+     * @values default, small
+     */
+    titleSize: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(i) {
+    const e = i;
+    return C(m, h(e, "titleSize")), { __sfc: !0, props: e };
+  }
+});
+var A = function() {
+  var e = this, n = e._self._c;
+  return e._self._setupProxy, n("div", { staticClass: "b-accordion" }, [e._t("default")], 2);
+}, B = [], $ = /* @__PURE__ */ u(
+  z,
+  A,
+  B,
+  !1,
+  null,
+  "fb182a1c",
+  null,
+  null
+);
+const K = $.exports, R = {}, D = /* @__PURE__ */ p({
+  ...R,
+  __name: "accordion-item",
+  props: {
+    /**
+     * Sets the title of the accordion item.
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Controls if the content is visible or hidden.
+     */
+    isExpanded: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:is-expanded"],
+  setup(i, { emit: e }) {
+    const n = i, t = "b-accordion-item__animation--content", o = l(null), s = l(n.isExpanded), f = d("accordionItemButton"), v = d("accordionItemContent"), I = y(m, "default"), { updateContentHeight: c, contentHeight: r } = N(o, s), b = g(() => r.value ? { "max-height": r.value } : {});
+    return _(
+      () => n.isExpanded,
+      (a) => {
+        s.value = a;
+      }
+    ), _(
+      () => o.value,
+      () => {
+        let a = null;
+        !a && o.value && (a = E(o.value, () => {
+          o.value && c();
+        }));
+      }
+    ), _(
+      s,
+      (a) => {
+        e("update:is-expanded", a), c();
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, CONTENT_TRANSITION_NAME: t, props: n, emit: e, contentDiv: o, isOpen: s, buttonId: f, contentId: v, titleSize: I, updateContentHeight: c, contentHeight: r, contentMaxHeight: b, BentoTypography: x, ChevronDownIcon: O, ChevronUpIcon: T };
+  }
+});
+var H = 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(o) {
+    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 } }, [t.isOpen ? n("div", { style: t.contentMaxHeight, attrs: { id: t.contentId, "aria-labelledby": t.buttonId, role: "region" } }, [n("div", { ref: "contentDiv", staticClass: "b-accordion-item__content" }, [e._t("default")], 2)]) : e._e()])], 1);
+}, M = [], w = /* @__PURE__ */ u(
+  D,
+  H,
+  M,
+  !1,
+  null,
+  "01c3158a",
+  null,
+  null
+);
+const L = w.exports;
 export {
-  e as BentoAccordion,
-  n as BentoAccordionItem
+  K as BentoAccordion,
+  L as BentoAccordionItem
 };
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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 v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\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 { computed, inject, 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    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\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\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 { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\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","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement","emit"],"mappings":";;;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,GCqDTC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;qBCyHAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;iBAnGAC,IAAA,wCA2BAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAJ,EAAA,UAAA,GAGAM,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAd,GAAA,SAAA,GAGA,EAAA,qBAAAe,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACgB,CAAAiB,MAAA;AAER,QAAAZ,EAAA,QAAAY;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAb,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAe,IAAA;AACA,QAAA,CAAAA,KAAAf,EAAA,UACIe,IAAAC,EAAAhB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIQ,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAX;AAAA,MACI,CAAAY,MAAA;AAGI,QAAAG,EAAA,sBAAAH,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/action-bar.js

@@ -1,5 +1,149 @@
-import { B as t } from "./chunks/action-bar.Bebh6PHI.js";
+import { defineComponent as w, computed as c, ref as b, toRefs as O, watch as g, provide as V, nextTick as B } from "vue";
+import { a as P } from "./chunks/button.9184ade9.js";
+import { B as R } from "./chunks/index.e29a6907.js";
+import { B as F } from "./chunks/button-actions-with-menu.bc66bc0a.js";
+import { C as W } from "./chunks/cross.f47f6b7f.js";
+import { u as L } from "./chunks/i18n.eb5b985b.js";
+import { u as k } from "./chunks/index.6584f75e.js";
+import { P as M } from "./chunks/index.40b77741.js";
+import { B as U } from "./chunks/button-actions.430d7510.js";
+import { n as z } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index23.css";
+const D = {
+  "en-US": {
+    actionBar: "Action bar",
+    cancel: "Cancel",
+    close: "Close",
+    save: "Save",
+    selected: "selected",
+    unsavedChanges: "unsaved change | unsaved changes"
+  }
+}, G = {
+  i18n: { messages: D }
+}, K = /* @__PURE__ */ w({
+  ...G,
+  __name: "action-bar",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * Required and used for the `default` variant.
+     *
+     * Each object in the list should have a `title`, an `event` and,
+     * optionally, an `icon`.
+     *
+     * The component will display 4 actions and the hide the rest inside a menu.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * How many actions should be visible outside the menu, cannot be more than 4
+     */
+    visibleActions: {
+      type: Number,
+      default: 4,
+      validator: (o) => o > 0 && o <= 4
+    },
+    /**
+     * Use when there are sticky elements at the bottom, like sticky pagination
+     */
+    extraBottomSpacing: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show how many items are selected
+     */
+    itemCounter: {
+      type: Number,
+      required: !0
+    },
+    /**
+     * Label for the selection, e.g. 'selected'/'changed'
+     */
+    selectionLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Variant for the action bar
+     * @values default, confirmation
+     */
+    variant: {
+      type: String,
+      default: "default"
+    }
+  },
+  emits: ["close", "cancel", "save"],
+  setup(o, { emit: a }) {
+    const n = o, t = 100, _ = 7, C = 500, m = 32, { t: r, tc: S } = L(), E = c(() => n.selectionLabel ? n.selectionLabel : r("selected")), l = b(null), { extraBottomSpacing: y, visibleActions: A } = O(n), { width: i } = k(), e = b(null), u = b(null), h = c(() => n.variant === "confirmation");
+    g(
+      () => A.value,
+      (s) => {
+        u.value = s <= 4 ? s : 4, e.value = u.value;
+      },
+      { immediate: !0 }
+    );
+    const I = c(() => ({
+      "b-action-bar--extra-spacing": y.value,
+      "b-action-bar--confirmation": h.value
+    }));
+    V(M, _);
+    const T = c(() => {
+      const s = n.actions.map((N) => ({
+        ...N,
+        variant: "secondary"
+      })), p = s.slice(0, e.value).reverse(), d = s.slice(e.value);
+      return [...p, ...d];
+    }), x = c(() => [
+      {
+        title: r("save"),
+        event: () => a("save")
+      },
+      {
+        title: r("cancel"),
+        variant: "secondary",
+        event: () => a("cancel")
+      }
+    ]), v = async () => {
+      await B(), i.value > l.value.clientWidth + m + t && e.value < u.value && (e.value += 1, v());
+    }, f = async () => {
+      await B(), i.value < l.value.clientWidth + m && e.value > 0 && (e.value -= 1, f());
+    };
+    return g(
+      () => i.value,
+      async (s, p) => {
+        if (await B(), !l.value)
+          return;
+        const d = s > p;
+        i.value < C ? e.value = 0 : d ? v() : f();
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: t, MENU_OFFSET: _, RESPONSIVE_BREAKPOINT: C, SPACING: m, props: n, emit: a, t: r, tc: S, label: E, actionBar: l, extraBottomSpacing: y, visibleActions: A, width: i, internalDisplayedActions: e, internalVisibleActions: u, isConfirmationVariant: h, conditionalClasses: I, actionsInternal: T, confirmationActions: x, showActions: v, hideActions: f, BentoButton: P, BentoButtonActions: U, BentoTypography: R, ButtonActionsWithMenu: F, CrossIcon: W };
+  }
+});
+var q = function() {
+  var a = this, n = a._self._c, t = a._self._setupProxy;
+  return n("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [n("section", { staticClass: "b-action-bar", class: t.conditionalClasses, attrs: { "aria-label": t.t("actionBar") } }, [n("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [t.isConfirmationVariant ? a._e() : n("div", { staticClass: "b-action-bar__close-button" }, [n(t.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": t.t("close") }, on: { click: function(_) {
+    return t.emit("close");
+  } }, scopedSlots: a._u([{ key: "iconLeft", fn: function() {
+    return [n(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }], null, !1, 4214210411) })], 1), n(t.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [a._v(" " + a._s(a.itemCounter) + " " + a._s(t.isConfirmationVariant ? t.tc("unsavedChanges", a.itemCounter) : t.label) + " ")]), t.isConfirmationVariant ? n(t.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: t.confirmationActions, inverse: "" } }) : n(t.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: t.actionsInternal, "displayed-actions": t.internalDisplayedActions, "menu-position": "top-end", inverse: "" } })], 1)])]);
+}, J = [], Y = /* @__PURE__ */ z(
+  K,
+  q,
+  J,
+  !1,
+  null,
+  "f42b2c8c",
+  null,
+  null
+);
+const st = Y.exports;
 export {
-  t as BentoActionBar
+  st as BentoActionBar
 };
 //# sourceMappingURL=action-bar.js.map

package/dist/action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"action-bar.js","sources":["../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected\n         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        (e: 'cancel'): void;\n        (e: 'save'): void;\n    }>();\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;GAqPIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtMAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IAkEA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAvB,CAAA;AAGA,UAAAwB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;"}

package/dist/alert.js

@@ -1,7 +1,99 @@
-import { B as a, c as n, b as o, a as r } from "./chunks/alert.CJyTM4Az.js";
+import { defineComponent as I, useSlots as y, computed as n, onMounted as T } from "vue";
+import { c as S, a as c, B as H } from "./chunks/index.e29a6907.js";
+import { a as b } from "./chunks/button.9184ade9.js";
+import { C as w } from "./chunks/cross-small.3bb94ec7.js";
+import { W as B } from "./chunks/warning-filled.1ced4163.js";
+import { C as L } from "./chunks/cross-circle-fill.dd300d4c.js";
+import { C as E } from "./chunks/checkmark-circle-fill.382e27e2.js";
+import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { u as G } from "./chunks/use-has-slot.fbeb19ec.js";
+import { u as R } from "./chunks/i18n.eb5b985b.js";
+import "./assets/index29.css";
+var r = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.TIP = "tip", a))(r || {}), o = /* @__PURE__ */ ((a) => (a.WARNING = "warning", a.CRITICAL = "critical", a.HIGHLIGHT = "highlight", a.SUCCESS = "success", a))(o || {}), p = /* @__PURE__ */ ((a) => (a.CLOSE_ALERT = "close-alert", a))(p || {});
+let _ = 0;
+const V = {
+  beforeCreate() {
+    this.uuid = _.toString(), _ += 1;
+  }
+};
+var $ = function() {
+  var s = this, t = s._self._c;
+  return t("svg", s._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", s.$attrs, !1), [s.$attrs["svg-title"] ? t("title", [s._v(s._s(s.$attrs["svg-title"]))]) : s._e(), t("g", { attrs: { "clip-path": "url(#uia-icons-16-info_filled__a" + s.uuid + ")" } }, [t("path", { attrs: { fill: "#00112C", d: "M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z" } })]), t("defs", [t("clipPath", { attrs: { id: "uia-icons-16-info_filled__a" + s.uuid } }, [t("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
+}, x = [], A = /* @__PURE__ */ u(
+  V,
+  $,
+  x,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const F = A.exports, P = {
+  "en-US": {
+    highlightIcon: "Highlight icon",
+    successIcon: "Success icon",
+    criticalIcon: "Critical icon",
+    warningIcon: "Warning icon",
+    close: "Close"
+  }
+}, k = {
+  i18n: { messages: P },
+  name: "bento-alert"
+}, N = /* @__PURE__ */ I({
+  ...k,
+  props: {
+    closeButton: { type: Boolean, default: !1 },
+    type: { default: o.HIGHLIGHT },
+    variant: { default: r.DEFAULT }
+  },
+  emits: ["close-alert"],
+  setup(a, { emit: s }) {
+    const t = a, e = y(), C = G(e), { t: l } = R(), i = n(() => t.variant === r.TIP), d = n(() => ({
+      [`b-alert--${t.type}`]: t.type,
+      [`b-alert--${r.TIP}`]: i.value
+    })), f = n(() => l(`${t.type}Icon`)), m = n(() => {
+      switch (t.type) {
+        case o.CRITICAL:
+          return L;
+        case o.SUCCESS:
+          return E;
+        case o.WARNING:
+          return B;
+        case o.HIGHLIGHT:
+        default:
+          return F;
+      }
+    }), v = n(() => ({
+      el: S.DIV,
+      variant: i.value ? c.CAPTION : c.BODY,
+      wide: !0
+    })), g = n(() => t.type === o.HIGHLIGHT ? "status" : "alert"), h = () => {
+      s(p.CLOSE_ALERT);
+    };
+    return T(() => {
+      if (!e.default && !e.description)
+        throw new Error("Alert Component requires a title or a description");
+    }), { __sfc: !0, slots: e, hasSlot: C, emit: s, props: t, t: l, isTipVariant: i, alertConditionalClasses: d, iconSvgTitle: f, iconComponent: m, descriptionTypography: v, computedRole: g, onCloseButtonClick: h, BentoTypography: H, BentoButton: b, CrossSmall: w };
+  }
+});
+var U = function() {
+  var s = this, t = s._self._c, e = s._self._setupProxy;
+  return t("div", { staticClass: "b-alert", attrs: { role: e.computedRole } }, [t("div", { staticClass: "b-alert__inner-container", class: e.alertConditionalClasses }, [t("div", { staticClass: "b-alert__icon" }, [t(e.iconComponent, { tag: "component", attrs: { "aria-hidden": "true", "svg-title": e.iconSvgTitle } })], 1), t("div", { staticClass: "b-alert__content" }, [e.hasSlot("default") && !e.isTipVariant ? t(e.BentoTypography, { staticClass: "b-alert__title", attrs: { el: "div", variant: "body", strongest: "", wide: "" } }, [s._t("default")], 2) : s._e(), e.hasSlot("description") ? t(e.BentoTypography, s._b({ staticClass: "b-alert__description", attrs: { "data-testid": "alert-description" } }, "bento-typography", e.descriptionTypography, !1), [s._t("description")], 2) : s._e(), e.hasSlot("actions") && !e.isTipVariant ? t("div", { staticClass: "b-alert__actions", attrs: { "data-testid": "alert-actions" } }, [s._t("actions")], 2) : s._e()], 1), s.closeButton && !e.isTipVariant ? t(e.BentoButton, { staticClass: "b-alert__close-button", attrs: { variant: "tertiary", type: "button" }, on: { click: e.onCloseButtonClick } }, [t(e.CrossSmall, { attrs: { "svg-title": e.t("close") } })], 1) : s._e()], 1)]);
+}, W = [], D = /* @__PURE__ */ u(
+  N,
+  U,
+  W,
+  !1,
+  null,
+  "76963a91",
+  null,
+  null
+);
+const X = D.exports;
 export {
-  a as BentoAlert,
-  n as BentoAlertEvent,
+  X as BentoAlert,
+  p as BentoAlertEvent,
   o as BentoAlertTypeOption,
   r as BentoAlertVariant
 };

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"alert.js","sources":["../src/components/alert/alert.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/info-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\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></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>\n    @import '../css/main.css';\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 setup lang=\"ts\">\n    import { computed, onMounted, useSlots } 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    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits event when the alert is closed. `closeButton` must be `true`\n         */\n        (e: 'close-alert');\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton?: boolean;\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?: BentoAlertTypeOption | `${BentoAlertTypeOption}`;\n\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant?: BentoAlertVariant | `${BentoAlertVariant}`;\n        }>(),\n        {\n            closeButton: false,\n            type: BentoAlertTypeOption.HIGHLIGHT,\n            variant: BentoAlertVariant.DEFAULT,\n        }\n    );\n\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</script>\n\n<script lang=\"ts\">\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 {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkIcon","WarningIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;GCyJIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBApGAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAmCA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,MAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,KAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,UAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/assets/base-modal.css

@@ -1 +1 @@
-.b-modal-page[data-v-f113b69a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-modal-container-background-color);border-radius:var(--b-modal-border-radius);display:flex;flex-direction:column;max-height:calc(100vh - 2em - 6px);position:absolute;width:100%}.b-modal-page[data-v-f113b69a],.b-modal-page[data-v-f113b69a]:before,.b-modal-page[data-v-f113b69a]:after{box-sizing:border-box}.b-modal-page *[data-v-f113b69a],.b-modal-page *[data-v-f113b69a]:before,.b-modal-page *[data-v-f113b69a]:after{box-sizing:border-box}.b-modal-page[data-v-f113b69a] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-page[data-v-f113b69a] ::-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-modal-page--custom-padding[data-v-f113b69a] .b-dialog-page__header{flex:0}.b-modal-page__header-container[data-v-f113b69a],.b-modal-page__actions-container[data-v-f113b69a]{position:sticky;width:100%}.b-modal-page__header-container[data-v-f113b69a]{display:flex;padding-block:var(--b-modal-header-container-padding-block);padding-inline:var(--b-modal-header-container-padding-inline)}.b-modal-page__actions-container[data-v-f113b69a]{padding:var(--b-modal-actions-container-padding)}.b-modal-page__header[data-v-f113b69a]{min-height:var(--b-modal-header-min-height)}.b-modal-page[data-v-f113b69a] .b-dialog-page__back-button{align-self:flex-start;height:var(--b-modal-header-min-height);position:relative;top:var(--b-modal-header-container-padding-block)}.b-modal-page__content[data-v-f113b69a]{display:inline-block;padding:var(--b-modal-content-padding);width:100%}.b-modal-page__content--with-header[data-v-f113b69a]{padding-top:0}.b-modal-page__content--with-actions[data-v-f113b69a]{padding-bottom:0}.b-modal-page__grid[data-v-f113b69a]>: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-page__grid[data-v-f113b69a]>:nth-child(2){padding:var(--b-modal-container-column-layout-padding);padding-right:0}.b-modal-base[data-v-caa02cd7]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-modal-base[data-v-caa02cd7],.b-modal-base[data-v-caa02cd7]:before,.b-modal-base[data-v-caa02cd7]:after{box-sizing:border-box}.b-modal-base *[data-v-caa02cd7],.b-modal-base *[data-v-caa02cd7]:before,.b-modal-base *[data-v-caa02cd7]:after{box-sizing:border-box}.b-modal-base[data-v-caa02cd7] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-base[data-v-caa02cd7] ::-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-caa02cd7]::backdrop{background-color:#99a0ab}.b-modal-base__container[data-v-caa02cd7]{background-color:var(--b-modal-container-background-color);border:0;border-radius:var(--b-modal-border-radius);margin:auto;overflow:visible;padding:var(--b-modal-padding)}.b-modal-base__container[open][data-v-caa02cd7]{animation:fade-in-ufg70rm-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear),enter-ufg70rm-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-enter),scale-up-ufg70rm-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-in-ufg70rm-caa02cd7{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ufg70rm-caa02cd7{0%{scale:1}to{scale:1}}@keyframes enter-ufg70rm-caa02cd7{0%{translate:0 24px}to{translate:0 0}}.b-modal-base__container[open][data-v-caa02cd7]::backdrop{animation:fade-in-ufg70rv-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-in-ufg70rv-caa02cd7{0%{opacity:0}to{opacity:.5}}.b-modal-base__container--hide[open][data-v-caa02cd7]{animation:fade-out-ufg70sr-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear),exit-ufg70sr-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-exit),scale-down-ufg70sr-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-out-ufg70sr-caa02cd7{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ufg70sr-caa02cd7{0%{scale:1}to{scale:1}}@keyframes exit-ufg70sr-caa02cd7{0%{translate:0 0}to{translate:0 24px}}.b-modal-base__container--hide[open][data-v-caa02cd7]::backdrop{animation:fade-out-ufg70t9-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-out-ufg70t9-caa02cd7{0%{opacity:.5}to{opacity:0}}.b-modal-base__container[data-v-caa02cd7]::backdrop{background-color:var(--b-modal-backdrop-background-color, #00112c);opacity:.5}.b-modal-base__container--animation[data-v-caa02cd7]{overflow:hidden;transition:height ease var(--b-modal-animation-duration, .15s)}.b-modal-base__container--small[data-v-caa02cd7]{width:480px}.b-modal-base__container--medium[data-v-caa02cd7]{width:600px}.b-modal-base__container--large[data-v-caa02cd7]{width:800px}.b-modal-base__close-button[data-v-caa02cd7]{display:flex;height:var(--b-modal-close-button-height);position:absolute;right:var(--b-modal-close-button-right);top:var(--b-modal-header-container-padding-block);z-index:var(--b-modal-close-button-z-index)}
+.b-modal-page[data-v-f113b69a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-modal-container-background-color);border-radius:var(--b-modal-border-radius);display:flex;flex-direction:column;max-height:calc(100vh - 2em - 6px);position:absolute;width:100%}.b-modal-page[data-v-f113b69a],.b-modal-page[data-v-f113b69a]:before,.b-modal-page[data-v-f113b69a]:after{box-sizing:border-box}.b-modal-page *[data-v-f113b69a],.b-modal-page *[data-v-f113b69a]:before,.b-modal-page *[data-v-f113b69a]:after{box-sizing:border-box}.b-modal-page[data-v-f113b69a] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-page[data-v-f113b69a] ::-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-modal-page--custom-padding[data-v-f113b69a] .b-dialog-page__header{flex:0}.b-modal-page__header-container[data-v-f113b69a],.b-modal-page__actions-container[data-v-f113b69a]{position:sticky;width:100%}.b-modal-page__header-container[data-v-f113b69a]{display:flex;padding-block:var(--b-modal-header-container-padding-block);padding-inline:var(--b-modal-header-container-padding-inline)}.b-modal-page__actions-container[data-v-f113b69a]{padding:var(--b-modal-actions-container-padding)}.b-modal-page__header[data-v-f113b69a]{min-height:var(--b-modal-header-min-height)}.b-modal-page[data-v-f113b69a] .b-dialog-page__back-button{align-self:flex-start;height:var(--b-modal-header-min-height);position:relative;top:var(--b-modal-header-container-padding-block)}.b-modal-page__content[data-v-f113b69a]{display:inline-block;padding:var(--b-modal-content-padding);width:100%}.b-modal-page__content--with-header[data-v-f113b69a]{padding-top:0}.b-modal-page__content--with-actions[data-v-f113b69a]{padding-bottom:0}.b-modal-page__grid[data-v-f113b69a]>: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-page__grid[data-v-f113b69a]>:nth-child(2){padding:var(--b-modal-container-column-layout-padding);padding-right:0}.b-modal-base[data-v-caa02cd7]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-modal-base[data-v-caa02cd7],.b-modal-base[data-v-caa02cd7]:before,.b-modal-base[data-v-caa02cd7]:after{box-sizing:border-box}.b-modal-base *[data-v-caa02cd7],.b-modal-base *[data-v-caa02cd7]:before,.b-modal-base *[data-v-caa02cd7]:after{box-sizing:border-box}.b-modal-base[data-v-caa02cd7] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-base[data-v-caa02cd7] ::-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-caa02cd7]::backdrop{background-color:#99a0ab}.b-modal-base__container[data-v-caa02cd7]{background-color:var(--b-modal-container-background-color);border:0;border-radius:var(--b-modal-border-radius);margin:auto;overflow:visible;padding:var(--b-modal-padding)}.b-modal-base__container[open][data-v-caa02cd7]{animation:fade-in-u4blyf2-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear),enter-u4blyf2-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-enter),scale-up-u4blyf2-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-in-u4blyf2-caa02cd7{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u4blyf2-caa02cd7{0%{scale:1}to{scale:1}}@keyframes enter-u4blyf2-caa02cd7{0%{translate:0 24px}to{translate:0 0}}.b-modal-base__container[open][data-v-caa02cd7]::backdrop{animation:fade-in-u4blyfi-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-in-u4blyfi-caa02cd7{0%{opacity:0}to{opacity:.5}}.b-modal-base__container--hide[open][data-v-caa02cd7]{animation:fade-out-u4blyfn-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear),exit-u4blyfn-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-exit),scale-down-u4blyfn-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-out-u4blyfn-caa02cd7{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u4blyfn-caa02cd7{0%{scale:1}to{scale:1}}@keyframes exit-u4blyfn-caa02cd7{0%{translate:0 0}to{translate:0 24px}}.b-modal-base__container--hide[open][data-v-caa02cd7]::backdrop{animation:fade-out-u4blyg7-caa02cd7 var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-out-u4blyg7-caa02cd7{0%{opacity:.5}to{opacity:0}}.b-modal-base__container[data-v-caa02cd7]::backdrop{background-color:var(--b-modal-backdrop-background-color, #00112c);opacity:.5}.b-modal-base__container--animation[data-v-caa02cd7]{overflow:hidden;transition:height ease var(--b-modal-animation-duration, .15s)}.b-modal-base__container--small[data-v-caa02cd7]{width:480px}.b-modal-base__container--medium[data-v-caa02cd7]{width:600px}.b-modal-base__container--large[data-v-caa02cd7]{width:800px}.b-modal-base__close-button[data-v-caa02cd7]{display:flex;height:var(--b-modal-close-button-height);position:absolute;right:var(--b-modal-close-button-right);top:var(--b-modal-header-container-padding-block);z-index:var(--b-modal-close-button-z-index)}

package/dist/assets/button.css

@@ -1 +1 @@
-button[data-v-2e6aa8ec]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-2e6aa8ec]:focus-visible{outline:none}.b-button[data-v-2e6aa8ec]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--b-button-border-radius);box-shadow:var(--b-button-box-shadow);cursor:pointer;display:inline-flex;gap:8px;height:fit-content;justify-content:center;padding:var(--b-button-padding);text-decoration:none;transition:var(--b-button-transition);transition-property:color,background-color,box-shadow;-webkit-user-select:none;user-select:none}.b-button[data-v-2e6aa8ec],.b-button[data-v-2e6aa8ec]:before,.b-button[data-v-2e6aa8ec]:after{box-sizing:border-box}.b-button *[data-v-2e6aa8ec],.b-button *[data-v-2e6aa8ec]:before,.b-button *[data-v-2e6aa8ec]:after{box-sizing:border-box}.b-button[data-v-2e6aa8ec] ::-webkit-scrollbar{height:14px;width:14px}.b-button[data-v-2e6aa8ec] ::-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-button[data-v-2e6aa8ec]{height:40px;max-height:40px}.b-legacy-theme .b-button--condensed[data-v-2e6aa8ec]{height:24px;max-height:24px}.b-button__label[data-v-2e6aa8ec]{display:inline-flex;line-height:var(--b-button-line-height);vertical-align:middle;white-space:nowrap}.b-legacy-theme .b-button__label[data-v-2e6aa8ec]{font-weight:600}.b-button[data-v-2e6aa8ec]:focus-visible{animation:outer-ring-default-2e6aa8ec var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);border-radius:var(--b-button-border-radius);outline:none}@keyframes outer-ring-default-2e6aa8ec{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-button:focus-visible.b-button--tertiary[data-v-2e6aa8ec],.b-button:focus-visible.b-button--tertiary-critical[data-v-2e6aa8ec]{border-radius:var(--b-button-tertiary-border-radius)}.b-button:focus-visible.b-button--inverse[data-v-2e6aa8ec]{animation:outer-ring-inverse-2e6aa8ec var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-inverse-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-inverse-2e6aa8ec{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-inverse-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-inverse-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-button--primary[data-v-2e6aa8ec]{background-color:var(--b-button-primary-background-color);color:var(--b-button-primary-color)}.b-button--primary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]{background-color:var(--b-button-primary-background-color-inverse)}.b-button--primary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]{color:var(--b-button-primary-color-inverse)}@media (hover: hover){.b-button--primary[data-v-2e6aa8ec]:hover{background-color:var(--b-button-primary-hover-background-color);color:var(--b-button-primary-color)}.b-button--primary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:hover{background-color:var(--b-button-primary-hover-background-color-inverse)}.b-button--primary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:hover{color:var(--b-button-primary-color-inverse)}}.b-button--primary[data-v-2e6aa8ec]:active{background-color:var(--b-button-primary-active-background-color);color:var(--b-button-primary-color)}.b-button--primary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:active{background-color:var(--b-button-primary-active-background-color-inverse)}.b-button--primary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:active{color:var(--b-button-primary-color-inverse)}.b-button--primary[data-v-2e6aa8ec]:disabled,.b-button--primary.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-primary-disabled-background-color);box-shadow:var(--b-button-primary-disabled-box-shadow);color:var(--b-button-primary-disabled-color)}.b-button--primary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:disabled,.b-button--primary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-primary-disabled-background-color-inverse)}.b-button--primary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:disabled,.b-button--primary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary.b-button--disabled[data-v-2e6aa8ec]{box-shadow:var(--b-button-primary-disabled-box-shadow-inverse)}.b-button--primary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:disabled,.b-button--primary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-primary-disabled-color-inverse)}.b-button--secondary[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-background-color);border:var(--b-button-secondary-border);color:var(--b-button-secondary-color);padding:var(--b-button-secondary-padding)}.b-button--secondary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-background-color-inverse)}.b-button--secondary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]{border:var(--b-button-secondary-border-inverse)}.b-button--secondary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]{color:var(--b-button-secondary-color-inverse)}@media (hover: hover){.b-button--secondary[data-v-2e6aa8ec]:hover{background-color:var(--b-button-secondary-hover-background-color);border:var(--b-button-secondary-hover-border);color:var(--b-button-secondary-hover-color)}.b-button--secondary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:hover{background-color:var(--b-button-secondary-hover-background-color-inverse)}.b-button--secondary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:hover{border:var(--b-button-secondary-hover-border-inverse)}.b-button--secondary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:hover{color:var(--b-button-secondary-hover-color-inverse)}.b-legacy-theme .b-button--secondary[data-v-2e6aa8ec]:hover{box-shadow:var(--b-button-secondary-hover-box-shadow)}}.b-button--secondary[data-v-2e6aa8ec]:active{background-color:var(--b-button-secondary-active-background-color);border:var(--b-button-secondary-active-border);color:var(--b-button-secondary-active-color)}.b-button--secondary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:active{background-color:var(--b-button-secondary-active-background-color-inverse)}.b-button--secondary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:active{border:var(--b-button-secondary-active-border-inverse)}.b-button--secondary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:active{color:var(--b-button-secondary-active-color-inverse)}.b-button--secondary[data-v-2e6aa8ec]:disabled,.b-button--secondary.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-disabled-background-color);border:var(--b-button-secondary-disabled-border);color:var(--b-button-secondary-disabled-color)}.b-button--secondary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:disabled,.b-button--secondary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-disabled-background-color-inverse)}.b-button--secondary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:disabled,.b-button--secondary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary.b-button--disabled[data-v-2e6aa8ec]{border:var(--b-button-secondary-disabled-border-inverse)}.b-button--secondary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:disabled,.b-button--secondary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-secondary-disabled-color-inverse)}.b-button--tertiary[data-v-2e6aa8ec]{color:var(--b-button-tertiary-color);background-color:transparent;box-shadow:var(--b-button-tertiary-box-shadow);height:var(--b-button-tertiary-height);padding:var(--b-button-tertiary-padding)}.b-button--tertiary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary[data-v-2e6aa8ec]{color:var(--b-button-tertiary-color-inverse)}@media (hover: hover){.b-button--tertiary[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-hover-color);background-color:var(--b-button-tertiary-hover-background-color)}.b-button--tertiary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-hover-color-inverse)}}.b-button--tertiary[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-active-color);background-color:var(--b-button-tertiary-active-background-color)}.b-button--tertiary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-active-color-inverse)}.b-button--tertiary[data-v-2e6aa8ec]:disabled,.b-button--tertiary.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-disabled-color);background-color:var(--b-button-tertiary-disabled-background-color)}.b-button--tertiary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary[data-v-2e6aa8ec]:disabled,.b-button--tertiary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-disabled-color-inverse)}.b-button--tertiary-with-background[data-v-2e6aa8ec]{color:var(--b-button-tertiary-color)}.b-button--tertiary-with-background.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]{color:var(--b-button-tertiary-color-inverse)}@media (hover: hover){.b-button--tertiary-with-background[data-v-2e6aa8ec]:hover{background-color:var(--b-button-tertiary-with-background-hover-background-color);color:var(--b-button-tertiary-hover-color)}.b-button--tertiary-with-background:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:hover{background-color:var(--b-button-tertiary-with-background-hover-background-color-inverse)}.b-button--tertiary-with-background:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-hover-color-inverse)}}.b-button--tertiary-with-background[data-v-2e6aa8ec]:active{background-color:var(--b-button-tertiary-with-background-active-background-color);color:var(--b-button-tertiary-active-color)}.b-button--tertiary-with-background:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:active{background-color:var(--b-button-tertiary-with-background-active-background-color-inverse)}.b-button--tertiary-with-background:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-active-color-inverse)}.b-button--tertiary-with-background[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-tertiary-with-background-disabled-background-color);color:var(--b-button-tertiary-disabled-color)}.b-button--tertiary-with-background:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-tertiary-with-background-disabled-background-color-inverse)}.b-button--tertiary-with-background:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-disabled-color-inverse)}.b-button--primary-critical[data-v-2e6aa8ec]{background-color:var(--b-button-primary-critical-background-color);color:var(--b-button-primary-critical-color)}.b-button--primary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]{background-color:var(--b-button-primary-critical-background-color-inverse)}.b-button--primary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]{color:var(--b-button-primary-critical-color-inverse)}@media (hover: hover){.b-button--primary-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-primary-critical-hover-background-color);color:var(--b-button-primary-critical-color)}.b-button--primary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-primary-critical-hover-background-color-inverse)}.b-button--primary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-primary-critical-color-inverse)}}.b-button--primary-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-primary-critical-active-background-color);color:var(--b-button-primary-critical-color)}.b-button--primary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-primary-critical-active-background-color-inverse)}.b-button--primary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:active{color:var(--b-button-primary-critical-color-inverse)}.b-button--primary-critical[data-v-2e6aa8ec]:disabled,.b-button--primary-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-primary-critical-disabled-background-color);box-shadow:var(--b-button-primary-critical-disabled-box-shadow);color:var(--b-button-primary-critical-disabled-color)}.b-button--primary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:disabled,.b-button--primary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-primary-critical-disabled-background-color-inverse)}.b-button--primary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:disabled,.b-button--primary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical.b-button--disabled[data-v-2e6aa8ec]{box-shadow:var(--b-button-primary-critical-disabled-box-shadow-inverse)}.b-button--primary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:disabled,.b-button--primary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-primary-critical-disabled-color-inverse)}.b-button--secondary-critical[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-critical-background-color);border:var(--b-button-secondary-critical-border);color:var(--b-button-secondary-critical-color);padding:var(--b-button-secondary-padding)}.b-button--secondary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-critical-background-color-inverse)}.b-button--secondary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]{border:var(--b-button-secondary-critical-border-inverse)}.b-button--secondary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]{color:var(--b-button-secondary-critical-color-inverse)}@media (hover: hover){.b-button--secondary-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-secondary-critical-hover-background-color);border:var(--b-button-secondary-critical-hover-border);color:var(--b-button-secondary-critical-hover-color)}.b-button--secondary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-secondary-critical-hover-background-color-inverse)}.b-button--secondary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:hover{border:var(--b-button-secondary-critical-hover-border-inverse)}.b-button--secondary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-secondary-critical-hover-color-inverse)}}.b-button--secondary-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-secondary-critical-active-background-color);border:var(--b-button-secondary-critical-active-border);color:var(--b-button-secondary-critical-active-color)}.b-button--secondary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-secondary-critical-active-background-color-inverse)}.b-button--secondary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:active{border:var(--b-button-secondary-critical-active-border-inverse)}.b-button--secondary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:active{color:var(--b-button-secondary-critical-active-color-inverse)}.b-button--secondary-critical[data-v-2e6aa8ec]:disabled,.b-button--secondary-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-critical-disabled-background-color);border:var(--b-button-secondary-critical-disabled-border);color:var(--b-button-secondary-critical-disabled-color)}.b-button--secondary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:disabled,.b-button--secondary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-critical-disabled-background-color-inverse)}.b-button--secondary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:disabled,.b-button--secondary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical.b-button--disabled[data-v-2e6aa8ec]{border:var(--b-button-secondary-critical-disabled-border-inverse)}.b-button--secondary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:disabled,.b-button--secondary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-secondary-critical-disabled-color-inverse)}.b-button--tertiary-critical[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-color);background-color:var(--b-button-tertiary-critical-background-color);height:var(--b-button-tertiary-height);padding:var(--b-button-tertiary-padding)}.b-button--tertiary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-color-inverse)}@media (hover: hover){.b-button--tertiary-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-critical-hover-color);background-color:var(--b-button-tertiary-critical-hover-background-color)}.b-button--tertiary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-critical-hover-color-inverse)}}.b-button--tertiary-critical[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-critical-active-color);background-color:var(--b-button-tertiary-critical-active-background-color)}.b-button--tertiary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-critical-active-color-inverse)}.b-button--tertiary-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-disabled-color);background-color:var(--b-button-tertiary-critical-disabled-background-color);box-shadow:unset}.b-button--tertiary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-disabled-color-inverse)}.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-color)}.b-button--tertiary-with-background-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-color-inverse)}@media (hover: hover){.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-tertiary-with-background-critical-hover-background-color);color:var(--b-button-tertiary-critical-hover-color)}.b-button--tertiary-with-background-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-tertiary-with-background-critical-hover-background-color-inverse)}.b-button--tertiary-with-background-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-critical-hover-color-inverse)}}.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-tertiary-with-background-critical-active-background-color);color:var(--b-button-tertiary-critical-active-color)}.b-button--tertiary-with-background-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-tertiary-with-background-critical-active-background-color-inverse)}.b-button--tertiary-with-background-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-critical-active-color-inverse)}.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-tertiary-with-background-critical-disabled-background-color);color:var(--b-button-tertiary-critical-disabled-color)}.b-button--tertiary-with-background-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-tertiary-with-background-critical-disabled-background-color-inverse)}.b-button--tertiary-with-background-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-disabled-color-inverse)}.b-button--tertiary[data-v-2e6aa8ec],.b-button--tertiary-critical[data-v-2e6aa8ec],.b-button--tertiary-with-background[data-v-2e6aa8ec],.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]{text-decoration:var(--b-button-tertiary-text-decoration)}@media (hover: hover){.b-button--tertiary[data-v-2e6aa8ec]:hover,.b-button--tertiary-critical[data-v-2e6aa8ec]:hover,.b-button--tertiary-with-background[data-v-2e6aa8ec]:hover,.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:hover{text-decoration:var(--b-button-tertiary-hover-text-decoration)}}.b-button--tertiary[data-v-2e6aa8ec]:active,.b-button--tertiary-critical[data-v-2e6aa8ec]:active,.b-button--tertiary-with-background[data-v-2e6aa8ec]:active,.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:active{text-decoration:var(--b-button-tertiary-active-text-decoration)}.b-button--tertiary[data-v-2e6aa8ec]:disabled,.b-button--tertiary.b-button--disabled[data-v-2e6aa8ec],.b-button--tertiary-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-critical.b-button--disabled[data-v-2e6aa8ec],.b-button--tertiary-with-background[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background.b-button--disabled[data-v-2e6aa8ec],.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background-critical.b-button--disabled[data-v-2e6aa8ec]{text-decoration:none}.b-button[data-v-2e6aa8ec]:disabled,.b-button.b-button--disabled[data-v-2e6aa8ec]{cursor:not-allowed}.b-button--condensed[data-v-2e6aa8ec]{border-radius:var(--b-button-condensed-border-radius);padding:var(--b-button-condensed-padding)}.b-button--condensed .b-button__label[data-v-2e6aa8ec]{font-size:var(--b-button-condensed-font-size);line-height:var(--b-button-condensed-line-height)}.b-button--condensed .b-button__icon svg[data-v-2e6aa8ec]{height:var(--b-button-condensed-icon-height);width:var(--b-button-condensed-icon-width)}.b-button--condensed.b-button--tertiary[data-v-2e6aa8ec],.b-button--condensed.b-button--tertiary-critical[data-v-2e6aa8ec]{padding:var(--b-button-tertiary-padding)}.b-button--condensed.b-button--secondary[data-v-2e6aa8ec],.b-button--condensed.b-button--secondary-critical[data-v-2e6aa8ec]{padding:var(--b-button-condensed-secondary-padding)}.b-button--icon-only[data-v-2e6aa8ec]{padding:var(--b-button-icon-only-padding)}.b-button--icon-only.b-button--condensed[data-v-2e6aa8ec]{padding:var(--b-button-icon-only-condensed-padding)}.b-button--icon-only.b-button--condensed.b-button--secondary[data-v-2e6aa8ec],.b-button--icon-only.b-button--condensed.b-button--secondary-critical[data-v-2e6aa8ec]{padding:var(--b-button-icon-only-secondary-padding-condensed)}.b-button--icon-only.b-button--tertiary[data-v-2e6aa8ec],.b-button--icon-only.b-button--tertiary-critical[data-v-2e6aa8ec]{height:var(--b-button-tertiary-height);padding:var(--b-button-tertiary-padding)}.b-button--icon-only.b-button--secondary[data-v-2e6aa8ec],.b-button--icon-only.b-button--secondary-critical[data-v-2e6aa8ec]{padding:var(--b-button-icon-only-secondary-padding)}.b-button__icon-left[data-v-2e6aa8ec],.b-button__icon-left[data-v-2e6aa8ec] ::slotted(*),.b-button__icon-right[data-v-2e6aa8ec],.b-button__icon-right[data-v-2e6aa8ec] ::slotted(*){display:inline-flex}
+button[data-v-2e6aa8ec]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-2e6aa8ec]:focus-visible{outline:none}.b-button[data-v-2e6aa8ec]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;appearance:none;border-radius:var(--b-button-border-radius);box-shadow:var(--b-button-box-shadow);cursor:pointer;display:inline-flex;gap:8px;height:fit-content;justify-content:center;padding:var(--b-button-padding);text-decoration:none;transition:var(--b-button-transition);transition-property:color,background-color,box-shadow;user-select:none}.b-button[data-v-2e6aa8ec],.b-button[data-v-2e6aa8ec]:before,.b-button[data-v-2e6aa8ec]:after{box-sizing:border-box}.b-button *[data-v-2e6aa8ec],.b-button *[data-v-2e6aa8ec]:before,.b-button *[data-v-2e6aa8ec]:after{box-sizing:border-box}.b-button[data-v-2e6aa8ec] ::-webkit-scrollbar{height:14px;width:14px}.b-button[data-v-2e6aa8ec] ::-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-button[data-v-2e6aa8ec]{height:40px;max-height:40px}.b-legacy-theme .b-button--condensed[data-v-2e6aa8ec]{height:24px;max-height:24px}.b-button__label[data-v-2e6aa8ec]{display:inline-flex;line-height:var(--b-button-line-height);vertical-align:middle;white-space:nowrap}.b-legacy-theme .b-button__label[data-v-2e6aa8ec]{font-weight:600}.b-button[data-v-2e6aa8ec]:focus-visible{animation:outer-ring-default-2e6aa8ec var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);border-radius:var(--b-button-border-radius);outline:none}@keyframes outer-ring-default-2e6aa8ec{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-button:focus-visible.b-button--tertiary[data-v-2e6aa8ec],.b-button:focus-visible.b-button--tertiary-critical[data-v-2e6aa8ec]{border-radius:var(--b-button-tertiary-border-radius)}.b-button:focus-visible.b-button--inverse[data-v-2e6aa8ec]{animation:outer-ring-inverse-2e6aa8ec var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-inverse-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-inverse-2e6aa8ec{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-inverse-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-inverse-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-button--primary[data-v-2e6aa8ec]{background-color:var(--b-button-primary-background-color);color:var(--b-button-primary-color)}.b-button--primary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]{background-color:var(--b-button-primary-background-color-inverse)}.b-button--primary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]{color:var(--b-button-primary-color-inverse)}@media (hover: hover){.b-button--primary[data-v-2e6aa8ec]:hover{background-color:var(--b-button-primary-hover-background-color);color:var(--b-button-primary-color)}.b-button--primary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:hover{background-color:var(--b-button-primary-hover-background-color-inverse)}.b-button--primary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:hover{color:var(--b-button-primary-color-inverse)}}.b-button--primary[data-v-2e6aa8ec]:active{background-color:var(--b-button-primary-active-background-color);color:var(--b-button-primary-color)}.b-button--primary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:active{background-color:var(--b-button-primary-active-background-color-inverse)}.b-button--primary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:active{color:var(--b-button-primary-color-inverse)}.b-button--primary[data-v-2e6aa8ec]:disabled,.b-button--primary.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-primary-disabled-background-color);box-shadow:var(--b-button-primary-disabled-box-shadow);color:var(--b-button-primary-disabled-color)}.b-button--primary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:disabled,.b-button--primary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-primary-disabled-background-color-inverse)}.b-button--primary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:disabled,.b-button--primary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary.b-button--disabled[data-v-2e6aa8ec]{box-shadow:var(--b-button-primary-disabled-box-shadow-inverse)}.b-button--primary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary[data-v-2e6aa8ec]:disabled,.b-button--primary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-primary-disabled-color-inverse)}.b-button--secondary[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-background-color);border:var(--b-button-secondary-border);color:var(--b-button-secondary-color);padding:var(--b-button-secondary-padding)}.b-button--secondary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-background-color-inverse)}.b-button--secondary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]{border:var(--b-button-secondary-border-inverse)}.b-button--secondary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]{color:var(--b-button-secondary-color-inverse)}@media (hover: hover){.b-button--secondary[data-v-2e6aa8ec]:hover{background-color:var(--b-button-secondary-hover-background-color);border:var(--b-button-secondary-hover-border);color:var(--b-button-secondary-hover-color)}.b-button--secondary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:hover{background-color:var(--b-button-secondary-hover-background-color-inverse)}.b-button--secondary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:hover{border:var(--b-button-secondary-hover-border-inverse)}.b-button--secondary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:hover{color:var(--b-button-secondary-hover-color-inverse)}.b-legacy-theme .b-button--secondary[data-v-2e6aa8ec]:hover{box-shadow:var(--b-button-secondary-hover-box-shadow)}}.b-button--secondary[data-v-2e6aa8ec]:active{background-color:var(--b-button-secondary-active-background-color);border:var(--b-button-secondary-active-border);color:var(--b-button-secondary-active-color)}.b-button--secondary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:active{background-color:var(--b-button-secondary-active-background-color-inverse)}.b-button--secondary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:active{border:var(--b-button-secondary-active-border-inverse)}.b-button--secondary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:active{color:var(--b-button-secondary-active-color-inverse)}.b-button--secondary[data-v-2e6aa8ec]:disabled,.b-button--secondary.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-disabled-background-color);border:var(--b-button-secondary-disabled-border);color:var(--b-button-secondary-disabled-color)}.b-button--secondary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:disabled,.b-button--secondary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-disabled-background-color-inverse)}.b-button--secondary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:disabled,.b-button--secondary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary.b-button--disabled[data-v-2e6aa8ec]{border:var(--b-button-secondary-disabled-border-inverse)}.b-button--secondary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary[data-v-2e6aa8ec]:disabled,.b-button--secondary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-secondary-disabled-color-inverse)}.b-button--tertiary[data-v-2e6aa8ec]{color:var(--b-button-tertiary-color);background-color:transparent;box-shadow:var(--b-button-tertiary-box-shadow);height:var(--b-button-tertiary-height);padding:var(--b-button-tertiary-padding)}.b-button--tertiary.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary[data-v-2e6aa8ec]{color:var(--b-button-tertiary-color-inverse)}@media (hover: hover){.b-button--tertiary[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-hover-color);background-color:var(--b-button-tertiary-hover-background-color)}.b-button--tertiary:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-hover-color-inverse)}}.b-button--tertiary[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-active-color);background-color:var(--b-button-tertiary-active-background-color)}.b-button--tertiary:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-active-color-inverse)}.b-button--tertiary[data-v-2e6aa8ec]:disabled,.b-button--tertiary.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-disabled-color);background-color:var(--b-button-tertiary-disabled-background-color)}.b-button--tertiary:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary[data-v-2e6aa8ec]:disabled,.b-button--tertiary.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-disabled-color-inverse)}.b-button--tertiary-with-background[data-v-2e6aa8ec]{color:var(--b-button-tertiary-color)}.b-button--tertiary-with-background.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]{color:var(--b-button-tertiary-color-inverse)}@media (hover: hover){.b-button--tertiary-with-background[data-v-2e6aa8ec]:hover{background-color:var(--b-button-tertiary-with-background-hover-background-color);color:var(--b-button-tertiary-hover-color)}.b-button--tertiary-with-background:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:hover{background-color:var(--b-button-tertiary-with-background-hover-background-color-inverse)}.b-button--tertiary-with-background:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-hover-color-inverse)}}.b-button--tertiary-with-background[data-v-2e6aa8ec]:active{background-color:var(--b-button-tertiary-with-background-active-background-color);color:var(--b-button-tertiary-active-color)}.b-button--tertiary-with-background:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:active{background-color:var(--b-button-tertiary-with-background-active-background-color-inverse)}.b-button--tertiary-with-background:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-active-color-inverse)}.b-button--tertiary-with-background[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-tertiary-with-background-disabled-background-color);color:var(--b-button-tertiary-disabled-color)}.b-button--tertiary-with-background:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-tertiary-with-background-disabled-background-color-inverse)}.b-button--tertiary-with-background:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-disabled-color-inverse)}.b-button--primary-critical[data-v-2e6aa8ec]{background-color:var(--b-button-primary-critical-background-color);color:var(--b-button-primary-critical-color)}.b-button--primary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]{background-color:var(--b-button-primary-critical-background-color-inverse)}.b-button--primary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]{color:var(--b-button-primary-critical-color-inverse)}@media (hover: hover){.b-button--primary-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-primary-critical-hover-background-color);color:var(--b-button-primary-critical-color)}.b-button--primary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-primary-critical-hover-background-color-inverse)}.b-button--primary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-primary-critical-color-inverse)}}.b-button--primary-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-primary-critical-active-background-color);color:var(--b-button-primary-critical-color)}.b-button--primary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-primary-critical-active-background-color-inverse)}.b-button--primary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:active{color:var(--b-button-primary-critical-color-inverse)}.b-button--primary-critical[data-v-2e6aa8ec]:disabled,.b-button--primary-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-primary-critical-disabled-background-color);box-shadow:var(--b-button-primary-critical-disabled-box-shadow);color:var(--b-button-primary-critical-disabled-color)}.b-button--primary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:disabled,.b-button--primary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-primary-critical-disabled-background-color-inverse)}.b-button--primary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:disabled,.b-button--primary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical.b-button--disabled[data-v-2e6aa8ec]{box-shadow:var(--b-button-primary-critical-disabled-box-shadow-inverse)}.b-button--primary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical[data-v-2e6aa8ec]:disabled,.b-button--primary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--primary-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-primary-critical-disabled-color-inverse)}.b-button--secondary-critical[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-critical-background-color);border:var(--b-button-secondary-critical-border);color:var(--b-button-secondary-critical-color);padding:var(--b-button-secondary-padding)}.b-button--secondary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-critical-background-color-inverse)}.b-button--secondary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]{border:var(--b-button-secondary-critical-border-inverse)}.b-button--secondary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]{color:var(--b-button-secondary-critical-color-inverse)}@media (hover: hover){.b-button--secondary-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-secondary-critical-hover-background-color);border:var(--b-button-secondary-critical-hover-border);color:var(--b-button-secondary-critical-hover-color)}.b-button--secondary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-secondary-critical-hover-background-color-inverse)}.b-button--secondary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:hover{border:var(--b-button-secondary-critical-hover-border-inverse)}.b-button--secondary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-secondary-critical-hover-color-inverse)}}.b-button--secondary-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-secondary-critical-active-background-color);border:var(--b-button-secondary-critical-active-border);color:var(--b-button-secondary-critical-active-color)}.b-button--secondary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-secondary-critical-active-background-color-inverse)}.b-button--secondary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:active{border:var(--b-button-secondary-critical-active-border-inverse)}.b-button--secondary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:active{color:var(--b-button-secondary-critical-active-color-inverse)}.b-button--secondary-critical[data-v-2e6aa8ec]:disabled,.b-button--secondary-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-critical-disabled-background-color);border:var(--b-button-secondary-critical-disabled-border);color:var(--b-button-secondary-critical-disabled-color)}.b-button--secondary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:disabled,.b-button--secondary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-secondary-critical-disabled-background-color-inverse)}.b-button--secondary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:disabled,.b-button--secondary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical.b-button--disabled[data-v-2e6aa8ec]{border:var(--b-button-secondary-critical-disabled-border-inverse)}.b-button--secondary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical[data-v-2e6aa8ec]:disabled,.b-button--secondary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--secondary-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-secondary-critical-disabled-color-inverse)}.b-button--tertiary-critical[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-color);background-color:var(--b-button-tertiary-critical-background-color);height:var(--b-button-tertiary-height);padding:var(--b-button-tertiary-padding)}.b-button--tertiary-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-color-inverse)}@media (hover: hover){.b-button--tertiary-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-critical-hover-color);background-color:var(--b-button-tertiary-critical-hover-background-color)}.b-button--tertiary-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-critical-hover-color-inverse)}}.b-button--tertiary-critical[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-critical-active-color);background-color:var(--b-button-tertiary-critical-active-background-color)}.b-button--tertiary-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-critical-active-color-inverse)}.b-button--tertiary-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-disabled-color);background-color:var(--b-button-tertiary-critical-disabled-background-color);box-shadow:unset}.b-button--tertiary-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-disabled-color-inverse)}.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-color)}.b-button--tertiary-with-background-critical.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-color-inverse)}@media (hover: hover){.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-tertiary-with-background-critical-hover-background-color);color:var(--b-button-tertiary-critical-hover-color)}.b-button--tertiary-with-background-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:hover{background-color:var(--b-button-tertiary-with-background-critical-hover-background-color-inverse)}.b-button--tertiary-with-background-critical:hover.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:hover{color:var(--b-button-tertiary-critical-hover-color-inverse)}}.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-tertiary-with-background-critical-active-background-color);color:var(--b-button-tertiary-critical-active-color)}.b-button--tertiary-with-background-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:active{background-color:var(--b-button-tertiary-with-background-critical-active-background-color-inverse)}.b-button--tertiary-with-background-critical:active.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:active{color:var(--b-button-tertiary-critical-active-color-inverse)}.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-tertiary-with-background-critical-disabled-background-color);color:var(--b-button-tertiary-critical-disabled-color)}.b-button--tertiary-with-background-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical.b-button--disabled[data-v-2e6aa8ec]{background-color:var(--b-button-tertiary-with-background-critical-disabled-background-color-inverse)}.b-button--tertiary-with-background-critical:disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background-critical.b-button--disabled.b-button--inverse[data-v-2e6aa8ec],.b-button--inverse .b-button--tertiary-with-background-critical.b-button--disabled[data-v-2e6aa8ec]{color:var(--b-button-tertiary-critical-disabled-color-inverse)}.b-button--tertiary[data-v-2e6aa8ec],.b-button--tertiary-critical[data-v-2e6aa8ec],.b-button--tertiary-with-background[data-v-2e6aa8ec],.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]{text-decoration:var(--b-button-tertiary-text-decoration)}@media (hover: hover){.b-button--tertiary[data-v-2e6aa8ec]:hover,.b-button--tertiary-critical[data-v-2e6aa8ec]:hover,.b-button--tertiary-with-background[data-v-2e6aa8ec]:hover,.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:hover{text-decoration:var(--b-button-tertiary-hover-text-decoration)}}.b-button--tertiary[data-v-2e6aa8ec]:active,.b-button--tertiary-critical[data-v-2e6aa8ec]:active,.b-button--tertiary-with-background[data-v-2e6aa8ec]:active,.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:active{text-decoration:var(--b-button-tertiary-active-text-decoration)}.b-button--tertiary[data-v-2e6aa8ec]:disabled,.b-button--tertiary.b-button--disabled[data-v-2e6aa8ec],.b-button--tertiary-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-critical.b-button--disabled[data-v-2e6aa8ec],.b-button--tertiary-with-background[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background.b-button--disabled[data-v-2e6aa8ec],.b-button--tertiary-with-background-critical[data-v-2e6aa8ec]:disabled,.b-button--tertiary-with-background-critical.b-button--disabled[data-v-2e6aa8ec]{text-decoration:none}.b-button[data-v-2e6aa8ec]:disabled,.b-button.b-button--disabled[data-v-2e6aa8ec]{cursor:not-allowed}.b-button--condensed[data-v-2e6aa8ec]{border-radius:var(--b-button-condensed-border-radius);padding:var(--b-button-condensed-padding)}.b-button--condensed .b-button__label[data-v-2e6aa8ec]{font-size:var(--b-button-condensed-font-size);line-height:var(--b-button-condensed-line-height)}.b-button--condensed .b-button__icon svg[data-v-2e6aa8ec]{height:var(--b-button-condensed-icon-height);width:var(--b-button-condensed-icon-width)}.b-button--condensed.b-button--tertiary[data-v-2e6aa8ec],.b-button--condensed.b-button--tertiary-critical[data-v-2e6aa8ec]{padding:var(--b-button-tertiary-padding)}.b-button--condensed.b-button--secondary[data-v-2e6aa8ec],.b-button--condensed.b-button--secondary-critical[data-v-2e6aa8ec]{padding:var(--b-button-condensed-secondary-padding)}.b-button--icon-only[data-v-2e6aa8ec]{padding:var(--b-button-icon-only-padding)}.b-button--icon-only.b-button--condensed[data-v-2e6aa8ec]{padding:var(--b-button-icon-only-condensed-padding)}.b-button--icon-only.b-button--condensed.b-button--secondary[data-v-2e6aa8ec],.b-button--icon-only.b-button--condensed.b-button--secondary-critical[data-v-2e6aa8ec]{padding:var(--b-button-icon-only-secondary-padding-condensed)}.b-button--icon-only.b-button--tertiary[data-v-2e6aa8ec],.b-button--icon-only.b-button--tertiary-critical[data-v-2e6aa8ec]{height:var(--b-button-tertiary-height);padding:var(--b-button-tertiary-padding)}.b-button--icon-only.b-button--secondary[data-v-2e6aa8ec],.b-button--icon-only.b-button--secondary-critical[data-v-2e6aa8ec]{padding:var(--b-button-icon-only-secondary-padding)}.b-button__icon-left[data-v-2e6aa8ec],.b-button__icon-left[data-v-2e6aa8ec] ::slotted(*),.b-button__icon-right[data-v-2e6aa8ec],.b-button__icon-right[data-v-2e6aa8ec] ::slotted(*){display:inline-flex}