@adyen/bento-vue2 1.23.0 → 1.24.0

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.255c82a2.js";
-import { B as S, a as P } from "./chunks/index.787ded40.js";
-import { B as k } from "./chunks/index.be6917c8.js";
+import { B as I } from "./chunks/index.87180cdd.js";
+import { B as S, a as P } from "./chunks/index.5d5f2200.js";
+import { B as k } from "./chunks/index.ba6c1040.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.59d76d6b.js";
-import { B as V } from "./chunks/button-actions.3882346f.js";
-import "./assets/index44.css";
+import { a as T, h as D, o as M } from "./chunks/index.51308a21.js";
+import { B as V } from "./chunks/button-actions.239456cb.js";
+import "./assets/index41.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.be6917c8.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/index.ba6c1040.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.23.0",
+  "version": "1.24.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -324,8 +324,19 @@
           "name": "avatar-image",
           "description": "",
           "attributes": [
+            {
+              "name": "color",
+              "required": false,
+              "description": "Avatar color. Defaults to yellow.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoAvatarImageColor"
+              },
+              "default": "BentoAvatarImageColor.YELLOW"
+            },
             {
               "name": "src",
+              "required": false,
               "description": "Image src to load the profile picture.",
               "value": {
                 "kind": "expression",
@@ -335,6 +346,7 @@
             },
             {
               "name": "username",
+              "required": false,
               "description": "Name of the user that will be used to extract initials to display default value.\nJohn => J\nJohn Smith => JS\nJohn Smith Doe => JD\nJohn Smith Doe Holly => JH",
               "value": {
                 "kind": "expression",
@@ -344,21 +356,13 @@
             },
             {
               "name": "variant",
+              "required": false,
               "description": "Variants supported for small and large.\nDefault - large",
               "value": {
                 "kind": "expression",
                 "type": "BentoAvatarImageVariant"
               },
               "default": "BentoAvatarImageVariant.LARGE"
-            },
-            {
-              "name": "color",
-              "description": "Avatar color. Defaults to yellow.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoAvatarImageColor"
-              },
-              "default": "BentoAvatarImageColor.YELLOW"
             }
           ],
           "source": {
@@ -3112,10 +3116,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCurrencyFilterOptions"
+                "type": "BentoSelectCountryFilterOptions"
               },
               "default": "undefined"
             }
@@ -3126,7 +3130,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
             "symbol": "default"
           }
         },
@@ -3136,10 +3140,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item.",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCountryFilterOptions"
+                "type": "BentoSelectCurrencyFilterOptions"
               },
               "default": "undefined"
             }
@@ -3150,7 +3154,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
             "symbol": "default"
           }
         },
@@ -4020,14 +4024,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-toast",
-          "description": "",
-          "source": {
-            "module": "./src/components/toast/toast.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-toggle",
           "description": "A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle",
@@ -4096,84 +4092,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-typography",
-          "description": "The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\neasily to text. The variants and properties match with those found in Figma.\n\nFor example, seeing text with the typography styling of",
-          "attributes": [
-            {
-              "name": "el",
-              "description": "Sets the HTML DOM element.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTypographyElement | `${BentoTypographyElement}`"
-              },
-              "default": "BentoTypographyElement.PARAGRAPH"
-            },
-            {
-              "name": "stronger",
-              "description": "Adds the stronger class modifier.\nApplicable to Caption, Body and Subtitle variants.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "strongest",
-              "description": "Adds the strongest class modifier.\nApplicable to Caption, Body and Subtitle variants.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "variant",
-              "description": "Sets the type of typography variant.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTypographyVariant | `${BentoTypographyVariant}`"
-              },
-              "default": "BentoTypographyVariant.BODY"
-            },
-            {
-              "name": "medium",
-              "description": "Adds the medium class modifier.\nApplicable to the Title variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "large",
-              "description": "Adds the large class modifier.\nApplicable to the Title variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "wide",
-              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/typography/typography.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "button",
           "description": "",
@@ -7766,7 +7684,7 @@
             },
             {
               "name": "dropdown",
-              "description": "Dropdown props for the small selectable dropdown menu.",
+              "description": "Dropdown props for the small selectable dropdown menu.\nProperties supported:\n\n - `value`: Selected value of the dropdown\n - `items`: List of available items",
               "value": {
                 "kind": "expression",
                 "type": "BentoInputDropdownProps"
@@ -11127,55 +11045,99 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "toast",
+          "description": "",
+          "source": {
+            "module": "./src/components/toast/toast.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "toast-item",
           "description": "",
           "attributes": [
             {
-              "name": "text",
+              "name": "toast",
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoToastItem"
               }
-            },
+            }
+          ],
+          "source": {
+            "module": "./src/components/toast/components/toast-item/toast-item.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "toast-mock",
+          "description": "",
+          "attributes": [
             {
-              "name": "action",
+              "name": "items",
               "value": {
                 "kind": "expression",
-                "type": "BentoToastItemAction"
+                "type": "BentoToastItemParams[]"
               },
-              "default": "null"
+              "default": "() => []"
             }
           ],
           "events": [
             {
-              "name": "click"
-            },
+              "name": "toast"
+            }
+          ],
+          "source": {
+            "module": "./src/components/toast/__tests__/toast-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "toast-shadow-stack",
+          "description": "",
+          "events": [
             {
-              "name": "dismiss"
+              "name": "update"
             }
           ],
           "source": {
-            "module": "./src/components/toast/components/toast-item/toast-item.vue",
+            "module": "./src/components/toast/components/toast-shadow-stack/toast-shadow-stack.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "toast-mock",
+          "name": "toast-shadow-stack-mock",
           "description": "",
           "attributes": [
             {
-              "name": "items",
+              "name": "text",
               "value": {
                 "kind": "expression",
-                "type": "BentoToastItem[]"
+                "type": "string"
               },
               "default": "null"
+            },
+            {
+              "name": "action",
+              "value": {
+                "kind": "expression",
+                "type": "BentoToastItemAction"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "update"
+            },
+            {
+              "name": "toast"
             }
           ],
           "source": {
-            "module": "./src/components/toast/__tests__/toast-mock.vue",
+            "module": "./src/components/toast/components/toast-shadow-stack/__tests__/toast-shadow-stack-mock.vue",
             "symbol": "default"
           }
         },
@@ -11584,6 +11546,91 @@
             "module": "./src/components/tutorial/__tests__/tutorial-stub.vue",
             "symbol": "default"
           }
+        },
+        {
+          "name": "typography",
+          "description": "",
+          "attributes": [
+            {
+              "name": "el",
+              "required": false,
+              "description": "Sets the HTML DOM element.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoTypographyElement.PARAGRAPH"
+            },
+            {
+              "name": "large",
+              "required": false,
+              "description": "Adds the large class modifier.\nApplicable to the Title variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "medium",
+              "required": false,
+              "description": "Adds the medium class modifier.\nApplicable to the Title variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "stronger",
+              "required": false,
+              "description": "Adds the stronger class modifier.\nApplicable to Caption, Body and Subtitle variants.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "strongest",
+              "required": false,
+              "description": "Adds the strongest class modifier.\nApplicable to Caption, Body and Subtitle variants.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "Sets the type of typography variant.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoTypographyVariant.BODY"
+            },
+            {
+              "name": "wide",
+              "required": false,
+              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/typography/typography.vue",
+            "symbol": "default"
+          }
         }
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "1.23.0",
+    "version": "1.24.0",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -62,7 +62,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.23.0",
+        "@adyen/bento-design-tokens": "1.24.0",
         "@adyen/ui-assets-icons-16": "4.1.0",
         "@adyen/ui-assets-payment-method-icons": "6.1.0",
         "@codemirror/commands": "6.3.3",

package/dist/chunks/index.0b534dc6.js

@@ -1,83 +0,0 @@
-import { ref as i, computed as n, defineComponent as l, toRefs as o } from "vue";
-import { B as c } from "./index.be6917c8.js";
-import "./index.4c062058.js";
-import { n as u } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/index19.css";
-const _ = (a) => {
-  const t = i(a);
-  return n(() => t.value ? t.value.trim().charAt(0).toUpperCase() : null);
-};
-var s = /* @__PURE__ */ ((a) => (a.LARGE = "large", a.SMALL = "small", a))(s || {}), r = /* @__PURE__ */ ((a) => (a.BLUE = "blue", a.GREEN = "green", a.RED = "red", a.YELLOW = "yellow", a))(r || {});
-const d = l({
-  name: "avatar-image",
-  components: { BentoTypography: c },
-  props: {
-    /**
-     * Image src to load the profile picture.
-     */
-    src: {
-      type: String,
-      default: null
-    },
-    /**
-     * Name of the user that will be used to extract initials to display default value.
-     * John => J
-     * John Smith => JS
-     * John Smith Doe => JD
-     * John Smith Doe Holly => JH
-     */
-    username: {
-      type: String,
-      default: null
-    },
-    /**
-     * Variants supported for small and large.
-     * Default - large
-     */
-    variant: {
-      type: String,
-      default: s.LARGE,
-      validator: (a) => Object.values(s).includes(a)
-    },
-    /**
-     * Avatar color. Defaults to yellow.
-     */
-    color: {
-      type: String,
-      default: r.YELLOW,
-      validator: (a) => Object.values(r).includes(a)
-    }
-  },
-  setup(a) {
-    const { username: t } = o(a), e = _(t);
-    return {
-      // Values
-      conditionalClasses: n(() => ({
-        [`b-avatar-image--${s.SMALL}`]: a.variant === s.SMALL,
-        [`b-avatar-image--${a.color}`]: a.color
-      })),
-      initials: e
-    };
-  }
-});
-var m = function() {
-  var t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { staticClass: "b-avatar-image", class: t.conditionalClasses, attrs: { "aria-hidden": "true", "data-testid": "avatar" } }, [t.src ? e("img", { staticClass: "b-avatar-image__image", attrs: { src: t.src, alt: "Profile picture", "data-testid": "avatar-content" } }) : e("div", { staticClass: "b-avatar-image__default", attrs: { "data-testid": "avatar-content" } }, [e("bento-typography", { attrs: { el: "span", variant: "body", strongest: "" } }, [t._v(" " + t._s(t.initials) + " ")])], 1)]);
-}, v = [], p = /* @__PURE__ */ u(
-  d,
-  m,
-  v,
-  !1,
-  null,
-  "46be3f6e",
-  null,
-  null
-);
-const E = p.exports;
-export {
-  E as A,
-  r as B,
-  s as a,
-  _ as u
-};
-//# sourceMappingURL=index.0b534dc6.js.map

package/dist/chunks/index.0b534dc6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.0b534dc6.js","sources":["../../src/composables/initials.ts","../../src/components/avatar-image/avatar-image.types.ts","../../src/components/avatar-image/avatar-image.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"Profile picture\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    export default defineComponent({\n        name: 'avatar-image',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Name of the user that will be used to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Variants supported for small and large.\n             * Default - large\n             */\n            variant: {\n                type: String as PropType<BentoAvatarImageVariant>,\n                default: BentoAvatarImageVariant.LARGE,\n                validator: (value: BentoAvatarImageVariant) => Object.values(BentoAvatarImageVariant).includes(value),\n            },\n            /**\n             * Avatar color. Defaults to yellow.\n             */\n            color: {\n                type: String as PropType<BentoAvatarImageColor>,\n                default: BentoAvatarImageColor.YELLOW,\n                validator: (value: BentoAvatarImageColor) => Object.values(BentoAvatarImageColor).includes(value),\n            },\n        },\n        setup(props) {\n            const { username } = toRefs(props);\n            const initials = useInitials(username);\n\n            const conditionalClasses = computed(() => ({\n                [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n                [`b-avatar-image--${props.color}`]: props.color,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n                initials,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","_sfc_main","defineComponent","BentoTypography","value","props","toRefs","initials"],"mappings":";;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACYZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,KAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAQA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAK,MAAA,OAAA,OAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAA,EAAA,UAAAZ,EAAA,IAAAa,EAAAD,CAAA,GACAE,IAAAf,EAAAC,CAAA;AAOA,WAAA;AAAA;AAAA,MAAA,oBALAG,EAAA,OAAA;AAAA,QAAA,CAAA,mBAAAC,EAAA,OAAA,GAAAQ,EAAA,YAAAR,EAAA;AAAA,QACA,CAAA,mBAAAQ,EAAA,OAAA,GAAAA,EAAA;AAAA,MACA,EAAA;AAAA,MAKA,UAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}