@adyen/bento-vue2 1.41.0 → 1.43.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/composables/use-form-validate/use-form.ts","../src/composables/use-bento-theme/use-bento-theme.types.ts","../src/composables/use-bento-theme/use-bento-theme.ts","../src/composables/use-bento-toast-controller/install.ts","../src/composables/use-bento-theme/install.ts","../src/install.ts"],"sourcesContent":["import { type Ref, ref, type ShallowRef, shallowRef } from 'vue';\nimport * as z from 'zod';\nimport type { ZodSchema } from 'zod';\nimport { ErrorBag, UseForm } from './use-form.types';\n\n/**\n * Composable that tansforms a Zod schema into a Typed Schema that can be used alongside with {@see useForm}.\n *\n * This is meant to simulate the behavior of {@link @vee-validate/zod} {@see https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation}.\n * Function that transform Zod’s schemas into something that can be understood by vee-validate\n *\n * @param {T extends ZodSchema} formSchema Zod schema to be transformed into a `vee-validate` schema\n * @returns {UseForm<T>} schema Schema transformed\n */\nexport function toTypedSchema<T extends ZodSchema>(formSchema: T) {\n    return formSchema;\n}\n\n/**\n * Finds and returns the initial values of each of the values defined in the schema so that they\n * can be transformed into a reactive element.\n * @param {ZodSchema} schema Zod validation schema containing the definitions of each value to be used in the form\n * @returns Object with the items defined in the schema and their (default) values\n *\n * @example\n * const validationSchema = toTypedSchema(\n *      z.object({\n *          name: z\n *              .string()\n *              .min(3, { message: 'Name is required' })\n *              .startsWith('Jane')\n *              .max(4, { message: 'Name cannot be longer than 4 characters' })\n *              .default('Joe'),\n *      })\n * );\n * getInitialFormValues(validationSchema)\n *\n * Will return:\n *\n * {\n *      name: 'Joe'\n * }\n *\n */\nfunction getInitialFormValues<T extends ZodSchema>(schema: T): z.infer<typeof schema> {\n    if (!!z && schema instanceof z.ZodObject) {\n        return Object.fromEntries(\n            Object.entries(schema.shape).map(([key, value]) => {\n                if (!!z && value instanceof z.ZodDefault) {\n                    // eslint-disable-next-line no-underscore-dangle\n                    return [key, value._def.defaultValue()];\n                }\n\n                if (!!z && value instanceof z.ZodObject) {\n                    return [key, getInitialFormValues(value)];\n                }\n\n                return [key, undefined];\n            })\n        ) as z.infer<typeof schema>;\n    }\n\n    return undefined;\n}\n\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n * @param issue List of nested path elements\n * @returns Path with dots\n */\nfunction normalizeFormPath(issue: z.ZodIssue) {\n    return issue.path.join('.');\n}\n\n/**\n * Composable that facilitates validating form data for Vue2 & Vue3 implementations with FormLayout\n * to ease the migration to Vue3.\n *\n * For Vue3 implementations use Vee-Validate.\n *\n * This provides a simplified version of Vee-Validate v4 implemented with Zod to validate a form schema.\n * It returns reactive values that can be used directly in form input elements with 'v-model' alongside\n * with functions to \"reset\" the data (sets values to default value) and a function to execute the\n * successful form validation process (through a callback).\n *\n * @param {UseForm<T>} props Form configuration object\n * @param {T extends ZodSchema} props.validationSchema Zod typed validation schema\n * @returns {Object} response - Composable with reactive form values and errors, and functions to handle the reactive data\n * @returns {Ref<ErrorBag<T>>} response.errorBag Object with all the form values and an array of each one of the errors (if any) per value\n * @returns {Ref<T>} response.errors Object with all the form values and the first error found for that field (if any)\n * @returns {Ref<T>} response.values Object with all the form values and their current value\n * @returns {() => void} response.handleReset Resets the form values to default (initial values) when it gets called\n * @returns {(callback: (values: T) => void) => () => void} response.submitForm Validates the data set in {response.values} and sets errors (if found) inside {response.errors} and {response.errorBag}.\n *                                                                   When the validation is successful it calls the callback so the submit process can continue\n *\n * @example\n * const validationSchema = toTypedSchema(\n *      z.object({\n *          name: z\n *              .string()\n *              .min(3, { message: 'Name is required' })\n *              .startsWith('Jane')\n *              .max(4, { message: 'Name cannot be longer than 4 characters' })\n *              .default('Joe'),\n *      })\n * );\n *\n * const { values, errors, errorBag, submitForm, handleReset } = useForm({\n *     validationSchema\n * });\n * const handleSubmit = submitForm(() => {\n *     // Send data to API here\n * })\n *\n */\nexport function useForm<T extends ZodSchema>({\n    validationSchema,\n}: UseForm<T>): {\n    errorBag: Ref<ErrorBag<z.TypeOf<T>>>;\n    errors: Ref<z.TypeOf<T>> | ShallowRef<z.TypeOf<T>>;\n    values: Ref<z.TypeOf<T>>;\n    handleReset: () => void;\n    submitForm: (submitted: any) => () => void;\n} {\n    // Errors per field\n    const errors = shallowRef<z.infer<typeof validationSchema>>({});\n    // All errors per field\n    const errorBag: Ref<ErrorBag<z.infer<typeof validationSchema>>> = ref({});\n    const values: Ref<z.TypeOf<T>> = ref(getInitialFormValues<T>(validationSchema));\n\n    const cleanErrors = () => {\n        errors.value = {};\n        errorBag.value = {};\n    };\n\n    const resetForm = () => {\n        cleanErrors();\n        values.value = getInitialFormValues<T>(validationSchema);\n    };\n\n    const submitForm = submitted => () => {\n        cleanErrors();\n\n        // Run validations on the form data through the schema\n        const validSchema = validationSchema.safeParse(values.value);\n\n        // Update errors\n        if (!validSchema.success) {\n            (validSchema as z.SafeParseError<T>).error.issues.forEach(error => {\n                const path = normalizeFormPath(error);\n\n                // Add the first ocurrance of a fild error to the \"errors\" object\n                if (!errors.value[path]) {\n                    errors.value[path] = error.message;\n                }\n\n                // Add each error to the \"errorBag\" per field array\n                if (!errorBag.value[path]) {\n                    errorBag.value[path] = [error.message];\n                } else {\n                    errorBag.value[path].push(error.message);\n                }\n            });\n        } else {\n            submitted(values.value);\n        }\n    };\n\n    return {\n        // Values\n        errorBag,\n        errors,\n        values,\n\n        // Methods\n        handleReset: () => resetForm(),\n        submitForm,\n    };\n}\n","import { BentoTheme } from './install';\n\nexport const useBentoThemeKey = Symbol('use-bento-theme');\n\nexport interface UseBentoTheme {\n    getTheme: () => string;\n    setTheme: (theme: BentoTheme | `${BentoTheme}`) => void;\n}\n","import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport { getCurrentInstance, inject } from 'vue';\nimport { isVue2 } from 'vue-demi';\nimport { UseBentoTheme, useBentoThemeKey } from './use-bento-theme.types';\n\n/**\n * Composable that handles theming-related capabilities for the Bento component library.\n * Requires the use of `BentoPlugin`.\n *\n * @example\n * <script setup lang=\"ts\">\n *    import { useBentoTheme, BentoTheme } from '@adyen/bento-vue2';\n *\n *    const { setTheme } = useBentoTheme();\n *\n *    setTheme(BentoTheme.BENTO_DARK)\n * </script>\n *\n * @returns {UseBentoTheme} An object with getter and setter method for the Bento theme.\n * @returns {Function} getTheme - Returns the current theme in the string form of BentoTheme enum.\n * @returns {Function} setTheme - Sets the theme of the Bento component library.\n *\n */\nexport function useBentoTheme(): UseBentoTheme {\n    const bentoThemeController = isVue2\n        ? getCurrentInstance()?.proxy[useBentoThemeKey]\n        : inject(useBentoThemeKey, null);\n\n    if (!bentoThemeController) {\n        printDevelopmentWarning('useBentoTheme does not work without Vue.use(BentoPlugin)');\n\n        // Return placeholder functions so client code won't break, but theme won't toggle\n        return {\n            getTheme: () => undefined,\n            setTheme: () => undefined,\n        };\n    }\n\n    // Return a new object so unintentional reassigning its properties won't override a global state\n    return { ...bentoThemeController };\n}\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { createToastStack, toastStackInjectionKey } from './toast-stack';\n\n/**\n * This function is used to create and register global reactive state necessary fro the Toasts to operate.\n * @param {Vue} Vue A context application to register global state with.\n */\nexport default Vue => {\n    if (isVue2) {\n        // Add toast stack as a global property as there is no \"app.provide\" functionality in Vue2\n        // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n        (Vue as typeof Vue2).prototype[toastStackInjectionKey] = createToastStack();\n    } else {\n        (Vue as App).provide(toastStackInjectionKey, createToastStack());\n    }\n};\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { useBentoThemeKey } from './use-bento-theme.types';\n\nconst getTheme = () => document.body.className.match(/b-\\w+-theme/)?.[0] ?? '';\nconst getThemeForSystemPreference = () => {\n    const preferredDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n    if (preferredDarkMode) {\n        return BentoTheme.BENTO_DARK;\n    }\n\n    return BentoTheme.BENTO_LIGHT;\n};\n\nexport enum BentoTheme {\n    LEGACY = 'b-legacy-theme',\n    STYLEGUIDE = 'b-styleguide-theme',\n\n    /**\n     * @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0.\n     */\n    BENTO = '',\n\n    BENTO_LIGHT = 'b-light-theme',\n    BENTO_DARK = 'b-dark-theme',\n    BENTO_SYSTEM = 'b-system',\n}\n\nexport const setTheme = (theme: BentoTheme) => {\n    const currentTheme = getTheme();\n    const systemTheme = getThemeForSystemPreference();\n    const themeToSet = theme === BentoTheme.BENTO_SYSTEM ? systemTheme : theme;\n\n    if (themeToSet === BentoTheme.BENTO_LIGHT || themeToSet === BentoTheme.BENTO) {\n        document.documentElement.style.colorScheme = 'light';\n    } else if (themeToSet === BentoTheme.BENTO_DARK) {\n        document.documentElement.style.colorScheme = 'dark';\n    }\n\n    // if theme is different from current and it is not `BentoTheme.BENTO`\n    if (currentTheme.length && currentTheme !== themeToSet) {\n        document.body.classList.remove(currentTheme);\n    }\n\n    // if theme is not `BentoTheme.BENTO`\n    if (themeToSet.length) {\n        document.body.classList.add(themeToSet);\n    }\n};\n\n/**\n * This function is used to create and register global reactive state necessary for theme to operate.\n * @param {Vue} Vue A context application to register global state with.\n */\nexport default Vue => {\n    const themeProvider = {\n        getTheme,\n        setTheme,\n    };\n\n    if (isVue2) {\n        // Add theme  as a global property as there is no \"app.provide\" functionality in Vue2\n        // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n        (Vue as typeof Vue2).prototype[useBentoThemeKey] = themeProvider;\n    } else {\n        (Vue as App).provide(useBentoThemeKey, themeProvider);\n    }\n};\n","import type { PluginObject } from 'vue';\nimport installToast from './composables/use-bento-toast-controller/install';\nimport installTheme, { BentoTheme, setTheme } from './composables/use-bento-theme/install';\nimport { deprecate } from './utils/ts/deprecate';\n\ninterface BentoVuePlugin {\n    theme?: BentoTheme;\n    withToast?: boolean;\n    withUtilityClasses?: boolean;\n    withDesignTokensCSSInjection?: boolean;\n}\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n    name: 'BentoVue',\n    install: async (\n        Vue,\n        {\n            theme = BentoTheme.BENTO_LIGHT,\n            withToast = false,\n            withUtilityClasses = false,\n            withDesignTokensCSSInjection = true,\n        }: BentoVuePlugin\n    ) => {\n        installTheme(Vue);\n\n        if (withToast) {\n            installToast(Vue);\n        }\n        if (withDesignTokensCSSInjection) {\n            deprecate(\n                'Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin',\n                'Please disable CSS injection by setting withDesignTokensCSSInjection to false in BentoVue plugin options as highlighted here:\\nhttps://adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables',\n                '2.0.0'\n            );\n            // Make sure to put all awaited CSS imports below this point and not above!\n            if (theme === BentoTheme.LEGACY) {\n                await import('@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css');\n            } else if (theme === BentoTheme.STYLEGUIDE) {\n                await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n            } else {\n                await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n            }\n\n            if (withUtilityClasses) {\n                await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n            }\n        }\n\n        if (theme === BentoTheme.LEGACY) {\n            setTheme(BentoTheme.LEGACY);\n        } else if (theme === BentoTheme.STYLEGUIDE) {\n            setTheme(BentoTheme.STYLEGUIDE);\n        } else if (theme === BentoTheme.BENTO_SYSTEM) {\n            setTheme(BentoTheme.BENTO_SYSTEM);\n        } else if (theme === BentoTheme.BENTO_DARK) {\n            setTheme(BentoTheme.BENTO_DARK);\n        } else if (theme === BentoTheme.BENTO) {\n            deprecate('Using `BentoTheme.BENTO`', 'Please use `BentoTheme.BENTO_LIGHT` instead', '2.0.0');\n            setTheme(BentoTheme.BENTO_LIGHT);\n        } else {\n            setTheme(BentoTheme.BENTO_LIGHT);\n        }\n    },\n};\n\nexport { BentoTheme };\nexport default plugin;\n"],"names":["toTypedSchema","formSchema","getInitialFormValues","schema","z","key","value","normalizeFormPath","issue","useForm","validationSchema","errors","shallowRef","errorBag","ref","values","cleanErrors","resetForm","validSchema","submitted","error","path","useBentoThemeKey","useBentoTheme","bentoThemeController","_a","getCurrentInstance","printDevelopmentWarning","installToast","Vue","toastStackInjectionKey","createToastStack","getTheme","getThemeForSystemPreference","BentoTheme","setTheme","theme","currentTheme","systemTheme","themeToSet","installTheme","themeProvider","plugin","withToast","withUtilityClasses","withDesignTokensCSSInjection","deprecate"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/composables/use-form-validate/use-form.ts","../src/composables/use-bento-theme/use-bento-theme.types.ts","../src/composables/use-bento-theme/use-bento-theme.ts","../src/composables/use-bento-toast-controller/install.ts","../src/composables/use-bento-theme/install.ts","../src/install.ts"],"sourcesContent":["import { type Ref, ref, type ShallowRef, shallowRef } from 'vue';\nimport * as z from 'zod';\nimport type { ZodSchema } from 'zod';\nimport { ErrorBag, UseForm } from './use-form.types';\n\n/**\n * Composable that tansforms a Zod schema into a Typed Schema that can be used alongside with {@see useForm}.\n *\n * This is meant to simulate the behavior of {@link @vee-validate/zod} {@see https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation}.\n * Function that transform Zod’s schemas into something that can be understood by vee-validate\n *\n * @param {T extends ZodSchema} formSchema Zod schema to be transformed into a `vee-validate` schema\n * @returns {UseForm<T>} schema Schema transformed\n */\nexport function toTypedSchema<T extends ZodSchema>(formSchema: T) {\n    return formSchema;\n}\n\n/**\n * Finds and returns the initial values of each of the values defined in the schema so that they\n * can be transformed into a reactive element.\n * @param {ZodSchema} schema Zod validation schema containing the definitions of each value to be used in the form\n * @returns Object with the items defined in the schema and their (default) values\n *\n * @example\n * const validationSchema = toTypedSchema(\n *      z.object({\n *          name: z\n *              .string()\n *              .min(3, { message: 'Name is required' })\n *              .startsWith('Jane')\n *              .max(4, { message: 'Name cannot be longer than 4 characters' })\n *              .default('Joe'),\n *      })\n * );\n * getInitialFormValues(validationSchema)\n *\n * Will return:\n *\n * {\n *      name: 'Joe'\n * }\n *\n */\nfunction getInitialFormValues<T extends ZodSchema>(schema: T): z.infer<typeof schema> {\n    if (!!z && schema instanceof z.ZodObject) {\n        return Object.fromEntries(\n            Object.entries(schema.shape).map(([key, value]) => {\n                if (!!z && value instanceof z.ZodDefault) {\n                    // eslint-disable-next-line no-underscore-dangle\n                    return [key, value._def.defaultValue()];\n                }\n\n                if (!!z && value instanceof z.ZodObject) {\n                    return [key, getInitialFormValues(value)];\n                }\n\n                return [key, undefined];\n            })\n        ) as z.infer<typeof schema>;\n    }\n\n    return undefined;\n}\n\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n * @param issue List of nested path elements\n * @returns Path with dots\n */\nfunction normalizeFormPath(issue: z.ZodIssue) {\n    return issue.path.join('.');\n}\n\n/**\n * Composable that facilitates validating form data for Vue2 & Vue3 implementations with FormLayout\n * to ease the migration to Vue3.\n *\n * For Vue3 implementations use Vee-Validate.\n *\n * This provides a simplified version of Vee-Validate v4 implemented with Zod to validate a form schema.\n * It returns reactive values that can be used directly in form input elements with 'v-model' alongside\n * with functions to \"reset\" the data (sets values to default value) and a function to execute the\n * successful form validation process (through a callback).\n *\n * @param {UseForm<T>} props Form configuration object\n * @param {T extends ZodSchema} props.validationSchema Zod typed validation schema\n * @returns {Object} response - Composable with reactive form values and errors, and functions to handle the reactive data\n * @returns {Ref<ErrorBag<T>>} response.errorBag Object with all the form values and an array of each one of the errors (if any) per value\n * @returns {Ref<T>} response.errors Object with all the form values and the first error found for that field (if any)\n * @returns {Ref<T>} response.values Object with all the form values and their current value\n * @returns {() => void} response.handleReset Resets the form values to default (initial values) when it gets called\n * @returns {(callback: (values: T) => void) => () => void} response.submitForm Validates the data set in {response.values} and sets errors (if found) inside {response.errors} and {response.errorBag}.\n *                                                                   When the validation is successful it calls the callback so the submit process can continue\n *\n * @example\n * const validationSchema = toTypedSchema(\n *      z.object({\n *          name: z\n *              .string()\n *              .min(3, { message: 'Name is required' })\n *              .startsWith('Jane')\n *              .max(4, { message: 'Name cannot be longer than 4 characters' })\n *              .default('Joe'),\n *      })\n * );\n *\n * const { values, errors, errorBag, submitForm, handleReset } = useForm({\n *     validationSchema\n * });\n * const handleSubmit = submitForm(() => {\n *     // Send data to API here\n * })\n *\n */\nexport function useForm<T extends ZodSchema>({\n    validationSchema,\n}: UseForm<T>): {\n    errorBag: Ref<ErrorBag<z.TypeOf<T>>>;\n    errors: Ref<z.TypeOf<T>> | ShallowRef<z.TypeOf<T>>;\n    values: Ref<z.TypeOf<T>>;\n    handleReset: () => void;\n    submitForm: (submitted: any) => () => void;\n} {\n    // Errors per field\n    const errors = shallowRef<z.infer<typeof validationSchema>>({});\n    // All errors per field\n    const errorBag: Ref<ErrorBag<z.infer<typeof validationSchema>>> = ref({});\n    const values: Ref<z.TypeOf<T>> = ref(getInitialFormValues<T>(validationSchema));\n\n    const cleanErrors = () => {\n        errors.value = {};\n        errorBag.value = {};\n    };\n\n    const resetForm = () => {\n        cleanErrors();\n        values.value = getInitialFormValues<T>(validationSchema);\n    };\n\n    const submitForm = submitted => () => {\n        cleanErrors();\n\n        // Run validations on the form data through the schema\n        const validSchema = validationSchema.safeParse(values.value);\n\n        // Update errors\n        if (!validSchema.success) {\n            (validSchema as z.SafeParseError<T>).error.issues.forEach(error => {\n                const path = normalizeFormPath(error);\n\n                // Add the first ocurrance of a fild error to the \"errors\" object\n                if (!errors.value[path]) {\n                    errors.value[path] = error.message;\n                }\n\n                // Add each error to the \"errorBag\" per field array\n                if (!errorBag.value[path]) {\n                    errorBag.value[path] = [error.message];\n                } else {\n                    errorBag.value[path].push(error.message);\n                }\n            });\n        } else {\n            submitted(values.value);\n        }\n    };\n\n    return {\n        // Values\n        errorBag,\n        errors,\n        values,\n\n        // Methods\n        handleReset: () => resetForm(),\n        submitForm,\n    };\n}\n","import { BentoTheme } from './install';\n\nexport const useBentoThemeKey = Symbol('use-bento-theme');\n\nexport interface UseBentoTheme {\n    getTheme: () => string;\n    setTheme: (theme: BentoTheme | `${BentoTheme}`) => void;\n}\n","import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport { getCurrentInstance, inject } from 'vue';\nimport { isVue2 } from 'vue-demi';\nimport { UseBentoTheme, useBentoThemeKey } from './use-bento-theme.types';\n\n/**\n * Composable that handles theming-related capabilities for the Bento component library.\n * Requires the use of `BentoPlugin`.\n *\n * @example\n * <script setup lang=\"ts\">\n *    import { useBentoTheme, BentoTheme } from '@adyen/bento-vue2';\n *\n *    const { setTheme } = useBentoTheme();\n *\n *    setTheme(BentoTheme.BENTO_DARK)\n * </script>\n *\n * @returns {UseBentoTheme} An object with getter and setter method for the Bento theme.\n * @returns {Function} getTheme - Returns the current theme in the string form of BentoTheme enum.\n * @returns {Function} setTheme - Sets the theme of the Bento component library.\n *\n */\nexport function useBentoTheme(): UseBentoTheme {\n    const bentoThemeController = isVue2\n        ? getCurrentInstance()?.proxy[useBentoThemeKey]\n        : inject(useBentoThemeKey, null);\n\n    if (!bentoThemeController) {\n        printDevelopmentWarning('useBentoTheme does not work without Vue.use(BentoPlugin)');\n\n        // Return placeholder functions so client code won't break, but theme won't toggle\n        return {\n            getTheme: () => undefined,\n            setTheme: () => undefined,\n        };\n    }\n\n    // Return a new object so unintentional reassigning its properties won't override a global state\n    return { ...bentoThemeController };\n}\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { createToastStack, toastStackInjectionKey } from './toast-stack';\n\n/**\n * This function is used to create and register global reactive state necessary fro the Toasts to operate.\n * @param {Vue} Vue A context application to register global state with.\n */\nexport default Vue => {\n    if (isVue2) {\n        // Add toast stack as a global property as there is no \"app.provide\" functionality in Vue2\n        // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n        (Vue as typeof Vue2).prototype[toastStackInjectionKey] = createToastStack();\n    } else {\n        (Vue as App).provide(toastStackInjectionKey, createToastStack());\n    }\n};\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { useBentoThemeKey } from './use-bento-theme.types';\n\nconst getTheme = () => document.body.className.match(/b-\\w+-theme/)?.[0] ?? '';\nconst getThemeForSystemPreference = () => {\n    const preferredDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n    if (preferredDarkMode) {\n        return BentoTheme.BENTO_DARK;\n    }\n\n    return BentoTheme.BENTO_LIGHT;\n};\n\nexport enum BentoTheme {\n    LEGACY = 'b-legacy-theme',\n    STYLEGUIDE = 'b-styleguide-theme',\n\n    /**\n     * @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0.\n     */\n    BENTO = '',\n\n    BENTO_LIGHT = 'b-light-theme',\n    BENTO_DARK = 'b-dark-theme',\n    BENTO_SYSTEM = 'b-system',\n}\n\nexport const setTheme = (theme: BentoTheme) => {\n    const currentTheme = getTheme();\n    const systemTheme = getThemeForSystemPreference();\n    const themeToSet = theme === BentoTheme.BENTO_SYSTEM ? systemTheme : theme;\n\n    if (themeToSet === BentoTheme.BENTO_LIGHT || themeToSet === BentoTheme.BENTO) {\n        document.documentElement.style.colorScheme = 'light';\n    } else if (themeToSet === BentoTheme.BENTO_DARK) {\n        document.documentElement.style.colorScheme = 'dark';\n    }\n\n    // if theme is different from current and it is not `BentoTheme.BENTO`\n    if (currentTheme.length && currentTheme !== themeToSet) {\n        document.body.classList.remove(currentTheme);\n    }\n\n    // if theme is not `BentoTheme.BENTO`\n    if (themeToSet.length) {\n        document.body.classList.add(themeToSet);\n    }\n};\n\n/**\n * This function is used to create and register global reactive state necessary for theme to operate.\n * @param {Vue} Vue A context application to register global state with.\n */\nexport default Vue => {\n    const themeProvider = {\n        getTheme,\n        setTheme,\n    };\n\n    if (isVue2) {\n        // Add theme  as a global property as there is no \"app.provide\" functionality in Vue2\n        // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n        (Vue as typeof Vue2).prototype[useBentoThemeKey] = themeProvider;\n    } else {\n        (Vue as App).provide(useBentoThemeKey, themeProvider);\n    }\n};\n","import type { PluginObject } from 'vue';\nimport installToast from './composables/use-bento-toast-controller/install';\nimport installTheme, { BentoTheme, setTheme } from './composables/use-bento-theme/install';\nimport { deprecate } from './utils/ts/deprecate';\n\ninterface BentoVuePlugin {\n    theme?: BentoTheme;\n    withToast?: boolean;\n    withUtilityClasses?: boolean;\n    withDesignTokensCSSInjection?: boolean;\n}\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n    name: 'BentoVue',\n    install: async (\n        Vue,\n        {\n            theme = BentoTheme.BENTO_LIGHT,\n            withToast = false,\n            withUtilityClasses = false,\n            withDesignTokensCSSInjection = true,\n        }: BentoVuePlugin\n    ) => {\n        installTheme(Vue);\n\n        if (withToast) {\n            installToast(Vue);\n        }\n        if (withDesignTokensCSSInjection) {\n            deprecate(\n                'Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin',\n                'Please disable CSS injection by setting withDesignTokensCSSInjection to false in BentoVue plugin options as highlighted here:\\nhttps://adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables',\n                '2.0.0'\n            );\n            // Make sure to put all awaited CSS imports below this point and not above!\n            if (theme === BentoTheme.LEGACY) {\n                await import('@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css');\n            } else if (theme === BentoTheme.STYLEGUIDE) {\n                await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n            } else {\n                await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n            }\n\n            if (withUtilityClasses) {\n                await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n            }\n        }\n\n        if (theme === BentoTheme.LEGACY) {\n            setTheme(BentoTheme.LEGACY);\n        } else if (theme === BentoTheme.STYLEGUIDE) {\n            setTheme(BentoTheme.STYLEGUIDE);\n        } else if (theme === BentoTheme.BENTO_SYSTEM) {\n            setTheme(BentoTheme.BENTO_SYSTEM);\n        } else if (theme === BentoTheme.BENTO_DARK) {\n            setTheme(BentoTheme.BENTO_DARK);\n        } else if (theme === BentoTheme.BENTO) {\n            deprecate('Using `BentoTheme.BENTO`', 'Please use `BentoTheme.BENTO_LIGHT` instead', '2.0.0');\n            setTheme(BentoTheme.BENTO_LIGHT);\n        } else {\n            setTheme(BentoTheme.BENTO_LIGHT);\n        }\n    },\n};\n\nexport { BentoTheme };\nexport default plugin;\n"],"names":["toTypedSchema","formSchema","getInitialFormValues","schema","z","key","value","normalizeFormPath","issue","useForm","validationSchema","errors","shallowRef","errorBag","ref","values","cleanErrors","resetForm","validSchema","submitted","error","path","useBentoThemeKey","useBentoTheme","bentoThemeController","_a","getCurrentInstance","printDevelopmentWarning","installToast","Vue","toastStackInjectionKey","createToastStack","getTheme","getThemeForSystemPreference","BentoTheme","setTheme","theme","currentTheme","systemTheme","themeToSet","installTheme","themeProvider","plugin","withToast","withUtilityClasses","withDesignTokensCSSInjection","deprecate"],"mappings":"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"}

package/dist/info-icon.js

@@ -1,4 +1,4 @@
-import { B as e } from "./chunks/info-icon.CCR-cAFR.js";
+import { B as e } from "./chunks/info-icon.p-28zHUJ.js";
 export {
   e as BentoInfoIcon
 };

package/dist/input-field-password.js

@@ -0,0 +1,10 @@
+import { i as a, m as s, r as i, b as c, c as u, a as o } from "./chunks/input-field-password.BmfOGkrH.js";
+export {
+  a as BentoInputFieldPassword,
+  s as minLength,
+  i as requireLowercase,
+  c as requireNumeric,
+  u as requireSpecialCharacter,
+  o as requireUppercase
+};
+//# sourceMappingURL=input-field-password.js.map

package/dist/input-field-password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field-password.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/input-field.js

@@ -1,4 +1,4 @@
-import { B as n, b as a, e as o, c as i, d as s, a as l } from "./chunks/input-field.CKOdyDVy.js";
+import { B as n, b as a, e as o, c as i, d as s, a as l } from "./chunks/input-field.CHD3Fzzg.js";
 export {
   n as BentoInputField,
   a as BentoInputFieldElementPosition,

package/dist/internal.js

@@ -1,14 +1,14 @@
 import { a as e, b as r, C as t } from "./chunks/calendar.B9WZ8ub3.js";
-import { C as p, a as l } from "./chunks/copy.C5j6vSQT.js";
-import { C as x } from "./chunks/controls-group.Sni8leS5.js";
+import { C as p, a as l } from "./chunks/copy.DgzxvExj.js";
+import { C as x } from "./chunks/controls-group.J8shO_JL.js";
 import { B as m, b as n, a as f, D as E } from "./chunks/dialog-page.CplkzZGZ.js";
-import { E as d, F as I } from "./chunks/error-message.Bk2maRF8.js";
+import { E as d, F as I } from "./chunks/error-message.B7uoqQpq.js";
 import { F as T } from "./chunks/fixed-scroller.B880PL1J.js";
 import { G as u, a as O } from "./chunks/grid-layout.HvTAa4to.js";
-import { b as g, c as y, u as A } from "./chunks/use-cached-selected-values.D5ARl96f.js";
-import { L as F } from "./chunks/listbox-option-tag.CuHL51H9.js";
+import { b as g, c as y, u as A } from "./chunks/use-cached-selected-values.CAlfyb_L.js";
+import { L as F } from "./chunks/listbox-option-tag.BnX0H4HE.js";
 import { B as N } from "./chunks/teleport.CQKBJZU5.js";
-import { T as c } from "./chunks/tooltip.CS2Gij6x.js";
+import { T as c } from "./chunks/tooltip.DH8TqpYV.js";
 export {
   m as BentoDialogPageAnimation,
   g as BentoListbox,

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { l as t, a as e } from "./chunks/layout-row.CtFsZ5-v.js";
+import { l as t, a as e } from "./chunks/layout-row.DzS_XyyF.js";
 export {
   t as BentoLayout,
   e as BentoLayoutRow

package/dist/menu.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/menu.DEeyofbM.js";
+import { B as o, a as t } from "./chunks/menu.N41WnXc8.js";
 export {
   o as BentoMenu,
   t as BentoMenuEvent

package/dist/modal-fullscreen.js

@@ -1,4 +1,4 @@
-import { m as o, B as a } from "./chunks/modal-fullscreen.Ct4aitSv.js";
+import { m as o, B as a } from "./chunks/modal-fullscreen.BbNe6M9T.js";
 export {
   o as BentoModalFullscreen,
   a as BentoModalFullscreenPage

package/dist/modal.js

@@ -1,5 +1,5 @@
-import { d as e, f as t, g as n, B as l, e as B, c as d, a as M, b as s } from "./chunks/base-modal.SJX9uGT4.js";
-import { B as i } from "./chunks/modal.tUtoM34X.js";
+import { d as e, f as t, g as n, B as l, e as B, c as d, a as M, b as s } from "./chunks/base-modal.DroVbSCn.js";
+import { B as i } from "./chunks/modal.Cb4zg5fN.js";
 export {
   i as BentoModal,
   e as BentoModalColumnLayoutVariant,

package/dist/pagination.js

@@ -1,4 +1,4 @@
-import { B as n } from "./chunks/pagination.CqrSR1Md.js";
+import { B as n } from "./chunks/pagination.DORr-ox0.js";
 export {
   n as BentoPagination
 };

package/dist/popover.js

@@ -1,4 +1,4 @@
-import { B as r, a as s } from "./chunks/popover.BcWFpCY_.js";
+import { B as r, a as s } from "./chunks/popover.Uy-vuQq5.js";
 export {
   r as BentoPopover,
   s as BentoPopoverPositions

package/dist/promo-banner.js

@@ -1,4 +1,4 @@
-import { p as r, B as a, a as e } from "./chunks/promo-banner.NSOVGA7M.js";
+import { p as r, B as a, a as e } from "./chunks/promo-banner.cTUF9seG.js";
 export {
   r as BentoPromoBanner,
   a as BentoPromoBannerColor,

package/dist/radio-group.js

@@ -1,4 +1,4 @@
-import { b as t, B as e, a as n } from "./chunks/radio-group.DtlPzh_w.js";
+import { b as t, B as e, a as n } from "./chunks/radio-group.EnMXbuly.js";
 import { R as B } from "./chunks/radio-input.q980f8Uf.js";
 export {
   t as BentoRadioButton,

package/dist/search-bar.js

@@ -1,5 +1,5 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.CN9pWrLP.js";
-import { u as o } from "./chunks/dropdown.D8xKm1YA.js";
+import { B as r, b as t, a as B } from "./chunks/search-bar.BtFX4039.js";
+import { u as o } from "./chunks/dropdown.BfzsI2Th.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.DMw1l7rH.js";
+import { s as e } from "./chunks/secondary-nav.DtnWRhFW.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/segmented-control.uVH5ahVY.js";
+import { B as t } from "./chunks/segmented-control.CVeUROYR.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.BjOuUbQD.js";
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.B6XXbJsv.js";
 export {
   t as BentoSelectionCard,
   a as BentoSelectionCardGroup,

package/dist/sidepanel.js

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

package/dist/stepper.js

@@ -1,4 +1,4 @@
-import { a as p, s as o, B as a, b as n } from "./chunks/step.D3-7YL7-.js";
+import { a as p, s as o, B as a, b as n } from "./chunks/step.5g9BIi15.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.CAcBJutf.js";
+import { B as r, a as o } from "./chunks/structured-list-item.BEhWyaVP.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/styles/bento-dark.css

@@ -104,6 +104,7 @@
   --b-link-text-decoration: underline;
   --b-input-field-input-box-focus-border-width: 1.5px;
   --b-input-field-input-box-height: 36px;
+  --b-input-field-password-validation-title-font-weight: 700;
   --b-header-actions-margin-top-desktop: 0;
   --b-filter-button-label-line-height: 20px;
   --b-filter-bar-select-filter-button-divider-border-width: 0;
@@ -144,6 +145,7 @@
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
   --b-data-grid-cell-hover-padding: 14px 15px;
+  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 3px 15px;
   --b-data-grid-column-hover-padding: 7px 15px;
@@ -406,7 +408,7 @@
   --b-tutorial-popover-ripple-before-filter: blur(var(--b-spacer-110));
   --b-tutorial-popover-ripple-before-background-color: var(--b-color-decorative-green);
   --b-tutorial-popover-color: var(--b-color-label-secondary);
-  --b-tooltip-z-index: 5;
+  --b-tooltip-z-index: var(--b-z-index-global-elevated);
   --b-tooltip-padding: var(--b-spacer-020) var(--b-spacer-040);
   --b-tooltip-color: var(--b-color-label-inverse-primary);
   --b-tooltip-border-radius: var(--b-border-radius-s);
@@ -488,7 +490,7 @@
   --b-toast-item-shadow: var(--b-shadow-medium-border);
   --b-toast-item-icon-margin: var(--b-spacer-070);
   --b-toast-item-icon-color: var(--b-color-label-highlight);
-  --b-toast-item-z-index: 15;
+  --b-toast-item-z-index: var(--b-z-index-global-instant-interaction);
   --b-toast-item-spacing: var(--b-spacer-070);
   --b-toast-item-button-color: var(--b-color-label-inverse-primary);
   --b-toast-item-color: var(--b-color-label-inverse-primary);
@@ -590,7 +592,7 @@
   --b-summary-grid-item-amount-secondary-label-padding-left: var(--b-spacer-020);
   --b-summary-grid-item-content-trend-margin-left: var(--b-spacer-040);
   --b-summary-grid-item-content-label-line-height: var(--b-text-body-wide-line-height);
-  --b-summary-grid-item-content-label-font-weight: 600;
+  --b-summary-grid-item-content-label-font-weight: var(--b-text-body-strongest-font-weight);
   --b-summary-grid-item-title-icons-margin-left: var(--b-spacer-060);
   --b-summary-grid-item-title-icons-height: var(--b-text-body-line-height);
   --b-summary-grid-item-title-icons-gap: var(--b-spacer-060);
@@ -662,7 +664,7 @@
   --b-sidepanel-page-header-background-color: var(--b-color-background-modal);
   --b-sidepanel-backdrop-background-color: var(--b-color-support-overlay);
   --b-sidepanel-animation-duration: var(--b-animation-duration-slow);
-  --b-sidepanel-close-button-z-index: 1;
+  --b-sidepanel-close-button-z-index: var(--b-z-index-local-tier-1);
   --b-sidepanel-close-button-right: var(--b-spacer-090);
   --b-sidepanel-border-radius: var(--b-border-radius-l);
   --b-sidepanel-background-color: var(--b-color-background-modal);
@@ -795,7 +797,7 @@
   --b-promo-banner-background-color-blue: var(--b-color-background-highlight-weak);
   --b-promo-banner-color: var(--b-color-label-primary);
   --b-promo-banner-border-radius: var(--b-border-radius-xl);
-  --b-popper-z-index: 5;
+  --b-popper-z-index: var(--b-z-index-global-elevated);
   --b-popover-animation-duration: var(--b-animation-duration-moderate);
   --b-popover-footer-padding: var(--b-spacer-000) var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
   --b-popover-image-dismiss-icon-top: var(--b-spacer-070);
@@ -813,7 +815,7 @@
   --b-popover-dismiss-button-on-image-icon-active-color: var(--b-color-label-inverse-primary);
   --b-popover-dismiss-button-on-image-icon-hovered-color: var(--b-color-label-inverse-primary);
   --b-popover-dismiss-button-on-image-icon-color: var(--b-color-label-inverse-primary);
-  --b-popover-z-index: 5;
+  --b-popover-z-index: var(--b-z-index-global-elevated);
   --b-popover-color: var(--b-color-label-primary);
   --b-popover-box-shadow: var(--b-shadow-medium-border);
   --b-popover-border-radius: var(--b-border-radius-m);
@@ -831,11 +833,11 @@
   --b-pagination-color: var(--b-color-label-primary);
   --b-modal-animation-duration: var(--b-animation-duration-moderate);
   --b-modal-backdrop-background-color: var(--b-color-support-overlay);
-  --b-modal-close-button-z-index: 1;
+  --b-modal-close-button-z-index: var(--b-z-index-local-tier-1);
   --b-modal-close-button-right: var(--b-spacer-090);
   --b-modal-close-button-height: var(--b-text-title-line-height);
   --b-modal-actions-container-padding: var(--b-spacer-070) var(--b-spacer-090);
-  --b-modal-header-container-z-index: 1;
+  --b-modal-header-container-z-index: var(--b-z-index-local-tier-1);
   --b-modal-header-container-padding-inline: var(--b-spacer-090) var(--b-spacer-130);
   --b-modal-header-min-height: var(--b-text-title-line-height);
   --b-modal-content-padding: var(--b-spacer-070) var(--b-spacer-090);
@@ -847,7 +849,7 @@
   --b-modal-padding: var(--b-spacer-000);
   --b-modal-border-radius: var(--b-border-radius-l);
   --b-modal-fullscreen-animation-duration: var(--b-animation-duration-moderate);
-  --b-modal-fullscreen-close-button-z-index: 1;
+  --b-modal-fullscreen-close-button-z-index: var(--b-z-index-local-tier-1);
   --b-modal-fullscreen-close-button-padding-inline: var(--b-spacer-090);
   --b-modal-fullscreen-separator-margin-right: var(--b-spacer-110);
   --b-modal-fullscreen-separator-border-left: var(--b-border-width-s) solid var(--b-color-separator-primary);
@@ -1002,7 +1004,7 @@
   --b-inspector-header-color: var(--b-color-label-primary);
   --b-inspector-container-padding: var(--b-spacer-070) var(--b-spacer-090);
   --b-inspector-container-wrapper-border-left: 1px solid var(--b-color-separator-secondary);
-  --b-inspector-container-wrapper-z-index: 5;
+  --b-inspector-container-wrapper-z-index: var(--b-z-index-global-elevated);
   --b-inspector-container-wrapper-background-color: var(--b-color-background-primary);
   --b-input-field-error-message-margin-top: var(--b-spacer-040);
   --b-input-field-description-padding: var(--b-spacer-000);
@@ -1073,6 +1075,11 @@
   --b-input-field-label-requirement-color: var(--b-color-label-secondary);
   --b-input-field-label-margin-bottom: var(--b-spacer-040);
   --b-input-field-label-color: var(--b-color-label-primary);
+  --b-input-field-password-validation-list-valid-icon-color: var(--b-color-label-success);
+  --b-input-field-password-validation-list-invalid-color: var(--b-color-label-secondary);
+  --b-input-field-password-validation-list-margin: var(--b-spacer-060);
+  --b-input-field-password-validation-list-text-margin-left: var(--b-spacer-040);
+  --b-input-field-password-validation-list-gap: var(--b-spacer-060);
   --b-info-icon-color: var(--b-color-label-primary);
   --b-header-component-title-margin-top: var(--b-spacer-020);
   --b-header-actions-margin-top: var(--b-spacer-070);
@@ -1168,34 +1175,89 @@
   --b-filter-bar-actions-gap: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-padding-right: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-border-color: var(--b-color-outline-secondary);
-  --b-filter-bar-z-index: 5;
+  --b-filter-bar-z-index: var(--b-z-index-global-elevated);
   --b-filter-bar-padding-right: var(--b-spacer-070);
   --b-filter-bar-gap: var(--b-spacer-040);
-  --b-filter-bar-button-secondary-label-color: var(--b-color-label-secondary);
+  --color: {color.label.primary};
   --b-filter-bar-button-label-container-gap: var(--b-spacer-020);
-  --b-filter-bar-button-hover-color: var(--b-color-label-primary-hover);
+  --b-filter-bar-button-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-hover-background-color: var(--b-color-background-primary-hover);
   --b-filter-bar-button-filter-open-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-filter-open-background-color: var(--b-color-background-primary-active);
+  --b-filter-bar-button-counter-filter-open-background-color: var(--b-color-background-tertiary-active);
+  --b-filter-bar-button-counter-filter-open-color: var(--b-color-label-primary);
   --b-filter-bar-button-counter-hover-background-color: var(--b-color-background-tertiary-hover);
+  --b-filter-bar-button-counter-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-counter-disabled-color: var(--b-color-label-disabled);
   --b-filter-bar-button-counter-disabled-background-color: var(--b-color-background-disabled);
   --b-filter-bar-button-counter-padding: 0 var(--b-spacer-020);
   --b-filter-bar-button-counter-margin-right: var(--b-spacer-020);
-  --b-filter-bar-button-counter-color: var(--b-color-label-secondary);
+  --b-filter-bar-button-counter-color: var(--b-color-label-primary);
   --b-filter-bar-button-counter-border-radius: var(--b-border-radius-s);
   --b-filter-bar-button-counter-background-color: var(--b-color-background-tertiary);
   --b-filter-bar-button-container-padding: var(--b-spacer-020) var(--b-spacer-050);
   --b-filter-bar-button-container-gap: var(--b-spacer-040);
   --b-filter-bar-button-with-secondary-label-container-padding-right: var(--b-spacer-050);
-  --b-filter-bar-button-with-chevron-container-padding-right: var(--b-spacer-040);
+  --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-disabled-color: var(--b-color-label-disabled);
   --b-filter-bar-button-disabled-background-color: var(--b-color-background-primary);
-  --b-filter-bar-button-chevron-padding-right: var(--b-spacer-060);
+  --b-filter-bar-button-attention-outline: 0.5px solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-attention-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-active-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-color: var(--b-color-label-primary);
   --b-filter-bar-button-border-radius: var(--b-border-radius-m);
   --b-filter-bar-button-border: var(--b-border-width-s) solid var(--b-color-outline-secondary);
   --b-filter-bar-button-background-color: var(--b-color-background-primary);
+  --b-file-uploader-restrictions-error-color: var(--b-color-label-critical);
+  --b-file-uploader-restrictions-disabled-color: var(--b-color-label-disabled);
+  --b-file-uploader-restrictions-margin-top: var(--b-spacer-020);
+  --b-file-uploader-restrictions-color: var(--b-color-label-secondary);
+  --b-file-uploader-file-card-icon-orange-color: var(--b-color-decorative-orange);
+  --b-file-uploader-file-card-icon-grey-color: var(--b-color-label-secondary);
+  --b-file-uploader-file-card-icon-green-color: var(--b-color-decorative-green);
+  --b-file-uploader-file-card-icon-error-color: var(--b-color-label-critical);
+  --b-file-uploader-file-card-icon-blue-color: var(--b-color-decorative-orange);
+  --b-file-uploader-file-card-info-gap: var(--b-spacer-040);
+  --b-file-uploader-file-card-error-message-margin-top: var(--b-spacer-020);
+  --b-file-uploader-file-card-error-message-color: var(--b-color-label-critical);
+  --b-file-uploader-file-card-error-background-color: var(--b-color-background-critical-weak);
+  --b-file-uploader-file-card-animation-transition: var(--b-animation-duration-moderate) var(--b-animation-easing-standard);
+  --b-file-uploader-file-card-actions-gap: var(--b-spacer-090);
+  --b-file-uploader-file-card-padding: var(--b-spacer-040) var(--b-spacer-060);
+  --b-file-uploader-file-card-gap: var(--b-spacer-040);
+  --b-file-uploader-file-card-border-radius: var(--b-border-radius-m);
+  --b-file-uploader-file-card-background-color: var(--b-color-background-secondary);
+  --b-file-uploader-title-margin-top: var(--b-spacer-060);
+  --b-file-uploader-files-gap: var(--b-spacer-040);
+  --b-file-uploader-icon-error-color: var(--b-color-label-on-color);
+  --b-file-uploader-icon-error-background-color: var(--b-color-background-critical-strong);
+  --b-file-uploader-icon-drag-over-color: var(--b-color-label-on-color);
+  --b-file-uploader-icon-drag-over-background-color: var(--b-color-background-success-strong);
+  --b-file-uploader-icon-width: var(--b-spacer-100);
+  --b-file-uploader-icon-padding: var(--b-spacer-040);
+  --b-file-uploader-icon-height: var(--b-spacer-100);
+  --b-file-uploader-icon-border-radius: var(--b-border-radius-xl);
+  --b-file-uploader-icon-background-color: var(--b-color-background-tertiary);
+  --b-file-uploader-description-disabled-color: var(--b-color-label-disabled);
+  --b-file-uploader-description-margin-top: var(--b-spacer-020);
+  --b-file-uploader-description-color: var(--b-color-label-secondary);
+  --b-file-uploader-button-condensed-margin-left: var(--b-spacer-060);
+  --b-file-uploader-button-margin-top: var(--b-spacer-060);
+  --b-file-uploader-area-error-border: var(--b-border-width-m) solid var(--b-color-outline-critical);
+  --b-file-uploader-area-error-background-color: var(--b-color-background-critical-weak);
+  --b-file-uploader-area-hover-background-color: var(--b-color-background-primary-hover);
+  --b-file-uploader-area-drag-over-border: var(--b-border-width-m) solid var(--b-color-outline-success);
+  --b-file-uploader-area-drag-over-background-color: var(--b-color-background-success-weak);
+  --b-file-uploader-area-disabled-color: var(--b-color-label-disabled);
+  --b-file-uploader-area-disabled-border: var(--b-border-width-m) dashed var(--b-color-outline-disabled);
+  --b-file-uploader-area-disabled-background-color: var(--b-color-background-disabled);
+  --b-file-uploader-area-condensed-padding: var(--b-spacer-040) var(--b-spacer-060);
+  --b-file-uploader-area-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-file-uploader-area-border-radius: var(--b-border-radius-m);
+  --b-file-uploader-area-border: var(--b-border-width-m) dashed var(--b-color-outline-tertiary);
+  --b-file-uploader-area-background-color: var(--b-color-background-primary);
+  --b-file-uploader-alert-margin-top: var(--b-spacer-040);
+  --b-file-uploader-gap: var(--b-spacer-040);
   --b-field-label-tooltip-wrapper-margin-right: var(--b-spacer-040);
   --b-field-label-requirement-color: var(--b-color-label-secondary);
   --b-field-label-condensed-margin-bottom: var(--b-spacer-030);
@@ -1268,7 +1330,7 @@
   --b-dialog-page-animation-duration: var(--b-animation-duration-moderate);
   --b-dialog-page-actions-with-border-border-top: var(--b-border-width-s) solid var(--b-color-outline-primary);
   --b-dialog-page-footer-with-border-border-top: var(--b-border-width-s) solid var(--b-color-outline-primary);
-  --b-dialog-page-back-button-z-index: 1;
+  --b-dialog-page-back-button-z-index: var(--b-z-index-local-tier-1);
   --b-dialog-page-back-button-padding-left: var(--b-spacer-090);
   --b-dialog-page-header-with-border-border-bottom: var(--b-border-width-s) solid var(--b-color-outline-primary);
   --b-dialog-page-border-radius: var(--b-border-radius-l);
@@ -1295,10 +1357,10 @@
   --b-date-picker-description-error-margin-top: var(--b-spacer-020);
   --b-date-picker-description-margin-top: var(--b-spacer-040);
   --b-date-picker-description-color: var(--b-color-label-secondary);
-  --b-data-grid-horizontal-scrollbar-z-index: 2;
+  --b-data-grid-horizontal-scrollbar-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-horizontal-scrollbar-background-color: var(--b-color-background-primary);
   --b-data-grid-empty-state-padding: var(--b-spacer-100) 0;
-  --b-data-grid-re-order-column-target-separator-z-index: 1;
+  --b-data-grid-re-order-column-target-separator-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-re-order-column-target-separator-background-color: var(--b-color-background-highlight-strong);
   --b-data-grid-config-column-row-freeze-icon-frozen-color: var(--b-color-label-primary);
   --b-data-grid-config-column-row-freeze-icon-color: var(--b-color-label-disabled);
@@ -1321,12 +1383,12 @@
   --b-data-grid-config-settings-button-padding: 0 0 0 var(--b-spacer-020);
   --b-data-grid-config-settings-button-margin: var(--b-spacer-070) 0;
   --b-data-grid-config-settings-button-and-separator-background-color: var(--b-color-background-primary);
-  --b-data-grid-config-settings-z-index: 4;
+  --b-data-grid-config-settings-z-index: var(--b-z-index-local-tier-4);
   --b-data-grid-config-settings-color: var(--b-color-label-primary);
   --b-data-grid-loading-indicator-margin: 0 0 var(--b-spacer-060) 0;
   --b-data-grid-filters-sticky-padding: var(--b-spacer-060) var(--b-spacer-090);
-  --b-data-grid-filters-focus-within-z-index: 3;
-  --b-data-grid-filters-z-index: 2;
+  --b-data-grid-filters-focus-within-z-index: var(--b-z-index-local-tier-3);
+  --b-data-grid-filters-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-filters-background-color: var(--b-color-background-primary);
   --b-data-grid-filters-padding: var(--b-spacer-060) 0;
   --b-data-grid-filters-border-width: var(--b-border-width-s);
@@ -1336,13 +1398,13 @@
   --b-data-grid-pagination-padding: var(--b-spacer-060) 0;
   --b-data-grid-pagination-border-width: var(--b-border-width-s);
   --b-data-grid-pagination-border-color: var(--b-color-separator-primary);
-  --b-data-grid-pagination-z-index: 2;
+  --b-data-grid-pagination-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-pagination-background-color: var(--b-color-background-primary);
   --b-data-grid-lazy-load-padding: var(--b-spacer-060) var(--b-spacer-070);
   --b-data-grid-lazy-load-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
-  --b-data-grid-lazy-load-z-index: 2;
+  --b-data-grid-lazy-load-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-lazy-load-background-color: var(--b-color-background-primary);
-  --b-data-grid-footer-z-index: 2;
+  --b-data-grid-footer-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-footer-padding: var(--b-spacer-040) var(--b-spacer-090);
   --b-data-grid-footer-background-color: var(--b-color-background-primary);
   --b-data-grid-select-cell-margin-left: var(--b-spacer-040);
@@ -1358,6 +1420,8 @@
   --b-data-grid-cell-padding: 14px var(--b-spacer-070);
   --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-nested-row-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);
@@ -1366,8 +1430,8 @@
   --b-data-grid-row-border-width: var(--b-border-width-s);
   --b-data-grid-row-border-color: var(--b-color-separator-primary);
   --b-data-grid-row-background-color: var(--b-color-background-primary);
-  --b-data-grid-rows-frozen-hover-z-index: 2;
-  --b-data-grid-rows-frozen-z-index: 1;
+  --b-data-grid-rows-frozen-hover-z-index: var(--b-z-index-local-tier-2);
+  --b-data-grid-rows-frozen-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-rows-frozen-border-right-width: var(--b-border-width-s);
   --b-data-grid-rows-frozen-border-right-color: var(--b-color-separator-secondary);
   --b-data-grid-column-actions-padding-left: var(--b-spacer-030);
@@ -1375,7 +1439,7 @@
   --b-data-grid-column-draggable-ghost-background-color: var(--b-color-background-selected);
   --b-data-grid-column-header-gap: var(--b-spacer-040);
   --b-data-grid-column-header-and-actions-gap: var(--b-spacer-020);
-  --b-data-grid-column-separator-z-index: 1;
+  --b-data-grid-column-separator-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-column-separator-resizeable-hover-color: var(--b-color-separator-secondary);
   --b-data-grid-column-separator-border-right-width: var(--b-border-width-s);
   --b-data-grid-column-separator-border-right-color: var(--b-color-separator-primary);
@@ -1393,14 +1457,14 @@
   --b-data-grid-columns-select-column-gap: var(--b-spacer-020);
   --b-data-grid-columns-select-column-padding-right: var(--b-spacer-020);
   --b-data-grid-columns-select-column-padding-left: var(--b-spacer-040);
-  --b-data-grid-columns-frozen-z-index: 2;
+  --b-data-grid-columns-frozen-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-columns-frozen-border-right-width: var(--b-border-width-s);
   --b-data-grid-columns-frozen-border-right-color: var(--b-color-separator-secondary);
   --b-data-grid-columns-border-width: var(--b-border-width-s);
   --b-data-grid-columns-border-color: var(--b-color-separator-primary);
-  --b-data-grid-column-headers-focus-within-z-index: 3;
+  --b-data-grid-column-headers-focus-within-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-column-headers-background-color: var(--b-color-background-primary);
-  --b-data-grid-column-headers-z-index: 2;
+  --b-data-grid-column-headers-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-header-padding: var(--b-spacer-080) var(--b-spacer-090);
   --b-data-grid-border-width: var(--b-border-width-s);
   --b-data-grid-border-radius: var(--b-border-radius-m);
@@ -1415,7 +1479,7 @@
   --b-data-grid-template-tabs-padding: var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-tabs-background-color: var(--b-color-background-primary);
   --b-data-grid-template-additional-content-margin: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
-  --b-data-grid-template-header-z-index: 3;
+  --b-data-grid-template-header-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-template-header-margin: var(--b-spacer-080) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-gap: var(--b-spacer-060);
   --b-data-grid-static-icon-warning-colored-color: var(--b-color-label-warning);
@@ -1432,7 +1496,7 @@
   --b-dashboard-section-content-gap: var(--b-spacer-100);
   --b-dashboard-section-gap: var(--b-spacer-060);
   --b-dashboard-template-sticky-border-border-bottom: var(--b-border-width-s) solid var(--b-color-separator-primary);
-  --b-dashboard-template-sticky-items-z-index: 1;
+  --b-dashboard-template-sticky-items-z-index: var(--b-z-index-local-tier-1);
   --b-dashboard-template-sticky-items-spacing: var(--b-spacer-070);
   --b-dashboard-template-sticky-items-background-color: var(--b-color-background-primary);
   --b-dashboard-template-top-section-gap: var(--b-spacer-040);
@@ -1798,7 +1862,7 @@
   --b-action-bar-container-padding: var(--b-spacer-050) var(--b-spacer-090);
   --b-action-bar-container-color: var(--b-color-label-inverse-primary);
   --b-action-bar-container-background-color: var(--b-color-background-inverse-primary);
-  --b-action-bar-z-index: 5;
+  --b-action-bar-z-index: var(--b-z-index-global-elevated);
   --b-action-bar-bottom-extra-spacing: var(--b-spacer-120);
   --b-action-bar-bottom: var(--b-spacer-070);
   --b-accordion-item-animation-easing: var(--b-animation-easing-standard);