@aws-amplify/ui 6.0.17 → 6.2.0

package/dist/esm/i18n/dictionaries/authenticator/de.mjs

@@ -18,7 +18,7 @@ const deDict = {
     'Create Account': 'Account erstellen',
     'Creating Account': 'Account wird erstellt',
     'Dismiss alert': 'Warnung verwerfen',
-    Email: 'Email',
+    Email: 'E-Mail',
     'Enter your Birthdate': 'Geben Sie Ihr Geburtsdatum ein',
     'Enter your code': 'Geben Sie Ihren Code ein',
     'Enter your Confirmation Code': 'Geben Sie Ihren Bestätigungs-Code ein',
@@ -30,7 +30,7 @@ const deDict = {
     'Enter your Nickname': 'Geben Sie Ihren Spitznamen ein',
     'Enter your Password': 'Geben Sie Ihr Passwort ein',
     'Enter your password': 'Geben Sie Ihr Passwort ein',
-    'Enter your email': 'Geben Sie Ihre e-mail ein',
+    'Enter your email': 'Geben Sie Ihre E-Mail ein',
     'Enter your phone number': 'Geben Sie Ihre Telefonnummer ein',
     'Enter your Preferred Username': 'Geben Sie Ihren bevorzugten Benutzernamen ein',
     'Enter your username': 'Geben Sie Ihren Benutzernamen ein',
@@ -65,14 +65,14 @@ const deDict = {
     Username: 'Benutzername',
     'Verify Contact': 'Kontakt verifizieren',
     Verify: 'Verifizieren',
-    'We Emailed You': 'Email wurde versendet',
+    'We Emailed You': 'E-Mail wurde versendet',
     'We Sent A Code': 'Wir haben einen Code gesendet',
     'We Texted You': 'Wir haben Ihnen eine SMS gesendet',
     'Your code is on the way. To log in, enter the code we emailed to': 'Ihr Bestätigungscode ist unterwegs. Um sich einzuloggen geben Sie den Code ein, den wir per E-Mail verschickt haben',
     'Your code is on the way. To log in, enter the code we sent you': 'Ihr Code ist unterwegs. Um sich anzumelden, geben Sie den Code ein, den wir Ihnen gesendet haben',
     'Your code is on the way. To log in, enter the code we texted to': 'Ihr Bestätigungscode ist unterwegs. Um sich einzuloggen geben Sie den Code ein, den wir per SMS verschickt haben',
     // Additional translations provided by customers
-    'An account with the given email already exists.': 'Ein Account mit dieser Email existiert bereits.',
+    'An account with the given email already exists.': 'Ein Account mit dieser E-Mail existiert bereits.',
     'Confirm a Code': 'Code bestätigen',
     'Confirm Sign In': 'Anmeldung bestätigen',
     'Create account': 'Hier registrieren',

package/dist/esm/i18n/dictionaries/authenticator/ja.mjs

@@ -23,7 +23,7 @@ const jaDict = {
     '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: '又は',
@@ -53,7 +53,7 @@ const jaDict = {
     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': 'コードを確認',

package/dist/esm/i18n/dictionaries/authenticator/kr.mjs

@@ -16,10 +16,19 @@ const krDict = {
     '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: '로딩중',
@@ -27,6 +36,7 @@ const krDict = {
     or: '또는',
     Password: '비밀번호',
     'Phone Number': '전화번호',
+    'Please confirm your Password': '비밀번호를 확인해 주세요.',
     'Resend Code': '인증번호 재전송',
     'Reset your password': '비밀번호 재설정',
     'Reset your Password': '비밀번호 재설정',

package/dist/esm/i18n/dictionaries/authenticator/th.mjs

@@ -0,0 +1,101 @@
+const thDict = {
+    'Account recovery requires verified contact information': 'การกู้คืนบัญชีต้องมีข้อมูลติดต่อที่ได้รับการยืนยันแล้ว',
+    'Add your Profile': 'เพิ่มโปรไฟล์ของคุณ',
+    'Add your Website': 'เพิ่มเว็บไซต์ของคุณ',
+    'Back to Sign In': 'กลับไปที่การเข้าสู่ระบบ',
+    'Change Password': 'เปลี่ยนรหัสผ่าน',
+    Changing: 'กำลังเปลี่ยน',
+    Code: 'รหัส',
+    'Confirm Password': 'ยืนยันรหัสผ่าน',
+    'Please confirm your Password': 'กรุณายืนยันรหัสผ่านของคุณ',
+    'Confirm Sign Up': 'ยืนยันการลงทะเบียน',
+    'Confirm SMS Code': 'ยืนยันรหัส SMS',
+    'Confirm MFA Code': 'ยืนยันรหัส MFA',
+    'Confirm TOTP Code': 'ยืนยันรหัส TOTP',
+    Confirm: 'ยืนยัน',
+    'Confirmation Code': 'รหัสยืนยัน',
+    Confirming: 'กำลังยืนยัน',
+    'Create a new account': 'สร้างบัญชีใหม่',
+    'Create Account': 'สร้างบัญชี',
+    '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 Middle Name': 'กรอกชื่อกลางของคุณ',
+    'Enter your Name': 'กรอกชื่อของคุณ',
+    'Enter your Nickname': 'กรอกชื่อเล่นของคุณ',
+    'Enter your Password': 'กรอกรหัสผ่านของคุณ',
+    'Enter your email': 'กรอกอีเมลของคุณ',
+    'Enter your phone number': 'กรอกหมายเลขโทรศัพท์ของคุณ',
+    'Enter your Preferred Username': 'กรอกชื่อผู้ใช้ที่ต้องการ',
+    'Enter your username': 'กรอกชื่อผู้ใช้ของคุณ',
+    'Forgot password?': 'ลืมรหัสผ่าน?',
+    'Forgot your password?': 'ลืมรหัสผ่านใช่หรือไม่?',
+    'Hide password': 'ซ่อนรหัสผ่าน',
+    'It may take a minute to arrive': 'อาจใช้เวลาสักครู่',
+    Loading: 'กำลังโหลด',
+    'New password': 'รหัสผ่านใหม่',
+    or: 'หรือ',
+    Password: 'รหัสผ่าน',
+    'Phone Number': 'หมายเลขโทรศัพท์',
+    'Resend Code': 'ส่งรหัสอีกครั้ง',
+    'Reset your Password': 'รีเซ็ตรหัสผ่านของคุณ',
+    'Reset your password': 'รีเซ็ตรหัสผ่านของคุณ',
+    'Send code': 'ส่งรหัส',
+    'Send Code': 'ส่งรหัส',
+    Sending: 'กำลังส่ง',
+    'Setup TOTP': 'ตั้งค่า TOTP',
+    'Show password': 'แสดงรหัสผ่าน',
+    'Sign in to your account': 'เข้าสู่ระบบบัญชีของคุณ',
+    'Sign In with Amazon': 'เข้าสู่ระบบด้วย Amazon',
+    'Sign In with Apple': 'เข้าสู่ระบบด้วย Apple',
+    'Sign In with Facebook': 'เข้าสู่ระบบด้วย Facebook',
+    'Sign In with Google': 'เข้าสู่ระบบด้วย Google',
+    'Sign in': 'เข้าสู่ระบบ',
+    'Sign In': 'เข้าสู่ระบบ',
+    'Signing in': 'กำลังเข้าสู่ระบบ',
+    Skip: 'ข้าม',
+    Submit: 'ส่ง',
+    Submitting: 'กำลังส่ง',
+    Username: 'ชื่อผู้ใช้',
+    'Verify Contact': 'ยืนยันการติดต่อ',
+    Verify: 'ยืนยัน',
+    'We Emailed You': 'เราได้ส่งอีเมลถึงคุณแล้ว',
+    'We Sent A Code': 'เราได้ส่งรหัสแล้ว',
+    'We Texted You': 'เราได้ส่ง SMS ถึงคุณแล้ว',
+    'Your code is on the way. To log in, enter the code we emailed to': 'รหัสของคุณกำลังมา เพื่อเข้าสู่ระบบ กรุณากรอกรหัสที่เราส่งไปยังอีเมล',
+    '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 texted to': 'รหัสของคุณกำลังมา เพื่อเข้าสู่ระบบ กรุณากรอกรหัสที่เราส่งไปยัง SMS',
+    // Additional translations
+    'An account with the given email already exists.': 'บัญชีที่ใช้อีเมลนี้มีอยู่แล้ว',
+    'Confirm a Code': 'ยืนยันรหัส',
+    'Confirm Sign In': 'ยืนยันการเข้าสู่ระบบ',
+    'Create account': 'สร้างบัญชี',
+    'Sign Up with Facebook': 'ลงทะเบียนด้วย Facebook',
+    'Sign Up with Google': 'ลงทะเบียนด้วย Google',
+    'Sign Up with Apple': 'ลงทะเบียนด้วย Apple',
+    'Sign Up with Line': 'ลงทะเบียนด้วย Line',
+    'Forgot Password': 'ลืมรหัสผ่าน',
+    'Have an account? ': 'มีบัญชีอยู่แล้ว? ',
+    'Incorrect username or password': 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง',
+    'Invalid password format': 'รูปแบบรหัสผ่านไม่ถูกต้อง',
+    'It may take a minute to arrive.': 'อาจใช้เวลาสักครู่ในการมาถึง',
+    'Lost your code? ': 'หารหัสไม่เจอ? ',
+    'New Password': 'รหัสผ่านใหม่',
+    'No account? ': 'ไม่มีบัญชี? ',
+    'Password attempts exceeded': 'เกินจำนวนครั้งที่อนุญาตให้ใส่รหัสผ่าน',
+    'Reset password': 'รีเซ็ตรหัสผ่าน',
+    'Reset Password': 'รีเซ็ตรหัสผ่าน',
+    'Sign Out': 'ออกจากระบบ',
+    'Sign Up': 'ลงทะเบียน',
+    'User already exists': 'ผู้ใช้นี้มีอยู่แล้ว',
+    'User does not exist': 'ไม่มีผู้ใช้นี้',
+    'Username cannot be empty': 'ต้องใส่ชื่อผู้ใช้งาน',
+};
+
+export { thDict };

package/dist/esm/i18n/dictionaries/index.mjs

@@ -16,6 +16,7 @@ import { trDict as trDict$1 } from './authenticator/tr.mjs';
 import { ruDict as ruDict$1 } from './authenticator/ru.mjs';
 import { heDict as heDict$1 } from './authenticator/he.mjs';
 import { uaDict as uaDict$1 } from './authenticator/ua.mjs';
+import { thDict as thDict$1 } from './authenticator/th.mjs';
 import { defaultTexts as defaultTexts$1 } from './authenticator/defaultTexts.mjs';
 
 //merge all the new module translations in respective locale constants
@@ -39,9 +40,10 @@ const trDict = { ...trDict$1 };
 const ruDict = { ...ruDict$1 };
 const heDict = { ...heDict$1 };
 const uaDict = { ...uaDict$1 };
+const thDict = { ...thDict$1 };
 const defaultTexts = {
     ...defaultTexts$1,
     // new module related default texts goes here
 };
 
-export { deDict, defaultTexts, enDict, esDict, frDict, heDict, idDict, itDict, jaDict, krDict, nbDict, nlDict, plDict, ptDict, ruDict, svDict, trDict, uaDict, zhDict };
+export { deDict, defaultTexts, enDict, esDict, frDict, heDict, idDict, itDict, jaDict, krDict, nbDict, nlDict, plDict, ptDict, ruDict, svDict, thDict, trDict, uaDict, zhDict };

package/dist/esm/i18n/translations.mjs

@@ -1,5 +1,5 @@
 import { I18n } from 'aws-amplify/utils';
-import { defaultTexts, deDict, enDict, esDict, frDict, idDict, itDict, jaDict, krDict, nbDict, nlDict, plDict, ptDict, zhDict, svDict, trDict, ruDict, heDict, uaDict } from './dictionaries/index.mjs';
+import { defaultTexts, deDict, enDict, esDict, frDict, idDict, itDict, jaDict, krDict, nbDict, nlDict, plDict, ptDict, zhDict, svDict, trDict, ruDict, heDict, uaDict, thDict } from './dictionaries/index.mjs';
 
 /*
  * Copyright 2017-2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
@@ -62,6 +62,7 @@ const translations = {
     ru: ruDict,
     he: heDict,
     ua: uaDict,
+    th: thDict,
 };
 
 export { DefaultTexts, hasTranslation, translate, translations };

package/dist/esm/index.mjs

@@ -14,15 +14,18 @@ export { getLogger } from './helpers/utils.mjs';
 export { countryDialCodes } from './i18n/country-dial-codes.mjs';
 export { DefaultTexts, hasTranslation, translate, translations } from './i18n/translations.mjs';
 export { createAuthenticatorMachine } from './machines/authenticator/index.mjs';
-export { createTheme } from './theme/createTheme.mjs';
+export { createTheme } from './theme/createTheme/createTheme.mjs';
+export { defineComponentTheme } from './theme/createTheme/defineComponentTheme.mjs';
+export { cssNameTransform, isDesignToken, setupTokens } from './theme/createTheme/utils.mjs';
+export { createComponentClasses } from './theme/createTheme/createComponentClasses.mjs';
 export { defaultTheme } from './theme/defaultTheme.mjs';
 export { defaultDarkModeOverride, reactNativeDarkTokens } from './theme/defaultDarkModeOverride.mjs';
 export { reactNativeTokens } from './theme/tokens/index.mjs';
-export { cssNameTransform, isDesignToken, setupTokens } from './theme/utils.mjs';
 export { FederatedIdentityProviders, UnverifiedContactMethodType } from './types/authenticator/user.mjs';
 export { isUnverifiedContactMethodType } from './types/authenticator/utils.mjs';
 export { LoginMechanismArray, authFieldsWithDefaults, isAuthFieldsWithDefaults, signUpFieldsWithDefault, signUpFieldsWithoutDefault } from './types/authenticator/attributes.mjs';
 export { ComponentClassName } from './types/primitives/componentClassName.mjs';
 export { setUserAgent } from './utils/setUserAgent/setUserAgent.mjs';
-export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isTypedFunction, isUndefined, noop, sanitizeNamespaceImport, templateJoin } from './utils/utils.mjs';
+export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isTypedFunction, isUndefined, noop, sanitizeNamespaceImport, splitObject, templateJoin } from './utils/utils.mjs';
 export { classNames } from './utils/classNames.mjs';
+export { humanFileSize } from './utils/humanFileSize.mjs';

package/dist/esm/theme/createTheme/createAnimationCSS.mjs

@@ -0,0 +1,23 @@
+import '@aws-amplify/core/internals/utils';
+import '../../utils/setUserAgent/constants.mjs';
+import { isFunction } from '../../utils/utils.mjs';
+import { propsToString } from './utils.mjs';
+
+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;
+}
+
+export { createAnimationCSS };

package/dist/esm/theme/createTheme/createColorPalette.mjs

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ * createColorPalette({keys: ['10','20',...], value: 'red'})
+ * returns {
+ *   10: { value: '{colors.red.10.value}' },
+ *   20: { value: '{colors.red.20.value}' },
+ *   ...
+ * }
+ */
+function createColorPalette({ keys, value }) {
+    return keys.reduce((acc, key) => {
+        return {
+            ...acc,
+            [key]: { value: `{colors.${value}.${key}.value}` },
+        };
+    }, {});
+}
+
+export { createColorPalette };

package/dist/esm/theme/createTheme/createComponentCSS.mjs

@@ -0,0 +1,86 @@
+import { propsToString } from './utils.mjs';
+import '@aws-amplify/core/internals/utils';
+import '../../utils/setUserAgent/constants.mjs';
+import { isFunction, splitObject } from '../../utils/utils.mjs';
+
+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.
+ *
+ */
+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;
+}
+
+export { createComponentCSS };

package/dist/esm/theme/createTheme/createComponentClasses.mjs

@@ -0,0 +1,60 @@
+import '@aws-amplify/core/internals/utils';
+import '../../utils/setUserAgent/constants.mjs';
+import { isString, isObject } from '../../utils/utils.mjs';
+import { classNames } from '../../utils/classNames.mjs';
+
+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 [];
+}
+
+export { createComponentClasses };

package/dist/esm/theme/{createTheme.mjs → createTheme/createTheme.mjs}

@@ -1,45 +1,12 @@
-import deepExtend from 'style-dictionary/lib/utils/deepExtend.js';
-import flattenProperties from 'style-dictionary/lib/utils/flattenProperties.js';
-import { defaultTheme } from './defaultTheme.mjs';
-import { setupTokens, cssNameTransform, cssValue } from './utils.mjs';
+import { defaultTheme } from '../defaultTheme.mjs';
+import { deepExtend, setupTokens, setupToken, flattenProperties } from './utils.mjs';
+import { createComponentCSS } from './createComponentCSS.mjs';
 import '@aws-amplify/core/internals/utils';
-import '../utils/setUserAgent/constants.mjs';
-import { isString } from '../utils/utils.mjs';
+import '../../utils/setUserAgent/constants.mjs';
+import { isString } from '../../utils/utils.mjs';
+import { createColorPalette } from './createColorPalette.mjs';
+import { createAnimationCSS } from './createAnimationCSS.mjs';
 
-// Internal Style Dictionary methods
-/**
- * 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})` };
-};
-/**
- * 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.
- *
- * createColorPalette({keys: ['10','20',...], value: 'red'})
- * returns {
- *   10: { value: '{colors.red.10.value}' },
- *   20: { value: '{colors.red.20.value}' },
- *   ...
- * }
- */
-function createColorPalette({ keys, value }) {
-    return keys.reduce((acc, key) => {
-        return {
-            ...acc,
-            [key]: { value: `{colors.${value}.${key}.value}` },
-        };
-    }, {});
-}
 /**
  * This will be used like `const myTheme = createTheme({})`
  * `myTheme` can then be passed to a Provider or the generated CSS
@@ -52,7 +19,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([{}, DefaultTheme, theme]);
+    const mergedTheme = deepExtend([
+        {},
+        DefaultTheme,
+        {
+            ...theme,
+            components: {},
+        },
+    ]);
     const { primaryColor, secondaryColor } = mergedTheme;
     // apply primaryColor and secondaryColor if present
     if (isString(primaryColor)) {
@@ -83,7 +57,16 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
             .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
@@ -91,11 +74,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(tokens)
+            const customProperties = flattenProperties(overrideTokens)
                 .map((token) => `${token.name}: ${token.value};`)
                 .join('\n');
             // Overrides can have a selector, media query, breakpoint, or color mode
@@ -132,7 +115,7 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
             }
             return {
                 ...override,
-                tokens,
+                tokens: overrideTokens,
             };
         });
     }
@@ -141,6 +124,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

package/dist/esm/theme/createTheme/defineComponentTheme.mjs

@@ -0,0 +1,55 @@
+import { createComponentClasses } from './createComponentClasses.mjs';
+
+/**
+ * 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,
+    };
+}
+
+export { defineComponentTheme };