@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/TextInput/TextInputBase.js

@@ -3,22 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TextInputBase = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _TextInput = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TextInput"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _StackView = require("../StackView/StackView");
+var _IconButton = require("../IconButton/IconButton");
+var _Icon = require("../Icon/Icon");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _textInputProps = require("../utils/props/textInputProps");
+var _useCopy = require("../utils/useCopy");
+var _input = require("../utils/input");
+var _useSpacingScale = require("../utils/useSpacingScale");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.textInputHandlerProps, _textInputProps.textInputProps, _viewProps.viewProps]);
 const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let {
     backgroundColor,
@@ -50,7 +61,7 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
-  const textStyles = (0, _ThemeProvider.applyTextStyles)({
+  const textStyles = (0, _styles.applyTextStyles)({
     fontName: isPassword ? undefined : fontName,
     // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
     fontSize,
@@ -113,7 +124,7 @@ const selectOuterBorderStyles = _ref2 => {
   } = _ref2;
   return {
     background: outerBackgroundColor,
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...(0, _styles.applyOuterBorder)({
       outerBorderColor,
       outerBorderWidth,
       borderRadius
@@ -197,7 +208,7 @@ const getIcon = function () {
     testID: 'mastercard'
   };
   if (visaRange) selectedIcon = objVisaIcon;else if (amexRange) selectedIcon = objAmexIcon;else if (masterCardRange) selectedIcon = objMasterCardIcon;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
     icon: selectedIcon.icon,
     variant: {
       size: 'large'
@@ -205,7 +216,7 @@ const getIcon = function () {
     testID: selectedIcon.testID
   });
 };
-const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const TextInputBase = exports.TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -256,7 +267,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     setValue,
     isControlled,
     isDirty
-  } = (0, _utils.useInputValue)({
+  } = (0, _input.useInputValue)({
     value,
     initialValue,
     inputRef,
@@ -298,7 +309,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     hover: isHovered,
     inactive
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('TextInput', tokens, variant, states);
   const handleClear = event => {
     onClear?.(event);
     resetValue(event);
@@ -319,15 +330,15 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     masterCardIcon,
     iconLeftGap
   } = themeTokens;
-  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const buttonsGapSize = (0, _useSpacingScale.useSpacingScale)(buttonsGap);
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const textInputButtons = direction === 'left' ? buttons.filter(button => button && button.key !== 'submitIcon') : buttons;
   const submitIcon = direction === 'left' ? buttons.find(button => button && button.key === 'submitIcon') : null;
   if (onClear && isDirty) {
-    textInputButtons?.unshift(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    textInputButtons?.unshift(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
       icon: ClearButtonIcon,
       onPress: handleClear,
@@ -337,7 +348,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     }, "clear"));
   }
   if (isPassword) {
-    textInputButtons?.unshift(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    textInputButtons?.unshift(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
       accessibilityLabel: showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
       onPress: handleShowOrHide,
@@ -367,7 +378,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   };
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const iconLeftWidth = submitIcon ? submitIcon.props.tokens.size ?? 0 : 0;
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
@@ -407,7 +418,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       })
     }), buttons?.length > 0 && !inactive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
         direction: "row",
         space: buttonsGap,
         children: textInputButtons
@@ -439,11 +450,10 @@ TextInputBase.propTypes = {
   onMouseOver: _propTypes.default.func,
   onKeyPress: _propTypes.default.func,
   readOnly: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
+  tokens: (0, _tokens.getTokensPropType)('TextInput', 'TextArea'),
   value: _propTypes.default.string,
-  variant: _utils.variantProp.propType
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = TextInputBase;
 const staticStyles = _StyleSheet.default.create({
   buttonsContainer: {
     position: 'absolute',

package/lib/cjs/TextInput/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     clearButtonAccessibilityLabel: 'Clear',
     showPasswordAccessibilityLabel: 'Show Password',

package/lib/cjs/TextInput/propTypes.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.textInputPropTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
 // for generic React Native props and HTML input attrs that are passed through.
-const textInputPropTypes = {
+const textInputPropTypes = exports.textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
    * together with the `onChange` to pass down and update the lifted state.
@@ -36,5 +36,4 @@ const textInputPropTypes = {
    * Will receive the input's value as an argument.
    */
   onChange: _propTypes.default.func
-};
-var _default = exports.default = textInputPropTypes;
+};

package/lib/cjs/ThemeProvider/ThemeProvider.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uninitialisedError = exports.default = exports.ThemeSetterContext = exports.ThemeContext = void 0;
+exports.uninitialisedError = exports.ThemeSetterContext = exports.ThemeProvider = exports.ThemeContext = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("./utils");
-var _responsiveProps = _interopRequireDefault(require("../utils/props/responsiveProps"));
+var _themeTokens = require("./utils/theme-tokens");
+var _responsiveProps = require("../utils/props/responsiveProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const uninitialisedError = exports.uninitialisedError = new Error('Theme context used outside of ThemeProvider');
@@ -25,7 +25,9 @@ const defaultThemeOptions = {
   enableHelmetSSR: true,
   enableMediaQueryStyleSheet: false
 };
-const ThemeProvider = _ref => {
+const ThemeProvider = exports.ThemeProvider = /*#__PURE__*/_react.default.forwardRef(
+// eslint-disable-next-line no-unused-vars
+(_ref, _) => {
   let {
     children,
     defaultTheme,
@@ -45,7 +47,7 @@ const ThemeProvider = _ref => {
   // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
-  (0, _utils.validateThemeTokensVersion)(theme);
+  (0, _themeTokens.validateThemeTokensVersion)(theme);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
@@ -56,7 +58,8 @@ const ThemeProvider = _ref => {
       children: children
     })
   });
-};
+});
+ThemeProvider.displayName = 'ThemeProvider';
 ThemeProvider.propTypes = {
   children: _propTypes.default.node.isRequired,
   defaultTheme: _propTypes.default.shape({
@@ -84,8 +87,7 @@ ThemeProvider.propTypes = {
     forceAbsoluteFontSizing: _propTypes.default.bool,
     forceZIndex: _propTypes.default.bool,
     enableHelmetSSR: _propTypes.default.bool,
-    contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number),
+    contentMaxWidth: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
     enableMediaQueryStyleSheet: _propTypes.default.bool
   })
-};
-var _default = exports.default = ThemeProvider;
+};

package/lib/cjs/ThemeProvider/useResponsiveThemeTokens.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useResponsiveThemeTokens = void 0;
 var _systemConstants = require("@telus-uds/system-constants");
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-var _utils = require("./utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _useTheme = require("./useTheme");
+var _themeTokens = require("./utils/theme-tokens");
 const getResponsiveThemeTokens = function (_ref, tokensProp) {
   let {
     rules = [],
@@ -15,7 +14,7 @@ const getResponsiveThemeTokens = function (_ref, tokensProp) {
   } = _ref;
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let states = arguments.length > 3 ? arguments[3] : undefined;
-  const appearances = (0, _utils.mergeAppearances)(variants, states);
+  const appearances = (0, _themeTokens.mergeAppearances)(variants, states);
   const tokensByViewport = Object.fromEntries(_systemConstants.viewports.keys.map(viewport => [viewport, {
     ...defaultThemeTokens
   }]));
@@ -37,7 +36,7 @@ const getResponsiveThemeTokens = function (_ref, tokensProp) {
     }
   });
   Object.keys(tokensByViewport).forEach(viewport => {
-    tokensByViewport[viewport] = (0, _utils.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
+    tokensByViewport[viewport] = (0, _themeTokens.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
   });
   return tokensByViewport;
 };
@@ -80,9 +79,9 @@ const useResponsiveThemeTokens = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  const theme = (0, _useTheme.default)();
-  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const theme = (0, _useTheme.useTheme)();
+  const componentTheme = (0, _themeTokens.getComponentTheme)(theme, componentName);
   const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states);
   return themeTokens;
 };
-var _default = exports.default = useResponsiveThemeTokens;
+exports.useResponsiveThemeTokens = useResponsiveThemeTokens;

package/lib/cjs/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useResponsiveThemeTokensCallback = void 0;
 var _react = require("react");
 var _systemConstants = require("@telus-uds/system-constants");
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-var _utils = require("./utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _useTheme = require("./useTheme");
+var _themeTokens = require("./utils/theme-tokens");
 const getResponsiveThemeTokens = function (_ref, tokensProp) {
   let {
     rules = [],
@@ -16,7 +15,7 @@ const getResponsiveThemeTokens = function (_ref, tokensProp) {
   } = _ref;
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let states = arguments.length > 3 ? arguments[3] : undefined;
-  const appearances = (0, _utils.mergeAppearances)(variants, states);
+  const appearances = (0, _themeTokens.mergeAppearances)(variants, states);
   const tokensByViewport = Object.fromEntries(_systemConstants.viewports.keys.map(viewport => [viewport, {
     ...defaultThemeTokens
   }]));
@@ -38,7 +37,7 @@ const getResponsiveThemeTokens = function (_ref, tokensProp) {
     }
   });
   Object.keys(tokensByViewport).forEach(viewport => {
-    tokensByViewport[viewport] = (0, _utils.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
+    tokensByViewport[viewport] = (0, _themeTokens.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
   });
   return tokensByViewport;
 };
@@ -113,12 +112,12 @@ const doesConditionApply = (_ref2, appearances) => {
 const useResponsiveThemeTokensCallback = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  const theme = (0, _useTheme.default)();
-  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const theme = (0, _useTheme.useTheme)();
+  const componentTheme = (0, _themeTokens.getComponentTheme)(theme, componentName);
   const getResponsiveThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {
-    const resolvedTokens = (0, _utils.resolveThemeTokens)(tokens, (0, _utils.mergeAppearances)(variants, states), tokenOverrides);
+    const resolvedTokens = (0, _themeTokens.resolveThemeTokens)(tokens, (0, _themeTokens.mergeAppearances)(variants, states), tokenOverrides);
     return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states);
   }, [componentTheme, tokens, variants]);
   return getResponsiveThemeTokensCallback;
 };
-var _default = exports.default = useResponsiveThemeTokensCallback;
+exports.useResponsiveThemeTokensCallback = useResponsiveThemeTokensCallback;

package/lib/cjs/ThemeProvider/useSetTheme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useSetTheme = void 0;
 var _react = require("react");
 var _ThemeProvider = require("./ThemeProvider");
 const useSetTheme = () => {
@@ -27,4 +27,4 @@ const useSetTheme = () => {
     editTheme
   };
 };
-var _default = exports.default = useSetTheme;
+exports.useSetTheme = useSetTheme;

package/lib/cjs/ThemeProvider/useTheme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useTheme = void 0;
 var _react = require("react");
 var _ThemeProvider = require("./ThemeProvider");
 const useTheme = () => {
@@ -14,4 +14,4 @@ const useTheme = () => {
   }
   return theme;
 };
-var _default = exports.default = useTheme;
+exports.useTheme = useTheme;

package/lib/cjs/ThemeProvider/useThemeTokens.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useThemeTokensCallback = exports.useThemeTokens = void 0;
 var _react = require("react");
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-var _utils = require("./utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _useTheme = require("./useTheme");
+var _themeTokens = require("./utils/theme-tokens");
 /**
  * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
  * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
@@ -44,9 +43,9 @@ const useThemeTokens = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  const theme = (0, _useTheme.default)();
-  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
-  const themeTokens = (0, _utils.getThemeTokens)(componentTheme, tokens, variants, states);
+  const theme = (0, _useTheme.useTheme)();
+  const componentTheme = (0, _themeTokens.getComponentTheme)(theme, componentName);
+  const themeTokens = (0, _themeTokens.getThemeTokens)(componentTheme, tokens, variants, states);
   return themeTokens;
 };
 
@@ -106,12 +105,12 @@ exports.useThemeTokens = useThemeTokens;
 const useThemeTokensCallback = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  const theme = (0, _useTheme.default)();
-  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const theme = (0, _useTheme.useTheme)();
+  const componentTheme = (0, _themeTokens.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);
+    const appearances = (0, _themeTokens.mergeAppearances)(variants, states);
+    const resolvedTokens = (0, _themeTokens.resolveThemeTokens)(tokens, appearances, tokenOverrides);
+    return (0, _themeTokens.getThemeTokens)(componentTheme, resolvedTokens, appearances);
   }, [componentTheme, tokens, variants]);
   return getThemeTokensCallback;
 };

package/lib/cjs/ThemeProvider/utils/styles.js

@@ -53,12 +53,15 @@ function applyTextStyles(_ref) {
   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 = `${fontName}${fontWeight}${fontStyle === 'italic' ? 'normal' : 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.default.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
   }
+  if (fontStyle && fontStyle !== 'normal') {
+    styles.fontStyle = fontStyle;
+  }
   if (fontColor) {
     styles.color = fontColor;
   }

package/lib/cjs/Timeline/Timeline.js

@@ -3,14 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Timeline = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _a11yProps = require("../utils/props/a11yProps");
+var _viewProps = require("../utils/props/viewProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _semantics = require("../utils/a11y/semantics");
+var _useViewport = require("../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectDotStyles = _ref => {
@@ -86,7 +91,7 @@ const selectItemContentStyles = (_ref6, isLastChild) => {
     marginRight: !isLastChild && itemContentMarginRight
   };
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  * Timeline is a component that displays either a horizontal or vertical list of the
@@ -100,7 +105,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * ## A11y guidelines
  * Timeline link supports all the common a11y props.
  */
-const Timeline = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const Timeline = exports.Timeline = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     tokens,
     variant = {},
@@ -110,13 +115,13 @@ const Timeline = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     childrenTag = 'li',
     ...rest
   } = _ref7;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Timeline', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Timeline', tokens, variant, {
     viewport
   });
   const containerProps = {
     ...selectProps(rest),
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole || 'list'),
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole || 'list'),
     accessibilityLabel
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -126,7 +131,7 @@ const Timeline = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     children: children.map((child, index) => {
       const accessibilityRole = _Platform.default.OS !== 'android' ? 'listitem' : undefined;
       const childrenProps = {
-        ...(0, _utils.getA11yPropsFromHtmlTag)(childrenTag, child?.props?.accessibilityRole || accessibilityRole)
+        ...(0, _semantics.getA11yPropsFromHtmlTag)(childrenTag, child?.props?.accessibilityRole || accessibilityRole)
       };
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: selectLineItemContainer(themeTokens)
@@ -151,8 +156,8 @@ const Timeline = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
 Timeline.displayName = 'Timeline';
 Timeline.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Timeline'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Timeline'),
+  variant: _variantProp.variantProp.propType,
   /**
    * A list of components that will be rendered either horizontally or vertically
    */
@@ -169,7 +174,6 @@ Timeline.propTypes = {
    * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
    *
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
-  childrenTag: _propTypes.default.oneOf(_utils.layoutTags)
-};
-var _default = exports.default = Timeline;
+  tag: _propTypes.default.oneOf(_semantics.layoutTags),
+  childrenTag: _propTypes.default.oneOf(_semantics.layoutTags)
+};

package/lib/cjs/ToggleSwitch/ToggleSwitch.js

@@ -3,21 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ToggleSwitch = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _InputLabel = _interopRequireDefault(require("../InputLabel"));
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _InputLabel = require("../InputLabel/InputLabel");
+var _ButtonBase = require("../Button/ButtonBase");
+var _StackView = require("../StackView/StackView");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _styles = require("../ThemeProvider/utils/styles");
+var _a11yProps = require("../utils/props/a11yProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _pressProps = require("../utils/props/pressProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useUniqueId = require("../utils/useUniqueId");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
 var _input = require("../utils/input");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _pressProps.pressProps, _viewProps.viewProps]);
 
 // We need to drop the icon before passing it to the `ButtonBase`, because it's
 // being handled separately in this case
@@ -30,7 +38,7 @@ const selectButtonTokens = (_ref, _ref2) => {
     trackHeight,
     outerBorderGapButton
   } = _ref2;
-  return (0, _utils.selectTokens)('Button', {
+  return (0, _tokens.selectTokens)('Button', {
     ...tokens,
     // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
     outerBorderGap: outerBorderGapButton,
@@ -92,7 +100,7 @@ const selectSwitchStyles = _ref6 => {
     borderWidth: switchBorderWidth,
     borderColor: switchBorderColor,
     borderRadius: switchBorderRadius,
-    ...(0, _ThemeProvider.applyShadowToken)(switchShadow),
+    ...(0, _styles.applyShadowToken)(switchShadow),
     ..._Platform.default.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: {
@@ -136,7 +144,7 @@ const selectLabelTokens = _ref8 => {
     lineHeight: labelLineHeight
   };
 };
-const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
+const ToggleSwitch = exports.ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
   let {
     copy = 'en',
     value,
@@ -153,7 +161,7 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     togglePosition = 'end',
     ...rest
   } = _ref9;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
   const {
     currentValue,
@@ -165,9 +173,9 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
   });
   const handlePress = event => setValue(!currentValue, event);
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState, selectMobileTokens(themeTokens)), getTokens(themeTokens, selectMobileTokens(themeTokens)));
-  const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
+  const uniqueId = (0, _useUniqueId.useUniqueId)('toggleSwitch');
   const inputId = id ?? uniqueId;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
     space: themeTokens.space,
     direction: togglePosition === 'start' ? 'row-reverse' : 'row',
     tokens: {
@@ -177,14 +185,14 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     },
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.InputLabel, {
         copy: copy,
         forId: inputId,
         label: label,
         tokens: selectLabelTokens(themeTokens),
         tooltip: tooltip
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
       id: id,
       ref: ref,
       selected: currentValue,
@@ -245,8 +253,8 @@ ToggleSwitch.propTypes = {
    * Whether the English or French copy will be used (e.g. for accessibility labels).
    */
   copy: _propTypes.default.oneOf(['en', 'fr']),
-  tokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('ToggleSwitch'),
+  variant: _variantProp.variantProp.propType,
   /**
    * If this is a "controlled" component and a parent handles its selected state,
    * tells the switch if it is on (true) or off (false).
@@ -302,5 +310,4 @@ const staticStyles = _StyleSheet.default.create({
     flexDirection: 'row',
     alignItems: 'center'
   }
-});
-var _default = exports.default = ToggleSwitch;
+});