@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/lib/ThemeProvider/ThemeProvider.js

@@ -1,28 +1,52 @@
-import React, { createContext, useState } from 'react';
-import PropTypes from 'prop-types';
-export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
-export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
-export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError); // TODO: develop this as theme metadata is added
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.themeType = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
+exports.uninitialisedError = uninitialisedError;
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
+exports.ThemeContext = ThemeContext;
+const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError); // TODO: develop this as theme metadata is added
 // https://github.com/telus/universal-design-system/issues/92
 
-export const themeType = PropTypes.object;
+exports.ThemeSetterContext = ThemeSetterContext;
+const themeType = _propTypes.default.object;
+exports.themeType = themeType;
 
 const ThemeProvider = ({
   children,
   defaultTheme
 }) => {
-  const [theme, setTheme] = useState(defaultTheme);
-  return /*#__PURE__*/React.createElement(ThemeSetterContext.Provider, {
-    value: setTheme
-  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: theme
-  }, children));
+  const [theme, setTheme] = (0, _react.useState)(defaultTheme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
+    value: setTheme,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
+      value: theme,
+      children: children
+    })
+  });
 };
 
 ThemeProvider.propTypes = {
   // TODO: implement a custom propType that validates schema version
   // https://github.com/telus/universal-design-system/issues/92
-  children: PropTypes.node.isRequired,
+  children: _propTypes.default.node.isRequired,
   defaultTheme: themeType.isRequired
 };
-export default ThemeProvider;
+var _default = ThemeProvider;
+exports.default = _default;

package/lib/ThemeProvider/index.js

@@ -1,6 +1,61 @@
-import ThemeProvider from './ThemeProvider';
-export { default as useTheme } from './useTheme';
-export { default as useSetTheme } from './useSetTheme';
-export * from './useThemeTokens';
-export * from './utils';
-export default ThemeProvider;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useTheme: true,
+  useSetTheme: true
+};
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+Object.defineProperty(exports, "useSetTheme", {
+  enumerable: true,
+  get: function () {
+    return _useSetTheme.default;
+  }
+});
+exports.default = void 0;
+
+var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
+
+var _useThemeTokens = require("./useThemeTokens");
+
+Object.keys(_useThemeTokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useThemeTokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useThemeTokens[key];
+    }
+  });
+});
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ThemeProvider.default;
+exports.default = _default;

package/lib/ThemeProvider/useSetTheme.js

@@ -1,11 +1,19 @@
-import { useCallback, useContext } from 'react';
-import { ThemeSetterContext } from './ThemeProvider';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ThemeProvider = require("./ThemeProvider");
 
 const useSetTheme = () => {
   // Replace current theme with provided object
-  const setTheme = useContext(ThemeSetterContext); // Merge provided object into current theme
+  const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Merge provided object into current theme
 
-  const editTheme = useCallback(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
+  const editTheme = (0, _react.useCallback)(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
     ...newTheme
   })), [setTheme]);
   return {
@@ -14,4 +22,5 @@ const useSetTheme = () => {
   };
 };
 
-export default useSetTheme;
+var _default = useSetTheme;
+exports.default = _default;

package/lib/ThemeProvider/useTheme.js

@@ -1,8 +1,16 @@
-import { useContext } from 'react';
-import { ThemeContext } from './ThemeProvider';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ThemeProvider = require("./ThemeProvider");
 
 const useTheme = () => {
-  const theme = useContext(ThemeContext); // Fail fast if dev uses useTheme outside of ThemeProvider
+  const theme = (0, _react.useContext)(_ThemeProvider.ThemeContext); // Fail fast if dev uses useTheme outside of ThemeProvider
 
   if (theme instanceof Error) {
     throw theme;
@@ -11,4 +19,5 @@ const useTheme = () => {
   return theme;
 };
 
-export default useTheme;
+var _default = useTheme;
+exports.default = _default;

package/lib/ThemeProvider/useThemeTokens.js

@@ -1,6 +1,18 @@
-import { useCallback } from 'react';
-import useTheme from './useTheme';
-import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } from './utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeTokensCallback = exports.useThemeTokens = void 0;
+
+var _react = require("react");
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * @typedef {import('../utils/propTypes.js').AppearanceSet} AppearanceSet
  * @typedef {import('../utils/propTypes.js').TokensProp} TokensProp
@@ -11,28 +23,78 @@ import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } fr
  * Returns a complete set of theme tokens for a component based on which of the
  * component's theme rules apply to the current set of theme appearances.
  *
+ * When applying theme tokens as styles to a component, don't spread the theme tokens
+ * object, explicitly select each property. This way, if new theme tokens are added to the
+ * component's theme in a minor or patch release of the theme package, the appearance
+ * of the component in sites and apps will only change when the component itself is updated.
+ *
+ * @example
+ * const seletContainerTokens = ({ color, width, height }) => ({
+ *   backgroundColor: color, width, height
+ * })
+ * const MyComponent = ({ tokens, variant, children }) => {
+ *   const viewport = useViewport()
+ *   const themeTokens = useThemeTokens('MyComponent', tokens, variant, { viewport })
+ *   const style = seletContainerTokens(themeTokens)
+ *   return <View style={style}>{children}</View>
+ * }
+ *
  * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
  * @param {TokensProp} [tokens] - every themed component should accept an optional `tokens` prop allowing theme tokens to be overridden
  * @param {AppearanceSet} [variants] - every themed component should accept an optional `variants` prop specifying theme variants
  * @param {AppearanceSet} [states] - optional object containing current theme appearances dictated by user action or context
  * @returns {TokensSet} - the currently-applicable resolved set of theme tokens to apply
  */
-
-export const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
-  const theme = useTheme();
-  const componentTheme = getComponentTheme(theme, componentName);
-  const themeTokens = getThemeTokens(componentTheme, tokens, variants, states);
+const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const themeTokens = (0, _utils.getThemeTokens)(componentTheme, tokens, variants, states);
   return themeTokens;
 };
 /**
  * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
- * Scenarios where useThemeTokensCallback should be used instead of useThemeTokens include:
+ * Scenarios where `useThemeTokensCallback` should be used instead of `useThemeTokens` include:
  *
- * - Where tokens to be obtained from state accessible only in scopes like callbacks and render functions,
- *   where calling useThemeTokens directly would be disallowed by React's hook rules.
+ * - Where tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useThemeTokens directly would be disallowed by React's hook rules.
  * - Passing a tokens getter down via a child component's `tokens` prop, applying rules using the
  *   child component's current state. Consider wrapping the returned tokens in `selectTokens()`.
  *
+ * The function returned by `useThemeTokens` may be called with an object of state appearances to get an object
+ * of tokens, or may be passed as a `tokens` prop to other themed components or `useThemeTokens`/`useThemeTokensCallback`
+ * hooks.
+ *
+ * @example
+ * // Resolving tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getTokens = useThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const { color, width, height } = getTokens({ pressed })
+ *     return { backgroundColor: color, width, height }
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getTokens = useThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @example
+ * // Chaining multiple themes together, sharing the same variants and state
+ * const GlowingLink = ({ tokens, variant, children }) => {
+ *   // applies a small theme for a glowing effect, using same variants and states as "link"
+ *   const getGlowTokens = useThemeCallback('GlowingLink', tokens, variant)
+ *   // applies link state to get "Link" theme tokens and merge "GlowingLink" tokens on top
+ *   const getTokens = useThemeCallback('Link', getGlowTokens, variant)
+ *   // renders a link with both themes applied, both based on current link state
+ *   return <LinkBase tokens={getTokens}>{children}</LinkBase>
+ * }
+ *
  * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
  * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
  * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
@@ -42,13 +104,18 @@ export const useThemeTokens = (componentName, tokens = {}, variants = {}, states
  *      e.g. if one theme tokens callback needs to pass certain token overrides to another.
  */
 
-export const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
-  const theme = useTheme();
-  const componentTheme = getComponentTheme(theme, componentName);
-  const getThemeTokensCallback = useCallback((states, tokenOverrides) => {
-    const appearances = mergeAppearances(variants, states);
-    const resolvedTokens = resolveTokens(tokens, tokenOverrides, appearances);
-    return getThemeTokens(componentTheme, resolvedTokens, appearances);
+
+exports.useThemeTokens = useThemeTokens;
+
+const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const getThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {
+    const appearances = (0, _utils.mergeAppearances)(variants, states);
+    const resolvedTokens = (0, _utils.resolveThemeTokens)(tokens, appearances, tokenOverrides);
+    return (0, _utils.getThemeTokens)(componentTheme, resolvedTokens, appearances);
   }, [componentTheme, tokens, variants]);
   return getThemeTokensCallback;
-};
+};
+
+exports.useThemeTokensCallback = useThemeTokensCallback;

package/lib/ThemeProvider/utils/index.js

@@ -1,2 +1,31 @@
-export * from './styles';
-export * from './theme-tokens';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _styles = require("./styles");
+
+Object.keys(_styles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _styles[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _styles[key];
+    }
+  });
+});
+
+var _themeTokens = require("./theme-tokens");
+
+Object.keys(_themeTokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _themeTokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _themeTokens[key];
+    }
+  });
+});

package/lib/ThemeProvider/utils/styles.js

@@ -1,12 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyTextStyles = applyTextStyles;
+exports.applyShadowToken = applyShadowToken;
+exports.verticalAlignRow = verticalAlignRow;
+exports.applyOuterBorder = void 0;
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * React-Native specific implementations of style patterns that
  * don't map directly to cross-platform design token values.
  */
-import { Platform } from 'react-native';
-import { fontBasePixels } from '@telus-uds/system-constants'; // Make design tokens fit React Native's text styles' specific requirements and quirks
-
-export function applyTextStyles({
+// Make design tokens fit React Native's text styles' specific requirements and quirks
+function applyTextStyles({
   fontSize,
+  fontScaleCap,
   lineHeight,
   letterSpacing,
   fontWeight = '400',
@@ -24,22 +39,22 @@ export function applyTextStyles({
 
   if (typeof lineHeight === 'number') {
     // React Native expects absolute line heights but multipliers are better as design tokens
-    styles.lineHeight = lineHeight * (fontSize || fontBasePixels);
+    styles.lineHeight = lineHeight * (fontSize || _systemConstants.fontBasePixels);
   }
 
-  if (typeof letterSpacing === 'number') {
+  if (typeof letterSpacing === 'number' && letterSpacing) {
     // Same as for line heights - React Native expects absolute letter spacing value
-    styles.letterSpacing = letterSpacing * (fontSize || fontBasePixels);
+    styles.letterSpacing = letterSpacing * (fontSize || _systemConstants.fontBasePixels);
   }
 
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
+    styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
-    styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
+    styles.fontWeight = _Platform.default.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
   } // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
   // Do while implementing advanced typography e.g. paragraph etc
   // https://github.com/telus/universal-design-system/issues/89
@@ -61,13 +76,16 @@ export function applyTextStyles({
  * @return {object}
  */
 
-export function applyShadowToken(shadowToken) {
+
+function applyShadowToken(shadowToken) {
   if (!shadowToken) return {};
-  const applyShadow = Platform.select({
+
+  const applyShadow = _Platform.default.select({
     web: () => applyWebShadow(shadowToken),
     ios: () => applyIosShadow(shadowToken),
     android: () => applyAndroidShadow(shadowToken)
   });
+
   return applyShadow();
 }
 
@@ -81,7 +99,7 @@ function applyWebShadow({
 }) {
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
-    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
+    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
   };
   return boxShadow;
 }
@@ -148,12 +166,30 @@ const verticalAlignToFlexRowAlign = {
   middle: 'center',
   bottom: 'flex-end'
 };
-export function verticalAlignRow(verticalAlign, reverse = false) {
+
+function verticalAlignRow(verticalAlign, reverse = false) {
   return {
     flexDirection: reverse ? 'row-reverse' : 'row',
     alignItems: verticalAlignToFlexRowAlign[verticalAlign]
   };
-} // React Native Views behave like flex blocks. There's no CSS 'display' and they can't inline themselves
+}
+/**
+ * Use on an outer container to create an outer border with an optional gap around it
+ * that matches the border radius of any inner border.
+ */
+
 
-export function applyLayoutStyles() {// TODO: map design tokens to styles that implement inline, stretch, center, etc
-}
+const applyOuterBorder = ({
+  outerBorderColor,
+  outerBorderWidth = 0,
+  outerBorderGap = 0,
+  borderRadius = 0
+}) => ({
+  margin: 0 - outerBorderWidth - outerBorderGap,
+  padding: outerBorderGap,
+  borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
+  borderWidth: outerBorderWidth,
+  borderColor: outerBorderColor
+});
+
+exports.applyOuterBorder = applyOuterBorder;

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -1,3 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toArray = exports.getThemeTokens = exports.mergeAppearances = exports.validateThemeTokens = exports.resolveThemeTokens = exports.doesThemeRuleApply = exports.doesThemeConditionApply = exports.getComponentTheme = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * @typedef {import('../../utils/propTypes.js').AppearanceSet} AppearanceSet
  * @typedef {import('../../utils/propTypes.js').TokensProp} TokensProp
@@ -7,44 +18,64 @@
 /**
  * General utilities around working with theme tokens
  */
-export const getComponentTheme = (theme, componentName) => {
+const getComponentTheme = (theme, componentName) => {
+  var _theme$metadata;
+
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
-    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
+    throw new Error("Called useTheme's getStyle on \"".concat(componentName, "\" with no theme provided"));
   }
 
-  const themeName = theme.metadata?.name || '';
+  const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
+    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
+    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
   }
 
   return componentTheme;
 };
-export const doesThemeConditionApply = ([key, value], appearances) => {
+
+exports.getComponentTheme = getComponentTheme;
+
+const doesThemeConditionApply = ([key, value], appearances) => {
+  var _appearances$key;
+
   // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = appearances[key] ?? null;
+  const appearanceValue = (_appearances$key = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
-export const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
+
+exports.doesThemeConditionApply = doesThemeConditionApply;
+
+const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
 /**
- * Turns a tokens prop and an optional tokens override prop (either or both of which may be a tokens getter function)
- * into one tokens set object where overrides are applied over the resolved default tokens.
+ * Turns a tokens prop (which may be either a tokens object or a tokens getter function)
+ * into one resolved tokens object, based on current appearances state.
+ *
+ * This is used inside `useThemeTokens` and `useThemeTokensCallback` for handling the `tokens`
+ * props of themed components. It may also be used directly in cases where a non-themed component
+ * needs to resolve a tokens prop that may be a tokens getter function or a resolved tokens object.
+ *
+ * A second tokens prop of tokens overrides may optionally be passed; it will be resolved to an object
+ * based on provided appearance state and then shallow-merged over the first set of tokens.
  *
  * @param {TokensProp} defaultTokens - a set of tokens or tokens getter function which may be overridden
- * @param {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
  * @param {AppearanceSet} [appearances] - optional appearance set to pass to tokens getter functions
+ * @param {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
  * @returns {TokensSet} - object containing resolved tokens with overrides applied
  */
 
-export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) => {
+
+exports.doesThemeRuleApply = doesThemeRuleApply;
+
+const resolveThemeTokens = (defaultTokens, appearances = {}, tokenOverrides) => {
   const resolve = tokens => typeof tokens === 'function' ? tokens(appearances) : tokens;
 
   if (!tokenOverrides) return resolve(defaultTokens);
@@ -52,6 +83,30 @@ export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) =
     [tokenName]: tokenValue
   }, resolve(defaultTokens));
 };
+/**
+ * Gives a prop types error if a set of resolved tokens doesn't match a provided prop
+ * types validator.
+ *
+ * In production, this is a no-op (PropTypes.checkPropTypes is automatically replaced
+ * with a no-op function).
+ *
+ * @param {TokensSet} themeTokens - object containing resolved theme tokens
+ * @param {function} validator - PropTypes validator function
+ * @param {string} componentName - identifier to display in PropType error messages
+ */
+
+
+exports.resolveThemeTokens = resolveThemeTokens;
+
+const validateThemeTokens = (themeTokens, validator, componentName) => {
+  _propTypes.default.checkPropTypes({
+    tokens: validator
+  }, {
+    tokens: themeTokens
+  }, 'resolved token', componentName);
+
+  return themeTokens;
+};
 /**
  * Merges variants over states. Must be merged in that order to allow static showcases of a state,
  * e.g. `<Button variant={{ pressed: true }} />` where button's pressed state is `false` by default.
@@ -62,10 +117,28 @@ export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) =
  * @returns {AppearanceSet}
  */
 
-export const mergeAppearances = (variants = {}, states) => states ? { ...states,
+
+exports.validateThemeTokens = validateThemeTokens;
+
+const mergeAppearances = (variants = {}, states) => states ? { ...states,
   ...variants
 } : variants;
-export const getThemeTokens = ({
+/**
+ * Get a set of theme tokens by applying a theme's component rules based on a component's variants and state.
+ *
+ * This is used internally in `useThemeTokens` and `useThemeTokensCallback` and should not normally be called directly.
+ *
+ * @param {object} componentTheme - object containing a theme's `tokens` and `rules` for a component
+ * @param {object|function} [tokensProp] - UDS tokens prop containing theming overrides
+ * @param {object} [variants] - UDS variant prop containing the variant options for this component instance
+ * @param {object} [states] - object containing current state options for this component instance
+ * @returns {object} Set of resolved theme tokens
+ */
+
+
+exports.mergeAppearances = mergeAppearances;
+
+const getThemeTokens = ({
   rules = [],
   tokens: defaultThemeTokens = {}
 }, tokensProp, variants = {}, states) => {
@@ -75,6 +148,11 @@ export const getThemeTokens = ({
   const themeTokens = rules.reduce((mergedTokens, rule) => doesThemeRuleApply(rule, appearances) ? { ...mergedTokens,
     ...rule.tokens
   } : mergedTokens, defaultThemeTokens);
-  return resolveTokens(themeTokens, tokensProp, appearances);
+  return resolveThemeTokens(themeTokens, appearances, tokensProp);
 };
-export const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
+
+exports.getThemeTokens = getThemeTokens;
+
+const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
+
+exports.toArray = toArray;