@adyen/bento-vue2 1.49.0 → 1.51.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.49.0",
+  "version": "1.51.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2047,84 +2047,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-listbox-multi-select",
-          "description": "Listbox multi-select options list",
-          "attributes": [
-            {
-              "name": "hasMoreItems",
-              "description": "Indicates whether there are more items to load",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "isOptionDisabled",
-              "description": "Function that allows the options to be disabled",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxIsOptionDisabled"
-              },
-              "default": "() => false"
-            },
-            {
-              "name": "items",
-              "required": true,
-              "description": "The option elements to populate the listbox with.\nIt must be an array of {@see BentoListboxOptionItem }.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxOptions"
-              }
-            },
-            {
-              "name": "lazyLoadType",
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`"
-              },
-              "default": "BentoListboxLazyLoadType.NONE"
-            },
-            {
-              "name": "searching",
-              "description": "Flag that indicates that an external search it's being made\nto filter out the items inside the the multi-select listbox\n\nIf enabled, hides the \"Select all\" checkbox in \"multiple\" mode.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "selectedValues",
-              "required": true,
-              "description": "The `input` value.\nProviding an empty array will select no options.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoListboxOptions"
-              }
-            },
-            {
-              "name": "staticCategories",
-              "description": "If enabled, dropdown will display non-selectable, static categories",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "slots": [
-            {
-              "name": "innerSlot"
-            }
-          ],
-          "source": {
-            "module": "./src/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-listbox-multi-select-category",
           "description": "Listbox multi-select category list.\nAllows the rendering of nested lists",
@@ -2374,7 +2296,7 @@
                 "kind": "expression",
                 "type": "BentoMenuButtonProps"
               },
-              "default": "() =>\n    ({\n        variant: 'secondary',\n    } as BentoMenuButtonProps)"
+              "default": "() =>\n    (({\n        variant: 'secondary'\n    }) as BentoMenuButtonProps)"
             },
             {
               "name": "closeMenuOnItemSelect",
@@ -2438,11 +2360,23 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "closeOnClickOutsideOptions",
+              "description": "Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node\n(or `dialog` if popover is inside a dialog).",
+              "value": {
+                "kind": "expression",
+                "type": "OnClickOutsideOptions"
+              },
+              "default": "undefined"
             }
           ],
           "events": [
             {
               "name": "menu-item-click"
+            },
+            {
+              "name": "click-outside"
             }
           ],
           "slots": [
@@ -2461,43 +2395,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-payment-method",
-          "description": "A payment method type component to display the type's icon and label.",
-          "attributes": [
-            {
-              "name": "type",
-              "description": "The type of payment method to display.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "'Unknowncard'"
-            },
-            {
-              "name": "label",
-              "required": true,
-              "description": "The label describing to the payment method icon.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "small",
-              "description": "Render payment method icon in a smaller size",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/payment-method/payment-method.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-popover-dismiss-button",
           "description": "",
@@ -7700,7 +7597,8 @@
           "attributes": [
             {
               "name": "config",
-              "description": "Array of filters based on {@see BentoFilterBarModel}.\nEach one of the elements in the array correspond to a filter that will\nbe created and rendered in the FilterBar.",
+              "required": false,
+              "description": "Array of filters based on @see {@link BentoFilterBarModel}.\nEach one of the elements in the array correspond to a filter that will\nbe created and rendered in the FilterBar.",
               "value": {
                 "kind": "expression",
                 "type": "BentoFilterBarModel"
@@ -7708,40 +7606,54 @@
               "default": "() => []"
             },
             {
-              "name": "searchTerm",
-              "description": "Search term useful to filter all the data by text.\nIf the value is non-existant (null or undefined) the search bar won't be enabled.",
+              "name": "filterValues",
+              "required": false,
+              "description": "An array of the values for each filter in the filter bar.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSearchBar.props.value.type"
+                "type": "BentoFilterValues"
               },
-              "default": "undefined"
+              "default": "() => []"
             },
             {
-              "name": "value",
-              "description": "Array of filters based on {@see BentoFilterBarModel}.\nEach one of the elements in the array correspond to a filter that will\nbe created and rendered in the FilterBar.\n\nCan be used with v-model or independently with the @input event.",
+              "name": "search",
+              "required": false,
+              "description": "Search bar properties with which the placeholder, hint and other\n\"bento-search-bar\" properties can be set. @see {@link BentoFilterBarSearchBarProps}",
               "value": {
                 "kind": "expression",
-                "type": "BentoFilterBarModel"
+                "type": "BentoFilterBarSearchBarProps"
               },
-              "default": "() => []"
+              "default": "undefined"
             },
             {
-              "name": "filterValues",
-              "description": "An array of the values for each filter in the filter bar.\n{@see BentoFilterValues}",
+              "name": "searchTerm",
+              "required": false,
+              "description": "Search term useful to filter all the data by text.\nIf the value is non-existant (null or undefined) the search bar won't be enabled.\nCan be used with `.sync`",
               "value": {
                 "kind": "expression",
-                "type": "BentoFilterValues"
+                "type": "BentoFilterBarSearchTerm"
               },
-              "default": "() => []"
+              "default": "undefined"
             },
             {
               "name": "showAppliedHiddenFilters",
+              "required": false,
               "description": "Will show all applied filters even if their visibility is set to false.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "value",
+              "required": false,
+              "description": "Array of filters based on @see {@link BentoFilterBarModel}.\nEach one of the elements in the array correspond to a filter that will\nbe created and rendered in the FilterBar.\n\nCan be used with v-model or independently with the @input event.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBarModel"
+              },
+              "default": "() => []"
             }
           ],
           "source": {
@@ -8237,6 +8149,7 @@
           "attributes": [
             {
               "name": "ariaHidden",
+              "required": false,
               "description": "Indicates whether the element is exposed to an accessibility API.",
               "value": {
                 "kind": "expression",
@@ -8246,6 +8159,7 @@
             },
             {
               "name": "ariaLabel",
+              "required": false,
               "description": "Text that labels an the input element",
               "value": {
                 "kind": "expression",
@@ -8255,6 +8169,7 @@
             },
             {
               "name": "condensed",
+              "required": false,
               "description": "Reduces height of the input",
               "value": {
                 "kind": "expression",
@@ -8264,6 +8179,7 @@
             },
             {
               "name": "disabled",
+              "required": false,
               "description": "Disables the possibility of changing value in the input-field",
               "value": {
                 "kind": "expression",
@@ -8273,6 +8189,7 @@
             },
             {
               "name": "dropdown",
+              "required": false,
               "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\n - `aria-label`: Text that labels the dropdown element",
               "value": {
                 "kind": "expression",
@@ -8282,15 +8199,17 @@
             },
             {
               "name": "dropdownPosition",
+              "required": false,
               "description": "Position of the dropdown before or after input value",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`"
+                "type": "union"
               },
               "default": "BentoInputFieldElementPosition.START"
             },
             {
               "name": "error",
+              "required": false,
               "description": "Adds error validation class for outlining input-field.",
               "value": {
                 "kind": "expression",
@@ -8300,6 +8219,7 @@
             },
             {
               "name": "errorMessage",
+              "required": false,
               "description": "Renders input-field with an error state and the error message beneath the input box",
               "value": {
                 "kind": "expression",
@@ -8309,6 +8229,7 @@
             },
             {
               "name": "optional",
+              "required": false,
               "description": "Highlights the dropdown is optional.",
               "value": {
                 "kind": "expression",
@@ -8318,6 +8239,7 @@
             },
             {
               "name": "placeholder",
+              "required": false,
               "description": "Text displayed as the placeholder of the input-field",
               "value": {
                 "kind": "expression",
@@ -8327,6 +8249,7 @@
             },
             {
               "name": "required",
+              "required": false,
               "description": "Highlights the dropdown is required.",
               "value": {
                 "kind": "expression",
@@ -8336,6 +8259,7 @@
             },
             {
               "name": "readonly",
+              "required": false,
               "description": "Setting this property to true will set the input field to read only state.",
               "value": {
                 "kind": "expression",
@@ -8345,6 +8269,7 @@
             },
             {
               "name": "slashedZero",
+              "required": false,
               "description": "Renders a font numeric style with slashed zeros instead of normal ones.",
               "value": {
                 "kind": "expression",
@@ -8354,6 +8279,7 @@
             },
             {
               "name": "staticValue",
+              "required": false,
               "description": "Static text that displayed before or after input value\nApplicable to the Static Value variant",
               "value": {
                 "kind": "expression",
@@ -8363,15 +8289,17 @@
             },
             {
               "name": "staticValuePosition",
+              "required": false,
               "description": "Position of Static Value before or after input value",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`"
+                "type": "union"
               },
               "default": "BentoInputFieldElementPosition.START"
             },
             {
               "name": "tooltipText",
+              "required": false,
               "description": "Adds a info icon next to the label to display the passed tooltip message.",
               "value": {
                 "kind": "expression",
@@ -8381,15 +8309,17 @@
             },
             {
               "name": "type",
+              "required": false,
               "description": "A string specifying the type of control to render.\nAll `input` types are available but only `search`, `text` and `number` are fully supported.\n\nIf `type` is `search`, use `bento-search-bar` instead.",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type']"
+                "type": "union"
               },
               "default": "BentoInputFieldType.TEXT"
             },
             {
               "name": "value",
+              "required": false,
               "description": "Text displayed as the value of the input-field",
               "value": {
                 "kind": "expression",
@@ -8399,10 +8329,11 @@
             },
             {
               "name": "variant",
+              "required": false,
               "description": "Describes the different variants for the input element",
               "value": {
                 "kind": "expression",
-                "type": "BentoInputFieldVariant | `${BentoInputFieldVariant}`"
+                "type": "union"
               },
               "default": "BentoInputFieldVariant.DEFAULT"
             }
@@ -9031,17 +8962,28 @@
           }
         },
         {
-          "name": "listbox-multi-select-chips",
+          "name": "listbox-multi-select",
           "description": "",
           "attributes": [
+            {
+              "name": "hasMoreItems",
+              "required": false,
+              "description": "Indicates whether there are more items to load",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "isOptionDisabled",
-              "description": "Function that defines the options to be disabled",
+              "required": false,
+              "description": "Function that allows the options to be disabled",
               "value": {
                 "kind": "expression",
                 "type": "BentoListboxIsOptionDisabled"
               },
-              "default": "() => false"
+              "default": "isVue2 ? () => () => false : () => false"
             },
             {
               "name": "items",
@@ -9051,20 +8993,60 @@
                 "kind": "expression",
                 "type": "BentoListboxOptions"
               }
+            },
+            {
+              "name": "lazyLoadType",
+              "required": false,
+              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "'none'"
+            },
+            {
+              "name": "searching",
+              "required": false,
+              "description": "Flag that indicates that an external search it's being made\nto filter out the items inside the the multi-select listbox\n\nIf enabled, hides the \"Select all\" checkbox in \"multiple\" mode.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "selectedValues",
+              "required": true,
+              "description": "The `input` value.\nProviding an empty array will select no options.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxOptions"
+              }
+            },
+            {
+              "name": "staticCategories",
+              "required": false,
+              "description": "If enabled, dropdown will display non-selectable, static categories",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [
             {
-              "name": "unselect-item",
-              "description": "Emits the value of the item to uncheck"
-            },
+              "name": "select",
+              "description": "Emits when the selection changes"
+            }
+          ],
+          "slots": [
             {
-              "name": "unselect-category",
-              "description": "Emits the option of the category being unselected"
+              "name": "innerSlot"
             }
           ],
           "source": {
-            "module": "./src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-chips/listbox-multi-select-chips.vue",
+            "module": "./src/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.vue",
             "symbol": "default"
           }
         },
@@ -10332,6 +10314,45 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "payment-method",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "The label describing to the payment method icon.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "small",
+              "required": false,
+              "description": "Render payment method icon in a smaller size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "type",
+              "required": false,
+              "description": "The type of payment method to display.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'Unknowncard'"
+            }
+          ],
+          "source": {
+            "module": "./src/components/payment-method/payment-method.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "popover",
           "description": "",
@@ -10487,6 +10508,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "overflowVisible",
+              "description": "Allows content to appear outside of the popover. Used when there are nested popovers.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [
@@ -11290,7 +11320,8 @@
             },
             {
               "name": "condensed",
-              "description": "Reduces height of the search bar",
+              "required": false,
+              "description": "Reduces height of the search bar. Default: false",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -11299,6 +11330,7 @@
             },
             {
               "name": "debounceTime",
+              "required": false,
               "description": "Custom debounce time. Default: 300",
               "value": {
                 "kind": "expression",
@@ -11308,6 +11340,7 @@
             },
             {
               "name": "hint",
+              "required": false,
               "description": "Text displayed as a hint when the field is not empty",
               "value": {
                 "kind": "expression",
@@ -11317,6 +11350,7 @@
             },
             {
               "name": "placeholder",
+              "required": false,
               "description": "Text displayed as the placeholder of the input-field",
               "value": {
                 "kind": "expression",
@@ -11326,6 +11360,7 @@
             },
             {
               "name": "value",
+              "required": false,
               "description": "Text displayed as the value being searched",
               "value": {
                 "kind": "expression",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.49.0",
+  "version": "1.51.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -27,8 +27,6 @@
     "url": "git@github.com:Adyen/bento.git"
   },
   "dependencies": {
-    "@adyen/ui-assets-icons-16": "4.1.0",
-    "@adyen/ui-assets-payment-method-icons": "6.1.0",
     "@floating-ui/core": "1.6.8",
     "@floating-ui/vue": "1.0.7",
     "@lezer/highlight": "1.2.1",
@@ -38,7 +36,8 @@
     "libphonenumber-js": "1.11.7",
     "mime": "4.0.6",
     "uuid": "11.0.5",
-    "@adyen/bento-design-tokens": "1.49.0"
+    "@adyen/bento-design-tokens": "1.51.0",
+    "@adyen/ui-assets-icons-16": "6.0.2"
   },
   "peerDependencies": {
     "vue": "~2.7",
@@ -113,8 +112,9 @@
     "vue-template-compiler": "2.7.16",
     "vue-tsc": "1.0.24",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-cli": "0.2.3",
-    "@adyen/bento-tailwind": "0.3.0"
+    "@adyen/bento-tailwind": "0.3.2",
+    "@adyen/ui-assets-payment-method-icons": "8.1.0",
+    "@adyen/bento-cli": "0.2.4"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"

package/dist/chunks/alert.hiTIDSeX.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.hiTIDSeX.js","sources":["../../src/components/alert/alert.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GCgIIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}