@adyen/bento-vue3 1.65.0 → 1.67.0

package/dist/chunks/copy.DqckFHHS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"copy.DqckFHHS.js","sources":["../../../vue2/src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../../vue2/src/components/internal/copy/copy.vue"],"sourcesContent":["import type { BentoButton } from '../../button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport type BentoCopyButtonProps = {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\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=\"#001222\" d=\"M3.5 1.25C2.25736 1.25 1.25 2.25736 1.25 3.5V8.5C1.25 9.74264 2.25736 10.75 3.5 10.75H5.25V12.5C5.25 13.7426 6.25736 14.75 7.5 14.75H12.5C13.7426 14.75 14.75 13.7426 14.75 12.5V7.5C14.75 6.25736 13.7426 5.25 12.5 5.25H10.75V3.5C10.75 2.25736 9.74264 1.25 8.5 1.25H3.5ZM9.25 5.25H7.5C6.25736 5.25 5.25 6.25736 5.25 7.5V9.25H3.5C3.08579 9.25 2.75 8.91421 2.75 8.5V3.5C2.75 3.08579 3.08579 2.75 3.5 2.75H8.5C8.91421 2.75 9.25 3.08579 9.25 3.5V5.25ZM6.75 12.5V7.5C6.75 7.08579 7.08579 6.75 7.5 6.75H12.5C12.9142 6.75 13.25 7.08579 13.25 7.5V12.5C13.25 12.9142 12.9142 13.25 12.5 13.25H7.5C7.08579 13.25 6.75 12.9142 6.75 12.5Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoCopyButtonProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'copy',\n        components: { BentoButton, CopyIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n             */\n            button: {\n                type: Object as PropType<BentoCopyButtonProps>,\n                default: () =>\n                    ({\n                        variant: 'tertiary',\n                    } as BentoCopyButtonProps),\n            },\n\n            /**\n             * Sets the button text of the copy button.\n             */\n            buttonText: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Defines the string that will get copied to the clipboard\n             */\n            text: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'top'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition>,\n                default: PopperContainerPosition.TOP,\n            },\n        },\n        setup(props) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n            const showScreenReaderAlert = ref(false);\n            const onClickCopy = async () => {\n                try {\n                    await navigator.clipboard.writeText(props.text);\n                    copyState.value = CopyTooltipState.COPYING;\n                    showScreenReaderAlert.value = true;\n                } catch {\n                    copyState.value = CopyTooltipState.ERROR;\n                }\n            };\n\n            const resetText = () => {\n                copyState.value = CopyTooltipState.DEFAULT;\n                showScreenReaderAlert.value = false;\n            };\n\n            const copyText = computed(() => {\n                switch (copyState.value) {\n                    case CopyTooltipState.COPYING:\n                        return t('copied');\n                    case CopyTooltipState.ERROR:\n                        return t('copyFailed');\n                    case CopyTooltipState.DEFAULT:\n                    default:\n                        return t('copy');\n                }\n            });\n\n            const svgTitle = computed(() => (props?.buttonText ? undefined : t('copy')));\n\n            return {\n                copyText,\n                onClickCopy,\n                resetText,\n                showScreenReaderAlert,\n                svgTitle,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","_sfc_main","defineComponent","messages","BentoButton","CopyIcon","BentoTooltipDirective","PopperContainerPosition","props","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","resetText","copyText","computed","svgTitle","_directive_bento_tooltip_directive","resolveDirective","_cache","args","withDirectives","tooltipPosition","createBlock","_component_bento_button","createSlots","withCtx","createVNode","_component_copy_icon","buttonText","createTextVNode","toDisplayString","_hoisted_1"],"mappings":"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"}

package/dist/chunks/data-grid-template.DzIpssxc.js

@@ -1,143 +0,0 @@
-import { defineComponent as G, useSlots as H, ref as f, computed as o, provide as O, createElementBlock as m, openBlock as r, createVNode as T, unref as n, mergeProps as _, toHandlers as j, withCtx as c, renderSlot as l, createCommentVNode as x, createBlock as C, createSlots as N, normalizeClass as P, Fragment as w, renderList as L, toRef as g } from "vue";
-import { B as V } from "./header.Ckjp7n9t.js";
-import { B as q } from "./inspector.CoZCPfHC.js";
-import { a as z, B as F } from "./tabs.Cq1fdzVh.js";
-import { u as J } from "./use-has-slot.B7eQSabc.js";
-import { D as K } from "./data-grid-template.keys.2_AkxuNT.js";
-import { _ as M } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/data-grid-template.css";
-const U = { class: "b-data-grid-template" }, Y = {}, Q = /* @__PURE__ */ G({
-  ...Y,
-  __name: "data-grid-template",
-  props: {
-    /**
-     * The header that goes to the top of the template
-     */
-    header: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * All the tab properties that can be set on the inner tab components.
-     *  - tabs.activeTabIndex: the currenly active tab index.
-     *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
-     */
-    tabs: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Renders the additional content slot with a sticky positioning
-     */
-    stickyAdditionalContent: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Renders the tabs with a sticky positioning
-     */
-    stickyTabs: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * All the inspector properties that can be set on the inner inspector component.
-     */
-    inspector: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["update:tabs", "update:is-open:inspector", "update:active-page:inspector", "expand:inspector"],
-  setup(s, { emit: I }) {
-    const e = s, b = H(), v = J(b), p = I, y = f(null), i = f(null), R = f(null), B = o(() => ({
-      "b-data-grid-template__additional-content--sticky": e.stickyAdditionalContent
-    })), h = o(() => ({
-      title: "",
-      ...e.inspector
-    })), S = o(() => {
-      var t;
-      return (t = i == null ? void 0 : i.value) == null ? void 0 : t.offsetHeight;
-    }), A = o(() => {
-      var t, a;
-      return (a = (t = y.value) == null ? void 0 : t.$refs) == null ? void 0 : a.tablistwrapper;
-    }), k = o(() => Object.keys(b).filter((t) => t == null ? void 0 : t.includes("tab-"))), D = o(() => ({
-      "update:is-open": (t) => p("update:is-open:inspector", t),
-      "update:active-page": (t) => p("update:active-page:inspector", t),
-      expand: (t) => p("expand:inspector", t)
-    })), $ = (t) => {
-      p("update:tabs", { ...e.tabs, activeTabIndex: t });
-    }, E = (t) => {
-      var a, d;
-      return ((d = (a = e == null ? void 0 : e.tabs.tabs) == null ? void 0 : a[t]) == null ? void 0 : d.title) ?? `Tab ${t + 1}`;
-    };
-    return O(K, () => {
-      const a = g(e, "stickyTabs"), d = g(e, "stickyAdditionalContent");
-      return {
-        isDataGridTemplate: !0,
-        stickyTabs: a,
-        tabsRef: A,
-        stickyAdditionalContent: d,
-        additionalContentSlotRef: i
-      };
-    }), (t, a) => (r(), m("main", U, [
-      T(n(q), _(h.value, {
-        ref_key: "inspectorRef",
-        ref: R
-      }, j(D.value)), {
-        page: c(() => [
-          T(n(V), _(s.header, {
-            variant: "component",
-            class: "b-data-grid-template__header"
-          }), N({ _: 2 }, [
-            n(v)("infoIconTooltipContent") ? {
-              name: "infoIconTooltipContent",
-              fn: c(() => [
-                l(t.$slots, "infoIconTooltipContent", {}, void 0, !0)
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1040),
-          n(v)("additionalContent") ? (r(), m("div", {
-            key: 0,
-            ref_key: "additionalContentRef",
-            ref: i,
-            class: P(["b-data-grid-template__additional-content", B.value])
-          }, [
-            l(t.$slots, "additionalContent", {}, void 0, !0)
-          ], 2)) : x("", !0),
-          k.value.length > 1 ? (r(), C(n(z), {
-            key: 1,
-            ref_key: "tabsRef",
-            ref: y,
-            "active-tab-index": s.tabs.activeTabIndex,
-            sticky: s.stickyTabs,
-            "sticky-options": s.stickyAdditionalContent ? { top: S.value } : null,
-            "onUpdate:activeTabIndex": $
-          }, {
-            default: c(() => [
-              (r(!0), m(w, null, L(k.value, (d, u) => (r(), C(n(F), {
-                key: `tab-${u}`,
-                title: E(u)
-              }, {
-                default: c(() => [
-                  l(t.$slots, `tab-${u + 1}`, {}, void 0, !0)
-                ]),
-                _: 2
-              }, 1032, ["title"]))), 128))
-            ]),
-            _: 3
-          }, 8, ["active-tab-index", "sticky", "sticky-options"])) : l(t.$slots, "default", { key: 2 }, void 0, !0)
-        ]),
-        content: c(() => [
-          l(t.$slots, "inspector-content", {}, void 0, !0)
-        ]),
-        _: 3
-      }, 16)
-    ]));
-  }
-}), it = /* @__PURE__ */ M(Q, [["__scopeId", "data-v-899812f2"]]);
-export {
-  it as d
-};
-//# sourceMappingURL=data-grid-template.DzIpssxc.js.map

package/dist/chunks/data-grid-template.DzIpssxc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-template.DzIpssxc.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template\">\n        <bento-inspector v-bind=\"computedInspectorProps\" ref=\"inspectorRef\" v-on=\"inspectorEvents\">\n            <template #page>\n                <bento-header v-bind=\"header\" variant=\"component\" class=\"b-data-grid-template__header\">\n                    <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                        <slot name=\"infoIconTooltipContent\" />\n                    </template>\n                </bento-header>\n\n                <div\n                    v-if=\"hasSlot('additionalContent')\"\n                    ref=\"additionalContentRef\"\n                    class=\"b-data-grid-template__additional-content\"\n                    :class=\"additionalContentConditionalClasses\"\n                >\n                    <slot name=\"additionalContent\" />\n                </div>\n\n                <bento-tabs\n                    v-if=\"tabsSlots.length > 1\"\n                    ref=\"tabsRef\"\n                    :active-tab-index=\"tabs.activeTabIndex\"\n                    :sticky=\"stickyTabs\"\n                    :sticky-options=\"stickyAdditionalContent ? { top: computedStickyAdditionalContentHeight } : null\"\n                    @update:active-tab-index=\"emitTabs\"\n                >\n                    <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </bento-tab>\n                </bento-tabs>\n\n                <slot v-else />\n            </template>\n\n            <template #content>\n                <slot name=\"inspector-content\" />\n            </template>\n        </bento-inspector>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoHeader } from '@/components/header';\n    import { BentoInspector } from '@/components/inspector';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { computed, PropType, provide, Ref, ref, toRef, UnwrapRef, useSlots } from 'vue';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateInspector,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            required: true,\n        },\n\n        /**\n         * All the tab properties that can be set on the inner tab components.\n         *  - tabs.activeTabIndex: the currenly active tab index.\n         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n         */\n        tabs: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the additional content slot with a sticky positioning\n         */\n        stickyAdditionalContent: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * All the inspector properties that can be set on the inner inspector component.\n         */\n        inspector: {\n            type: Object as PropType<BentoDataGridTemplateInspector>,\n            default: undefined,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when activeTabIndex changes internally\n         */\n        (e: 'update:tabs', value: BentoDataGridTemplateTabs): void;\n\n        /**\n         * Emits update event when the inspector's `isOpen` state changes\n         */\n        (e: 'update:is-open:inspector', value: boolean): void;\n\n        /**\n         * Emits update event when the inspector's `activePage` changes\n         */\n        (e: 'update:active-page:inspector', value: string): void;\n\n        /**\n         * Emits event when the inspector's expand button is clicked\n         */\n        (e: 'expand:inspector', value: boolean): void;\n    }>();\n\n    const tabsRef = ref(null);\n    const additionalContentRef = ref(null);\n    const inspectorRef = ref(null);\n\n    const additionalContentConditionalClasses = computed(() => ({\n        'b-data-grid-template__additional-content--sticky': props.stickyAdditionalContent,\n    }));\n\n    const computedInspectorProps = computed(() => ({\n        title: '',\n        ...props.inspector,\n    }));\n\n    const computedStickyAdditionalContentHeight = computed(() => additionalContentRef?.value?.offsetHeight);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablistwrapper);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const inspectorEvents = computed(() => ({\n        'update:is-open': (value: boolean) => emit('update:is-open:inspector', value),\n        'update:active-page': (value: string) => emit('update:active-page:inspector', value),\n        expand: (value: boolean) => emit('expand:inspector', value),\n    }));\n\n    const emitTabs = (newActiveTabIndex: number) => {\n        emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n    };\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const stickyAdditionalContent: Ref<boolean> = toRef(props, 'stickyAdditionalContent');\n        const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n        const additionalContentSlotRef: Ref<UnwrapRef<HTMLDivElement>> | null = additionalContentRef;\n\n        // return values to the Tab component\n        return {\n            isDataGridTemplate,\n            stickyTabs,\n            tabsRef,\n            stickyAdditionalContent,\n            additionalContentSlotRef,\n        };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","emit","__emit","tabsRef","ref","additionalContentRef","inspectorRef","additionalContentConditionalClasses","computed","computedInspectorProps","computedStickyAdditionalContentHeight","_a","computedTabsRef","_b","tabsSlots","el","inspectorEvents","value","emitTabs","newActiveTabIndex","getTabTitle","index","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY","stickyTabs","toRef","stickyAdditionalContent"],"mappings":";;;;;;;;6CAuMIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/IA,UAAAC,IAAAC,GA2CAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAsBAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GAEAG,IAAAC,EAAA,OAAA;AAAA,MAA4D,oDAAAb,EAAA;AAAA,IACE,EAAA,GAG9Dc,IAAAD,EAAA,OAAA;AAAA,MAA+C,OAAA;AAAA,MACpC,GAAAb,EAAA;AAAA,IACE,EAAA,GAGbe,IAAAF,EAAA,MAAA;;AAAA,cAAAG,IAAAN,KAAA,gBAAAA,EAAA,UAAA,gBAAAM,EAAA;AAAA,KAAA,GAEAC,IAAAJ,EAAA,MAAA;;AAAA,cAAAK,KAAAF,IAAAR,EAAA,UAAA,gBAAAQ,EAAA,UAAA,gBAAAE,EAAA;AAAA,KAAA,GAEAC,IAAAN,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAkB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAAR,EAAA,OAAA;AAAA,MAAwC,kBAAA,CAAAS,MAAAhB,EAAA,4BAAAgB,CAAA;AAAA,MACwC,sBAAA,CAAAA,MAAAhB,EAAA,gCAAAgB,CAAA;AAAA,MACO,QAAA,CAAAA,MAAAhB,EAAA,oBAAAgB,CAAA;AAAA,IACzB,EAAA,GAG9DC,IAAA,CAAAC,MAAA;AACI,MAAAlB,EAAA,eAAA,EAAA,GAAAN,EAAA,MAAA,gBAAAwB,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAA;;AAAA,eAAAR,KAAAF,IAAAhB,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAgB,EAAAU,OAAA,gBAAAR,EAAA,UAAA,OAAAQ,IAAA,CAAA;AAAA;AAmBA,WAAAC,EAAAC,GAjBA,MAAA;AAEI,YAAAC,IAAAC,EAAA9B,GAAA,YAAA,GACA+B,IAAAD,EAAA9B,GAAA,yBAAA;AAKA,aAAA;AAAA,QAAO;AAAA,QACH,YAAA6B;AAAA,QACA,SANJZ;AAAA,QAOI,yBAAAc;AAAA,QACA,0BAPJrB;AAAA,MAQI;AAAA,IACJ,CAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}