@adyen/bento-vue3 2.0.0-rc.6 → 2.0.0

package/dist/search-bar.js

@@ -1,5 +1,5 @@
-import { B as r, a as t, b as B } from "./chunks/search-bar.CAsAh02R.js";
-import { f as o } from "./chunks/dropdown.DivEbn7p.js";
+import { B as r, a as t, b as B } from "./chunks/search-bar.5tObtLfW.js";
+import { f as o } from "./chunks/dropdown.D_jkFrMd.js";
 export {
   r as BentoSearchBar,
   t as BentoSearchBarEvent,

package/dist/secondary-nav.js

@@ -1,4 +1,4 @@
-import { s as e } from "./chunks/secondary-nav.DOgZJUTd.js";
+import { s as e } from "./chunks/secondary-nav.Bhn5bVYI.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/segmented-control.6XApEjVS.js";
+import { B as t } from "./chunks/segmented-control.CEt2dz4n.js";
 import { B as r } from "./chunks/segmented-control.types.BHRLV8KU.js";
 export {
   t as BentoSegmentedControl,

package/dist/selection-card.js

@@ -1,4 +1,4 @@
-import { B as t, s as a, a as n } from "./chunks/selection-card-group.emQVruZd.js";
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.DHXtJpoB.js";
 export {
   t as BentoSelectionCard,
   a as BentoSelectionCardGroup,

package/dist/sidepanel.js

@@ -1,4 +1,4 @@
-import { s as n, B as o, a as t } from "./chunks/sidepanel.DcrakBM9.js";
+import { s as n, B as o, a as t } from "./chunks/sidepanel._30g8POM.js";
 export {
   n as BentoSidepanel,
   o as BentoSidepanelEvent,

package/dist/stepper.js

@@ -1,4 +1,4 @@
-import { s as p, a as o, B as a, b as n } from "./chunks/step.Ch6oovwT.js";
+import { s as p, a as o, B as a, b as n } from "./chunks/step.5_ZukVqJ.js";
 export {
   p as BentoStep,
   o as BentoStepper,

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/structured-list-item.exe4zQXe.js";
+import { B as r, a as o } from "./chunks/structured-list-item.CBzznwcF.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/styles/bento-dark.css

@@ -193,7 +193,7 @@
   --b-color-label-inverse-critical-active: #751e00;
   --b-color-label-inverse-critical-hover: #c13101;
   --b-color-label-inverse-critical: #dc3801;
-  --b-color-label-inverse-disabled: #949494;
+  --b-color-label-inverse-disabled: #a4a4a4;
   --b-color-label-inverse-secondary: #676767;
   --b-color-label-inverse-primary-active: #363636;
   --b-color-label-inverse-primary-hover: #2a2a2a;
@@ -205,7 +205,7 @@
   --b-color-label-critical-active: #ffded3;
   --b-color-label-critical-hover: #ffbda6;
   --b-color-label-critical: #ff9a78;
-  --b-color-label-disabled: #7d7d7d;
+  --b-color-label-disabled: #6e6e6e;
   --b-color-label-tertiary: #7d7d7d;
   --b-color-label-secondary: #b4b4b4;
   --b-color-label-primary-active: #cbcbcb;
@@ -273,7 +273,7 @@
   --b-color-background-selected-active: #004a94;
   --b-color-background-selected-hover: #003d79;
   --b-color-background-selected: #00305f;
-  --b-color-background-disabled: #363636;
+  --b-color-background-disabled: #2a2a2a;
   --b-color-background-modal-active: #363636;
   --b-color-background-modal-hover: #2a2a2a;
   --b-color-background-modal: #1d1d1d;

package/dist/styles/bento-light.css

@@ -192,7 +192,7 @@
   --b-color-label-inverse-critical-active: #ffded3;
   --b-color-label-inverse-critical-hover: #ffc9b6;
   --b-color-label-inverse-critical: #ffb196;
-  --b-color-label-inverse-disabled: #858585;
+  --b-color-label-inverse-disabled: #767676;
   --b-color-label-inverse-secondary: #949494;
   --b-color-label-inverse-primary-active: #ededed;
   --b-color-label-inverse-primary-hover: #f5f5f5;
@@ -204,7 +204,7 @@
   --b-color-label-critical-active: #751e00;
   --b-color-label-critical-hover: #b42e01;
   --b-color-label-critical: #ce3401;
-  --b-color-label-disabled: rgba(17, 17, 17, 0.45);
+  --b-color-label-disabled: rgba(17, 17, 17, 0.38);
   --b-color-label-tertiary: rgba(17, 17, 17, 0.45);
   --b-color-label-secondary: rgba(17, 17, 17, 0.64);
   --b-color-label-primary-active: rgba(17, 17, 17, 0.58);
@@ -241,7 +241,7 @@
   --b-color-background-inverse-critical-weak-active: #751e00;
   --b-color-background-inverse-critical-weak-hover: #681a00;
   --b-color-background-inverse-critical-weak: #5c1800;
-  --b-color-background-inverse-disabled: #363635;
+  --b-color-background-inverse-disabled: #232322;
   --b-color-background-inverse-tertiary-active: #4c4a49;
   --b-color-background-inverse-tertiary-hover: #3d3d3c;
   --b-color-background-inverse-tertiary: #30302f;
@@ -272,7 +272,7 @@
   --b-color-background-selected-active: #c8dff7;
   --b-color-background-selected-hover: #d4e6f9;
   --b-color-background-selected: #e3effb;
-  --b-color-background-disabled: rgba(17, 17, 16, 0.07);
+  --b-color-background-disabled: rgba(17, 17, 16, 0.04);
   --b-color-background-modal-active: #efeeed;
   --b-color-background-modal-hover: #f6f5f4;
   --b-color-background-modal: #ffffff;

package/dist/styles/bento.css

@@ -192,7 +192,7 @@
   --b-color-label-inverse-critical-active: #ffded3;
   --b-color-label-inverse-critical-hover: #ffc9b6;
   --b-color-label-inverse-critical: #ffb196;
-  --b-color-label-inverse-disabled: #858585;
+  --b-color-label-inverse-disabled: #767676;
   --b-color-label-inverse-secondary: #949494;
   --b-color-label-inverse-primary-active: #ededed;
   --b-color-label-inverse-primary-hover: #f5f5f5;
@@ -204,7 +204,7 @@
   --b-color-label-critical-active: #751e00;
   --b-color-label-critical-hover: #b42e01;
   --b-color-label-critical: #ce3401;
-  --b-color-label-disabled: rgba(17, 17, 17, 0.45);
+  --b-color-label-disabled: rgba(17, 17, 17, 0.38);
   --b-color-label-tertiary: rgba(17, 17, 17, 0.45);
   --b-color-label-secondary: rgba(17, 17, 17, 0.64);
   --b-color-label-primary-active: rgba(17, 17, 17, 0.58);
@@ -241,7 +241,7 @@
   --b-color-background-inverse-critical-weak-active: #751e00;
   --b-color-background-inverse-critical-weak-hover: #681a00;
   --b-color-background-inverse-critical-weak: #5c1800;
-  --b-color-background-inverse-disabled: #363635;
+  --b-color-background-inverse-disabled: #232322;
   --b-color-background-inverse-tertiary-active: #4c4a49;
   --b-color-background-inverse-tertiary-hover: #3d3d3c;
   --b-color-background-inverse-tertiary: #30302f;
@@ -272,7 +272,7 @@
   --b-color-background-selected-active: #c8dff7;
   --b-color-background-selected-hover: #d4e6f9;
   --b-color-background-selected: #e3effb;
-  --b-color-background-disabled: rgba(17, 17, 16, 0.07);
+  --b-color-background-disabled: rgba(17, 17, 16, 0.04);
   --b-color-background-modal-active: #efeeed;
   --b-color-background-modal-hover: #f6f5f4;
   --b-color-background-modal: #ffffff;

package/dist/styles/legacy.css

@@ -192,7 +192,7 @@
   --b-color-label-inverse-critical-active: #ffded3;
   --b-color-label-inverse-critical-hover: #ffc9b6;
   --b-color-label-inverse-critical: #ffb196;
-  --b-color-label-inverse-disabled: #858585;
+  --b-color-label-inverse-disabled: #767676;
   --b-color-label-inverse-secondary: #949494;
   --b-color-label-inverse-primary-active: #ededed;
   --b-color-label-inverse-primary-hover: #f5f5f5;
@@ -204,7 +204,7 @@
   --b-color-label-critical-active: #751e00;
   --b-color-label-critical-hover: #b42e01;
   --b-color-label-critical: #ce3401;
-  --b-color-label-disabled: rgba(17, 17, 17, 0.45);
+  --b-color-label-disabled: rgba(17, 17, 17, 0.38);
   --b-color-label-tertiary: rgba(17, 17, 17, 0.45);
   --b-color-label-secondary: rgba(17, 17, 17, 0.64);
   --b-color-label-primary-active: rgba(17, 17, 17, 0.58);
@@ -241,7 +241,7 @@
   --b-color-background-inverse-critical-weak-active: #751e00;
   --b-color-background-inverse-critical-weak-hover: #681a00;
   --b-color-background-inverse-critical-weak: #5c1800;
-  --b-color-background-inverse-disabled: #363635;
+  --b-color-background-inverse-disabled: #232322;
   --b-color-background-inverse-tertiary-active: #4c4a49;
   --b-color-background-inverse-tertiary-hover: #3d3d3c;
   --b-color-background-inverse-tertiary: #30302f;
@@ -272,7 +272,7 @@
   --b-color-background-selected-active: #c8dff7;
   --b-color-background-selected-hover: #d4e6f9;
   --b-color-background-selected: #e3effb;
-  --b-color-background-disabled: rgba(17, 17, 16, 0.07);
+  --b-color-background-disabled: rgba(17, 17, 16, 0.04);
   --b-color-background-modal-active: #efeeed;
   --b-color-background-modal-hover: #f6f5f4;
   --b-color-background-modal: #ffffff;

package/dist/styles/styleguide.css

@@ -247,7 +247,7 @@
   --b-color-label-inverse-critical-active: #ffded3;
   --b-color-label-inverse-critical-hover: #ffc9b6;
   --b-color-label-inverse-critical: #ffb196;
-  --b-color-label-inverse-disabled: #858585;
+  --b-color-label-inverse-disabled: #767676;
   --b-color-label-inverse-secondary: #949494;
   --b-color-label-inverse-primary-active: #ededed;
   --b-color-label-inverse-primary-hover: #f5f5f5;
@@ -259,7 +259,7 @@
   --b-color-label-critical-active: #751e00;
   --b-color-label-critical-hover: #b42e01;
   --b-color-label-critical: #ce3401;
-  --b-color-label-disabled: rgba(17, 17, 17, 0.45);
+  --b-color-label-disabled: rgba(17, 17, 17, 0.38);
   --b-color-label-tertiary: rgba(17, 17, 17, 0.45);
   --b-color-label-secondary: rgba(17, 17, 17, 0.64);
   --b-color-label-primary-active: rgba(17, 17, 17, 0.58);
@@ -296,7 +296,7 @@
   --b-color-background-inverse-critical-weak-active: #751e00;
   --b-color-background-inverse-critical-weak-hover: #681a00;
   --b-color-background-inverse-critical-weak: #5c1800;
-  --b-color-background-inverse-disabled: #363635;
+  --b-color-background-inverse-disabled: #232322;
   --b-color-background-inverse-tertiary-active: #4c4a49;
   --b-color-background-inverse-tertiary-hover: #3d3d3c;
   --b-color-background-inverse-tertiary: #30302f;
@@ -327,7 +327,7 @@
   --b-color-background-selected-active: #c8dff7;
   --b-color-background-selected-hover: #d4e6f9;
   --b-color-background-selected: #e3effb;
-  --b-color-background-disabled: rgba(17, 17, 16, 0.07);
+  --b-color-background-disabled: rgba(17, 17, 16, 0.04);
   --b-color-background-modal-active: #efeeed;
   --b-color-background-modal-hover: #f6f5f4;
   --b-color-background-modal: #ffffff;

package/dist/styles/utility.css

@@ -44,7 +44,7 @@
     background-color: #efeeed;
 }
 .b-color-background-disabled {
-    background-color: rgba(17, 17, 16, 0.07);
+    background-color: rgba(17, 17, 16, 0.04);
 }
 .b-color-background-selected {
     background-color: #e3effb;
@@ -137,7 +137,7 @@
     background-color: #4c4a49;
 }
 .b-color-background-inverse-disabled {
-    background-color: #363635;
+    background-color: #232322;
 }
 .b-color-background-inverse-critical-weak {
     background-color: #5c1800;
@@ -248,7 +248,7 @@
     color: rgba(17, 17, 17, 0.45);
 }
 .b-color-label-disabled {
-    color: rgba(17, 17, 17, 0.45);
+    color: rgba(17, 17, 17, 0.38);
 }
 .b-color-label-critical {
     color: #ce3401;
@@ -284,7 +284,7 @@
     color: #949494;
 }
 .b-color-label-inverse-disabled {
-    color: #858585;
+    color: #767676;
 }
 .b-color-label-inverse-critical {
     color: #ffb196;

package/dist/summary-grid.js

@@ -1,4 +1,4 @@
-import { s as r, a as t, _ as a, b as o, c as i, B as n, d as u, e as d } from "./chunks/summary-grid.types.BYqz5zdo.js";
+import { s as r, a as t, _ as a, b as o, c as i, B as n, d as u, e as d } from "./chunks/summary-grid.types.BR_EGvRg.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/table-of-contents.js

@@ -1,4 +1,4 @@
-import { t as o } from "./chunks/table-of-contents.DIDNJXqh.js";
+import { t as o } from "./chunks/table-of-contents.CJ2yMbAG.js";
 export {
   o as BentoTableOfContents
 };

package/dist/tabs.js

@@ -1,4 +1,4 @@
-import { B as e, a as s } from "./chunks/tab.Bat55rEc.js";
+import { B as e, a as s } from "./chunks/tab.D_k5AVHk.js";
 export {
   e as BentoTab,
   s as BentoTabs

package/dist/tag.js

@@ -1,4 +1,4 @@
-import { B as t, a as e } from "./chunks/tag.DmGI_QZ-.js";
+import { B as t, a as e } from "./chunks/tag.BE1j0Oid.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.-owTWdhj.js";
+import { B as o } from "./chunks/textarea.BYshPd98.js";
 export {
   o as BentoTextarea
 };

package/dist/timeline.js

@@ -1,4 +1,4 @@
-import { t, B as i, a, b as m, c as o, d as l } from "./chunks/timeline-item.DvlhZ_-D.js";
+import { t, B as i, a, b as m, c as o, d as l } from "./chunks/timeline-item.Sy_DSw6p.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/toast.js

@@ -1,4 +1,4 @@
-import { B as a } from "./chunks/toast.N4m58lr8.js";
+import { B as a } from "./chunks/toast.u5Y_CGe_.js";
 export {
   a as BentoToast
 };

package/dist/toggle.js

@@ -1,4 +1,4 @@
-import { B as a, a as g, b as s } from "./chunks/toggle.BqQ7NGMb.js";
+import { B as a, a as g, b as s } from "./chunks/toggle.BW8ww0Ih.js";
 export {
   a as BentoToggle,
   g as BentoToggleLabelPosition,

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.CMkHWnq2.js";
+import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.BIP-heAH.js";
 export {
   t as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -25,7 +25,7 @@
                 "kind": "expression",
                 "type": "any"
               },
-              "default": "BentoLinkVariant.DEFAULT"
+              "default": "'default'"
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0",
   "description": "Adyen Bento Vue 3 components",
   "type": "module",
   "main": "dist/index.js",
@@ -48,7 +48,7 @@
     "unified": "11.0.5",
     "uuid": "11.1.1",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "2.0.0-rc.6"
+    "@adyen/bento-design-tokens": "2.0.0"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -114,10 +114,10 @@
     "vue-router": "~4.1",
     "vue-tsc": "3.3.5",
     "zod": "3.25.35",
-    "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-vue-i18n-demi": "0.1.0",
     "@adyen/ui-assets-icons-16": "7.9.7",
-    "@adyen/ui-assets-payment-method-icons": "13.0.1"
+    "@adyen/ui-assets-payment-method-icons": "13.0.1",
+    "@adyen/bento-core": "0.0.1",
+    "@adyen/bento-vue-i18n-demi": "0.1.0"
   },
   "scripts": {
     "build": "pnpm run build:prod",
@@ -126,7 +126,7 @@
     "build:watch": "NODE_ENV=development pnpm run build:lib --mode development --watch",
     "build:prod": "pnpm run clean:build && pnpm run build:lib && pnpm run build:types && pnpm run build:webtypes",
     "build:types:alias": "tsc-alias -p ./tsconfig.d.json -r ./build/extra-replacer.cjs",
-    "build:types:api-extractor": "api-extractor run --local --verbose && rm -rf dist/@types/core && rm -rf dist/@types/vue2 && rm -rf dist/@types/vue3",
+    "build:types:api-extractor": "api-extractor run --local --verbose && rm -rf dist/@types/vue2 && rm -rf dist/@types/vue3",
     "build:types:use-form": "vue-tsc -p ./tsconfig.use-form.json && api-extractor run -c api-extractor.use-form.json --local && rm -rf dist/@types/use-form-v4/",
     "build:types:shim": "sed 's/PluginObject/Plugin/g' ./dist/@types/index.d.ts > ./dist/@types/index.d.ts.tmp && mv ./dist/@types/index.d.ts.tmp ./dist/@types/index.d.ts",
     "build:types": "vue-tsc -p ./tsconfig.d.json && pnpm run build:types:alias && pnpm run build:types:api-extractor && pnpm run build:types:shim && pnpm run build:types:use-form && pnpm run copy-components-defs",

package/dist/chunks/accordion-item.CDqXAJ_o.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion-item.CDqXAJ_o.js","sources":["../../../vue2/src/components/accordion/accordion.keys.ts","../../../vue2/src/components/accordion/accordion.vue","../../../vue2/src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon\n                    v-if=\"isOpen\"\n                    class=\"b-accordion-item__icon\"\n                    :svg-title=\"t('collapse')\"\n                    aria-hidden=\"true\"\n                />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" :svg-title=\"t('expand')\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","__props","__default__","messages","CONTENT_TRANSITION_NAME","props","emit","__emit","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value"],"mappings":";;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,oCAAA,iCCqDHC,IAAA,CAAA;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAXAC,GAWA,WAAA,CAAA;;;;;;;;;;;;;;;;mHCoHAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;AAvFA,UAAAC,IAAA,wCAEAC,IAAAJ,GAiBAK,IAAAC,GAOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAN,EAAA,UAAA,GAGAQ,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAApB,GAAA,SAAA,GAGA,EAAA,eAAAqB,EAAA,IAAAC,EAAAT,GAAAE,CAAA,GAEAQ,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAjB,EAAA;AAAA,MACgB,CAAAkB,MAAA;AAER,QAAAX,EAAA,QAAAW;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAAV;AAAA,MACI,CAAAW,MAAA;AAGI,QAAAjB,EAAA,sBAAAiB,CAAA;AAAA,MAAgC;AAAA,MACpC,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/action-bar.Y0-Y1Lxb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-bar.Y0-Y1Lxb.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `confirmation` variant.\n         */\n        (e: 'cancel'): void;\n        /**\n         * Event emitted when the user clicks the save button in `confirmation` variant.\n         */\n        (e: 'save'): void;\n        /**\n         * Event emitted when the user clicks the undo button in `success` state.\n         */\n        (e: 'undo-action'): void;\n        /**\n         * Event emitted when the user clicks the retry button in `fail` state.\n         */\n        (e: 'retry-action'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `fail` state.\n         */\n        (e: 'cancel-action'): void;\n    }>();\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","tc","n","useI18n","label","computed","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}

package/dist/chunks/ai-tag.BQQA6de2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ai-tag.BQQA6de2.js","sources":["../../../vue2/src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoAiTagProps>(), {\n        influencedValue: undefined,\n        toggled: false,\n        action: undefined,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the popover is toggled\n         */\n        (e: 'update:toggled', toggled: boolean): void;\n    }>();\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","props","__props","t","useI18n","toggled","ref","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","emit","__emit","onToggle"],"mappings":";;;;;;;;;;;;;;;;;;;;+CA0IIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAAL,EAAA,OAAA,GACAM,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,CAAAW,MAAA;AAER,QAAAP,EAAA,QAAAO;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAf,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAGVgB,IAAAC,GAOAC,IAAA,CAAAP,MAAA;AACI,MAAAP,EAAA,QAAAO,GACAK,EAAA,kBAAAL,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAT,EAAA,SACIc,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/anchor-scroller.B2TgWdCo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"anchor-scroller.B2TgWdCo.js","sources":["../../../vue2/src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../../vue2/src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"navigationItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"isFocusable(index) ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"onScrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"onScrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"onScrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { useSectionNavigationKeyboard } from '@/composables/use-section-navigation-keyboard';\n    import { scrollToSection, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, toRef } from 'vue';\n\n    const props = withDefaults(defineProps<AnchorScrollerListProps>(), {\n        activeIndex: undefined,\n        scrollOffset: undefined,\n    });\n\n    const navigationItems = computed(() => props.items);\n    const { isFocusable, navigationItemRefs, onKeydownNavigation } = useSectionNavigationKeyboard(navigationItems, {\n        isDisabled: item => item.disabled,\n        initialIndex: toRef(props, 'activeIndex'),\n    });\n\n    const onScrollToSection = (\n        elementRef: AnchorScrollerListProps['items'][number]['elementRef'],\n        disabled?: boolean\n    ) =>\n        scrollToSection(elementRef as ScrollToSectionTarget, {\n            disabled,\n            scrollOffset: props.scrollOffset,\n            warningPrefix: 'bento-anchor-scroller',\n        });\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from '@/composables/use-scroll-spy';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = withDefaults(defineProps<BentoAnchorScrollerProps>(), {\n        activeIndex: undefined,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when the active index is changed\n         */\n        (e: 'update:active-index', value: number): void;\n    }>();\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n        debounce: 200,\n    });\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[scrollSpyActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["props","__props","navigationItems","computed","isFocusable","navigationItemRefs","onKeydownNavigation","useSectionNavigationKeyboard","item","toRef","onScrollToSection","elementRef","disabled","scrollToSection","__default__","messages","t","useI18n","emit","__emit","navigationRef","ref","computedItems","enabledItems","originalIndex","unrefElement","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","scrollSpyActiveIndex","useScrollSpy","currentActiveIndex","candidate","watch","val","printDevelopmentWarning","navLabelId","generateUid"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BI,UAAAA,IAAAC,GAKAC,IAAAC,EAAA,MAAAH,EAAA,KAAA,GACA,EAAA,aAAAI,GAAA,oBAAAC,GAAA,qBAAAC,EAAA,IAAAC,EAAAL,GAAA;AAAA,MAA+G,YAAA,CAAAM,MAAAA,EAAA;AAAA,MAClF,cAAAC,EAAAT,GAAA,aAAA;AAAA,IACe,CAAA,GAG5CU,IAAA,CAAAC,GAAAC,MAAAC,EAAAF,GAAA;AAAA,MAIyD,UAAAC;AAAA,MACjD,cAAAZ,EAAA;AAAA,MACoB,eAAA;AAAA,IACL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mFCmGvBc,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;AAvGA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAf,IAAAC,GAIAiB,IAAAC,GAOAC,IAAAC,EAAA,IAAA,GAEAC,IAAAnB,EAAA,MAAAH,EAAA,MAAA,IAAA,CAAAQ,OAAA,EAAA,GAAAA,EAAA,EAAA,CAAA,GAGAe,IAAApB;AAAA,MAAqB,MAAAH,EAAA,MAAA,IAAA,CAAAQ,GAAAgB,OAAA;AAAA,QAEkB,SAAAC,EAAAjB,EAAA,UAAA;AAAA,QACU,eAAAgB;AAAA,QACrC,UAAAhB,EAAA;AAAA,MACe,EAAA,EAAA;AAAA,QAElB,CAAAA,MAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,MAEgC;AAAA,IACjC,GAGR,EAAA,KAAAkB,GAAA,QAAAC,EAAA,IAAAC,EAAAR,CAAA,GAGAS,IAAA1B,EAAA,MAAAoB,EAAA,MAAA,IAAA,CAAAO,MAAAA,EAAA,OAAA,CAAA,GAEAC,IAAA5B,EAAA,OAAA;AAAA,MAAqD,yCAAAuB,EAAA,SAAA;AAAA,IACK,EAAA,GAG1D,EAAA,aAAAM,EAAA,IAAAC,EAAAJ,GAAA;AAAA,MAA4E,SAAApB,EAAAT,GAAA,aAAA;AAAA,MACrC,UAAA;AAAA,IACzB,CAAA,GAGdkC,IAAA/B,EAAA,MAAA;AACI,YAAAgC,IAAAZ,EAAA,MAAAS,EAAA,KAAA;AAEA,aAAAG,IAAAA,EAAA,gBAAA;AAAA,IAA6C,CAAA;AAGjD,IAAAC,EAAAF,GAAA,CAAAG,MAAA;AACI,MAAA,OAAA,SAAAA,CAAA,KACInB,EAAA,uBAAAmB,CAAA;AAAA,IACJ,CAAA,GAGJD;AAAA,MAAA,MAAApC,EAAA;AAAA,MACgB,CAAAqC,MAAA;AAER,QAAA,OAAA,SAAAA,CAAA,KAAAf,EAAA,MAAAe,CAAA,EAAA,YACIC,EAAA,mEAAA;AAAA,MACJ;AAAA,IACJ;AAGJ,UAAAC,IAAAC,EAAA,6BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}