@adyen/bento-vue3 1.24.0 → 1.25.0

package/dist/@types/packages/vue2/src/components/radio-group/radio-group.vue.d.ts

@@ -238,11 +238,11 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
     variant: "horizontal" | "vertical" | BentoRadioGroupVariant;
     disabled: boolean;
     description: string;
-    optional: boolean;
-    readonly: boolean;
     tooltipText: string;
+    optional: boolean;
     hideLabel: boolean;
     errorMessage: string;
+    readonly: boolean;
     hasError: boolean;
     modelValue: import("./components/radio-button").BentoRadioButtonValue;
     formId: string;

package/dist/@types/packages/vue2/src/components/selection-card/components/selection-card-group/selection-card-group.vue.d.ts

@@ -251,13 +251,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     required: boolean;
     variant: BentoSelectionCardGroupVariant;
     disabled: boolean;
-    description: string;
-    optional: boolean;
-    readonly: boolean;
     layout: BentoSelectionCardGroupLayout;
+    description: string;
     tooltipText: string;
+    optional: boolean;
     hideLabel: boolean;
     errorMessage: string;
+    readonly: boolean;
     modelValue: BentoSelectionCardModelValue;
     formId: string;
 }>, {

package/dist/@types/packages/vue2/src/components/textarea/textarea.vue.d.ts

@@ -241,11 +241,11 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     height: string;
     placeholder: string;
     description: string;
-    optional: boolean;
-    readonly: boolean;
     tooltipText: string;
+    optional: boolean;
     errorMessage: string;
     ariaLabel: string;
+    readonly: boolean;
     clearable: boolean;
     characterLimit: number;
     resizable: "none" | "both" | "horizontal" | "vertical" | BentoTextareaResizeOption;

package/dist/@types/packages/vue2/src/components/toggle/toggle.vue.d.ts

@@ -119,8 +119,8 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
 }, {
     value: boolean;
     disabled: boolean;
-    readonly: boolean;
     ariaLabel: string;
+    readonly: boolean;
     labelPosition: "after" | "before" | BentoToggleLabelPosition;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/composables/use-click-outside/index.d.ts

@@ -0,0 +1 @@
+export * from './use-click-outside';

package/dist/@types/packages/vue2/src/index.d.ts

@@ -50,6 +50,7 @@ export * from './components/tutorial';
 export * from './components/typography';
 export * from './composables/use-form-validate';
 export * from './composables/use-bento-toast-controller';
+export * from './composables/use-click-outside';
 export * from './templates/data-grid-template';
 export * from './types';
 export * from './directives';

package/dist/accordion.js

@@ -1,11 +1,11 @@
 import { defineComponent as C, provide as k, toRef as B, openBlock as a, createElementBlock as r, renderSlot as E, ref as b, inject as O, computed as $, watch as s, createVNode as y, unref as e, withCtx as g, createElementVNode as h, createBlock as I, createTextVNode as z, toDisplayString as A, Transition as D, normalizeStyle as H, createCommentVNode as V } from "vue";
 import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as w } from "./chunks/index.51fe0fc2.js";
+import { B as w } from "./chunks/index.11b6dd35.js";
 import { C as R, a as j } from "./chunks/chevron-up.638a9f34.js";
 import { g as x } from "./chunks/unique-id.a2a2b458.js";
 import { o as M } from "./chunks/resize.a041304d.js";
 import { u as U } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index9.css";
+import "./assets/index3.css";
 const S = Symbol("accordion title size injection key"), q = { class: "b-accordion" }, J = {}, K = /* @__PURE__ */ C({
   ...J,
   __name: "accordion",

package/dist/action-bar.js

@@ -1,13 +1,13 @@
 import { onMounted as k, nextTick as B, getCurrentScope as z, onScopeDispose as H, unref as o, getCurrentInstance as x, ref as _, watch as A, watchEffect as U, computed as y, defineComponent as Y, toRefs as K, provide as Q, openBlock as S, createBlock as I, Transition as $, withCtx as w, createElementVNode as V, normalizeClass as q, createElementBlock as J, createVNode as N, createCommentVNode as Z, createTextVNode as X, toDisplayString as W } from "vue";
-import { a as ee } from "./chunks/button.ce5d1f5e.js";
-import { B as te } from "./chunks/index.51fe0fc2.js";
-import { B as ne } from "./chunks/button-actions-with-menu.305991e5.js";
+import { a as ee } from "./chunks/button.de5589fa.js";
+import { B as te } from "./chunks/index.11b6dd35.js";
+import { B as ne } from "./chunks/button-actions-with-menu.a007b034.js";
 import { C as ae } from "./chunks/cross.26509efc.js";
 import { u as oe } from "./chunks/i18n.f7e6533e.js";
-import { P as ie } from "./chunks/index.920cc1ee.js";
-import { B as se } from "./chunks/button-actions.ea025810.js";
+import { P as ie } from "./chunks/index.bab8811d.js";
+import { B as se } from "./chunks/button-actions.adc0a2fe.js";
 import { _ as ce } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index35.css";
+import "./assets/index5.css";
 function P(e) {
   return z() ? (H(e), !0) : !1;
 }

package/dist/alert.js

@@ -1,73 +1,73 @@
-import { openBlock as e, createElementBlock as l, mergeProps as I, toDisplayString as E, createCommentVNode as a, createElementVNode as o, defineComponent as R, computed as r, onMounted as A, resolveComponent as m, normalizeClass as N, createBlock as p, resolveDynamicComponent as M, withCtx as g, renderSlot as v, createVNode as D } from "vue";
-import { B as P, c as Z, a as y } from "./chunks/index.51fe0fc2.js";
-import { a as F } from "./chunks/button.ce5d1f5e.js";
+import { openBlock as s, createElementBlock as l, mergeProps as v, toDisplayString as b, createCommentVNode as a, createElementVNode as o, defineComponent as N, useSlots as A, computed as r, onMounted as M, unref as e, normalizeClass as R, createBlock as C, resolveDynamicComponent as D, withCtx as g, renderSlot as m, createVNode as P } from "vue";
+import { c as Z, a as y, B as I } from "./chunks/index.11b6dd35.js";
+import { a as F } from "./chunks/button.de5589fa.js";
 import { C as U } from "./chunks/cross-small.b85406fe.js";
-import { _ as b } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { C as S } from "./chunks/cross-circle-fill.1abec1a2.js";
-import { C as H } from "./chunks/checkmark-circle-fill.c45a999d.js";
-import { u as O } from "./chunks/use-has-slot.4d98bf29.js";
-import { u as W } from "./chunks/i18n.f7e6533e.js";
-import "./assets/index47.css";
-var d = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.TIP = "tip", t))(d || {}), s = /* @__PURE__ */ ((t) => (t.WARNING = "warning", t.CRITICAL = "critical", t.HIGHLIGHT = "highlight", t.SUCCESS = "success", t))(s || {}), $ = /* @__PURE__ */ ((t) => (t.CLOSE_ALERT = "close-alert", t))($ || {});
-let T = 0;
-const j = {
+import { _ as $ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { C as W } from "./chunks/cross-circle-fill.1abec1a2.js";
+import { C as q } from "./chunks/checkmark-circle-fill.c45a999d.js";
+import { u as z } from "./chunks/use-has-slot.4d98bf29.js";
+import { u as O } from "./chunks/i18n.f7e6533e.js";
+import "./assets/index6.css";
+var p = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.TIP = "tip", t))(p || {}), n = /* @__PURE__ */ ((t) => (t.WARNING = "warning", t.CRITICAL = "critical", t.HIGHLIGHT = "highlight", t.SUCCESS = "success", t))(n || {}), S = /* @__PURE__ */ ((t) => (t.CLOSE_ALERT = "close-alert", t))(S || {});
+let H = 0;
+const Y = {
   beforeCreate() {
-    this.uuid = T.toString(), T += 1;
+    this.uuid = H.toString(), H += 1;
   }
-}, q = { key: 0 }, z = /* @__PURE__ */ o("path", {
+}, j = { key: 0 }, x = /* @__PURE__ */ o("path", {
   fill: "#00112C",
   d: "M15.3501 11.5301L9.9501 2.21008C9.7501 1.87008 9.4701 1.58008 9.1301 1.38008C8.4401 0.980078 7.5601 0.980078 6.8801 1.38008C6.5401 1.58008 6.2501 1.86008 6.0601 2.20008L0.650097 11.5301C0.450097 11.8701 0.350098 12.2601 0.350098 12.6601C0.350098 13.0601 0.450097 13.4501 0.650097 13.7801C0.850097 14.1201 1.1301 14.4101 1.4701 14.6001C1.8101 14.8001 2.2001 14.9001 2.6001 14.9001H13.4001C13.7901 14.9001 14.1801 14.8001 14.5201 14.6001C14.8601 14.4001 15.1501 14.1201 15.3501 13.7801C15.5501 13.4401 15.6501 13.0501 15.6501 12.6501C15.6501 12.2501 15.5501 11.8601 15.3501 11.5201V11.5301ZM7.2501 4.58008H8.7501V9.08008H7.2501V4.58008ZM8.9201 11.7101C8.8401 11.8901 8.7201 12.0501 8.5501 12.1601C8.3801 12.2701 8.1901 12.3301 7.9901 12.3301C7.7201 12.3301 7.4701 12.2301 7.2801 12.0401C7.0901 11.8501 6.9901 11.6001 6.9901 11.3301C6.9901 11.1301 7.0501 10.9401 7.1601 10.7801C7.2701 10.6201 7.4201 10.4901 7.6101 10.4101C7.7901 10.3301 7.9901 10.3201 8.1901 10.3501C8.3901 10.3901 8.5601 10.4801 8.7001 10.6201C8.8401 10.7601 8.9301 10.9401 8.9701 11.1301C9.0101 11.3201 8.9901 11.5201 8.9101 11.7101H8.9201Z"
 }, null, -1);
-function Y(t, n, u, c, i, C) {
-  return e(), l("svg", I({ role: "img" }, t.$attrs, {
+function J(t, h, i, c, d, _) {
+  return s(), l("svg", v({ role: "img" }, t.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    t.$attrs["svg-title"] ? (e(), l("title", q, E(t.$attrs["svg-title"]), 1)) : a("", !0),
-    z
+    t.$attrs["svg-title"] ? (s(), l("title", j, b(t.$attrs["svg-title"]), 1)) : a("", !0),
+    x
   ], 16);
 }
-const w = /* @__PURE__ */ b(j, [["render", Y]]);
-let L = 0;
-const J = {
+const K = /* @__PURE__ */ $(Y, [["render", J]]);
+let w = 0;
+const Q = {
   beforeCreate() {
-    this.uuid = L.toString(), L += 1;
+    this.uuid = w.toString(), w += 1;
   }
-}, K = { key: 0 }, Q = ["clip-path"], X = /* @__PURE__ */ o("path", {
+}, X = { key: 0 }, t1 = ["clip-path"], e1 = /* @__PURE__ */ o("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"
-}, null, -1), x = [
-  X
-], t1 = ["id"], e1 = /* @__PURE__ */ o("rect", {
+}, null, -1), s1 = [
+  e1
+], o1 = ["id"], i1 = /* @__PURE__ */ o("rect", {
   width: "16",
   height: "16",
   fill: "#fff"
-}, null, -1), o1 = [
-  e1
+}, null, -1), n1 = [
+  i1
 ];
-function s1(t, n, u, c, i, C) {
-  return e(), l("svg", I({ role: "img" }, t.$attrs, {
+function r1(t, h, i, c, d, _) {
+  return s(), l("svg", v({ role: "img" }, t.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    t.$attrs["svg-title"] ? (e(), l("title", K, E(t.$attrs["svg-title"]), 1)) : a("", !0),
+    t.$attrs["svg-title"] ? (s(), l("title", X, b(t.$attrs["svg-title"]), 1)) : a("", !0),
     o("g", {
       "clip-path": "url(#uia-icons-16-info_filled__a" + t.uuid + ")"
-    }, x, 8, Q),
+    }, s1, 8, t1),
     o("defs", null, [
       o("clipPath", {
         id: "uia-icons-16-info_filled__a" + t.uuid
-      }, o1, 8, t1)
+      }, n1, 8, o1)
     ])
   ], 16);
 }
-const V = /* @__PURE__ */ b(J, [["render", s1]]), k = {
+const a1 = /* @__PURE__ */ $(Q, [["render", r1]]), T = {
   "en-US": {
     highlightIcon: "Highlight icon",
     successIcon: "Success icon",
@@ -75,150 +75,110 @@ const V = /* @__PURE__ */ b(J, [["render", s1]]), k = {
     warningIcon: "Warning icon",
     close: "Close"
   }
-}, n1 = R({
-  i18n: { messages: k },
-  name: "bento-alert",
-  components: { CrossSmall: U, BentoButton: F, Warning: w, CrossCircle: S, CheckedCircle: H, Info: V, BentoTypography: P },
+}, l1 = ["role"], c1 = { class: "b-alert__icon" }, d1 = { class: "b-alert__content" }, u1 = {
+  key: 2,
+  class: "b-alert__actions",
+  "data-testid": "alert-actions"
+}, _1 = {
+  i18n: { messages: T },
+  name: "bento-alert"
+}, C1 = /* @__PURE__ */ N({
+  ..._1,
   props: {
-    /**
-     * Adds a close button on the right side of the alert
-     */
-    closeButton: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Type of a alert; set a distinctive icon and color. Defaults to highlight.
-     * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING
-     */
-    type: {
-      type: String,
-      default: s.HIGHLIGHT,
-      validator: (t) => Object.values(s).includes(t)
-    },
-    /**
-     * Variant for the alert
-     * @values DEFAULT, TIP
-     */
-    variant: {
-      type: String,
-      default: d.DEFAULT,
-      validator: (t) => Object.values(d).includes(t)
-    }
+    closeButton: { type: Boolean, default: !1 },
+    type: { default: n.HIGHLIGHT },
+    variant: { default: p.DEFAULT }
   },
-  emits: [$.CLOSE_ALERT],
-  setup(t, { slots: n, emit: u }) {
-    const { t: c } = W({ messages: k }), i = r(() => t.variant === d.TIP), C = r(() => ({
-      [`b-alert--${t.type}`]: t.type,
-      [`b-alert--${d.TIP}`]: i.value
-    })), _ = r(() => c(`${t.type}Icon`)), h = r(() => {
-      switch (t.type) {
-        case s.CRITICAL:
-          return S;
-        case s.SUCCESS:
-          return H;
-        case s.WARNING:
-          return w;
-        case s.HIGHLIGHT:
+  emits: ["close-alert"],
+  setup(t, { emit: h }) {
+    const i = t, c = A(), d = z(c), { t: _ } = O({ messages: T }), u = r(() => i.variant === p.TIP), L = r(() => ({
+      [`b-alert--${i.type}`]: i.type,
+      [`b-alert--${p.TIP}`]: u.value
+    })), V = r(() => _(`${i.type}Icon`)), k = r(() => {
+      switch (i.type) {
+        case n.CRITICAL:
+          return W;
+        case n.SUCCESS:
+          return q;
+        case n.WARNING:
+          return K;
+        case n.HIGHLIGHT:
         default:
-          return V;
+          return a1;
       }
-    }), f = r(() => ({
+    }), E = r(() => ({
       el: Z.DIV,
-      variant: i.value ? y.CAPTION : y.BODY,
+      variant: u.value ? y.CAPTION : y.BODY,
       wide: !0
-    })), B = r(() => t.type === s.HIGHLIGHT ? "status" : "alert"), G = () => {
-      u($.CLOSE_ALERT);
+    })), B = r(() => i.type === n.HIGHLIGHT ? "status" : "alert"), G = () => {
+      h(S.CLOSE_ALERT);
     };
-    return A(() => {
-      if (!n.default && !n.description)
+    return M(() => {
+      if (!c.default && !c.description)
         throw new Error("Alert Component requires a title or a description");
-    }), {
-      // Values
-      alertConditionalClasses: C,
-      computedRole: B,
-      descriptionTypography: f,
-      iconComponent: h,
-      iconSvgTitle: _,
-      isTipVariant: i,
-      // Methods
-      onCloseButtonClick: G,
-      hasSlot: O(n),
-      t: c,
-      // Enums
-      BentoTypographyVariant: y
-    };
-  }
-});
-const i1 = ["role"], r1 = { class: "b-alert__icon" }, a1 = { class: "b-alert__content" }, l1 = {
-  key: 2,
-  class: "b-alert__actions",
-  "data-testid": "alert-actions"
-};
-function c1(t, n, u, c, i, C) {
-  const _ = m("bento-typography"), h = m("cross-small"), f = m("bento-button");
-  return e(), l("div", {
-    class: "b-alert",
-    role: t.computedRole
-  }, [
-    o("div", {
-      class: N(["b-alert__inner-container", t.alertConditionalClasses])
+    }), (f, p1) => (s(), l("div", {
+      class: "b-alert",
+      role: e(B)
     }, [
-      o("div", r1, [
-        (e(), p(M(t.iconComponent), {
-          "aria-hidden": "true",
-          "svg-title": t.iconSvgTitle
-        }, null, 8, ["svg-title"]))
-      ]),
-      o("div", a1, [
-        t.hasSlot("default") && !t.isTipVariant ? (e(), p(_, {
+      o("div", {
+        class: R(["b-alert__inner-container", e(L)])
+      }, [
+        o("div", c1, [
+          (s(), C(D(e(k)), {
+            "aria-hidden": "true",
+            "svg-title": e(V)
+          }, null, 8, ["svg-title"]))
+        ]),
+        o("div", d1, [
+          e(d)("default") && !e(u) ? (s(), C(e(I), {
+            key: 0,
+            class: "b-alert__title",
+            el: "div",
+            variant: "body",
+            strongest: "",
+            wide: ""
+          }, {
+            default: g(() => [
+              m(f.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          })) : a("", !0),
+          e(d)("description") ? (s(), C(e(I), v({
+            key: 1,
+            class: "b-alert__description"
+          }, e(E), { "data-testid": "alert-description" }), {
+            default: g(() => [
+              m(f.$slots, "description", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 16)) : a("", !0),
+          e(d)("actions") && !e(u) ? (s(), l("div", u1, [
+            m(f.$slots, "actions", {}, void 0, !0)
+          ])) : a("", !0)
+        ]),
+        t.closeButton && !e(u) ? (s(), C(e(F), {
           key: 0,
-          class: "b-alert__title",
-          el: "div",
-          variant: "body",
-          strongest: "",
-          wide: ""
+          class: "b-alert__close-button",
+          variant: "tertiary",
+          type: "button",
+          onClick: G
         }, {
           default: g(() => [
-            v(t.$slots, "default", {}, void 0, !0)
-          ]),
-          _: 3
-        })) : a("", !0),
-        t.hasSlot("description") ? (e(), p(_, I({
-          key: 1,
-          class: "b-alert__description"
-        }, t.descriptionTypography, { "data-testid": "alert-description" }), {
-          default: g(() => [
-            v(t.$slots, "description", {}, void 0, !0)
+            P(e(U), {
+              "svg-title": e(_)("close")
+            }, null, 8, ["svg-title"])
           ]),
-          _: 3
-        }, 16)) : a("", !0),
-        t.hasSlot("actions") && !t.isTipVariant ? (e(), l("div", l1, [
-          v(t.$slots, "actions", {}, void 0, !0)
-        ])) : a("", !0)
-      ]),
-      t.closeButton && !t.isTipVariant ? (e(), p(f, {
-        key: 0,
-        class: "b-alert__close-button",
-        variant: "tertiary",
-        type: "button",
-        onClick: t.onCloseButtonClick
-      }, {
-        default: g(() => [
-          D(h, {
-            "svg-title": t.t("close")
-          }, null, 8, ["svg-title"])
-        ]),
-        _: 1
-      }, 8, ["onClick"])) : a("", !0)
-    ], 2)
-  ], 8, i1);
-}
-const v1 = /* @__PURE__ */ b(n1, [["render", c1], ["__scopeId", "data-v-549bc4f7"]]);
+          _: 1
+        })) : a("", !0)
+      ], 2)
+    ], 8, l1));
+  }
+});
+const w1 = /* @__PURE__ */ $(C1, [["__scopeId", "data-v-5c5a81b8"]]);
 export {
-  v1 as BentoAlert,
-  $ as BentoAlertEvent,
-  s as BentoAlertTypeOption,
-  d as BentoAlertVariant
+  w1 as BentoAlert,
+  S as BentoAlertEvent,
+  n as BentoAlertTypeOption,
+  p as BentoAlertVariant
 };
 //# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../vue2/src/components/alert/alert.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/warning-filled.vue","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../vue2/src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" 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><path fill=\"#00112C\" d=\"M15.3501 11.5301L9.9501 2.21008C9.7501 1.87008 9.4701 1.58008 9.1301 1.38008C8.4401 0.980078 7.5601 0.980078 6.8801 1.38008C6.5401 1.58008 6.2501 1.86008 6.0601 2.20008L0.650097 11.5301C0.450097 11.8701 0.350098 12.2601 0.350098 12.6601C0.350098 13.0601 0.450097 13.4501 0.650097 13.7801C0.850097 14.1201 1.1301 14.4101 1.4701 14.6001C1.8101 14.8001 2.2001 14.9001 2.6001 14.9001H13.4001C13.7901 14.9001 14.1801 14.8001 14.5201 14.6001C14.8601 14.4001 15.1501 14.1201 15.3501 13.7801C15.5501 13.4401 15.6501 13.0501 15.6501 12.6501C15.6501 12.2501 15.5501 11.8601 15.3501 11.5201V11.5301ZM7.2501 4.58008H8.7501V9.08008H7.2501V4.58008ZM8.9201 11.7101C8.8401 11.8901 8.7201 12.0501 8.5501 12.1601C8.3801 12.2701 8.1901 12.3301 7.9901 12.3301C7.7201 12.3301 7.4701 12.2301 7.2801 12.0401C7.0901 11.8501 6.9901 11.6001 6.9901 11.3301C6.9901 11.1301 7.0501 10.9401 7.1601 10.7801C7.2701 10.6201 7.4201 10.4901 7.6101 10.4101C7.7901 10.3301 7.9901 10.3201 8.1901 10.3501C8.3901 10.3901 8.5601 10.4801 8.7001 10.6201C8.8401 10.7601 8.9301 10.9401 8.9701 11.1301C9.0101 11.3201 8.9901 11.5201 8.9101 11.7101H8.9201Z\"/></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","\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 lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-alert',\n        components: { CrossSmall, BentoButton, Warning, CrossCircle, CheckedCircle, Info, BentoTypography },\n        props: {\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n             * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n             */\n            type: {\n                type: String as PropType<BentoAlertTypeOption | `${BentoAlertTypeOption}`>,\n                default: BentoAlertTypeOption.HIGHLIGHT,\n                validator: (value: BentoAlertTypeOption) => Object.values(BentoAlertTypeOption).includes(value),\n            },\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant: {\n                type: String as PropType<BentoAlertVariant | `${BentoAlertVariant}`>,\n                default: BentoAlertVariant.DEFAULT,\n                validator: (value: BentoAlertVariant) => Object.values(BentoAlertVariant).includes(value),\n            },\n        },\n        emits: [BentoAlertEvent.CLOSE_ALERT],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n            const alertConditionalClasses = computed(() => ({\n                [`b-alert--${props.type}`]: props.type,\n                [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n            }));\n\n            const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n            const iconComponent = computed(() => {\n                switch (props.type) {\n                    case BentoAlertTypeOption.CRITICAL:\n                        return CrossCircle;\n                    case BentoAlertTypeOption.SUCCESS:\n                        return CheckedCircle;\n                    case BentoAlertTypeOption.WARNING:\n                        return Warning;\n                    case BentoAlertTypeOption.HIGHLIGHT:\n                    default:\n                        return Info;\n                }\n            });\n\n            const descriptionTypography = computed(() => ({\n                el: BentoTypographyElement.DIV,\n                variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n                wide: true,\n            }));\n\n            const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n            const onCloseButtonClick = () => {\n                emit(BentoAlertEvent.CLOSE_ALERT);\n            };\n\n            onMounted(() => {\n                if (!slots.default && !slots.description) {\n                    throw new Error('Alert Component requires a title or a description');\n                }\n            });\n\n            return {\n                // Values\n                alertConditionalClasses,\n                computedRole,\n                descriptionTypography,\n                iconComponent,\n                iconSvgTitle,\n                isTipVariant,\n\n                // Methods\n                onCloseButtonClick,\n                hasSlot: useHasSlot(slots),\n                t,\n\n                // Enums\n                BentoTypographyVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid$1","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1$2","toDisplayString","uuid","_hoisted_1$1","_sfc_main","defineComponent","messages","CrossIcon","BentoButton","Warning","CrossCircleFillIcon","CheckedCircle","Info","BentoTypography","value","props","slots","emit","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","onMounted","useHasSlot","_hoisted_1","createBlock","resolveDynamicComponent","_component_bento_typography","createCommentVNode","withCtx","_hoisted_4","createVNode","_component_cross_small"],"mappings":"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","x_google_ignoreList":[1,2]}
+{"version":3,"file":"alert.js","sources":["../../vue2/src/components/alert/alert.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/warning-filled.vue","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../vue2/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><path fill=\"#00112C\" d=\"M15.3501 11.5301L9.9501 2.21008C9.7501 1.87008 9.4701 1.58008 9.1301 1.38008C8.4401 0.980078 7.5601 0.980078 6.8801 1.38008C6.5401 1.58008 6.2501 1.86008 6.0601 2.20008L0.650097 11.5301C0.450097 11.8701 0.350098 12.2601 0.350098 12.6601C0.350098 13.0601 0.450097 13.4501 0.650097 13.7801C0.850097 14.1201 1.1301 14.4101 1.4701 14.6001C1.8101 14.8001 2.2001 14.9001 2.6001 14.9001H13.4001C13.7901 14.9001 14.1801 14.8001 14.5201 14.6001C14.8601 14.4001 15.1501 14.1201 15.3501 13.7801C15.5501 13.4401 15.6501 13.0501 15.6501 12.6501C15.6501 12.2501 15.5501 11.8601 15.3501 11.5201V11.5301ZM7.2501 4.58008H8.7501V9.08008H7.2501V4.58008ZM8.9201 11.7101C8.8401 11.8901 8.7201 12.0501 8.5501 12.1601C8.3801 12.2701 8.1901 12.3301 7.9901 12.3301C7.7201 12.3301 7.4701 12.2301 7.2801 12.0401C7.0901 11.8501 6.9901 11.6001 6.9901 11.3301C6.9901 11.1301 7.0501 10.9401 7.1601 10.7801C7.2701 10.6201 7.4201 10.4901 7.6101 10.4101C7.7901 10.3301 7.9901 10.3201 8.1901 10.3501C8.3901 10.3901 8.5601 10.4801 8.7001 10.6201C8.8401 10.7601 8.9301 10.9401 8.9701 11.1301C9.0101 11.3201 8.9901 11.5201 8.9101 11.7101H8.9201Z\"/></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","\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$1","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1$2","toDisplayString","uuid","_hoisted_1$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckedCircle","Warning","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;AChBR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARkM,MAAA;AAAA,EAAe,GAAA;;;AAAzN,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAG,GAAAC,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;;;;ACGjI,IAAAG,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARkQ,MAAA;AAAA,EAAe,GAAA;;;;EAAijC,OAAA;AAAA,EAAW,QAAA;AAAA,EAAY,MAAA;;;;;AAAj2C,SAAAN,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAM,GAAAF,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;MAAuE,aAAA,qCAAAA,EAAA,OAAA;AAAA;;;QAAklC,IAAA,gCAAAA,EAAA;AAAA;;;;;;;;;;;;;;;;GCmK1xCK,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBApGAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAmCA,EAAA,GAAAI,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAEAO,IAAAC,EAAA,MAAAC,EAAA,YAAAzB,EAAA,GAAA,GAEA0B,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,MAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAzB,EAAA,KAAA,GAAAuB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,UAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAvB,EAAA;AAEZ,iBAAA2B;AAAA,QAAO,KAAA3B,EAAA;AAEP,iBAAA4B;AAAA,QAAO,KAAA5B,EAAA;AAEP,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAAA,QACe;AAEtB,iBAAA8B;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,SAAAvB,EAAA,YAAA,WAAA,OAAA,GAEAmC,IAAA,MAAA;AACI,MAAAC,EAAAlC,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAmC,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1,2]}

package/dist/assets/base-modal.css

@@ -1 +1 @@
-.b-modal-page[data-v-85e34205]{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-85e34205],.b-modal-page[data-v-85e34205]:before,.b-modal-page[data-v-85e34205]:after{box-sizing:border-box}.b-modal-page *[data-v-85e34205],.b-modal-page *[data-v-85e34205]:before,.b-modal-page *[data-v-85e34205]:after{box-sizing:border-box}.b-modal-page[data-v-85e34205] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-page[data-v-85e34205] ::-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-85e34205] .b-dialog-page__header{flex:0}.b-modal-page__header-container[data-v-85e34205],.b-modal-page__actions-container[data-v-85e34205]{position:sticky;width:100%}.b-modal-page__header-container[data-v-85e34205]{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-85e34205]{padding:var(--b-modal-actions-container-padding)}.b-modal-page__header[data-v-85e34205]{min-height:var(--b-modal-header-min-height)}.b-modal-page[data-v-85e34205] .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-85e34205]{display:inline-block;padding:var(--b-modal-content-padding);width:100%}.b-modal-page__content--with-header[data-v-85e34205]{padding-top:0}.b-modal-page__content--with-actions[data-v-85e34205]{padding-bottom:0}.b-modal-page__grid[data-v-85e34205]>: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-85e34205]>:nth-child(2){padding:var(--b-modal-container-column-layout-padding);padding-right:0}.b-modal-base[data-v-c4da780c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-modal-base[data-v-c4da780c],.b-modal-base[data-v-c4da780c]:before,.b-modal-base[data-v-c4da780c]:after{box-sizing:border-box}.b-modal-base *[data-v-c4da780c],.b-modal-base *[data-v-c4da780c]:before,.b-modal-base *[data-v-c4da780c]:after{box-sizing:border-box}.b-modal-base[data-v-c4da780c] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-base[data-v-c4da780c] ::-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-c4da780c]::backdrop{background-color:#99a0ab}.b-modal-base__container[data-v-c4da780c]{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-c4da780c]{animation:fade-in-ux2hd2t-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear),enter-ux2hd2t-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-enter),scale-up-ux2hd2t-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-in-ux2hd2t-c4da780c{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ux2hd2t-c4da780c{0%{scale:1}to{scale:1}}@keyframes enter-ux2hd2t-c4da780c{0%{translate:0 24px}to{translate:0 0}}.b-modal-base__container[open][data-v-c4da780c]::backdrop{animation:fade-in-ux2hd39-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-in-ux2hd39-c4da780c{0%{opacity:0}to{opacity:.5}}.b-modal-base__container--hide[open][data-v-c4da780c]{animation:fade-out-ux2hd49-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear),exit-ux2hd49-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-exit),scale-down-ux2hd49-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-out-ux2hd49-c4da780c{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ux2hd49-c4da780c{0%{scale:1}to{scale:1}}@keyframes exit-ux2hd49-c4da780c{0%{translate:0 0}to{translate:0 24px}}.b-modal-base__container--hide[open][data-v-c4da780c]::backdrop{animation:fade-out-ux2hd57-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-out-ux2hd57-c4da780c{0%{opacity:.5}to{opacity:0}}.b-modal-base__container[data-v-c4da780c]::backdrop{background-color:var(--b-modal-backdrop-background-color, #00112c);opacity:.5}.b-modal-base__container--animation[data-v-c4da780c]{overflow:hidden;transition:height ease var(--b-modal-animation-duration, .15s)}.b-modal-base__container--small[data-v-c4da780c]{width:480px}.b-modal-base__container--medium[data-v-c4da780c]{width:600px}.b-modal-base__container--large[data-v-c4da780c]{width:800px}.b-modal-base__close-button[data-v-c4da780c]{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-85e34205]{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-85e34205],.b-modal-page[data-v-85e34205]:before,.b-modal-page[data-v-85e34205]:after{box-sizing:border-box}.b-modal-page *[data-v-85e34205],.b-modal-page *[data-v-85e34205]:before,.b-modal-page *[data-v-85e34205]:after{box-sizing:border-box}.b-modal-page[data-v-85e34205] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-page[data-v-85e34205] ::-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-85e34205] .b-dialog-page__header{flex:0}.b-modal-page__header-container[data-v-85e34205],.b-modal-page__actions-container[data-v-85e34205]{position:sticky;width:100%}.b-modal-page__header-container[data-v-85e34205]{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-85e34205]{padding:var(--b-modal-actions-container-padding)}.b-modal-page__header[data-v-85e34205]{min-height:var(--b-modal-header-min-height)}.b-modal-page[data-v-85e34205] .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-85e34205]{display:inline-block;padding:var(--b-modal-content-padding);width:100%}.b-modal-page__content--with-header[data-v-85e34205]{padding-top:0}.b-modal-page__content--with-actions[data-v-85e34205]{padding-bottom:0}.b-modal-page__grid[data-v-85e34205]>: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-85e34205]>:nth-child(2){padding:var(--b-modal-container-column-layout-padding);padding-right:0}.b-modal-base[data-v-c4da780c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-modal-base[data-v-c4da780c],.b-modal-base[data-v-c4da780c]:before,.b-modal-base[data-v-c4da780c]:after{box-sizing:border-box}.b-modal-base *[data-v-c4da780c],.b-modal-base *[data-v-c4da780c]:before,.b-modal-base *[data-v-c4da780c]:after{box-sizing:border-box}.b-modal-base[data-v-c4da780c] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-base[data-v-c4da780c] ::-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-c4da780c]::backdrop{background-color:#99a0ab}.b-modal-base__container[data-v-c4da780c]{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-c4da780c]{animation:fade-in-ufwe45w-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear),enter-ufwe45w-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-enter),scale-up-ufwe45w-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-in-ufwe45w-c4da780c{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ufwe45w-c4da780c{0%{scale:1}to{scale:1}}@keyframes enter-ufwe45w-c4da780c{0%{translate:0 24px}to{translate:0 0}}.b-modal-base__container[open][data-v-c4da780c]::backdrop{animation:fade-in-ufwe46d-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-in-ufwe46d-c4da780c{0%{opacity:0}to{opacity:.5}}.b-modal-base__container--hide[open][data-v-c4da780c]{animation:fade-out-ufwe46l-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear),exit-ufwe46l-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-exit),scale-down-ufwe46l-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-out-ufwe46l-c4da780c{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ufwe46l-c4da780c{0%{scale:1}to{scale:1}}@keyframes exit-ufwe46l-c4da780c{0%{translate:0 0}to{translate:0 24px}}.b-modal-base__container--hide[open][data-v-c4da780c]::backdrop{animation:fade-out-ufwe46n-c4da780c var(--b-modal-animation-duration, .15s) var(--b-animation-easing-linear)}@keyframes fade-out-ufwe46n-c4da780c{0%{opacity:.5}to{opacity:0}}.b-modal-base__container[data-v-c4da780c]::backdrop{background-color:var(--b-modal-backdrop-background-color, #00112c);opacity:.5}.b-modal-base__container--animation[data-v-c4da780c]{overflow:hidden;transition:height ease var(--b-modal-animation-duration, .15s)}.b-modal-base__container--small[data-v-c4da780c]{width:480px}.b-modal-base__container--medium[data-v-c4da780c]{width:600px}.b-modal-base__container--large[data-v-c4da780c]{width:800px}.b-modal-base__close-button[data-v-c4da780c]{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/dialog-page.css

@@ -1 +1 @@
-svg.ui-assets-icons-16{display:inline-flex;flex-shrink:0}svg.ui-assets-icons-16,svg.ui-assets-icons-16 *{fill:currentcolor}.b-dialog-page[data-v-af5820fe]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;position:absolute;width:100%}.b-dialog-page[data-v-af5820fe],.b-dialog-page[data-v-af5820fe]:before,.b-dialog-page[data-v-af5820fe]:after{box-sizing:border-box}.b-dialog-page *[data-v-af5820fe],.b-dialog-page *[data-v-af5820fe]:before,.b-dialog-page *[data-v-af5820fe]:after{box-sizing:border-box}.b-dialog-page[data-v-af5820fe] ::-webkit-scrollbar{height:14px;width:14px}.b-dialog-page[data-v-af5820fe] ::-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-dialog-page>div[data-v-af5820fe]:first-child{border-top-left-radius:var(--b-dialog-page-border-radius);border-top-right-radius:var(--b-dialog-page-border-radius)}.b-dialog-page>div[data-v-af5820fe]:last-child{border-bottom-left-radius:var(--b-dialog-page-border-radius);border-bottom-right-radius:var(--b-dialog-page-border-radius)}.b-dialog-page__header[data-v-af5820fe]{border-bottom:var(--b-dialog-page-header-border-bottom);display:flex;flex:0 0 64px}.b-dialog-page__header--with-border[data-v-af5820fe]{border-bottom:var(--b-dialog-page-header-with-border-border-bottom)}.b-dialog-page__back-button[data-v-af5820fe]{align-self:center;display:flex;padding-left:var(--b-dialog-page-back-button-padding-left);z-index:var(--b-dialog-page-back-button-z-index)}.b-dialog-page__content[data-v-af5820fe]{flex-grow:1;overflow:auto}.b-dialog-page__footer[data-v-af5820fe]{border-top:var(--b-dialog-page-footer-border-top)}.b-dialog-page__footer--with-border[data-v-af5820fe]{border-top:var(--b-dialog-page-footer-with-border-border-top)}.b-dialog-page__animation--level-deeper-enter-active[data-v-af5820fe]{animation:fade-in-ux2hcz5-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-ux2hcz5-af5820fe{0%{opacity:0}to{opacity:1}}.b-dialog-page__animation--level-deeper-enter-active .b-dialog-page__header[data-v-af5820fe]{animation:enter-ux2hczd-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-ux2hczd-af5820fe{0%{translate:120px 0}to{translate:0 0}}.b-dialog-page__animation--level-deeper-enter-active .b-dialog-page__content[data-v-af5820fe],.b-dialog-page__animation--level-deeper-enter-active .b-dialog-page__footer[data-v-af5820fe]{animation:enter-ux2hd09-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-ux2hd09-af5820fe{0%{translate:176px 0}to{translate:0 0}}.b-dialog-page__animation--level-deeper-enter-active .b-dialog-page__content[data-v-af5820fe]{scrollbar-color:transparent transparent}.b-dialog-page__animation--level-deeper-leave-active[data-v-af5820fe]{animation:fade-out-ux2hd0h-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear),exit-ux2hd0h-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-exit),scale-down-ux2hd0h-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-ux2hd0h-af5820fe{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ux2hd0h-af5820fe{0%{scale:1}to{scale:1}}@keyframes exit-ux2hd0h-af5820fe{0%{translate:0 0}to{translate:-176px 0}}.b-dialog-page__animation--level-deeper-leave-active .b-dialog-page__content[data-v-af5820fe]{scrollbar-color:transparent transparent}.b-dialog-page__animation--level-deeper-leave-active .b-dialog-page__footer[data-v-af5820fe]{visibility:hidden}.b-dialog-page__animation--level-upper-enter-active[data-v-af5820fe]{animation:fade-in-ux2hd0w-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-ux2hd0w-af5820fe{0%{opacity:0}to{opacity:1}}.b-dialog-page__animation--level-upper-enter-active .b-dialog-page__header[data-v-af5820fe]{animation:enter-ux2hd10-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-ux2hd10-af5820fe{0%{translate:-120px 0}to{translate:0 0}}.b-dialog-page__animation--level-upper-enter-active .b-dialog-page__content[data-v-af5820fe],.b-dialog-page__animation--level-upper-enter-active .b-dialog-page__footer[data-v-af5820fe]{animation:enter-ux2hd1r-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-ux2hd1r-af5820fe{0%{translate:-176px 0}to{translate:0 0}}.b-dialog-page__animation--level-upper-enter-active .b-dialog-page__content[data-v-af5820fe]{scrollbar-color:transparent transparent}.b-dialog-page__animation--level-upper-leave-active[data-v-af5820fe]{animation:fade-out-ux2hd28-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear),exit-ux2hd28-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-exit),scale-down-ux2hd28-af5820fe var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-ux2hd28-af5820fe{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ux2hd28-af5820fe{0%{scale:1}to{scale:1}}@keyframes exit-ux2hd28-af5820fe{0%{translate:0 0}to{translate:176px 0}}.b-dialog-page__animation--level-upper-leave-active .b-dialog-page__content[data-v-af5820fe]{scrollbar-color:transparent transparent}.b-dialog-page__animation--level-upper-leave-active .b-dialog-page__footer[data-v-af5820fe]{visibility:hidden}
+svg.ui-assets-icons-16{display:inline-flex;flex-shrink:0}svg.ui-assets-icons-16,svg.ui-assets-icons-16 *{fill:currentcolor}.b-dialog-page[data-v-d4bd25b0]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;position:absolute;width:100%}.b-dialog-page[data-v-d4bd25b0],.b-dialog-page[data-v-d4bd25b0]:before,.b-dialog-page[data-v-d4bd25b0]:after{box-sizing:border-box}.b-dialog-page *[data-v-d4bd25b0],.b-dialog-page *[data-v-d4bd25b0]:before,.b-dialog-page *[data-v-d4bd25b0]:after{box-sizing:border-box}.b-dialog-page[data-v-d4bd25b0] ::-webkit-scrollbar{height:14px;width:14px}.b-dialog-page[data-v-d4bd25b0] ::-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-dialog-page>div[data-v-d4bd25b0]:first-child{border-top-left-radius:var(--b-dialog-page-border-radius);border-top-right-radius:var(--b-dialog-page-border-radius)}.b-dialog-page>div[data-v-d4bd25b0]:last-child{border-bottom-left-radius:var(--b-dialog-page-border-radius);border-bottom-right-radius:var(--b-dialog-page-border-radius)}.b-dialog-page__header[data-v-d4bd25b0]{border-bottom:var(--b-dialog-page-header-border-bottom);display:flex;flex:0 0 64px}.b-dialog-page__header--with-border[data-v-d4bd25b0]{border-bottom:var(--b-dialog-page-header-with-border-border-bottom)}.b-dialog-page__back-button[data-v-d4bd25b0]{align-self:center;display:flex;padding-left:var(--b-dialog-page-back-button-padding-left);z-index:var(--b-dialog-page-back-button-z-index)}.b-dialog-page__content[data-v-d4bd25b0]{flex-grow:1;overflow:auto}.b-dialog-page__footer[data-v-d4bd25b0]{border-top:var(--b-dialog-page-footer-border-top)}.b-dialog-page__footer--with-border[data-v-d4bd25b0]{border-top:var(--b-dialog-page-footer-with-border-border-top)}.b-dialog-page__animation--level-deeper-enter-active[data-v-d4bd25b0]{animation:fade-in-ufwe427-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-ufwe427-d4bd25b0{0%{opacity:0}to{opacity:1}}.b-dialog-page__animation--level-deeper-enter-active .b-dialog-page__header[data-v-d4bd25b0]{animation:enter-ufwe42e-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-ufwe42e-d4bd25b0{0%{translate:120px 0}to{translate:0 0}}.b-dialog-page__animation--level-deeper-enter-active .b-dialog-page__content[data-v-d4bd25b0],.b-dialog-page__animation--level-deeper-enter-active .b-dialog-page__footer[data-v-d4bd25b0]{animation:enter-ufwe43d-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-ufwe43d-d4bd25b0{0%{translate:176px 0}to{translate:0 0}}.b-dialog-page__animation--level-deeper-enter-active .b-dialog-page__content[data-v-d4bd25b0]{scrollbar-color:transparent transparent}.b-dialog-page__animation--level-deeper-leave-active[data-v-d4bd25b0]{animation:fade-out-ufwe43p-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear),exit-ufwe43p-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-exit),scale-down-ufwe43p-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-ufwe43p-d4bd25b0{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ufwe43p-d4bd25b0{0%{scale:1}to{scale:1}}@keyframes exit-ufwe43p-d4bd25b0{0%{translate:0 0}to{translate:-176px 0}}.b-dialog-page__animation--level-deeper-leave-active .b-dialog-page__content[data-v-d4bd25b0]{scrollbar-color:transparent transparent}.b-dialog-page__animation--level-deeper-leave-active .b-dialog-page__footer[data-v-d4bd25b0]{visibility:hidden}.b-dialog-page__animation--level-upper-enter-active[data-v-d4bd25b0]{animation:fade-in-ufwe43u-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-ufwe43u-d4bd25b0{0%{opacity:0}to{opacity:1}}.b-dialog-page__animation--level-upper-enter-active .b-dialog-page__header[data-v-d4bd25b0]{animation:enter-ufwe44a-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-ufwe44a-d4bd25b0{0%{translate:-120px 0}to{translate:0 0}}.b-dialog-page__animation--level-upper-enter-active .b-dialog-page__content[data-v-d4bd25b0],.b-dialog-page__animation--level-upper-enter-active .b-dialog-page__footer[data-v-d4bd25b0]{animation:enter-ufwe44g-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-ufwe44g-d4bd25b0{0%{translate:-176px 0}to{translate:0 0}}.b-dialog-page__animation--level-upper-enter-active .b-dialog-page__content[data-v-d4bd25b0]{scrollbar-color:transparent transparent}.b-dialog-page__animation--level-upper-leave-active[data-v-d4bd25b0]{animation:fade-out-ufwe453-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear),exit-ufwe453-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-exit),scale-down-ufwe453-d4bd25b0 var(--b-dialog-page-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-ufwe453-d4bd25b0{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ufwe453-d4bd25b0{0%{scale:1}to{scale:1}}@keyframes exit-ufwe453-d4bd25b0{0%{translate:0 0}to{translate:176px 0}}.b-dialog-page__animation--level-upper-leave-active .b-dialog-page__content[data-v-d4bd25b0]{scrollbar-color:transparent transparent}.b-dialog-page__animation--level-upper-leave-active .b-dialog-page__footer[data-v-d4bd25b0]{visibility:hidden}