@adyen/bento-vue2 1.65.0 → 1.67.0

package/dist/chunks/step.dNTg2rtW.js

@@ -1,217 +0,0 @@
-import { defineComponent as V, ref as p, computed as o, watch as N, provide as L, readonly as W, useSlots as z, inject as U, onMounted as Z, onBeforeUnmount as j } from "vue";
-import { B as D } from "./typography.J1v_SPG3.js";
-import { u as G } from "./i18n.BQkEbtPM.js";
-import { B as A, a as M } from "./keyboard-navigation.pB8weElW.js";
-import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as q } from "./base-button.-gx_u8Bd.js";
-import { C as J } from "./checkmark-small.DVDtD4HQ.js";
-import { D as Q } from "./dot.BW9SneIk.js";
-import "../assets/step.css";
-const X = (a) => {
-  function n(i) {
-    return ({ detail: c }) => {
-      var t;
-      c.preventDefault();
-      const l = a.value.indexOf(document.activeElement);
-      l < 0 || (t = a.value[l + i]) == null || t.focus();
-    };
-  }
-  const s = n(-1), e = n(1);
-  return {
-    [A.ARROW_DOWN]: e,
-    [A.ARROW_RIGHT]: e,
-    [A.ARROW_UP]: s,
-    [A.ARROW_LEFT]: s
-  };
-}, Y = (a) => {
-  const n = a.buttonElement.value.parentElement, s = n.parentElement;
-  return Array.from(s.children).indexOf(n);
-}, P = (a) => ({ registerStep: (e) => {
-  const i = Y(e);
-  a.value.splice(i, 0, {
-    stepContent: e.stepContent,
-    buttonElement: e.buttonElement,
-    substeps: e.substeps
-  });
-}, removeStep: (e) => {
-  a.value.splice(
-    a.value.findIndex((i) => i.buttonElement === e.buttonElement.value),
-    1
-  );
-} }), B = Symbol("stepper state");
-var T = /* @__PURE__ */ ((a) => (a.LINEAR = "linear", a.NON_LINEAR = "non-linear", a))(T || {}), O = /* @__PURE__ */ ((a) => (a.HORIZONTAL = "horizontal", a.VERTICAL = "vertical", a))(O || {});
-const ee = {
-  "en-US": {
-    step: "Step {currentIndex}/{totalSteps} {content}"
-  }
-}, te = {
-  i18n: { messages: ee },
-  name: "stepper"
-}, se = /* @__PURE__ */ V({
-  ...te,
-  props: {
-    /**
-     * Type of stepper; defines how the stepper should behave. Default: linear
-     * @values linear, non-linear
-     */
-    type: {
-      type: String,
-      default: "linear"
-    },
-    /**
-     * Stepper variant; defines how the stepper should be displayed. Default: vertical
-     * @values vertical, horizontal
-     */
-    variant: {
-      type: String,
-      default: "vertical"
-    },
-    /**
-     * Active step index
-     */
-    index: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ["update:index"],
-  setup(a, { emit: n }) {
-    const s = a, { t: e } = G(), i = p([]), c = p(s.index), l = p(c.value), t = (r) => {
-      r > l.value && (l.value = r), c.value = r;
-    }, m = o(() => {
-      var r;
-      return (r = i.value[c.value]) == null ? void 0 : r.stepContent;
-    }), v = o(() => i.value.length), _ = o(() => i.value.map(({ buttonElement: r }) => r)), f = o(() => s.variant === O.HORIZONTAL), d = o(
-      () => i.value.map(({ buttonElement: r, substeps: E }, y) => {
-        const R = c.value === y;
-        return !f.value && R ? [r].concat(E.map((C) => C.buttonElement)) : [r];
-      }).flat()
-    ), { registerStep: b, removeStep: S } = P(i), x = p({
-      activeStepIndex: c,
-      latestActiveStep: l,
-      steps: _,
-      type: s.type,
-      variant: s.variant,
-      navigateToStep: t,
-      registerStep: b,
-      removeStep: S
-    }), g = o(() => ({
-      "b-stepper__list--horizontal": f.value
-    }));
-    N(() => s.index, t), N(c, (r) => {
-      n("update:index", r);
-    });
-    const I = X(d);
-    return L(B, W(x)), { __sfc: !0, props: s, emit: n, t: e, childrenSteps: i, activeStepIndex: c, latestActiveStep: l, navigateToStep: t, currentStepContent: m, stepsAmount: v, childrenStepsElements: _, isHorizontalVariant: f, allVisibleStepsElements: d, registerStep: b, removeStep: S, stepperState: x, conditionalClasses: g, keyboardNavigationListeners: I, BentoTypography: D, vBentoKeyboardNavigationDirective: M };
-  }
-});
-var ne = function() {
-  var n = this, s = n._self._c, e = n._self._setupProxy;
-  return s("nav", { staticClass: "b-stepper" }, [s("ol", n._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-stepper__list", class: e.conditionalClasses }, e.keyboardNavigationListeners), [n._t("default")], 2), s(e.BentoTypography, { staticClass: "b-stepper__text-stepper", attrs: { el: "span", variant: "body", stronger: "" } }, [n._v(n._s(e.t("step", { currentIndex: e.activeStepIndex + 1, totalSteps: e.stepsAmount, content: e.currentStepContent })) + " ")])], 1);
-}, ae = [], oe = /* @__PURE__ */ k(
-  se,
-  ne,
-  ae,
-  !1,
-  null,
-  "8dd6f794"
-);
-const ye = oe.exports, re = {
-  name: "step"
-}, ie = /* @__PURE__ */ V({
-  ...re,
-  props: {
-    /**
-     * Completed status. Used on non-linear steppers to indicate if the step is completed.
-     */
-    completed: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Active substep index
-     */
-    substepIndex: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ["update:substep-index"],
-  setup(a, { emit: n }) {
-    const s = a, e = z(), i = p(null), c = p(null), l = p([]), t = U(B), m = o(() => {
-      var u;
-      return (u = i.value) == null ? void 0 : u.$el;
-    }), v = o(() => t == null ? void 0 : t.value.steps.indexOf(m.value)), _ = o(() => {
-      var u;
-      return (u = c.value) == null ? void 0 : u.$el.textContent;
-    }), f = o(() => l.value.map(({ buttonElement: u }) => u)), d = p(s.substepIndex), b = p(d.value), S = (u) => {
-      u > b.value && (b.value = u), d.value = u;
-    }, { registerStep: x, removeStep: g } = P(l), I = p({
-      activeStepIndex: d,
-      latestActiveStep: b,
-      type: t.value.type,
-      variant: t.value.variant,
-      steps: f,
-      isParentStep: !0,
-      navigateToStep: S,
-      registerStep: x,
-      removeStep: g
-    });
-    L(B, I), N(() => s.substepIndex, S), N(d, (u) => {
-      n("update:substep-index", u);
-    }), Z(() => {
-      if (!t)
-        throw new Error(
-          "BentoStep components should only be used inside BentoStepper or other BentoStep components."
-        );
-      t.value.registerStep({
-        buttonElement: m,
-        stepContent: _,
-        substeps: l
-      });
-    }), j(() => {
-      t.value.removeStep({
-        buttonElement: m,
-        stepContent: _,
-        substeps: l
-      });
-    });
-    const r = o(() => t.value.isParentStep), E = p(!1), y = o(() => (t == null ? void 0 : t.value.activeStepIndex) === v.value), R = o(
-      () => y.value && t.value.variant !== O.HORIZONTAL && !r.value && e.substeps
-    ), h = o(() => (t == null ? void 0 : t.value.type) === T.NON_LINEAR ? s.completed : (t == null ? void 0 : t.value.latestActiveStep) > v.value), C = o(
-      () => (t == null ? void 0 : t.value.type) === T.LINEAR && v.value > (t == null ? void 0 : t.value.latestActiveStep)
-    ), $ = () => {
-      C.value || t.value.navigateToStep(v.value);
-    }, w = o(() => y.value ? "step" : "false"), F = o(() => C.value.toString()), H = o(() => E.value || v.value === 0 && !r.value ? "0" : "-1"), K = o(() => ({
-      "b-step--active": y.value,
-      "b-step--completed": h.value,
-      "b-step--substep": r.value
-    }));
-    return { __sfc: !0, slots: e, props: s, emit: n, buttonComponent: i, stepContent: c, substeps: l, stepper: t, buttonElement: m, index: v, stepContentValue: _, substepsButtonElements: f, activeSubStepIndex: d, latestActiveSubStepIndex: b, navigateToSubstep: S, registerStep: x, removeStep: g, stepState: I, isSubstep: r, isFocused: E, isActive: y, isSubstepsVisible: R, isCompleted: h, isDisabled: C, navigateToStep: $, ariaCurrentValue: w, ariaDisabledValue: F, tabIndexValue: H, conditionalClasses: K, BaseButton: q, BentoTypography: D, CheckmarkSmallIcon: J, DotIcon: Q };
-  }
-});
-var le = function() {
-  var n = this, s = n._self._c, e = n._self._setupProxy;
-  return s("li", { staticClass: "b-step", class: e.conditionalClasses }, [s(e.BaseButton, { ref: "buttonComponent", staticClass: "b-step__button", attrs: { "aria-current": e.ariaCurrentValue, "aria-disabled": e.ariaDisabledValue, type: "button", tabindex: e.tabIndexValue, disabled: e.isDisabled }, on: { click: e.navigateToStep, focus: function(i) {
-    e.isFocused = !0;
-  }, blur: function(i) {
-    e.isFocused = !1;
-  } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
-    return [s(e.BentoTypography, { staticClass: "b-step__index", attrs: { el: "span", variant: "body", stronger: "", "aria-hidden": "true" } }, [e.isCompleted ? s(e.CheckmarkSmallIcon) : e.isSubstep ? s(e.DotIcon) : [n._v(n._s(e.index + 1))]], 2)];
-  }, proxy: !0 }]) }, [s(e.BentoTypography, { ref: "stepContent", staticClass: "b-step__content", attrs: { el: "span", variant: "body", stronger: e.isActive } }, [n._t("default")], 2)], 1), s("ul", { directives: [{ name: "show", rawName: "v-show", value: e.isSubstepsVisible, expression: "isSubstepsVisible" }], ref: "substepList", staticClass: "b-step__substep-list" }, [n._t("substeps")], 2)], 1);
-}, ue = [], ce = /* @__PURE__ */ k(
-  ie,
-  le,
-  ue,
-  !1,
-  null,
-  "1941e86b"
-);
-const xe = ce.exports;
-export {
-  T as B,
-  xe as a,
-  O as b,
-  ye as s
-};
-//# sourceMappingURL=step.dNTg2rtW.js.map

package/dist/chunks/step.dNTg2rtW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"step.dNTg2rtW.js","sources":["../../src/components/stepper/composables/use-keyboard-navigation/use-keyboard-navigation.ts","../../src/components/stepper/composables/use-step-register/use-step-register.ts","../../src/components/stepper/stepper.keys.ts","../../src/components/stepper/stepper.types.ts","../../src/components/stepper/stepper.vue","../../src/components/stepper/components/step/step.vue"],"sourcesContent":["import { Ref, UnwrapRef } from 'vue';\n\nimport { BentoKeyboardNavigationKeyDownEvent } from '@/types';\n\n/**\n * Returns keyboard navigation's event handlers to navigate through the steps\n *\n * @param steps the list of bento-steps DOM elements to focus on the navigation\n * @returns\n */\nexport const useKeyboardNavigation = (steps: Ref<UnwrapRef<HTMLButtonElement[]>>) => {\n    // Returns the event handler that moves the focus on a given step offset\n    function focusOnStep(indexOffset: number) {\n        return ({ detail: event }) => {\n            event.preventDefault();\n\n            const currentIndex = steps.value.indexOf(document.activeElement as HTMLButtonElement);\n            if (currentIndex < 0) {\n                return;\n            }\n\n            steps.value[currentIndex + indexOffset]?.focus();\n        };\n    }\n\n    const focusOnPreviousStep = focusOnStep(-1);\n    const focusOnNextStep = focusOnStep(1);\n\n    return {\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: focusOnNextStep,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_RIGHT]: focusOnNextStep,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: focusOnPreviousStep,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_LEFT]: focusOnPreviousStep,\n    };\n};\n","import type { Ref, UnwrapRef } from 'vue';\nimport type { BentoStepperStepExposeState } from '../../stepper.types';\n\n/**\n * Gets the position of a `bento-step` element within its `bento-stepper` parent.\n * @param stepState The `bento-step` state.\n * @returns The index of the element.\n */\nconst getStepPosition = (stepState: BentoStepperStepExposeState) => {\n    // Button is wrapped by <li> element\n    const listItemElement = (stepState.buttonElement as Ref<UnwrapRef<HTMLButtonElement>>).value.parentElement;\n    const listElement = listItemElement.parentElement;\n    return Array.from(listElement.children).indexOf(listItemElement);\n};\n\n/**\n * Provides methods to register/unregister `bento-step` elements to/from the `bento-stepper` step state.\n * These methods allow for tracking the child step elements, including their position in the DOM tree.\n * @param childrenSteps The `bento-stepper` (or `bento-step` if substeps) step state.\n */\nexport const useStepRegister = (childrenSteps: Ref<BentoStepperStepExposeState[]>) => {\n    /**\n     * Registers a step's HTML element in the stepper state.\n     * Should be called by a `bento-step` when it is mounted.\n     * @param stepState The `bento-step` state.\n     */\n    const registerStep = (stepState: BentoStepperStepExposeState) => {\n        const position = getStepPosition(stepState);\n        childrenSteps.value.splice(position, 0, {\n            stepContent: stepState.stepContent as string,\n            buttonElement: stepState.buttonElement as HTMLButtonElement,\n            substeps: stepState.substeps as BentoStepperStepExposeState[],\n        });\n    };\n\n    /**\n     * Unregisters a step's HTML element in the stepper state.\n     * Should be called by a `bento-step` before it is unmounted.\n     * @param stepState The `bento-step` state.\n     */\n    const removeStep = (stepState: BentoStepperStepExposeState) => {\n        childrenSteps.value.splice(\n            childrenSteps.value.findIndex(step => step.buttonElement === stepState.buttonElement.value),\n            1\n        );\n    };\n\n    return { registerStep, removeStep };\n};\n","export const STEPPER_STATE = Symbol('stepper state');\n","import type { ComputedRef, Ref, UnwrapRef } from 'vue';\n\nexport enum BentoStepperTypeOption {\n    LINEAR = 'linear',\n    NON_LINEAR = 'non-linear',\n}\n\nexport enum BentoStepperVariantOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoStepperStepExposeState {\n    buttonElement: HTMLButtonElement | Ref<UnwrapRef<HTMLButtonElement>>;\n    substeps: BentoStepperStepExposeState[] | Ref<BentoStepperStepExposeState[]>;\n    stepContent: string | ComputedRef<string>;\n}\n\nexport type BentoStepperState = Ref<{\n    activeStepIndex: number;\n    latestActiveStep: number;\n    type: `${BentoStepperTypeOption}`;\n    variant: `${BentoStepperVariantOption}`;\n    steps: HTMLElement[];\n    isParentStep?: boolean;\n    navigateToStep: (index: number) => void;\n    registerStep: (stepState: BentoStepperStepExposeState) => void;\n    removeStep: (stepState: BentoStepperStepExposeState) => void;\n}>;\n","<template>\n    <nav class=\"b-stepper\">\n        <ol\n            v-bento-keyboard-navigation-directive\n            class=\"b-stepper__list\"\n            :class=\"conditionalClasses\"\n            v-on=\"keyboardNavigationListeners\"\n        >\n            <slot></slot>\n        </ol>\n\n        <bento-typography el=\"span\" variant=\"body\" stronger class=\"b-stepper__text-stepper\"\n            >{{\n                t('step', { currentIndex: activeStepIndex + 1, totalSteps: stepsAmount, content: currentStepContent })\n            }}\n        </bento-typography>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n\n    import { computed, type DeepReadonly, PropType, provide, readonly, ref, watch } from 'vue';\n    import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives';\n\n    import { useKeyboardNavigation, useStepRegister } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { STEPPER_STATE } from './stepper.keys';\n    import {\n        BentoStepperState,\n        BentoStepperStepExposeState,\n        BentoStepperTypeOption,\n        BentoStepperVariantOption,\n    } from './stepper.types';\n\n    import messages from './messages.json';\n\n    const props = defineProps({\n        /**\n         * Type of stepper; defines how the stepper should behave. Default: linear\n         * @values linear, non-linear\n         */\n        type: {\n            type: String as PropType<`${BentoStepperTypeOption}`>,\n            default: 'linear',\n        },\n        /**\n         * Stepper variant; defines how the stepper should be displayed. Default: vertical\n         * @values vertical, horizontal\n         */\n        variant: {\n            type: String as PropType<`${BentoStepperVariantOption}`>,\n            default: 'vertical',\n        },\n        /**\n         * Active step index\n         */\n        index: {\n            type: Number,\n            default: 0,\n        },\n    });\n\n    const emit = defineEmits([\"update:index\"]);\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const childrenSteps = ref<BentoStepperStepExposeState[]>([]);\n    const activeStepIndex = ref(props.index);\n    const latestActiveStep = ref(activeStepIndex.value);\n\n    const navigateToStep = (index: number) => {\n        // Stores latest active step index so users can navigate backwards and forwards on linear stepper\n        if (index > latestActiveStep.value) {\n            latestActiveStep.value = index;\n        }\n        activeStepIndex.value = index;\n    };\n\n    const currentStepContent = computed(() => childrenSteps.value[activeStepIndex.value]?.stepContent);\n    const stepsAmount = computed(() => childrenSteps.value.length);\n    const childrenStepsElements = computed(() => childrenSteps.value.map(({ buttonElement }) => buttonElement));\n    const isHorizontalVariant = computed(() => props.variant === BentoStepperVariantOption.HORIZONTAL);\n\n    // List of all visible steps nested on the stepper, including the substeps of the children steps\n    // Flattening the steps on a single list makes the keyboard navigation easier to be handled\n    const allVisibleStepsElements = computed(() =>\n        childrenSteps.value\n            .map(({ buttonElement, substeps }, index) => {\n                const isStepActive = activeStepIndex.value === index;\n                const isSubstepsVisible = !isHorizontalVariant.value && isStepActive;\n\n                if (!isSubstepsVisible) {\n                    return [buttonElement];\n                }\n\n                return [buttonElement].concat(substeps.map(step => step.buttonElement));\n            })\n            .flat()\n    );\n\n    const { registerStep, removeStep } = useStepRegister(childrenSteps);\n\n    const stepperState: BentoStepperState = ref({\n        activeStepIndex,\n        latestActiveStep,\n        steps: childrenStepsElements,\n        type: props.type,\n        variant: props.variant,\n        navigateToStep,\n        registerStep,\n        removeStep,\n    });\n\n    const conditionalClasses = computed(() => ({\n        'b-stepper__list--horizontal': isHorizontalVariant.value,\n    }));\n\n    watch(() => props.index, navigateToStep);\n    watch(activeStepIndex, index => {\n        emit('update:index', index);\n    });\n\n    const keyboardNavigationListeners = useKeyboardNavigation(allVisibleStepsElements);\n\n    // Provides stepper state to BentoStep children components\n    provide<DeepReadonly<BentoStepperState>>(STEPPER_STATE, readonly(stepperState));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Steppers break down complex processes into manageable steps to guide users through a sequential or multi-step process.\n     *\n     * @example\n     * import { BentoStep, BentoStepper } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStep, BentoStepper },\n     *     template: `\n     *          <bento-stepper :index=\"1\">\n     *              <bento-step>Step 1</bento-step>\n     *              <bento-step>Step 2</bento-step>\n     *              <bento-step>Step 3</bento-step>\n     *          </bento-stepper>\n     *     `\n     * }\n     */\n\n    export default {\n        i18n: { messages },\n        name: 'stepper',\n    };\n</script>\n\n<style scoped src=\"./stepper.scss\" />\n","<template>\n    <li :class=\"conditionalClasses\" class=\"b-step\">\n        <base-button\n            ref=\"buttonComponent\"\n            :aria-current=\"ariaCurrentValue\"\n            :aria-disabled=\"ariaDisabledValue\"\n            class=\"b-step__button\"\n            type=\"button\"\n            :tabindex=\"tabIndexValue\"\n            :disabled=\"isDisabled\"\n            @click=\"navigateToStep\"\n            @focus=\"isFocused = true\"\n            @blur=\"isFocused = false\"\n        >\n            <template #iconLeft>\n                <bento-typography el=\"span\" variant=\"body\" stronger class=\"b-step__index\" aria-hidden=\"true\">\n                    <checkmark-small-icon v-if=\"isCompleted\" />\n                    <template v-else-if=\"!isSubstep\">{{ index + 1 }}</template>\n                    <dot-icon v-else />\n                </bento-typography>\n            </template>\n\n            <bento-typography ref=\"stepContent\" el=\"span\" variant=\"body\" :stronger=\"isActive\" class=\"b-step__content\">\n                <slot></slot>\n            </bento-typography>\n        </base-button>\n\n        <ul v-show=\"isSubstepsVisible\" ref=\"substepList\" class=\"b-step__substep-list\">\n            <slot name=\"substeps\"></slot>\n        </ul>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, onBeforeUnmount, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { BaseButton } from '@/components/internal/base-button';\n    import { BentoTypography } from '@/components/typography';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import DotIcon from '@adyen/ui-assets-icons-16/vue/dot';\n\n    import { useStepRegister } from '../../composables';\n    import { STEPPER_STATE } from '../../stepper.keys';\n    import {\n        BentoStepperState,\n        BentoStepperStepExposeState,\n        BentoStepperTypeOption,\n        BentoStepperVariantOption,\n    } from '../../stepper.types';\n    import { Booleanish } from '@/types';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Completed status. Used on non-linear steppers to indicate if the step is completed.\n         */\n        completed: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Active substep index\n         */\n        substepIndex: {\n            type: Number,\n            default: 0,\n        },\n    });\n\n    const emit = defineEmits([\"update:substep-index\"]);\n\n    // Element refs\n    const buttonComponent = ref<InstanceType<typeof BaseButton> | null>(null);\n    const stepContent = ref<InstanceType<typeof BentoTypography> | null>(null);\n    const substeps = ref<BentoStepperStepExposeState[]>([]);\n\n    // Injects parent BentoStepper state data\n    const stepper = inject<BentoStepperState>(STEPPER_STATE);\n\n    const buttonElement = computed(() => buttonComponent.value?.$el as HTMLButtonElement);\n    const index = computed(() => stepper?.value.steps.indexOf(buttonElement.value));\n\n    const stepContentValue = computed(() => stepContent.value?.$el.textContent);\n\n    // Substep logic\n    const substepsButtonElements = computed(() => substeps.value.map(({ buttonElement }) => buttonElement));\n\n    const activeSubStepIndex = ref(props.substepIndex);\n    const latestActiveSubStepIndex = ref(activeSubStepIndex.value);\n\n    const navigateToSubstep = (value: number) => {\n        if (value > latestActiveSubStepIndex.value) {\n            latestActiveSubStepIndex.value = value;\n        }\n\n        activeSubStepIndex.value = value;\n    };\n\n    const { registerStep, removeStep } = useStepRegister(substeps);\n\n    const stepState: BentoStepperState = ref({\n        activeStepIndex: activeSubStepIndex,\n        latestActiveStep: latestActiveSubStepIndex,\n        type: stepper.value.type,\n        variant: stepper.value.variant,\n        steps: substepsButtonElements,\n        isParentStep: true,\n        navigateToStep: navigateToSubstep,\n        registerStep,\n        removeStep,\n    });\n\n    provide(STEPPER_STATE, stepState);\n\n    watch(() => props.substepIndex, navigateToSubstep);\n    watch(activeSubStepIndex, value => {\n        emit('update:substep-index', value);\n    });\n\n    onMounted(() => {\n        if (!stepper) {\n            throw new Error(\n                'BentoStep components should only be used inside BentoStepper or other BentoStep components.'\n            );\n        }\n\n        stepper.value.registerStep({\n            buttonElement,\n            stepContent: stepContentValue,\n            substeps,\n        });\n    });\n\n    onBeforeUnmount(() => {\n        stepper.value.removeStep({\n            buttonElement,\n            stepContent: stepContentValue,\n            substeps,\n        });\n    });\n\n    // Step states\n    const isSubstep = computed(() => stepper.value.isParentStep);\n    const isFocused = ref(false);\n    const isActive = computed(() => stepper?.value.activeStepIndex === index.value);\n    const isSubstepsVisible = computed(\n        () =>\n            isActive.value &&\n            stepper.value.variant !== BentoStepperVariantOption.HORIZONTAL &&\n            !isSubstep.value &&\n            slots.substeps\n    );\n    const isCompleted = computed(() => {\n        if (stepper?.value.type === BentoStepperTypeOption.NON_LINEAR) {\n            return props.completed;\n        }\n\n        return stepper?.value.latestActiveStep > index.value;\n    });\n    const isDisabled = computed(\n        () => stepper?.value.type === BentoStepperTypeOption.LINEAR && index.value > stepper?.value.latestActiveStep\n    );\n\n    const navigateToStep = () => {\n        if (isDisabled.value) {\n            return;\n        }\n\n        stepper.value.navigateToStep(index.value);\n    };\n\n    // Styling and a11y\n    const ariaCurrentValue = computed(() => (isActive.value ? 'step' : ('false' as Booleanish)));\n    const ariaDisabledValue = computed(() => isDisabled.value.toString() as Booleanish);\n    const tabIndexValue = computed(() => (isFocused.value || (index.value === 0 && !isSubstep.value) ? '0' : '-1'));\n\n    const conditionalClasses = computed(() => ({\n        'b-step--active': isActive.value,\n        'b-step--completed': isCompleted.value,\n        'b-step--substep': isSubstep.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Steps are components placed inside BentoSteppers to break down complex processes\n     *\n     * @example\n     * import { BentoStep } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStep },\n     *     template: `\n     *          <bento-stepper>\n     *              <bento-step>Step 1</bento-step>\n     *              <bento-step>\n     *                  Step 2\n     *                  <template #substeps>\n     *                      <bento-step>Substep 1</bento-step>\n     *                      <bento-step>Substep 2</bento-step>\n     *                  </template>\n     *              </bento-step>\n     *          </bento-stepper>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'step',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./step.scss\" />\n"],"names":["useKeyboardNavigation","steps","focusOnStep","indexOffset","event","currentIndex","_a","focusOnPreviousStep","focusOnNextStep","BentoKeyboardNavigationKeyDownEvent","getStepPosition","stepState","listItemElement","listElement","useStepRegister","childrenSteps","position","step","STEPPER_STATE","BentoStepperTypeOption","BentoStepperTypeOption2","BentoStepperVariantOption","BentoStepperVariantOption2","__default__$1","messages","t","useI18n","ref","activeStepIndex","props","latestActiveStep","navigateToStep","index","currentStepContent","computed","stepsAmount","childrenStepsElements","buttonElement","isHorizontalVariant","allVisibleStepsElements","substeps","isStepActive","registerStep","removeStep","stepperState","conditionalClasses","watch","emit","keyboardNavigationListeners","provide","readonly","__default__","slots","useSlots","buttonComponent","stepContent","stepper","inject","stepContentValue","substepsButtonElements","buttonElement2","activeSubStepIndex","latestActiveSubStepIndex","navigateToSubstep","value","onMounted","onBeforeUnmount","isSubstep","isFocused","isActive","isSubstepsVisible","isCompleted","isDisabled","ariaCurrentValue","ariaDisabledValue","tabIndexValue"],"mappings":"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"}

package/dist/chunks/summary-grid.types.CkUIw703.js

@@ -1,301 +0,0 @@
-import { defineComponent as i, useSlots as a, onMounted as I, provide as h, toRef as z, toRefs as P, inject as B, ref as D, computed as s } from "vue";
-import { u } from "./use-has-slot.C9lQZ6nz.js";
-import { S as R, a as x } from "./summary-grid.keys.CxTf_FOc.js";
-import { G } from "./grid-layout.HvTAa4to.js";
-import { n as d } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as M } from "./dashed-underline.CEaAmjDa.js";
-import { B as k } from "./info-icon.B9aTl1nU.js";
-import { B as w } from "./typography.J1v_SPG3.js";
-import { B as L } from "./tag.CGkclKVL.js";
-import { C as E } from "./copy.CXeLbvUP.js";
-import "../assets/summary-grid.css";
-const A = {}, U = /* @__PURE__ */ i({
-  ...A,
-  __name: "summary-grid",
-  props: {
-    columnWidth: { default: null },
-    slashedZero: { type: Boolean, default: !1 }
-  },
-  setup(r) {
-    var _, c;
-    const e = r, n = a(), t = u(n);
-    let o = 1;
-    if (n) {
-      const y = (c = (_ = Object.keys(n)) == null ? void 0 : _.filter((p) => p.includes("cell-"))) == null ? void 0 : c.map((p) => {
-        var f;
-        return parseInt((f = p.split("-")) == null ? void 0 : f[1], 10);
-      });
-      o = Math.max(...y);
-    }
-    I(() => {
-      if (o > 3)
-        throw new Error(
-          "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
-        );
-    });
-    const l = () => ({ isSummaryGridLayout: !0 });
-    return h(R, l), h(x, z(e, "slashedZero")), { __sfc: !0, props: e, slots: n, hasSlot: t, numberOfRows: o, registerComponentsInSummaryGrid: l, GridLayout: G };
-  }
-});
-var F = function() {
-  var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n("div", { staticClass: "b-summary-grid" }, e._l(t.numberOfRows, function(o) {
-    var l;
-    return n(t.GridLayout, { key: `summary-grid-row-${o}`, attrs: { "data-testid": `summary-grid-row-${o}`, "column-width": (l = e.columnWidth) == null ? void 0 : l[`row${o}`] }, scopedSlots: e._u([t.hasSlot(`cell-${o}-1`) ? { key: "col-1", fn: function() {
-      return [e._t(`cell-${o}-1`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${o}-2`) ? { key: "col-2", fn: function() {
-      return [e._t(`cell-${o}-2`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${o}-3`) ? { key: "col-3", fn: function() {
-      return [e._t(`cell-${o}-3`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${o}-4`) ? { key: "col-4", fn: function() {
-      return [e._t(`cell-${o}-4`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${o}-5`) ? { key: "col-5", fn: function() {
-      return [e._t(`cell-${o}-5`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${o}-6`) ? { key: "col-6", fn: function() {
-      return [e._t(`cell-${o}-6`)];
-    }, proxy: !0 } : null], null, !0) });
-  }), 1);
-}, O = [], V = /* @__PURE__ */ d(
-  U,
-  F,
-  O,
-  !1,
-  null,
-  "397e4d9c"
-);
-const Re = V.exports, N = {}, Y = /* @__PURE__ */ i({
-  ...N,
-  __name: "summary-grid-item",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    size: { default: "small" },
-    title: null,
-    trend: { default: null },
-    trendDirection: { default: "positive" },
-    secondaryTrend: { default: null },
-    secondaryTrendDirection: { default: "positive" },
-    underlinePopoverSize: { default: "fit-content" },
-    underlineTooltipText: { default: null },
-    itemType: { default: "custom" }
-  },
-  setup(r) {
-    const e = r, { trendDirection: n, secondaryTrendDirection: t, itemType: o, size: l } = P(e), _ = B(x, D(!1)), c = (C) => {
-      switch (C) {
-        case "positive":
-          return "green";
-        case "negative":
-          return "red";
-        default:
-          return "blue";
-      }
-    }, y = s(() => c(n.value)), p = s(() => c(t.value)), f = s(() => l.value === "small" ? "body" : o.value !== "text" ? "title" : null), S = s(() => ({
-      medium: l.value === "large",
-      strongest: l.value === "small",
-      wide: l.value === "small",
-      variant: f.value
-    })), g = s(() => e.fitContent ? { width: "fit-content" } : {}), $ = s(() => ({ "b-summary-grid-item--slashed-zero": _.value })), v = a(), T = u(v), b = s(() => e.underlineTooltipText || T("dashed-underline"));
-    return { __sfc: !0, props: e, trendDirection: n, secondaryTrendDirection: t, itemType: o, size: l, hasSlashedZero: _, tagVariantColor: c, trendVariant: y, secondaryTrendVariant: p, typographyContentElement: f, typographyProps: S, computedStyles: g, conditionalClasses: $, slots: v, hasSlot: T, withUnderline: b, BentoDashedUnderline: M, BentoInfoIcon: k, BentoTypography: w, BentoTag: L, Copy: E };
-  }
-});
-var Z = function() {
-  var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n("div", { staticClass: "b-summary-grid-item", class: t.conditionalClasses, style: t.computedStyles }, [n("div", { staticClass: "b-summary-grid-item__header" }, [n(t.BentoTypography, { staticClass: "b-summary-grid-item__title", attrs: { el: "span", variant: "body" } }, [t.withUnderline ? n(t.BentoDashedUnderline, { attrs: { "tooltip-text": e.underlineTooltipText, "popover-size": e.underlinePopoverSize }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "popover-content", fn: function() {
-    return [e._t("dashed-underline")];
-  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.title) + " ")]) : [e._v(" " + e._s(e.title) + " ")]], 2), n("div", { staticClass: "b-summary-grid-item__title-icons" }, [e.copy ? n(t.Copy, { staticClass: "b-structured-list__icon", attrs: { text: e.copy } }) : e._e(), e.infoIconTooltipText ? n(t.BentoInfoIcon, { staticClass: "b-summary-grid-item__title-tooltip", attrs: { "tooltip-text": e.infoIconTooltipText, "tooltip-position": "top" } }) : e._e()], 1)], 1), n(t.BentoTypography, e._b({ staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-content-typography", el: "span" } }, "bento-typography", t.typographyProps, !1), [e._t("default"), e.trend && t.itemType !== "text" ? n(t.BentoTag, { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.trendVariant, label: e.trend } }) : e._e()], 2), t.hasSlot("secondary") ? n(t.BentoTypography, { staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-secondary-metric-typography", el: "span", variant: "caption", stronger: "" } }, [e._t("secondary"), e.secondaryTrend ? n(t.BentoTag, { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.secondaryTrendVariant, label: e.secondaryTrend } }) : e._e()], 2) : e._e()], 1);
-}, j = [], H = /* @__PURE__ */ d(
-  Y,
-  Z,
-  j,
-  !1,
-  null,
-  "16193401"
-);
-const m = H.exports, W = {}, J = /* @__PURE__ */ i({
-  ...W,
-  __name: "summary-grid-item-amount",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    size: { default: "small" },
-    title: null,
-    trend: { default: null },
-    trendDirection: { default: "positive" },
-    secondaryTrend: { default: null },
-    secondaryTrendDirection: { default: "positive" },
-    underlinePopoverSize: { default: "fit-content" },
-    underlineTooltipText: { default: null },
-    label: null,
-    secondaryLabel: { default: null },
-    secondaryMetric: { default: null }
-  },
-  setup(r) {
-    const e = a(), n = u(e);
-    return { __sfc: !0, slots: e, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var K = function() {
-  var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n(t.SummaryGridItem, { staticClass: "b-summary-grid-item-amount", attrs: { "item-type": "amount", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [e._t("dashed-underline")];
-  }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
-    return [e._v(" " + e._s(e.secondaryMetric) + " ")];
-  }, proxy: !0 } : null], null, !0) }, [n("div", { staticClass: "b-summary-grid-item-amount__content" }, [n("div", [e._v(e._s(e.label))]), e.secondaryLabel ? n("div", { staticClass: "b-summary-grid-item-amount__secondary-label" }, [e._v(e._s(e.secondaryLabel))]) : e._e()])]);
-}, q = [], Q = /* @__PURE__ */ d(
-  J,
-  K,
-  q,
-  !1,
-  null,
-  "36b6a7a6"
-);
-const Ge = Q.exports, X = {}, ee = /* @__PURE__ */ i({
-  ...X,
-  __name: "summary-grid-item-numeric",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    size: { default: "small" },
-    title: null,
-    trend: { default: null },
-    trendDirection: { default: "positive" },
-    secondaryTrend: { default: null },
-    secondaryTrendDirection: { default: "positive" },
-    underlinePopoverSize: { default: "fit-content" },
-    underlineTooltipText: { default: null },
-    label: null,
-    secondaryMetric: { default: null }
-  },
-  setup(r) {
-    const e = a(), n = u(e);
-    return { __sfc: !0, slots: e, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var te = function() {
-  var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n(t.SummaryGridItem, { staticClass: "b-summary-grid-item-numeric", attrs: { "item-type": "numeric", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [e._t("dashed-underline")];
-  }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
-    return [e._v(" " + e._s(e.secondaryMetric) + " ")];
-  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
-}, ne = [], re = /* @__PURE__ */ d(
-  ee,
-  te,
-  ne,
-  !1,
-  null,
-  null
-);
-const Me = re.exports, oe = {}, le = /* @__PURE__ */ i({
-  ...oe,
-  __name: "summary-grid-item-percentage",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    size: { default: "small" },
-    title: null,
-    trend: { default: null },
-    trendDirection: { default: "positive" },
-    secondaryTrend: { default: null },
-    secondaryTrendDirection: { default: "positive" },
-    underlinePopoverSize: { default: "fit-content" },
-    underlineTooltipText: { default: null },
-    label: null,
-    secondaryMetric: { default: null }
-  },
-  setup(r) {
-    const e = a(), n = u(e);
-    return { __sfc: !0, slots: e, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var se = function() {
-  var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n(t.SummaryGridItem, { staticClass: "b-summary-grid-item-percentage", attrs: { "item-type": "percentage", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [e._t("dashed-underline")];
-  }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
-    return [e._v(" " + e._s(e.secondaryMetric) + "% ")];
-  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.label) + "% ")]);
-}, ie = [], ae = /* @__PURE__ */ d(
-  le,
-  se,
-  ie,
-  !1,
-  null,
-  null
-);
-const ke = ae.exports, ue = {}, de = /* @__PURE__ */ i({
-  ...ue,
-  __name: "summary-grid-item-text",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    label: null,
-    title: null,
-    underlinePopoverSize: { default: "fit-content" },
-    underlineTooltipText: { default: null }
-  },
-  setup(r) {
-    const e = a(), n = u(e);
-    return { __sfc: !0, slots: e, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var ce = function() {
-  var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n(t.SummaryGridItem, { staticClass: "b-summary-grid-item-text", attrs: { "item-type": "text", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [e._t("dashed-underline")];
-  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
-}, _e = [], pe = /* @__PURE__ */ d(
-  de,
-  ce,
-  _e,
-  !1,
-  null,
-  null
-);
-const we = pe.exports, fe = {}, me = /* @__PURE__ */ i({
-  ...fe,
-  __name: "summary-grid-item-custom",
-  props: {
-    copy: { default: void 0 },
-    infoIconTooltipText: { default: null },
-    title: null,
-    fitContent: { type: Boolean, default: !1 },
-    underlinePopoverSize: { default: "fit-content" },
-    underlineTooltipText: { default: null }
-  },
-  setup(r) {
-    const e = a(), n = u(e);
-    return { __sfc: !0, slots: e, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var ye = function() {
-  var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n(t.SummaryGridItem, { attrs: { title: e.title, "info-icon-tooltip-text": e.infoIconTooltipText, copy: e.copy, "fit-content": e.fitContent, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [e._t("dashed-underline")];
-  }, proxy: !0 } : null], null, !0) }, [e._t("default")], 2);
-}, ve = [], Te = /* @__PURE__ */ d(
-  me,
-  ye,
-  ve,
-  !1,
-  null,
-  null
-);
-const Le = Te.exports;
-var he = /* @__PURE__ */ ((r) => (r.SMALL = "small", r.MEDIUM = "medium", r.LARGE = "large", r))(he || {}), xe = /* @__PURE__ */ ((r) => (r.POSITIVE = "positive", r.NEGATIVE = "negative", r.NEUTRAL = "neutral", r))(xe || {});
-export {
-  he as B,
-  Ge as a,
-  Me as b,
-  ke as c,
-  we as d,
-  Le as e,
-  xe as f,
-  Re as s
-};
-//# sourceMappingURL=summary-grid.types.CkUIw703.js.map

package/dist/chunks/summary-grid.types.CkUIw703.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"summary-grid.types.CkUIw703.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  columnWidth: { default: null },\n  slashedZero: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  itemType: { default: 'custom' }\n});\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryLabel: { default: null },\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}%\n        <template v-if=\"secondaryMetric\" #secondary> {{ secondaryMetric }}% </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import SummaryGridItem from '../summary-grid-item/summary-grid-item.vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","_b","_a","slotName","onMounted","registerComponentsInSummaryGrid","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","props","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":";;;;;;;;;;;AAgGI,MAAAA,IAAA,CAAA;;;;;;;;;iBAnDAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;AAEA,QAAAI,IAAA;AACA,QAAAJ,GAAA;AACI,YAAAK,KAAAC,KAAAC,IAAA,OAAA,KAAAP,CAAA,MAAA,gBAAAO,EAAA,OAAA,CAAAC,MAAAA,EAAA,SAAA,OAAA,OAAA,gBAAAF,EAAA,IAAA,CAAAE,MAAA;;AAAA,yBAAAD,IAAAC,EAAA,MAAA,GAAA,MAAA,gBAAAD,EAAA,IAAA,EAAA;AAAA;AAGA,MAAAH,IAAA,KAAA,IAAA,GAAAC,CAAA;AAAA,IAAmC;AAGvC,IAAAI,EAAA,MAAA;AACI,UAAAL,IAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;AAGJ,UAAAM,IAAA,OAEI,EAAA,wBAAA;AAGJ,WAAAC,EAAAC,GAAAF,CAAA,GACAC,EAAAE,GAAAC,EAAAC,GAAA,aAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBCsFAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;iBA7DA,EAAA,gBAAAC,GAAA,yBAAAC,GAAA,UAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAAN,CAAA,GACAO,IAAAC,EAAAV,GAAAW,EAAA,EAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,cAAAA,GAAA;AAAA,QAAmB,KAAA;AAEX,iBAAA;AAAA,QAAO,KAAA;AAEP,iBAAA;AAAA,QAAO;AAEP,iBAAA;AAAA,MAAO;AAAA,IACf,GAIJC,IAAAC,EAAA,MAAAH,EAAAR,EAAA,KAAA,CAAA,GACAY,IAAAD,EAAA,MAAAH,EAAAP,EAAA,KAAA,CAAA,GAEAY,IAAAF,EAAA,MACIR,EAAA,UAAA,UACI,SAEJD,EAAA,UAAA,SACI,UAGJ,IAAO,GAGXY,IAAAH,EAAA,OAAA;AAAA,MAAwC,QAAAR,EAAA,UAAA;AAAA,MACb,WAAAA,EAAA,UAAA;AAAA,MACG,MAAAA,EAAA,UAAA;AAAA,MACL,SAAAU,EAAA;AAAA,IACa,EAAA,GAGtCE,IAAAJ,EAAA,MAAAb,EAAA,aAAA,EAAA,OAAA,cAAA,IAAA,CAAA,CAAA,GAEAkB,IAAAL,EAAA,OAAA,EAAA,qCAAAN,EAAA,MAAA,EAAA,GAEAtB,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAkC,IAAAN,EAAA,MAAAb,EAAA,wBAAAb,EAAA,kBAAA,CAAA;;;;;;;;;;;;;;;;;qBC3DAiC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;AA1BA,UAAAnC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;sBCoBAoC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;AAzBA,UAAApC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;uBCsBAqC,KAAA,CAAA;;;;;;;;;;;;;;;;;;;AAzBA,UAAArC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;uBCUAsC,KAAA,CAAA;;;;;;;;;;;;;AAtBA,UAAAtC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;uBCeAuC,KAAA,CAAA;;;;;;;;;;;;AApBA,UAAAvC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;AC3BQ,IAAAwC,KAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SAHQA,IAAAD,MAAA,CAAA,CAAA,GASAE,KAAA,kBAAAC,OACRA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WAHQA,IAAAD,MAAA,CAAA,CAAA;"}