@aws-amplify/ui 6.0.17 → 6.1.0

package/dist/esm/utils/utils.mjs

@@ -223,5 +223,25 @@ function groupLog(groupName, ...events) {
         console.log(groupName);
     }
 }
+/**
+ * Splits an object into 2 objects based on a predicate
+ *
+ * @param {object} obj an object to split into two
+ * @param {function} predicate function to determin where an element should go
+ * @returns
+ */
+function splitObject(obj, predicate) {
+    const left = {};
+    const right = {};
+    Object.entries(obj).forEach(([key, value]) => {
+        if (predicate(key)) {
+            left[key] = value;
+        }
+        else {
+            right[key] = value;
+        }
+    });
+    return [left, right];
+}
 
-export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isTypedFunction, isUndefined, noop, sanitizeNamespaceImport, templateJoin };
+export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isTypedFunction, isUndefined, noop, sanitizeNamespaceImport, splitObject, templateJoin };

package/dist/index.js

@@ -9,19 +9,13 @@ var awsAmplify = require('aws-amplify');
 var xstate = require('xstate');
 var pickBy = require('lodash/pickBy.js');
 var merge = require('lodash/merge.js');
-var deepExtend = require('style-dictionary/lib/utils/deepExtend.js');
-var flattenProperties = require('style-dictionary/lib/utils/flattenProperties.js');
 var kebabCase = require('lodash/kebabCase.js');
-var usesReference = require('style-dictionary/lib/utils/references/usesReference.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var pickBy__default = /*#__PURE__*/_interopDefaultLegacy(pickBy);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
-var deepExtend__default = /*#__PURE__*/_interopDefaultLegacy(deepExtend);
-var flattenProperties__default = /*#__PURE__*/_interopDefaultLegacy(flattenProperties);
 var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
-var usesReference__default = /*#__PURE__*/_interopDefaultLegacy(usesReference);
 
 /**
  * This file contains helpers that lets you easily access current actor's state
@@ -307,6 +301,26 @@ function groupLog(groupName, ...events) {
         console.log(groupName);
     }
 }
+/**
+ * Splits an object into 2 objects based on a predicate
+ *
+ * @param {object} obj an object to split into two
+ * @param {function} predicate function to determin where an element should go
+ * @returns
+ */
+function splitObject(obj, predicate) {
+    const left = {};
+    const right = {};
+    Object.entries(obj).forEach(([key, value]) => {
+        if (predicate(key)) {
+            left[key] = value;
+        }
+        else {
+            right[key] = value;
+        }
+    });
+    return [left, right];
+}
 
 /**
  * @example
@@ -1128,7 +1142,7 @@ const jaDict$1 = {
     'Enter your Username': 'ユーザー名を入力 ',
     'Forgot your password?': 'パスワードを忘れましたか？ ',
     'Hide password': 'パスワードを非表示',
-    'It may take a minute to arrive': '到着するまでに 1 分かかることがあります。',
+    'It may take a minute to arrive': '到着するまでに 1 分かかることがあります',
     Loading: 'ロード中',
     'New password': '新しいパスワード',
     or: '又は',
@@ -1158,7 +1172,7 @@ const jaDict$1 = {
     Verify: '確認',
     'We Sent A Code': 'コードが送信されました',
     'We Texted You': 'テキストが送信されました',
-    'Your code is on the way. To log in, enter the code we sent you': 'コードが途中です。ログインするには、送信したコードを入力してください。',
+    'Your code is on the way. To log in, enter the code we sent you': 'コードが途中です。ログインするには、送信したコードを入力してください',
     // Additional translations provided by customers
     'An account with the given email already exists.': '入力されたメールアドレスのアカウントが既に存在します',
     'Confirm a Code': 'コードを確認',
@@ -1207,10 +1221,19 @@ const krDict$1 = {
     'Creating Account': '회원가입중',
     'Dismiss alert': '알림 무시',
     Email: '이메일',
+    'Enter your Birthdate': '생년월일 입력',
     'Enter your code': '인증번호를 입력해주세요',
+    'Enter your Confirmation Code': '확인 코드 입력',
     'Enter your Email': '이메일 입력',
+    'Enter your Family Name': '성 입력',
+    'Enter your Given Name': '사용장 이름 입력',
+    'Enter your Name': '이름 입력',
+    'Enter your Nickname': '닉네임 입력',
+    'Enter your Password': '비밀번호 입력',
     'Enter your phone number': '전화번호 입력',
+    'Enter your Preferred Username': '선호하는 아이디 입력',
     'Enter your username': '아이디를 입력해주세요',
+    'Forgot password?': '비밀번호를 잊으셨나요?',
     'Hide password': '비밀번호 숨기기',
     'It may take a minute to arrive': '도착하는 데 1분 정도 걸릴 수 있습니다',
     Loading: '로딩중',
@@ -1218,6 +1241,7 @@ const krDict$1 = {
     or: '또는',
     Password: '비밀번호',
     'Phone Number': '전화번호',
+    'Please confirm your Password': '비밀번호를 확인해 주세요.',
     'Resend Code': '인증번호 재전송',
     'Reset your password': '비밀번호 재설정',
     'Reset your Password': '비밀번호 재설정',
@@ -8073,6 +8097,26 @@ const defaultTheme = {
 };
 
 const CSS_VARIABLE_PREFIX = 'amplify';
+/**
+ * This will take an object like:
+ * {paddingTop:'20px',color:'{colors.font.primary}'}
+ * and turn it into a CSS string:
+ * `padding-top:20px; color: var(--colors-font-primary);`
+ */
+function propsToString(props) {
+    return Object.entries(props)
+        .map(([key, value]) => {
+        const _value = isDesignToken(value)
+            ? value.toString()
+            : // @ts-ignore
+                cssValue({ value });
+        return `${kebabCase__default["default"](key)}:${_value}; `;
+    })
+        .join(' ');
+}
+function cssNameTransform({ path = [] }) {
+    return `${kebabCase__default["default"]([CSS_VARIABLE_PREFIX, ...path].join(' '))}`;
+}
 // Important: these properties should not be altered in
 // order to maintain the expected order of the CSS `box-shadow` property
 const SHADOW_PROPERTIES = [
@@ -8082,15 +8126,12 @@ const SHADOW_PROPERTIES = [
     'spreadRadius',
     'color',
 ];
-function referenceValue(value) {
-    if (!value)
-        return '';
-    if (usesReference__default["default"](value)) {
-        const path = value.replace(/\{|\}/g, '').replace('.value', '').split('.');
-        return `var(--${cssNameTransform({ path })})`;
-    }
-    return value;
-}
+/**
+ * Will take a design token in a theme and return its value as CSS
+ *
+ * @param token
+ * @returns
+ */
 function cssValue(token) {
     const { value } = token;
     if (isString(value)) {
@@ -8106,9 +8147,6 @@ function cssValue(token) {
     }
     return value;
 }
-function cssNameTransform({ path = [] }) {
-    return `${kebabCase__default["default"]([CSS_VARIABLE_PREFIX, ...path].join(' '))}`;
-}
 /**
  * Helper function to test if something is a design token or not.
  * Used in the React component style props.
@@ -8122,6 +8160,36 @@ function isDesignToken(value) {
 function isShadowTokenObject(value) {
     return isObject(value) && has(value, 'offsetX');
 }
+/**
+ * Function that sees if a string contains a design token reference
+ * and if so will turn that into a CSS variable.
+ *
+ * @param {string} value
+ * @returns string
+ */
+function referenceValue(value) {
+    if (!value)
+        return '';
+    if (usesReference(value)) {
+        const path = value.replace(/\{|\}/g, '').replace('.value', '').split('.');
+        return `var(--${cssNameTransform({ path })})`;
+    }
+    return value;
+}
+/**
+ * This will take a design token and add some data to it for it
+ * to be used in JS/CSS. It will create its CSS var name and update
+ * the value to use a CSS var if it is a reference. It will also
+ * add a `.toString()` method to make it easier to use in JS.
+ *
+ * We should see if there is a way to share this logic with style dictionary...
+ */
+const setupToken = ({ token, path }) => {
+    const name = `--${cssNameTransform({ path })}`;
+    const { value: original } = token;
+    const value = cssValue(token);
+    return { name, original, path, value, toString: () => `var(${name})` };
+};
 /**
  * Recursive function that will walk down the token object
  * and perform the setupToken function on each token.
@@ -8145,22 +8213,199 @@ function setupTokens({ tokens, path = [], setupToken, }) {
     }
     return output;
 }
-
 // Internal Style Dictionary methods
+// copied from amzn/style-dictionary with the owner's permission
 /**
- * This will take a design token and add some data to it for it
- * to be used in JS/CSS. It will create its CSS var name and update
- * the value to use a CSS var if it is a reference. It will also
- * add a `.toString()` method to make it easier to use in JS.
+ * Takes an plain javascript object and will make a flat array of all the leaf nodes.
+ * A leaf node in this context has a 'value' property. Potentially refactor this to
+ * be more generic.
+ * @private
+ * @param  {Object} properties - The plain object you want flattened into an array.
+ * @param  {Array} [to_ret=[]] - Properties array. This function is recursive therefore this is what gets passed along.
+ * @return {Array}
+ */
+function flattenProperties(properties, to_ret) {
+    to_ret = to_ret || [];
+    for (var name in properties) {
+        if (has(properties, name)) {
+            if (isObject(properties[name]) && 'value' in properties[name]) {
+                to_ret.push(properties[name]);
+            }
+            else if (isObject(properties[name])) {
+                flattenProperties(properties[name], to_ret);
+            }
+        }
+    }
+    return to_ret;
+}
+/**
+ * Performs an deep extend on the objects, from right to left.
+ * @private
+ * @param {Object[]} objects - An array of JS objects
+ * @param {Function} collision - A function to be called when a merge collision happens.
+ * @param {string[]} path - (for internal use) An array of strings which is the current path down the object when this is called recursively.
+ * @returns {Object}
+ */
+function deepExtend(objects, collision, path) {
+    if (objects == null)
+        return {};
+    var src, copyIsArray, copy, name, options, clone, target = objects[0] || {}, i = 1, length = objects.length;
+    path = path || [];
+    // Handle case when target is a string or something (possible in deep copy)
+    if (typeof target !== 'object') {
+        target = {};
+    }
+    for (; i < length; i++) {
+        // Only deal with non-null/undefined values
+        if ((options = objects[i]) != null) {
+            // Extend the base object
+            for (name in options) {
+                if (!has(options, name))
+                    continue;
+                if (name === '__proto__')
+                    continue;
+                src = target[name];
+                copy = options[name];
+                // Prevent never-ending loop
+                if (target === copy) {
+                    continue;
+                }
+                // Recurse if we're merging plain objects or arrays
+                if (copy && (isObject(copy) || (copyIsArray = Array.isArray(copy)))) {
+                    if (copyIsArray) {
+                        copyIsArray = false;
+                        clone = src && Array.isArray(src) ? src : [];
+                    }
+                    else {
+                        clone = src && isObject(src) ? src : {};
+                    }
+                    var nextPath = path.slice(0);
+                    nextPath.push(name);
+                    // Never move original objects, clone them
+                    target[name] = deepExtend([clone, copy], collision, nextPath);
+                    // Don't bring in undefined values
+                }
+                else if (copy !== undefined) {
+                    if (src != null && typeof collision == 'function') {
+                        collision({ target: target, copy: options, path: path, key: name });
+                    }
+                    target[name] = copy;
+                }
+            }
+        }
+    }
+    return target;
+}
+/**
+ * Checks if the value uses a value reference.
+ * @param {string} value
+ * @returns {boolean} - True, if the value uses a value reference
+ */
+function usesReference(value) {
+    const regex = new RegExp('\\{([^}]+)\\}', 'g');
+    if (typeof value === 'string') {
+        return regex.test(value);
+    }
+    if (typeof value === 'object') {
+        let hasReference = false;
+        // iterate over each property in the object,
+        // if any element passes the regex test,
+        // the whole thing should be true
+        for (const key in value) {
+            if (has(value, key)) {
+                const element = value[key];
+                let reference = usesReference(element);
+                if (reference) {
+                    hasReference = true;
+                    break;
+                }
+            }
+        }
+        return hasReference;
+    }
+    return false;
+}
+
+function addVars(selector, vars) {
+    if (!vars)
+        return '';
+    return `${selector} { ${Object.entries(vars)
+        .map(([key, value]) => {
+        return `--${key}:${value}; `;
+    })
+        .join(' ')}}\n`;
+}
+function recursiveComponentCSS(baseSelector, theme) {
+    let str = '';
+    const { _modifiers = {}, _element = {}, _vars, ...props } = theme;
+    // if there are no props, skip
+    if (Object.keys(props).length) {
+        // separate psuedo/attribute selectors
+        const [selectors, other] = splitObject(props, (key) => key.startsWith(':') || key.startsWith('['));
+        Object.entries(selectors).forEach(([selector, value]) => {
+            // need to remove nested things like vars and elements
+            const { _modifiers = {}, _element = {}, _vars, ...props } = value;
+            str += `${baseSelector}${selector} { ${propsToString(props)} }\n`;
+            str += addVars(`${baseSelector}${selector}`, _vars);
+        });
+        str += `${baseSelector} { ${propsToString(other)} }\n`;
+    }
+    str += addVars(baseSelector, _vars);
+    Object.entries(_modifiers).forEach(([key, value]) => {
+        if (value && Object.keys(value).length) {
+            str += recursiveComponentCSS(`${baseSelector}--${key}`, value);
+        }
+    });
+    Object.entries(_element).forEach(([key, value]) => {
+        if (value && Object.keys(value).length) {
+            str += recursiveComponentCSS(`${baseSelector}__${key}`, value);
+        }
+    });
+    return str;
+}
+/**
+ * This will take a component theme and create the appropriate CSS for it.
  *
- * We should see if there is a way to share this logic with style dictionary...
  */
-const setupToken = ({ token, path }) => {
-    const name = `--${cssNameTransform({ path })}`;
-    const { value: original } = token;
-    const value = cssValue(token);
-    return { name, original, path, value, toString: () => `var(${name})` };
-};
+function createComponentCSS(themeName, components, tokens, breakpoints) {
+    let cssText = '';
+    components.forEach(({ name, theme, overrides }) => {
+        const baseComponentClassName = `amplify-${name}`;
+        const componentClassName = `[data-amplify-theme="${themeName}"] .${baseComponentClassName}`;
+        // unwrap the component theme
+        // if it is a function: call it with the defaultTheme to get a static object
+        const componentTheme = isFunction(theme)
+            ? theme(tokens)
+            : theme;
+        cssText += recursiveComponentCSS(componentClassName, componentTheme);
+        // if the component theme has overrides
+        // generate the appropriate CSS for each of them
+        if (overrides) {
+            overrides.forEach((override) => {
+                // unwrap the override component theme just like above
+                const componentTheme = isFunction(override.theme)
+                    ? override.theme(tokens)
+                    : override.theme;
+                if ('mediaQuery' in override) {
+                    cssText += `@media (${override.mediaQuery}) {\n ${recursiveComponentCSS(componentClassName, componentTheme)} \n}`;
+                }
+                if ('breakpoint' in override) {
+                    const breakpoint = breakpoints.values[override.breakpoint];
+                    cssText += `\n@media (min-width: ${breakpoint}px) {\n ${recursiveComponentCSS(componentClassName, componentTheme)} \n}`;
+                }
+                if ('selector' in override) {
+                    cssText += recursiveComponentCSS(`${override.selector} .${baseComponentClassName}`, componentTheme);
+                }
+                if ('colorMode' in override) {
+                    cssText += `\n@media (prefers-color-scheme: ${override.colorMode}) {\n${recursiveComponentCSS(`[data-amplify-theme="${themeName}"][data-amplify-color-mode="system"] .${baseComponentClassName}`, componentTheme)}\n}\n`;
+                    cssText += recursiveComponentCSS(`[data-amplify-theme="${themeName}"][data-amplify-color-mode="${override.colorMode}"] .${baseComponentClassName}`, componentTheme);
+                }
+            });
+        }
+    });
+    return cssText;
+}
+
 /**
  * Takes a set of keys and a color name and returns an object of design tokens,
  * used for applying a primary color at the theme level to our tokens.
@@ -8180,6 +8425,24 @@ function createColorPalette({ keys, value }) {
         };
     }, {});
 }
+
+function createAnimationCSS({ animations, tokens, }) {
+    let cssText = '';
+    Object.entries(animations).forEach(([key, value]) => {
+        cssText += `\n  @keyframes ${key} {`;
+        Object.entries(value).forEach(([step, properties]) => {
+            cssText += `\n    ${step} {\n`;
+            const animationProperties = isFunction(properties)
+                ? properties(tokens)
+                : properties;
+            cssText += propsToString(animationProperties);
+            cssText += `\n    }`;
+        });
+        cssText += `\n  }`;
+    });
+    return cssText;
+}
+
 /**
  * This will be used like `const myTheme = createTheme({})`
  * `myTheme` can then be passed to a Provider or the generated CSS
@@ -8192,7 +8455,14 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
     // deepExtend is an internal Style Dictionary method
     // that performs a deep merge on n objects. We could change
     // this to another 3p deep merge solution too.
-    const mergedTheme = deepExtend__default["default"]([{}, DefaultTheme, theme]);
+    const mergedTheme = deepExtend([
+        {},
+        DefaultTheme,
+        {
+            ...theme,
+            components: {},
+        },
+    ]);
     const { primaryColor, secondaryColor } = mergedTheme;
     // apply primaryColor and secondaryColor if present
     if (isString(primaryColor)) {
@@ -8219,11 +8489,20 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
     // flattenProperties is another internal Style Dictionary function
     // that creates an array of all tokens.
     let cssText = `[data-amplify-theme="${name}"] {\n` +
-        flattenProperties__default["default"](tokens)
+        flattenProperties(tokens)
             .map((token) => `${token.name}: ${token.value};`)
             .join('\n') +
         `\n}\n`;
+    if (theme?.components) {
+        cssText += createComponentCSS(name, theme.components, tokens, mergedTheme.breakpoints);
+    }
     let overrides = [];
+    if (mergedTheme.animations) {
+        cssText += createAnimationCSS({
+            animations: mergedTheme.animations,
+            tokens,
+        });
+    }
     /**
      * For each override, we setup the tokens and then generate the CSS.
      * This allows us to have one single CSS string for all possible overrides
@@ -8231,11 +8510,11 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
      */
     if (mergedTheme.overrides) {
         overrides = mergedTheme.overrides.map((override) => {
-            const tokens = setupTokens({
+            const overrideTokens = setupTokens({
                 tokens: override.tokens,
                 setupToken,
             });
-            const customProperties = flattenProperties__default["default"](tokens)
+            const customProperties = flattenProperties(overrideTokens)
                 .map((token) => `${token.name}: ${token.value};`)
                 .join('\n');
             // Overrides can have a selector, media query, breakpoint, or color mode
@@ -8272,7 +8551,7 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
             }
             return {
                 ...override,
-                tokens,
+                tokens: overrideTokens,
             };
         });
     }
@@ -8281,6 +8560,12 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
         breakpoints,
         name,
         cssText,
+        containerProps: ({ colorMode } = {}) => {
+            return {
+                'data-amplify-theme': name,
+                'data-amplify-color-mode': colorMode,
+            };
+        },
         // keep overrides separate from base theme
         // this allows web platforms to use plain CSS scoped to a
         // selector and only override the CSS vars needed. This
@@ -8293,6 +8578,112 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
     };
 }
 
+function createComponentClasses({ name, prefix = 'amplify-' }) {
+    const className = (props = {}, extraClassnames = []) => {
+        const baseComponentClassName = `${prefix}${name}`;
+        // get the element if there is one
+        // the _element argument can be a string
+        // like { _element: 'icon' }
+        // or it could be an object where the key is
+        // the element name and the value is the modifiers
+        // like { _element: { icon: [size] } }
+        const element = isString(props._element)
+            ? props._element
+            : isObject(props._element)
+                ? Object.keys(props._element)[0]
+                : undefined;
+        const className = element
+            ? `${baseComponentClassName}__${element}`
+            : baseComponentClassName;
+        const names = [className];
+        if (element) {
+            const modifiers = props._element[element];
+            names.push(...modifierClassnames({ className, modifiers }));
+        }
+        else {
+            names.push(...modifierClassnames({
+                className,
+                modifiers: props._modifiers,
+            }));
+        }
+        return classNames([...names, ...extraClassnames]);
+    };
+    return className;
+}
+function modifierClassnames({ className, modifiers, }) {
+    if (Array.isArray(modifiers)) {
+        return modifiers.map((modifier) => {
+            if (!modifier || !isString(modifier)) {
+                return;
+            }
+            return `${className}--${modifier}`;
+        });
+    }
+    if (isObject(modifiers)) {
+        return Object.entries(modifiers).map(([key, value]) => {
+            if (value) {
+                return `${className}--${key}`;
+            }
+        });
+    }
+    if (isString(modifiers)) {
+        return [`${className}--${modifiers}`];
+    }
+    return [];
+}
+
+/**
+ * Use this to create the theme of a component. You can use this
+ * to both completely customize built-in components and
+ * build your own components!
+ *
+ * @experimental
+ *
+ * ```ts
+ * // built-in component styling
+ * const alertTheme = defineComponentTheme({
+ *   name: 'alert',
+ *   theme: (tokens) => {
+ *     return {
+ *       padding: tokens.space.large
+ *     }
+ *   }
+ * });
+ *
+ * // custom component styling
+ * const avatarTheme = defineComponentTheme({
+ *   name: 'avatar',
+ *   theme: (tokens) => {
+ *     return {
+ *       padding: tokens.space.large
+ *     }
+ *   }
+ * })
+ *
+ * const theme = createTheme({
+ *   name: 'my-theme',
+ *   components: [alertTheme, avatarTheme]
+ * })
+ * ```
+ *
+ * @param {Object} params
+ * @param {string} params.name  - The name of the component. Use a built-in component name like button to theme buttons.
+ * @returns
+ */
+function defineComponentTheme({ name, theme, overrides, }) {
+    const prefix = 'amplify-';
+    const className = createComponentClasses({
+        name,
+        prefix,
+    });
+    return {
+        className,
+        theme,
+        overrides,
+        name,
+    };
+}
+
 const darkModeTokens = {
     colors: {
         red: {
@@ -8440,6 +8831,7 @@ exports.classNameModifierByFlag = classNameModifierByFlag;
 exports.classNames = classNames;
 exports.countryDialCodes = countryDialCodes;
 exports.createAuthenticatorMachine = createAuthenticatorMachine;
+exports.createComponentClasses = createComponentClasses;
 exports.createTheme = createTheme;
 exports.cssNameTransform = cssNameTransform;
 exports.defaultAuthHubHandler = defaultAuthHubHandler;
@@ -8447,6 +8839,7 @@ exports.defaultDarkModeOverride = defaultDarkModeOverride;
 exports.defaultFormFieldOptions = defaultFormFieldOptions;
 exports.defaultFormFieldsGetters = defaultFormFieldsGetters;
 exports.defaultTheme = defaultTheme;
+exports.defineComponentTheme = defineComponentTheme;
 exports.deleteUser = deleteUser;
 exports.emailRegex = emailRegex;
 exports.getActorContext = getActorContext$1;
@@ -8500,6 +8893,7 @@ exports.setupTokens = setupTokens;
 exports.signUpFieldsWithDefault = signUpFieldsWithDefault;
 exports.signUpFieldsWithoutDefault = signUpFieldsWithoutDefault;
 exports.sortFormFields = sortFormFields;
+exports.splitObject = splitObject;
 exports.templateJoin = templateJoin;
 exports.translate = translate;
 exports.translations = translations;

package/dist/types/theme/components/accordion.d.ts

@@ -0,0 +1,4 @@
+import { ComponentStyles, Elements } from './utils';
+export type AccordionTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    [key in 'item' | 'item__trigger' | 'item__content' | 'item__icon']?: ComponentStyles;
+}, Required>;

package/dist/types/theme/components/alert.d.ts

@@ -0,0 +1,4 @@
+import { Modifiers, ComponentStyles, Elements, ColorTheme } from './utils';
+export type AlertTheme<Required extends boolean = false> = ComponentStyles & Modifiers<ColorTheme, Required> & Elements<{
+    [key in 'icon' | 'heading' | 'body' | 'dismiss']?: ComponentStyles;
+}, Required>;

package/dist/types/theme/components/autocomplete.d.ts

@@ -0,0 +1,8 @@
+import { Modifiers, ComponentStyles, Elements } from './utils';
+export type AutoCompleteTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    menu?: ComponentStyles & Modifiers<'empty' | 'loading', Required>;
+    menu__option?: ComponentStyles & Modifiers<'active', Required>;
+    menu__options?: ComponentStyles;
+    menu__header?: ComponentStyles;
+    menu__footer?: ComponentStyles;
+}, Required>;

package/dist/types/theme/components/badge.d.ts

@@ -0,0 +1,4 @@
+import { Modifiers, ComponentStyles, Elements, ColorTheme, Size } from './utils';
+export type BadgeTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size | ColorTheme, Required> & Elements<{
+    [key in 'icon' | 'heading' | 'body' | 'dismiss']?: ComponentStyles;
+}, Required>;