@aws-amplify/ui 6.6.1 → 6.6.3

package/dist/esm/helpers/authenticator/formFields/defaults.mjs

@@ -25,7 +25,7 @@ const getAliasDefaultFormField = (state) => {
     };
 };
 /** Reusable confirmation code form fields. */
-const getConfirmationCodeFormFields = (state) => ({
+const getConfirmationCodeFormFields = (_) => ({
     confirmation_code: {
         ...getDefaultFormField('confirmation_code'),
         label: 'Code *',
@@ -61,12 +61,13 @@ const getSignUpFormFields = (state) => {
         }
         else {
             // There's a `custom:*` attribute or one we don't already have an implementation for
+            // eslint-disable-next-line no-console
             console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize SignUp FormFields to add your own.`);
         }
     }
     return formField;
 };
-const getConfirmSignUpFormFields = (state) => ({
+const getConfirmSignUpFormFields = (_) => ({
     confirmation_code: {
         ...getDefaultFormField('confirmation_code'),
         placeholder: 'Enter your code',
@@ -111,6 +112,7 @@ const getForceNewPasswordFormFields = (state) => {
         }
         else {
             // There's a `custom:*` attribute or one we don't already have an implementation for
+            // eslint-disable-next-line no-console
             console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize ForceNewPassword FormFields to add your own.`);
         }
     }

package/dist/esm/index.mjs

@@ -18,8 +18,9 @@ export { createTheme } from './theme/createTheme/createTheme.mjs';
 export { defineComponentTheme } from './theme/createTheme/defineComponentTheme.mjs';
 export { createComponentCSS } from './theme/createTheme/createComponentCSS.mjs';
 export { createGlobalCSS } from './theme/createTheme/createGlobalCSS.mjs';
-export { cssNameTransform, isDesignToken, setupTokens } from './theme/createTheme/utils.mjs';
+export { cssNameTransform, deepExtend, isDesignToken, setupTokens } from './theme/createTheme/utils.mjs';
 export { createComponentClasses } from './theme/createTheme/createComponentClasses.mjs';
+export { resolveObject } from './theme/createTheme/resolveObject.mjs';
 export { defaultTheme } from './theme/defaultTheme.mjs';
 export { defaultDarkModeOverride, reactNativeDarkTokens } from './theme/defaultDarkModeOverride.mjs';
 export { reactNativeTokens } from './theme/tokens/index.mjs';
@@ -28,6 +29,7 @@ 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, splitObject, templateJoin } from './utils/utils.mjs';
+export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, cloneDeep, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isUndefined, noop, sanitizeNamespaceImport, splitObject, templateJoin } from './utils/utils.mjs';
 export { classNames } from './utils/classNames.mjs';
 export { humanFileSize } from './utils/humanFileSize.mjs';
+export { getName, getPathFromName, resolveReference, usesReference } from './utils/references.mjs';

package/dist/esm/machines/authenticator/defaultServices.mjs

@@ -55,7 +55,7 @@ const defaultServices = {
     handleForgotPasswordSubmit: confirmResetPassword,
     handleForgotPassword: resetPassword,
     // Validation hooks for overriding
-    async validateCustomSignUp(formData, touchData) { },
+    async validateCustomSignUp(_, __) { },
     async validateFormPassword(formData, touchData, passwordSettings) {
         const { password } = formData;
         const { password: touched_password } = touchData;
@@ -105,7 +105,7 @@ const defaultServices = {
             };
         }
     },
-    async validatePreferredUsername(formData, touchData) { },
+    async validatePreferredUsername(_, __) { },
 };
 
 export { defaultServices };

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

@@ -0,0 +1,8 @@
+const OPTIONS = {
+    openingCharacter: '{',
+    closingCharacter: '}',
+    separator: '.',
+};
+const REFERENCE_REGEX = /\{([^}]+)\}/g;
+
+export { OPTIONS, REFERENCE_REGEX };

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

@@ -0,0 +1,133 @@
+import '@aws-amplify/core/internals/utils';
+import '../../utils/setUserAgent/constants.mjs';
+import { cloneDeep, has } from '../../utils/utils.mjs';
+import { getName, getPathFromName, resolveReference, usesReference } from '../../utils/references.mjs';
+import { REFERENCE_REGEX } from './constants.mjs';
+
+const DEFAULTS = {
+    ignoreKeys: ['original'],
+};
+function resolveObject(object) {
+    const foundCirc = {};
+    const clone = cloneDeep(object); // This object will be edited
+    const currentContext = []; // To maintain the context to be able to test for circular definitions
+    if (typeof object === 'object') {
+        return traverseObject({
+            slice: clone,
+            fullObj: clone,
+            currentContext,
+            foundCirc,
+        });
+    }
+    else {
+        throw new Error('Please pass an object in');
+    }
+}
+/**
+ * Recursively traverses an object (slice) to resolve and uses
+ * compileValue to replace any string references found within it
+ */
+function traverseObject({ slice, fullObj, currentContext, foundCirc, }) {
+    for (let key in slice) {
+        if (!has(slice, key)) {
+            continue;
+        }
+        const prop = slice[key];
+        // We want to check for ignoredKeys, this is to
+        // skip over attributes that should not be
+        // mutated, like a copy of the original property.
+        if (DEFAULTS.ignoreKeys && DEFAULTS.ignoreKeys.indexOf(key) !== -1) {
+            continue;
+        }
+        currentContext.push(key);
+        if (typeof prop === 'object') {
+            traverseObject({ currentContext, slice: prop, fullObj, foundCirc });
+        }
+        else {
+            if (typeof prop === 'string' && prop.indexOf('{') > -1) {
+                slice[key] = compileValue({
+                    value: prop,
+                    stack: [getName(currentContext)],
+                    foundCirc,
+                    fullObj,
+                });
+            }
+        }
+        currentContext.pop();
+    }
+    return fullObj;
+}
+/**
+ * Resolves references in a value, performing recursive lookups when references are nested.
+ * value: The string that may contain references (e.g., {color.border.light}) that need to be replaced
+ * stack: keeps track of the current chain of references to detect circular references
+ * foundCirc: stores any detected circular references
+ * fullObj: The full object where references are looked up, essentially the source of all values
+ */
+function compileValue({ value, stack, foundCirc, fullObj }) {
+    let toRet = value, ref;
+    const regex = new RegExp(REFERENCE_REGEX);
+    // Replace the reference inline, but don't replace the whole string because
+    // references can be part of the value such as "1px solid {color.border.light}"
+    value.replace(regex, function (match, variable) {
+        variable = variable.trim();
+        // Find what the value is referencing
+        const pathName = getPathFromName(variable);
+        const refHasValue = pathName[pathName.length - 1] === 'value';
+        stack.push(variable);
+        ref = resolveReference(pathName, fullObj);
+        // If the reference doesn't end in 'value'
+        // and
+        // the reference points to someplace that has a `value` attribute
+        // we should take the '.value' of the reference
+        // per the W3C draft spec where references do not have .value
+        // https://design-tokens.github.io/community-group/format/#aliases-references
+        if (!refHasValue && ref && has(ref, 'value')) {
+            ref = ref.value;
+        }
+        if (typeof ref !== 'undefined') {
+            if (typeof ref === 'string' || typeof ref === 'number') {
+                toRet = value.replace(match, ref);
+                // Recursive, therefore we can compute multi-layer variables like a = b, b = c, eventually a = c
+                if (usesReference(toRet)) {
+                    var reference = toRet.slice(1, -1);
+                    // Compare to found circular references
+                    if (has(foundCirc, reference)) ;
+                    else if (stack.indexOf(reference) !== -1) {
+                        // If the current stack already contains the current reference, we found a new circular reference
+                        // chop down only the circular part, save it to our circular reference info, and spit out an error
+                        // Get the position of the existing reference in the stack
+                        var stackIndexReference = stack.indexOf(reference);
+                        // Get the portion of the stack that starts at the circular reference and brings you through until the end
+                        var circStack = stack.slice(stackIndexReference);
+                        // For all the references in this list, add them to the list of references that end up in a circular reference
+                        circStack.forEach(function (key) {
+                            foundCirc[key] = true;
+                        });
+                        // Add our found circular reference to the end of the cycle
+                        circStack.push(reference);
+                    }
+                    else {
+                        toRet = compileValue({ value: toRet, stack, foundCirc, fullObj });
+                    }
+                }
+                // if evaluated value is a number and equal to the reference, we want to keep the type
+                if (typeof ref === 'number' && ref.toString() === toRet) {
+                    toRet = ref;
+                }
+            }
+            else {
+                // if evaluated value is not a string or number, we want to keep the type
+                toRet = ref;
+            }
+        }
+        else {
+            toRet = ref;
+        }
+        stack.pop(variable);
+        return toRet;
+    });
+    return toRet;
+}
+
+export { compileValue, resolveObject, traverseObject };

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

@@ -2,6 +2,7 @@ import kebabCase from 'lodash/kebabCase.js';
 import '@aws-amplify/core/internals/utils';
 import '../../utils/setUserAgent/constants.mjs';
 import { isObject, has, isString } from '../../utils/utils.mjs';
+import { usesReference } from '../../utils/references.mjs';
 
 const CSS_VARIABLE_PREFIX = 'amplify';
 /**
@@ -203,34 +204,5 @@ function deepExtend(objects, collision, path) {
     }
     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;
-}
 
-export { CSS_VARIABLE_PREFIX, cssNameTransform, cssValue, deepExtend, flattenProperties, isDesignToken, isShadowTokenObject, propsToString, referenceValue, setupToken, setupTokens, usesReference };
+export { CSS_VARIABLE_PREFIX, cssNameTransform, cssValue, deepExtend, flattenProperties, isDesignToken, isShadowTokenObject, propsToString, referenceValue, setupToken, setupTokens };

package/dist/esm/utils/references.mjs

@@ -0,0 +1,70 @@
+import { has } from './utils.mjs';
+import { OPTIONS, REFERENCE_REGEX } from '../theme/createTheme/constants.mjs';
+
+/**
+ * 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(REFERENCE_REGEX);
+    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 resolveReference(path, obj) {
+    let ref = obj;
+    if (!Array.isArray(path)) {
+        return;
+    }
+    for (let i = 0; i < path.length; i++) {
+        // Check for undefined as 0 is a valid, truthy value
+        if (typeof ref[path[i]] !== 'undefined') {
+            ref = ref[path[i]];
+        }
+        else {
+            // set the reference as undefined if we don't find anything
+            ref = undefined;
+            break;
+        }
+    }
+    return ref;
+}
+/**
+ * Returns the path from a path name be splitting the name by a given separator.
+ */
+function getPathFromName(pathName) {
+    if (typeof pathName !== 'string') {
+        throw new Error('Getting path from name failed. Name must be a string');
+    }
+    return pathName.split(OPTIONS.separator);
+}
+/**
+ * Returns the paths name be joining its parts with a given separator.
+ */
+function getName(path) {
+    if (!path || !(path instanceof Array)) {
+        throw new Error('Getting name for path failed. Path must be an array');
+    }
+    return path.join(OPTIONS.separator);
+}
+
+export { getName, getPathFromName, resolveReference, usesReference };

package/dist/esm/utils/utils.mjs

@@ -173,15 +173,6 @@ const classNameModifier = (base, modifier) => {
 const classNameModifierByFlag = (base, modifier, flag) => {
     return flag ? `${base}--${modifier}` : '';
 };
-/**
- * `isFunction` but types the param with its function signature
- *
- * @param {unknown} value param to check
- * @returns {boolean} whether `value` is a function
- */
-function isTypedFunction(value) {
-    return isFunction(value);
-}
 /**
  * Similar to `Array.join`, with an optional callback/template param
  * for formatting returned string values
@@ -243,5 +234,22 @@ function splitObject(obj, predicate) {
     });
     return [left, right];
 }
+const cloneDeep = (obj) => {
+    if (obj === null || obj === undefined || typeof obj !== 'object') {
+        return obj;
+    }
+    if (obj instanceof Array) {
+        return obj.reduce((arr, item, i) => {
+            arr[i] = cloneDeep(item);
+            return arr;
+        }, []);
+    }
+    if (obj instanceof Object) {
+        return Object.keys(obj || {}).reduce((cpObj, key) => {
+            cpObj[key] = cloneDeep(obj[key]);
+            return cpObj;
+        }, {});
+    }
+};
 
-export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isTypedFunction, isUndefined, noop, sanitizeNamespaceImport, splitObject, templateJoin };
+export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, cloneDeep, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isUndefined, noop, sanitizeNamespaceImport, splitObject, templateJoin };

package/dist/index.js

@@ -11,11 +11,11 @@ var pickBy = require('lodash/pickBy.js');
 var merge = require('lodash/merge.js');
 var kebabCase = require('lodash/kebabCase.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var pickBy__default = /*#__PURE__*/_interopDefaultLegacy(pickBy);
-var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
-var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
+var pickBy__default = /*#__PURE__*/_interopDefault(pickBy);
+var merge__default = /*#__PURE__*/_interopDefault(merge);
+var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
 
 /**
  * This file contains helpers that lets you easily access current actor's state
@@ -255,15 +255,6 @@ const classNameModifier = (base, modifier) => {
 const classNameModifierByFlag = (base, modifier, flag) => {
     return flag ? `${base}--${modifier}` : '';
 };
-/**
- * `isFunction` but types the param with its function signature
- *
- * @param {unknown} value param to check
- * @returns {boolean} whether `value` is a function
- */
-function isTypedFunction(value) {
-    return isFunction(value);
-}
 /**
  * Similar to `Array.join`, with an optional callback/template param
  * for formatting returned string values
@@ -325,6 +316,23 @@ function splitObject(obj, predicate) {
     });
     return [left, right];
 }
+const cloneDeep = (obj) => {
+    if (obj === null || obj === undefined || typeof obj !== 'object') {
+        return obj;
+    }
+    if (obj instanceof Array) {
+        return obj.reduce((arr, item, i) => {
+            arr[i] = cloneDeep(item);
+            return arr;
+        }, []);
+    }
+    if (obj instanceof Object) {
+        return Object.keys(obj || {}).reduce((cpObj, key) => {
+            cpObj[key] = cloneDeep(obj[key]);
+            return cpObj;
+        }, {});
+    }
+};
 
 /**
  * @example
@@ -457,6 +465,79 @@ function humanFileSize(bytes, si = false, dp = 1) {
     return bytes.toFixed(dp) + ' ' + units[unit];
 }
 
+const OPTIONS = {
+    openingCharacter: '{',
+    closingCharacter: '}',
+    separator: '.',
+};
+const REFERENCE_REGEX = /\{([^}]+)\}/g;
+
+/**
+ * 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(REFERENCE_REGEX);
+    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 resolveReference(path, obj) {
+    let ref = obj;
+    if (!Array.isArray(path)) {
+        return;
+    }
+    for (let i = 0; i < path.length; i++) {
+        // Check for undefined as 0 is a valid, truthy value
+        if (typeof ref[path[i]] !== 'undefined') {
+            ref = ref[path[i]];
+        }
+        else {
+            // set the reference as undefined if we don't find anything
+            ref = undefined;
+            break;
+        }
+    }
+    return ref;
+}
+/**
+ * Returns the path from a path name be splitting the name by a given separator.
+ */
+function getPathFromName(pathName) {
+    if (typeof pathName !== 'string') {
+        throw new Error('Getting path from name failed. Name must be a string');
+    }
+    return pathName.split(OPTIONS.separator);
+}
+/**
+ * Returns the paths name be joining its parts with a given separator.
+ */
+function getName(path) {
+    if (!path || !(path instanceof Array)) {
+        throw new Error('Getting name for path failed. Path must be an array');
+    }
+    return path.join(OPTIONS.separator);
+}
+
 /**
  * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
  * xstate events.
@@ -3225,7 +3306,7 @@ const getAliasDefaultFormField = (state) => {
     };
 };
 /** Reusable confirmation code form fields. */
-const getConfirmationCodeFormFields = (state) => ({
+const getConfirmationCodeFormFields = (_) => ({
     confirmation_code: {
         ...getDefaultFormField('confirmation_code'),
         label: 'Code *',
@@ -3261,12 +3342,13 @@ const getSignUpFormFields = (state) => {
         }
         else {
             // There's a `custom:*` attribute or one we don't already have an implementation for
+            // eslint-disable-next-line no-console
             console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize SignUp FormFields to add your own.`);
         }
     }
     return formField;
 };
-const getConfirmSignUpFormFields = (state) => ({
+const getConfirmSignUpFormFields = (_) => ({
     confirmation_code: {
         ...getDefaultFormField('confirmation_code'),
         placeholder: 'Enter your code',
@@ -3311,6 +3393,7 @@ const getForceNewPasswordFormFields = (state) => {
         }
         else {
             // There's a `custom:*` attribute or one we don't already have an implementation for
+            // eslint-disable-next-line no-console
             console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize ForceNewPassword FormFields to add your own.`);
         }
     }
@@ -4005,7 +4088,7 @@ const defaultServices = {
     handleForgotPasswordSubmit: auth.confirmResetPassword,
     handleForgotPassword: auth.resetPassword,
     // Validation hooks for overriding
-    async validateCustomSignUp(formData, touchData) { },
+    async validateCustomSignUp(_, __) { },
     async validateFormPassword(formData, touchData, passwordSettings) {
         const { password } = formData;
         const { password: touched_password } = touchData;
@@ -4055,7 +4138,7 @@ const defaultServices = {
             };
         }
     },
-    async validatePreferredUsername(formData, touchData) { },
+    async validatePreferredUsername(_, __) { },
 };
 
 function forgotPasswordActor({ services, }) {
@@ -8656,35 +8739,6 @@ function deepExtend(objects, collision, path) {
     }
     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)
@@ -9066,6 +9120,132 @@ function createGlobalCSS(css) {
     return cssText;
 }
 
+const DEFAULTS = {
+    ignoreKeys: ['original'],
+};
+function resolveObject(object) {
+    const foundCirc = {};
+    const clone = cloneDeep(object); // This object will be edited
+    const currentContext = []; // To maintain the context to be able to test for circular definitions
+    if (typeof object === 'object') {
+        return traverseObject({
+            slice: clone,
+            fullObj: clone,
+            currentContext,
+            foundCirc,
+        });
+    }
+    else {
+        throw new Error('Please pass an object in');
+    }
+}
+/**
+ * Recursively traverses an object (slice) to resolve and uses
+ * compileValue to replace any string references found within it
+ */
+function traverseObject({ slice, fullObj, currentContext, foundCirc, }) {
+    for (let key in slice) {
+        if (!has(slice, key)) {
+            continue;
+        }
+        const prop = slice[key];
+        // We want to check for ignoredKeys, this is to
+        // skip over attributes that should not be
+        // mutated, like a copy of the original property.
+        if (DEFAULTS.ignoreKeys && DEFAULTS.ignoreKeys.indexOf(key) !== -1) {
+            continue;
+        }
+        currentContext.push(key);
+        if (typeof prop === 'object') {
+            traverseObject({ currentContext, slice: prop, fullObj, foundCirc });
+        }
+        else {
+            if (typeof prop === 'string' && prop.indexOf('{') > -1) {
+                slice[key] = compileValue({
+                    value: prop,
+                    stack: [getName(currentContext)],
+                    foundCirc,
+                    fullObj,
+                });
+            }
+        }
+        currentContext.pop();
+    }
+    return fullObj;
+}
+/**
+ * Resolves references in a value, performing recursive lookups when references are nested.
+ * value: The string that may contain references (e.g., {color.border.light}) that need to be replaced
+ * stack: keeps track of the current chain of references to detect circular references
+ * foundCirc: stores any detected circular references
+ * fullObj: The full object where references are looked up, essentially the source of all values
+ */
+function compileValue({ value, stack, foundCirc, fullObj }) {
+    let toRet = value, ref;
+    const regex = new RegExp(REFERENCE_REGEX);
+    // Replace the reference inline, but don't replace the whole string because
+    // references can be part of the value such as "1px solid {color.border.light}"
+    value.replace(regex, function (match, variable) {
+        variable = variable.trim();
+        // Find what the value is referencing
+        const pathName = getPathFromName(variable);
+        const refHasValue = pathName[pathName.length - 1] === 'value';
+        stack.push(variable);
+        ref = resolveReference(pathName, fullObj);
+        // If the reference doesn't end in 'value'
+        // and
+        // the reference points to someplace that has a `value` attribute
+        // we should take the '.value' of the reference
+        // per the W3C draft spec where references do not have .value
+        // https://design-tokens.github.io/community-group/format/#aliases-references
+        if (!refHasValue && ref && has(ref, 'value')) {
+            ref = ref.value;
+        }
+        if (typeof ref !== 'undefined') {
+            if (typeof ref === 'string' || typeof ref === 'number') {
+                toRet = value.replace(match, ref);
+                // Recursive, therefore we can compute multi-layer variables like a = b, b = c, eventually a = c
+                if (usesReference(toRet)) {
+                    var reference = toRet.slice(1, -1);
+                    // Compare to found circular references
+                    if (has(foundCirc, reference)) ;
+                    else if (stack.indexOf(reference) !== -1) {
+                        // If the current stack already contains the current reference, we found a new circular reference
+                        // chop down only the circular part, save it to our circular reference info, and spit out an error
+                        // Get the position of the existing reference in the stack
+                        var stackIndexReference = stack.indexOf(reference);
+                        // Get the portion of the stack that starts at the circular reference and brings you through until the end
+                        var circStack = stack.slice(stackIndexReference);
+                        // For all the references in this list, add them to the list of references that end up in a circular reference
+                        circStack.forEach(function (key) {
+                            foundCirc[key] = true;
+                        });
+                        // Add our found circular reference to the end of the cycle
+                        circStack.push(reference);
+                    }
+                    else {
+                        toRet = compileValue({ value: toRet, stack, foundCirc, fullObj });
+                    }
+                }
+                // if evaluated value is a number and equal to the reference, we want to keep the type
+                if (typeof ref === 'number' && ref.toString() === toRet) {
+                    toRet = ref;
+                }
+            }
+            else {
+                // if evaluated value is not a string or number, we want to keep the type
+                toRet = ref;
+            }
+        }
+        else {
+            toRet = ref;
+        }
+        stack.pop(variable);
+        return toRet;
+    });
+    return toRet;
+}
+
 const darkModeTokens = {
     colors: {
         red: {
@@ -9211,6 +9391,7 @@ exports.changePassword = changePassword;
 exports.classNameModifier = classNameModifier;
 exports.classNameModifierByFlag = classNameModifierByFlag;
 exports.classNames = classNames;
+exports.cloneDeep = cloneDeep;
 exports.countryDialCodes = countryDialCodes;
 exports.createAuthenticatorMachine = createAuthenticatorMachine;
 exports.createComponentCSS = createComponentCSS;
@@ -9218,6 +9399,7 @@ exports.createComponentClasses = createComponentClasses;
 exports.createGlobalCSS = createGlobalCSS;
 exports.createTheme = createTheme;
 exports.cssNameTransform = cssNameTransform;
+exports.deepExtend = deepExtend;
 exports.defaultAuthHubHandler = defaultAuthHubHandler;
 exports.defaultDarkModeOverride = defaultDarkModeOverride;
 exports.defaultFormFieldOptions = defaultFormFieldOptions;
@@ -9237,8 +9419,10 @@ exports.getErrors = getErrors;
 exports.getFormDataFromEvent = getFormDataFromEvent;
 exports.getFormFields = getFormFields;
 exports.getLogger = getLogger;
+exports.getName = getName;
 exports.getNextServiceContextFacade = getNextServiceContextFacade;
 exports.getNextServiceFacade = getNextServiceFacade;
+exports.getPathFromName = getPathFromName;
 exports.getPrimaryAlias = getPrimaryAlias;
 exports.getSendEventAliases = getSendEventAliases;
 exports.getServiceContextFacade = getServiceContextFacade;
@@ -9261,7 +9445,6 @@ exports.isNil = isNil;
 exports.isObject = isObject;
 exports.isSet = isSet;
 exports.isString = isString;
-exports.isTypedFunction = isTypedFunction;
 exports.isUndefined = isUndefined;
 exports.isUnverifiedContactMethodType = isUnverifiedContactMethodType;
 exports.isValidEmail = isValidEmail;
@@ -9270,6 +9453,8 @@ exports.noop = noop;
 exports.reactNativeDarkTokens = reactNativeDarkTokens;
 exports.reactNativeTokens = reactNativeTokens;
 exports.removeOrderKeys = removeOrderKeys;
+exports.resolveObject = resolveObject;
+exports.resolveReference = resolveReference;
 exports.runFieldValidators = runFieldValidators;
 exports.sanitizeNamespaceImport = sanitizeNamespaceImport;
 exports.setFormOrder = setFormOrder;
@@ -9283,3 +9468,4 @@ exports.templateJoin = templateJoin;
 exports.translate = translate;
 exports.translations = translations;
 exports.trimValues = trimValues;
+exports.usesReference = usesReference;

package/dist/types/machines/authenticator/defaultServices.d.ts

@@ -204,8 +204,8 @@ export declare const defaultServices: {
     handleConfirmSignUp: typeof confirmSignUp;
     handleForgotPasswordSubmit: typeof confirmResetPassword;
     handleForgotPassword: typeof resetPassword;
-    validateCustomSignUp(formData: AuthFormData, touchData: AuthTouchData): Promise<ValidatorResult>;
+    validateCustomSignUp(_: AuthFormData, __: AuthTouchData): Promise<ValidatorResult>;
     validateFormPassword(formData: AuthFormData, touchData: AuthTouchData, passwordSettings: PasswordSettings): Promise<ValidatorResult>;
     validateConfirmPassword(formData: AuthFormData, touchData: AuthTouchData): Promise<ValidatorResult>;
-    validatePreferredUsername(formData: AuthFormData, touchData: AuthTouchData): Promise<ValidatorResult>;
+    validatePreferredUsername(_: AuthFormData, __: AuthTouchData): Promise<ValidatorResult>;
 };

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

@@ -1,2 +1,3 @@
 import { ComponentStyles } from './utils';
-export type ButtonGroupTheme<Required extends boolean = false> = ComponentStyles;
+export interface ButtonGroupTheme extends ComponentStyles {
+}

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

@@ -1,2 +1,3 @@
 import { ComponentStyles } from './utils';
-export type CheckboxFieldTheme<Required extends boolean = false> = ComponentStyles;
+export interface CheckboxFieldTheme extends ComponentStyles {
+}

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

@@ -1,2 +1,3 @@
 import { ComponentStyles } from './utils';
-export type SelectFieldTheme<Required extends boolean = false> = ComponentStyles;
+export interface SelectFieldTheme extends ComponentStyles {
+}

package/dist/types/theme/createTheme/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULTS: {
+    ignoreKeys: string[];
+};
+export declare const OPTIONS: {
+    openingCharacter: string;
+    closingCharacter: string;
+    separator: string;
+};
+export declare const REFERENCE_REGEX: RegExp;

package/dist/types/theme/createTheme/index.d.ts

@@ -2,5 +2,6 @@ export { createTheme } from './createTheme';
 export { defineComponentTheme } from './defineComponentTheme';
 export { createComponentCSS } from './createComponentCSS';
 export { createGlobalCSS } from './createGlobalCSS';
-export { cssNameTransform, setupTokens, SetupToken, isDesignToken, } from './utils';
+export { cssNameTransform, deepExtend, isDesignToken, setupTokens, SetupToken, } from './utils';
 export { createComponentClasses, ClassNameArgs, } from './createComponentClasses';
+export { resolveObject } from './resolveObject';

package/dist/types/theme/createTheme/resolveObject.d.ts

@@ -0,0 +1,24 @@
+export declare function resolveObject<T>(object: Record<string, any>): T;
+/**
+ * Recursively traverses an object (slice) to resolve and uses
+ * compileValue to replace any string references found within it
+ */
+export declare function traverseObject<T>({ slice, fullObj, currentContext, foundCirc, }: {
+    slice: any;
+    fullObj: any;
+    currentContext: any;
+    foundCirc: any;
+}): T;
+/**
+ * Resolves references in a value, performing recursive lookups when references are nested.
+ * value: The string that may contain references (e.g., {color.border.light}) that need to be replaced
+ * stack: keeps track of the current chain of references to detect circular references
+ * foundCirc: stores any detected circular references
+ * fullObj: The full object where references are looked up, essentially the source of all values
+ */
+export declare function compileValue({ value, stack, foundCirc, fullObj }: {
+    value: any;
+    stack: any;
+    foundCirc: any;
+    fullObj: any;
+}): any;

package/dist/types/theme/createTheme/utils.d.ts

@@ -63,7 +63,7 @@ type SetupTokensProps = {
  * and perform the setupToken function on each token.
  * Similar to what Style Dictionary does.
  */
-export declare function setupTokens({ tokens, path, setupToken, }: SetupTokensProps): any;
+export declare function setupTokens({ tokens, path, setupToken, }: SetupTokensProps): Record<string, any>;
 /**
  * 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
@@ -83,10 +83,4 @@ export declare function flattenProperties(properties: object, to_ret?: object[])
  * @returns {Object}
  */
 export declare function deepExtend<T>(objects?: (object | undefined)[], collision?: Function, path?: string[]): T;
-/**
- * Checks if the value uses a value reference.
- * @param {string} value
- * @returns {boolean} - True, if the value uses a value reference
- */
-export declare function usesReference(value: any): boolean;
 export {};

package/dist/types/theme/index.d.ts

@@ -1,4 +1,4 @@
-export { createTheme, defineComponentTheme, createComponentClasses, createComponentCSS, createGlobalCSS, cssNameTransform, isDesignToken, setupTokens, SetupToken, } from './createTheme';
+export { createTheme, deepExtend, defineComponentTheme, createComponentClasses, createComponentCSS, createGlobalCSS, cssNameTransform, isDesignToken, resolveObject, setupTokens, SetupToken, } from './createTheme';
 export { BaseComponentTheme } from './components';
 export { defaultTheme } from './defaultTheme';
 export { defaultDarkModeOverride, reactNativeDarkTokens, } from './defaultDarkModeOverride';

package/dist/types/utils/index.d.ts

@@ -2,3 +2,4 @@ export { setUserAgent, SetUserAgentOptions } from './setUserAgent';
 export * from './utils';
 export { classNames, ClassNamesArgs } from './classNames';
 export { humanFileSize } from './humanFileSize';
+export { getName, getPathFromName, resolveReference, usesReference, } from './references';

package/dist/types/utils/references.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Checks if the value uses a value reference.
+ * @param {string} value
+ * @returns {boolean} - True, if the value uses a value reference
+ */
+export declare function usesReference(value: unknown): boolean;
+export declare function resolveReference(path: string[], obj: object): object;
+/**
+ * Returns the path from a path name be splitting the name by a given separator.
+ */
+export declare function getPathFromName(pathName: string): string[];
+/**
+ * Returns the paths name be joining its parts with a given separator.
+ */
+export declare function getName(path: Array<string>): string;

package/dist/types/utils/utils.d.ts

@@ -117,13 +117,6 @@ export declare const classNameModifier: (base: string, modifier?: Modifiers) =>
  * @returns the modified class name or empty string
  */
 export declare const classNameModifierByFlag: (base: string, modifier: Modifiers, flag?: boolean) => string;
-/**
- * `isFunction` but types the param with its function signature
- *
- * @param {unknown} value param to check
- * @returns {boolean} whether `value` is a function
- */
-export declare function isTypedFunction<T extends (...args: any[]) => any>(value: unknown): value is T;
 /**
  * Similar to `Array.join`, with an optional callback/template param
  * for formatting returned string values
@@ -153,3 +146,4 @@ export declare function groupLog(groupName: string, ...events: any[]): void;
  * @returns
  */
 export declare function splitObject(obj: Record<string, unknown>, predicate: (key: string) => boolean): readonly [Record<string, unknown>, Record<string, unknown>];
+export declare const cloneDeep: (obj: unknown) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "6.6.1",
+  "version": "6.6.3",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -49,7 +49,7 @@
     "tslib": "^2.5.2"
   },
   "peerDependencies": {
-    "@aws-amplify/core": "^6.4.0",
+    "@aws-amplify/core": "*",
     "aws-amplify": "^6.6.0",
     "xstate": "^4.33.6"
   },