@aws-amplify/ui 6.0.17 → 6.1.0

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/index.mjs

@@ -14,15 +14,17 @@ 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';

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 };

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

@@ -0,0 +1,236 @@
+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';
+
+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(key)}:${_value}; `;
+    })
+        .join(' ');
+}
+function cssNameTransform({ path = [] }) {
+    return `${kebabCase([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 = [
+    'offsetX',
+    'offsetY',
+    'blurRadius',
+    'spreadRadius',
+    'color',
+];
+/**
+ * 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)) {
+        return referenceValue(value);
+    }
+    if (isShadowTokenObject(value)) {
+        return SHADOW_PROPERTIES.map((property) => {
+            return referenceValue(
+            // lookup property against `token` first for custom non-nested value, then lookup
+            // property against `value` for design token value
+            isShadowTokenObject(token) ? token[property] : value[property]);
+        }).join(' ');
+    }
+    return value;
+}
+/**
+ * Helper function to test if something is a design token or not.
+ * Used in the React component style props.
+ *
+ * @param value - thing to test if it is a design token or not
+ * @returns boolean
+ */
+function isDesignToken(value) {
+    return isObject(value) && has(value, '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.
+ * Similar to what Style Dictionary does.
+ */
+function setupTokens({ tokens, path = [], setupToken, }) {
+    if (has(tokens, 'value')) {
+        return setupToken({ token: tokens, path });
+    }
+    const output = {};
+    for (const name in tokens) {
+        if (has(tokens, name)) {
+            const value = tokens[name];
+            const nextTokens = isObject(value) ? value : { value };
+            output[name] = setupTokens({
+                tokens: nextTokens,
+                path: path.concat(name),
+                setupToken,
+            });
+        }
+    }
+    return output;
+}
+// Internal Style Dictionary methods
+// copied from amzn/style-dictionary with the owner's permission
+/**
+ * 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;
+}
+
+export { CSS_VARIABLE_PREFIX, cssNameTransform, cssValue, deepExtend, flattenProperties, isDesignToken, isShadowTokenObject, propsToString, referenceValue, setupToken, setupTokens, usesReference };