@adyen/bento-vue2 1.10.0 → 1.11.1

package/dist/secondary-nav.js

@@ -0,0 +1,98 @@
+import { defineComponent as r, inject as d, computed as p, ref as y, readonly as f, provide as m } from "vue";
+import { B as o } from "./chunks/index.32095db1.js";
+import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index26.css";
+const u = Symbol("secondary nav state"), b = {}, C = /* @__PURE__ */ r({
+  ...b,
+  __name: "secondary-nav-item",
+  props: {
+    label: null,
+    value: null
+  },
+  emits: ["click"],
+  setup(n, { emit: e }) {
+    const a = n, { activeItemValue: s, updateActiveItemValue: t } = d(u), _ = p(() => ({
+      "b-secondary-nav-item--active": s.value === a.value
+    }));
+    return { __sfc: !0, activeItemValue: s, updateActiveItemValue: t, props: a, conditionalClasses: _, emit: e, onClick: (v) => {
+      e("click", v), t(a.value);
+    }, BentoTypography: o };
+  }
+});
+var g = function() {
+  var e = this, a = e._self._c, s = e._self._setupProxy;
+  return a("button", { staticClass: "b-secondary-nav-item", class: s.conditionalClasses, on: { click: s.onClick } }, [a(s.BentoTypography, { staticClass: "b-secondary-nav-item__title", attrs: { variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1);
+}, N = [], x = /* @__PURE__ */ c(
+  C,
+  g,
+  N,
+  !1,
+  null,
+  "88034e97",
+  null,
+  null
+);
+const i = x.exports, $ = {}, h = /* @__PURE__ */ r({
+  ...$,
+  __name: "secondary-nav-category",
+  props: {
+    label: null,
+    items: null
+  },
+  setup(n) {
+    return { __sfc: !0, BentoTypography: o, SecondaryNavItem: i };
+  }
+});
+var I = function() {
+  var e = this, a = e._self._c, s = e._self._setupProxy;
+  return a("section", { staticClass: "b-secondary-nav-category", attrs: { "aria-label": e.label } }, [a(s.BentoTypography, { staticClass: "b-secondary-nav-category__label", attrs: { el: "h1", variant: "caption", stronger: "" } }, [e._v(e._s(e.label))]), a("ul", { staticClass: "b-secondary-nav__list" }, e._l(e.items, function(t) {
+    return a("li", { key: t.value }, [a(s.SecondaryNavItem, { attrs: { label: t.label, value: t.value } })], 1);
+  }), 0)], 1);
+}, S = [], k = /* @__PURE__ */ c(
+  h,
+  I,
+  S,
+  !1,
+  null,
+  "e84d58de",
+  null,
+  null
+);
+const V = k.exports, A = {}, B = /* @__PURE__ */ r({
+  ...A,
+  __name: "secondary-nav",
+  props: {
+    items: null,
+    value: null
+  },
+  emits: ["change"],
+  setup(n, { emit: e }) {
+    const a = n, s = y(a.value), t = (l) => {
+      s.value = l, e("change", l);
+    }, _ = {
+      activeItemValue: f(s),
+      updateActiveItemValue: t
+    };
+    return m(u, _), { __sfc: !0, props: a, emit: e, activeItemValue: s, updateActiveItemValue: t, state: _, SecondaryNavItem: i, SecondaryNavCategory: V };
+  }
+});
+var T = function() {
+  var e = this, a = e._self._c, s = e._self._setupProxy;
+  return a("nav", { staticClass: "b-secondary-nav" }, [a("ul", { staticClass: "b-secondary-nav__list" }, e._l(e.items, function(t) {
+    return a("li", { key: t.label }, ["items" in t ? a(s.SecondaryNavCategory, { attrs: { label: t.label, items: t.items } }) : a(s.SecondaryNavItem, { attrs: { label: t.label, value: t.value } })], 1);
+  }), 0)]);
+}, R = [], F = /* @__PURE__ */ c(
+  B,
+  T,
+  R,
+  !1,
+  null,
+  "7f3beaf9",
+  null,
+  null
+);
+const z = F.exports;
+export {
+  z as BentoSecondaryNav
+};
+//# sourceMappingURL=secondary-nav.js.map

package/dist/secondary-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secondary-nav.js","sources":["../src/components/secondary-nav/secondary-nav.keys.ts","../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': activeItemValue.value === props.value,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: BentoSecondaryNavItemsItem[];\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, readonly, ref } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         */\n        value?: string;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const activeItemValue = ref(props.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","conditionalClasses","computed","props","e","emit","__default__$1","__default__","ref","value","state","readonly","provide"],"mappings":";;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,GC4CTC,IAAA,CAAA;;;;;;;;;iBAlCA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAaAK,IAAAC,EAAA,OAAA;AAAA,MAA2C,gCAAAJ,EAAA,UAAAK,EAAA;AAAA,IACyB,EAAA;yHAUpE,CAAAC,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAL,EAAAI,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;;;qBCLrCG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;qBC0CAC,IAAA,CAAA;;;;;;;;;iBAvCAT,IAAAU,EAAAL,EAAA,KAAA,GACAJ,IAAA,CAAAU,MAAA;AACI,MAAAX,EAAA,QAAAW,GACAJ,EAAA,UAAAI,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAAb,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAAa,EAAAhB,GAAAc,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/segmented-control.js

@@ -1,13 +1,13 @@
 import { defineComponent as g, ref as r, computed as s, toRef as k, toRefs as w, onMounted as L } from "vue";
-import { B as x } from "./chunks/index.858b0720.js";
+import { B as x } from "./chunks/index.32095db1.js";
 import { g as I } from "./chunks/unique-id.a2a2b458.js";
 import { C as S } from "./chunks/checkmark.a6ed8f47.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { u as $ } from "./chunks/i18n.eb5b985b.js";
 import { u as W } from "./chunks/aria-label.ac9651a5.js";
 import { o as T } from "./chunks/resize.a041304d.js";
-import { b as A } from "./chunks/tooltip.4a1300d5.js";
-import "./assets/index23.css";
+import { b as A } from "./chunks/tooltip.1ec3479c.js";
+import "./assets/index28.css";
 const F = g({
   name: "bento-segmented-control-button",
   components: { BentoTypography: x, CheckmarkIcon: S },

package/dist/sidepanel.js

@@ -1,11 +1,11 @@
 import { defineComponent as L, ref as r, inject as B, onUnmounted as V, computed as p, watch as y, nextTick as N, toRefs as F, provide as O } from "vue";
-import { a as w } from "./chunks/button.f3f05408.js";
-import { B as G } from "./chunks/index.858b0720.js";
-import { F as $ } from "./chunks/footer-actions.08a8323b.js";
+import { a as w } from "./chunks/button.3ce10493.js";
+import { B as G } from "./chunks/index.32095db1.js";
+import { F as $ } from "./chunks/footer-actions.da12aa54.js";
 import { A as H } from "./chunks/arrow-left.2db60716.js";
 import { u as R } from "./chunks/i18n.eb5b985b.js";
 import { n as D } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as j } from "./chunks/index.6c299479.js";
+import { B as j } from "./chunks/index.02859365.js";
 import { C as J } from "./chunks/cross.04678d81.js";
 import "./assets/index24.css";
 var h = /* @__PURE__ */ ((l) => (l.UPDATE_ACTIVE_PAGE = "update:active-page", l.UPDATE_IS_OPEN = "update:is-open", l))(h || {}), T = /* @__PURE__ */ ((l) => (l.TRANSITION_LEVEL_DEEPER = "b-sidepanel-page__animation--level-deeper", l.TRANSITION_LEVEL_UPPER = "b-sidepanel-page__animation--level-upper", l))(T || {});

package/dist/status.js

@@ -1,7 +1,7 @@
 import { defineComponent as n, computed as a } from "vue";
-import { B as o } from "./chunks/index.858b0720.js";
+import { B as o } from "./chunks/index.32095db1.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index25.css";
+import "./assets/index34.css";
 var r = /* @__PURE__ */ ((s) => (s.BLUE = "blue", s.GREEN = "green", s.GREY = "grey", s.ORANGE = "orange", s.RED = "red", s.YELLOW = "yellow", s))(r || {});
 const _ = n({
   name: "bento-status",

package/dist/stepper.js

@@ -1,11 +1,11 @@
 import { defineComponent as V, ref as p, computed as o, watch as A, provide as w, readonly as K, useSlots as W, inject as z, onMounted as Z } from "vue";
-import { B as L } from "./chunks/index.858b0720.js";
+import { B as L } from "./chunks/index.32095db1.js";
 import { B as I, a as M } from "./chunks/keyboard-navigation.ca47dfa8.js";
 import { u as U } from "./chunks/i18n.eb5b985b.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as j } from "./chunks/base-button.46843461.js";
+import { B as j } from "./chunks/base-button.f58ffaaa.js";
 import { C as G } from "./chunks/checkmark-small.520f01b1.js";
-import "./assets/index26.css";
+import "./assets/index29.css";
 const q = (i) => {
   function s(r) {
     return ({ detail: u }) => {

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/index.9bdf4d78.js";
+import { B as r, a as o } from "./chunks/index.13ede682.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/summary-grid.js

@@ -4,10 +4,10 @@ import { S as h } from "./chunks/summary-grid.keys.1d1028c2.js";
 import { G as E } from "./chunks/grid-layout.e0025286.js";
 import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoInfoIcon as O } from "./info-icon.js";
-import { B as L, a as g } from "./chunks/index.858b0720.js";
+import { B as L, a as g } from "./chunks/index.32095db1.js";
 import { BentoTag as M, BentoTagVariant as f } from "./tag.js";
-import { C as G } from "./chunks/copy.f4019f8d.js";
-import "./assets/index29.css";
+import { C as G } from "./chunks/copy.14578696.js";
+import "./assets/index37.css";
 const P = l({
   name: "bento-summary-grid",
   components: { GridLayout: E },

package/dist/tabs.js

@@ -1,10 +1,10 @@
 import { defineComponent as m, toRefs as C, ref as _, provide as u, computed as w, inject as p, onUnmounted as A, watch as N, nextTick as B } from "vue";
 import { E as k, T as I, a as h } from "./chunks/tabs.keys.358742f2.js";
 import { n as g } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as R } from "./chunks/index.858b0720.js";
+import { B as R } from "./chunks/index.32095db1.js";
 import { g as D } from "./chunks/unique-id.a2a2b458.js";
-import { F as S } from "./chunks/fixed-scroller.28158c25.js";
-import "./assets/index30.css";
+import { F as S } from "./chunks/fixed-scroller.cd3e1f8d.js";
+import "./assets/index38.css";
 const K = m({
   props: {
     /**

package/dist/tag.js

@@ -1,10 +1,10 @@
 import { defineComponent as c, computed as o } from "vue";
-import { B as d } from "./chunks/index.858b0720.js";
+import { B as d } from "./chunks/index.32095db1.js";
 import { u as m } from "./chunks/aria-label.ac9651a5.js";
 import { g as s } from "./chunks/get-slot-text.99c3d860.js";
-import { b as _ } from "./chunks/tooltip.4a1300d5.js";
+import { b as _ } from "./chunks/tooltip.1ec3479c.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index32.css";
+import "./assets/index39.css";
 var r = /* @__PURE__ */ ((t) => (t.GREY = "grey", t.BLUE = "blue", t.GREEN = "green", t.ORANGE = "orange", t.RED = "red", t.WHITE = "white", t))(r || {});
 const p = c({
   name: "bento-tag",

package/dist/textarea.js

@@ -1,14 +1,14 @@
 import { defineComponent as j, useAttrs as J, toRefs as B, ref as u, toRef as K, computed as o, watch as x, nextTick as Q, onMounted as X } from "vue";
-import { a as ee } from "./chunks/button.f3f05408.js";
-import { B as te } from "./chunks/index.858b0720.js";
+import { a as ee } from "./chunks/button.3ce10493.js";
+import { B as te } from "./chunks/index.32095db1.js";
 import { n as F } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { g as ae } from "./chunks/unique-id.a2a2b458.js";
 import { o as k } from "./chunks/resize.a041304d.js";
 import { u as re } from "./chunks/aria-label.ac9651a5.js";
 import { u as le } from "./chunks/i18n.eb5b985b.js";
 import { u as se } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as oe, F as ne } from "./chunks/field-label.bdf22f47.js";
-import "./assets/index36.css";
+import { E as oe, F as ne } from "./chunks/field-label.3019a2f3.js";
+import "./assets/index40.css";
 let O = 0;
 const ie = {
   beforeCreate() {

package/dist/timeline.js

@@ -1,19 +1,19 @@
 import { defineComponent as Y, computed as r, ref as N, toRefs as Z, provide as A, inject as D, onUnmounted as G } from "vue";
-import { a as z } from "./chunks/button.f3f05408.js";
+import { a as z } from "./chunks/button.3ce10493.js";
 import { BentoTextarea as Q } from "./textarea.js";
 import { u as H } from "./chunks/i18n.eb5b985b.js";
 import { BentoButtonActions as X } from "./button.js";
 import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as ee } from "./chunks/index.158c522b.js";
+import { B as ee } from "./chunks/index.618cc4cb.js";
 import { BentoLink as te } from "./link.js";
 import { BentoTag as ie } from "./tag.js";
-import { B as ae, d as se } from "./chunks/index.858b0720.js";
-import { B as ne, a as oe, S as re } from "./chunks/index.9bdf4d78.js";
+import { B as ae, d as se } from "./chunks/index.32095db1.js";
+import { B as ne, a as oe, S as re } from "./chunks/index.13ede682.js";
 import { g as le } from "./chunks/unique-id.a2a2b458.js";
 import { u as me } from "./chunks/use-has-slot.fbeb19ec.js";
 import { r as ce, e as de, t as w, g as k } from "./chunks/index.f55fdc32.js";
 import { c as ue, a as _e } from "./chunks/index.86453263.js";
-import "./assets/index37.css";
+import "./assets/index41.css";
 var F = 1e3 * 60, M = 60 * 24, U = M * 30, j = M * 365;
 function $(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};

package/dist/toast.js

@@ -1,11 +1,11 @@
 import { defineComponent as d, ref as u, computed as c, onMounted as g, watch as T } from "vue";
 import { u as y } from "./chunks/toastController.fd667b68.js";
 import { C, I as k } from "./chunks/info-filled.27bd4bfb.js";
-import { a as x } from "./chunks/button.f3f05408.js";
-import { B as S } from "./chunks/index.858b0720.js";
+import { a as x } from "./chunks/button.3ce10493.js";
+import { B as S } from "./chunks/index.32095db1.js";
 import { u as w } from "./chunks/use-has-slot.fbeb19ec.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index38.css";
+import "./assets/index42.css";
 const $ = {
   "en-US": {
     dismiss: "Dismiss"

package/dist/toggle.js

@@ -1,13 +1,13 @@
 import { defineComponent as k, ref as p, computed as u, toRefs as I, watch as A } from "vue";
 import { C as B } from "./chunks/checkmark-small.520f01b1.js";
-import { B as L } from "./chunks/index.858b0720.js";
+import { B as L } from "./chunks/index.32095db1.js";
 import { g as E } from "./chunks/unique-id.a2a2b458.js";
 import { u as F } from "./chunks/use-default-slot-validator.b9bff4c6.js";
 import { u as R } from "./chunks/use-has-slot.fbeb19ec.js";
 import { g } from "./chunks/get-slot-text.99c3d860.js";
 import { u as x } from "./chunks/aria-label.ac9651a5.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index39.css";
+import "./assets/index43.css";
 var f = /* @__PURE__ */ ((t) => (t.LABEL_FIRST = "label-first", t))(f || {}), d = /* @__PURE__ */ ((t) => (t.BEFORE = "before", t.AFTER = "after", t))(d || {});
 const D = k({
   name: "bento-toggle",

package/dist/tutorial.js

@@ -1,14 +1,14 @@
 import { defineComponent as g, ref as d, computed as a, isRef as R, watch as F, nextTick as $ } from "vue";
-import { B as I } from "./chunks/index.4824eab5.js";
-import { B as S, a as P } from "./chunks/index.ad4b770b.js";
-import { B as k } from "./chunks/index.858b0720.js";
+import { B as I } from "./chunks/index.c032aa32.js";
+import { B as S, a as P } from "./chunks/index.6a417137.js";
+import { B as k } from "./chunks/index.32095db1.js";
 import { BentoImage as w } from "./image.js";
 import { u as A } from "./chunks/i18n.eb5b985b.js";
 import { R as N } from "./chunks/refresh.71a03998.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as T, h as D, o as M } from "./chunks/index.7039d901.js";
+import { a as T, h as D, o as M } from "./chunks/index.eede8742.js";
 import { BentoButtonActions as V } from "./button.js";
-import "./assets/index27.css";
+import "./assets/index44.css";
 var E;
 const j = /* @__PURE__ */ g({
   __name: "tutorial-indicator",

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { B as p, c as e, b as r, a as y } from "./chunks/index.858b0720.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/index.32095db1.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6590,6 +6590,30 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "dropdown-click-outside-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "items",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdown.props.items"
+              }
+            },
+            {
+              "name": "multiple",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDropdown.props.multiple"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/dropdown/__tests__/dropdown-click-outside-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "dropdown-default-textbox",
           "description": "For internal use only, textbox component used in the dropdown component.",
@@ -7219,6 +7243,14 @@
                 "type": "BentoFilterBarModel"
               },
               "default": "undefined"
+            },
+            {
+              "name": "filterValues",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterValues"
+              },
+              "default": "undefined"
             }
           ],
           "source": {
@@ -8962,6 +8994,102 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "secondary-nav",
+          "description": "",
+          "attributes": [
+            {
+              "name": "items",
+              "required": true,
+              "description": "An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\nwhich is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSecondaryNavItems"
+              }
+            },
+            {
+              "name": "value",
+              "required": false,
+              "description": "The value of the selected item.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "Emmited when the current selected item changes"
+            }
+          ],
+          "source": {
+            "module": "./src/components/secondary-nav/secondary-nav.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "secondary-nav-category",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "The display name of the category",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "items",
+              "required": true,
+              "description": "A list of {@see BentoSecondaryNavItemsItem} that belongs to this category",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "secondary-nav-item",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "The display name of the navigation item",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "The value of this item.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Event emitted when this element is clicked"
+            }
+          ],
+          "source": {
+            "module": "./src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "sidepanel",
           "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "1.10.0",
+    "version": "1.11.1",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -10,7 +10,10 @@
         "dist/"
     ],
     "exports": {
-        ".": "./dist/index.js",
+        ".": {
+            "types": "./dist/@types/packages/vue2/src/index.d.ts",
+            "default": "./dist/index.js"
+        },
         "./fonts.css": "./dist/fonts/fonts.css"
     },
     "sideEffects": [
@@ -57,7 +60,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.10.0",
+        "@adyen/bento-design-tokens": "1.11.1",
         "@adyen/ui-assets-icons-16": "4.1.0",
         "@adyen/ui-assets-payment-method-icons": "6.1.0",
         "@codemirror/commands": "6.3.3",