@aws-amplify/ui 6.0.17 → 6.2.0

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
@@ -404,6 +418,34 @@ const classNames = (...args) => {
     return classes.join(' ');
 };
 
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+function humanFileSize(bytes, si = false, dp = 1) {
+    const thresh = si ? 1000 : 1024;
+    if (Math.abs(bytes) < thresh) {
+        return `${bytes} B`;
+    }
+    const units = si
+        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    let unit = -1;
+    const range = 10 ** dp;
+    do {
+        bytes /= thresh;
+        ++unit;
+    } while (Math.round(Math.abs(bytes) * range) / range >= thresh &&
+        unit < units.length - 1);
+    return bytes.toFixed(dp) + ' ' + units[unit];
+}
+
 /**
  * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
  * xstate events.
@@ -675,7 +717,7 @@ const deDict$1 = {
     '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',
@@ -687,7 +729,7 @@ const deDict$1 = {
     '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',
@@ -722,14 +764,14 @@ const deDict$1 = {
     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',
@@ -1128,7 +1170,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 +1200,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 +1249,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 +1269,7 @@ const krDict$1 = {
     or: '또는',
     Password: '비밀번호',
     'Phone Number': '전화번호',
+    'Please confirm your Password': '비밀번호를 확인해 주세요.',
     'Resend Code': '인증번호 재전송',
     'Reset your password': '비밀번호 재설정',
     'Reset your Password': '비밀번호 재설정',
@@ -2123,6 +2175,106 @@ const uaDict$1 = {
     'Your passwords must match': 'Паролі мають збігатися',
 };
 
+const thDict$1 = {
+    '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': 'ต้องใส่ชื่อผู้ใช้งาน',
+};
+
 const defaultTexts$1 = {
     ADD_PROFILE: 'Add your Profile',
     ADD_WEBSITE: 'Add your Website',
@@ -2228,6 +2380,7 @@ 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
@@ -2294,6 +2447,7 @@ const translations = {
     ru: ruDict,
     he: heDict,
     ua: uaDict,
+    th: thDict,
 };
 
 /**
@@ -8073,6 +8227,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 +8256,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 +8277,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 +8290,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 +8343,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 +8555,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 +8585,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 +8619,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 +8640,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 +8681,7 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
             }
             return {
                 ...override,
-                tokens,
+                tokens: overrideTokens,
             };
         });
     }
@@ -8281,6 +8690,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 +8708,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 +8961,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 +8969,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;
@@ -8472,6 +8995,7 @@ exports.groupLog = groupLog;
 exports.has = has;
 exports.hasSpecialChars = hasSpecialChars;
 exports.hasTranslation = hasTranslation;
+exports.humanFileSize = humanFileSize;
 exports.isAuthFieldWithDefaults = isAuthFieldWithDefaults;
 exports.isAuthFieldsWithDefaults = isAuthFieldsWithDefaults;
 exports.isDesignToken = isDesignToken;
@@ -8500,6 +9024,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;