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

package/lib/cjs/HorizontalScroll/HorizontalScroll.js

@@ -3,26 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectHorizontalScrollTokens = exports.default = void 0;
+exports.selectHorizontalScrollTokens = exports.horizontalScrollUtils = exports.HorizontalScroll = 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 _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ScrollViewEnd = _interopRequireDefault(require("./ScrollViewEnd"));
+var _themeTokens = require("../ThemeProvider/utils/theme-tokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _ScrollViewEnd = require("./ScrollViewEnd");
 var _itemPositions = require("./itemPositions");
 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.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
-const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
+const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _tokens.selectTokens)(tokenKeys, themeTokens, prefix);
 exports.selectHorizontalScrollTokens = selectHorizontalScrollTokens;
 const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
   borderBottomWidth,
   borderBottomColor
 });
+const horizontalScrollUtils = exports.horizontalScrollUtils = {
+  selectHorizontalScrollTokens,
+  useItemPositions: _itemPositions.useItemPositions,
+  getItemPositionScrollTarget: _itemPositions.getItemPositionScrollTarget,
+  getItemPositionLayoutHandler: _itemPositions.getItemPositionLayoutHandler,
+  itemPositionsPropType: _itemPositions.itemPositionsPropType
+};
 
 /**
  * Base component that scrolls horizontally and displays left and right buttons if
@@ -30,7 +41,7 @@ const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
  *
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
-const HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const HorizontalScroll = exports.HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     ScrollButton,
     tokens,
@@ -46,9 +57,9 @@ const HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     borderBottomWidth,
     borderBottomColor,
     buttonClearance = 0
-  } = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens),
+  } = (0, _themeTokens.validateThemeTokens)((0, _themeTokens.resolveThemeTokens)(tokens),
   // Allow missing icons
-  (0, _utils.getTokensSetPropType)(tokenKeys, {
+  (0, _tokens.getTokensSetPropType)(tokenKeys, {
     partial: true
   }), 'HorizontalScroll');
   const [containerWidth, setContainerWidth] = _react.default.useState(0);
@@ -129,7 +140,7 @@ const HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style: staticStyles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectBorderStyles(borderBottomWidth, borderBottomColor),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollViewEnd.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollViewEnd.ScrollViewEnd, {
         onScrollEnd: handleScrollEnd,
         ref: scrollRef,
         horizontal: true,
@@ -169,10 +180,9 @@ HorizontalScroll.propTypes = {
   ...selectedSystemPropTypes,
   itemPositions: _itemPositions.itemPositionsPropType,
   ScrollButton: _propTypes.default.elementType,
-  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+  tokens: (0, _tokens.getTokensSetPropType)(tokenKeys, {
     allowFunction: true
   }),
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   children: _propTypes.default.node
-};
-var _default = exports.default = HorizontalScroll;
+};

package/lib/cjs/HorizontalScroll/HorizontalScrollButton.js

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.HorizontalScrollButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _variantProp = require("../utils/props/variantProp");
+var _tokens = require("../utils/props/tokens");
+var _useCopy = require("../utils/useCopy");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _a11yProps = require("../utils/props/a11yProps");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _IconButton = require("../IconButton/IconButton");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectContainerStyles = _ref => {
@@ -31,7 +35,7 @@ const selectContainerStyles = _ref => {
  *
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
-const HorizontalScrollButton = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const HorizontalScrollButton = exports.HorizontalScrollButton = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     direction = 'next',
     icon,
@@ -41,9 +45,9 @@ const HorizontalScrollButton = /*#__PURE__*/_react.default.forwardRef((_ref2, re
     tokens,
     copy
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('HorizontalScrollButton', tokens, variant);
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('HorizontalScrollButton', tokens, variant);
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
@@ -51,14 +55,14 @@ const HorizontalScrollButton = /*#__PURE__*/_react.default.forwardRef((_ref2, re
     style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
       offset
     })],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
       accessibilityLabel: label,
       icon: icon,
       onPress: onPress,
       ref: ref,
       tokens: themeTokens,
       variant: variant,
-      ..._utils.a11yProps.nonFocusableProps
+      ..._a11yProps.a11yProps.nonFocusableProps
     })
   });
 });
@@ -75,12 +79,11 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 HorizontalScrollButton.propTypes = {
-  tokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
-  variant: _utils.variantProp.propType,
-  copy: _utils.copyPropTypes,
+  tokens: (0, _tokens.getTokensPropType)('HorizontalScrollButton'),
+  variant: _variantProp.variantProp.propType,
+  copy: _copyPropTypes.copyPropTypes,
   direction: _propTypes.default.oneOf(['previous', 'next']),
   offset: _propTypes.default.number,
   icon: _propTypes.default.elementType,
   onPress: _propTypes.default.func.isRequired
-};
-var _default = exports.default = HorizontalScrollButton;
+};

package/lib/cjs/HorizontalScroll/ScrollViewEnd.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ScrollViewEnd = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
@@ -19,7 +19,7 @@ const DEBOUNCE_MS = 100;
  * so we need to work around it with debouncing on `onScroll`. See:
  * https://github.com/necolas/react-native-web/issues/1021
  */
-const ScrollViewEnd = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ScrollViewEnd = exports.ScrollViewEnd = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
     onScroll = null,
@@ -49,5 +49,4 @@ ScrollViewEnd.displayName = 'ScrollViewEnd';
 ScrollViewEnd.propTypes = {
   onScrollEnd: _propTypes.default.func.isRequired,
   onScroll: _propTypes.default.func
-};
-var _default = exports.default = ScrollViewEnd;
+};

package/lib/cjs/HorizontalScroll/ScrollViewEnd.native.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ScrollViewEnd = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
@@ -13,7 +13,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * A wrapper for ScrollView that supports an `onScrollEnd` function.
  *
  * React Native has two scroll end handlers, we want to treat them both the same.
- */const ScrollViewEnd = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const ScrollViewEnd = exports.ScrollViewEnd = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
     ...props
@@ -28,5 +29,4 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 ScrollViewEnd.displayName = 'ScrollViewEnd';
 ScrollViewEnd.propTypes = {
   onScrollEnd: _propTypes.default.func.isRequired
-};
-var _default = exports.default = ScrollViewEnd;
+};

package/lib/cjs/HorizontalScroll/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: {
     // English text from TDS Community `Tabs`
     previousLabel: 'Move menu to the left',

package/lib/cjs/Icon/Icon.js

@@ -3,17 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iconComponentPropTypes = exports.default = void 0;
+exports.iconComponentPropTypes = exports.Icon = void 0;
 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 _useWindowDimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/useWindowDimensions"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Icon = exports.Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     icon: IconComponent,
     accessibilityLabel,
@@ -24,7 +25,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     testID,
     dataSet
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Icon', tokens, variant);
   const {
     fontScale
   } = (0, _useWindowDimensions.default)();
@@ -76,8 +77,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Icon.displayName = 'Icon';
 const iconComponentPropTypes = exports.iconComponentPropTypes = {
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Icon'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Icon'),
   /**
    * Descriptive label used in web SVG title tag for accessibility
    */
@@ -104,5 +105,4 @@ Icon.propTypes = {
    * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
    */
   icon: _propTypes.default.elementType.isRequired
-};
-var _default = exports.default = Icon;
+};

package/lib/cjs/Icon/IconText.js

@@ -3,19 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.IconText = 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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Icon = _interopRequireWildcard(require("./Icon"));
-var _StackView = require("../StackView");
-var _utils = require("../utils");
+var _Icon = require("./Icon");
+var _getStackedContent = require("../StackView/getStackedContent");
+var _spacingProps = require("../utils/props/spacingProps");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
@@ -24,7 +22,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * IconText does not wrap its children, so should be used either:
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
- */const IconText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const IconText = exports.IconText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     space,
     iconPosition = 'left',
@@ -32,7 +31,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     iconProps,
     children
   } = _ref;
-  const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+  const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
     ref: ref,
     icon: IconComponent,
     scalesWithText: true,
@@ -76,7 +75,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
       children: [children, " ", adjustedContainerWithPosition]
     });
   }
-  return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
+  return (0, _getStackedContent.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
   });
@@ -87,7 +86,7 @@ IconText.propTypes = {
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
    */
-  space: _utils.spacingProps.types.spacingValue,
+  space: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
@@ -112,5 +111,4 @@ const staticStyles = _StyleSheet.default.create({
   adjustedContainer: {
     position: 'absolute'
   }
-});
-var _default = exports.default = IconText;
+});

package/lib/cjs/IconButton/IconButton.js

@@ -3,16 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.IconButtonBase = exports.IconButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 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 _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _clickProps = require("../utils/props/clickProps");
+var _tokens = require("../utils/props/tokens");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _linkProps = require("../utils/props/linkProps");
+var _pressability = require("../utils/pressability");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _Icon = require("../Icon/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // function to get the dimentionals of the conditionals
@@ -22,7 +32,7 @@ const getPasswordDimensions = (password, width, height) => {
     height
   } : {};
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectOuterStyle = (_ref, password) => {
   let {
     backgroundColor,
@@ -40,8 +50,8 @@ const selectOuterStyle = (_ref, password) => {
   } = _ref;
   return [{
     backgroundColor,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...(0, _styles.applyShadowToken)(shadow),
+    ...(0, _styles.applyOuterBorder)({
       borderRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
@@ -125,7 +135,7 @@ const selectInnerStyle = (_ref2, password) => {
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const IconButtonBase = exports.IconButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant = {},
@@ -140,13 +150,13 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
+  } = _clickProps.clickProps.toPressProps(rawRest);
   const selectedProps = selectProps({
     ...rest,
     accessibilityRole
   });
   const handlePress = () => {
-    _utils.linkProps.handleHref({
+    _linkProps.linkProps.handleHref({
       href,
       onPress
     })({
@@ -159,8 +169,8 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...variant,
     inactive: true
   } : variant;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, mergedVariant);
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), mergedVariant.password));
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('IconButton', tokens, mergedVariant);
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _pressability.resolvePressableState)(pressableState), mergedVariant.password));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
@@ -171,24 +181,24 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     testID: testID,
     disabled: inactive,
     children: pressableState => {
-      const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
+      const themeTokens = getTokens((0, _pressability.resolvePressableState)(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectInnerStyle(themeTokens, mergedVariant.password),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
-          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
+          tokens: (0, _tokens.selectTokens)('Icon', themeTokens, 'icon'),
           variant: mergedVariant
         })
       });
     }
   });
 });
-IconButton.displayName = 'IconButton';
-IconButton.propTypes = {
+IconButtonBase.displayName = 'IconButton';
+IconButtonBase.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('IconButton'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('IconButton'),
   /**
    * A unique identifier for testing purposes.
    * Will be added as a `data-testid` attribute.
@@ -205,7 +215,7 @@ IconButton.propTypes = {
   /**
    * URL options to navigate to when the `Iconbutton` is pressed
    */
-  hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+  hrefAttrs: _propTypes.default.shape(_hrefAttrsProp.hrefAttrsProp.types),
   /**
    * Function to execute when the `Iconbutton` is pressed
    */
@@ -220,4 +230,7 @@ const staticStyles = _StyleSheet.default.create({
     alignSelf: 'baseline'
   }
 });
-var _default = exports.default = (0, _utils.withLinkRouter)(IconButton);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+const IconButton = exports.IconButton = (0, _withLinkRouter.withLinkRouter)(IconButtonBase);

package/lib/cjs/InputLabel/InputLabel.js

@@ -3,22 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.InputLabel = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _LabelContent = _interopRequireDefault(require("./LabelContent"));
-var _Tooltip = _interopRequireDefault(require("../Tooltip"));
-var _shared = _interopRequireDefault(require("../Tooltip/shared"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _LabelContent = require("./LabelContent");
+var _Tooltip = require("../Tooltip/Tooltip.native");
+var _shared = require("../Tooltip/shared");
 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.viewProps]);
-const selectLabelStyles = (tokens, themeOptions) => (0, _ThemeProvider.applyTextStyles)({
-  ...(0, _utils.selectTokens)('Typography', tokens),
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const selectLabelStyles = (tokens, themeOptions) => (0, _styles.applyTextStyles)({
+  ...(0, _tokens.selectTokens)('Typography', tokens),
   themeOptions
 });
 const selectHintStyles = (_ref, themeOptions) => {
@@ -29,7 +35,7 @@ const selectHintStyles = (_ref, themeOptions) => {
     hintFontWeight,
     hintLineHeight
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     color: hintColor,
     fontName: hintFontName,
     fontSize: hintFontSize,
@@ -46,7 +52,7 @@ const selectGapStyles = _ref2 => {
     marginRight: gap
   };
 };
-const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const InputLabel = exports.InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     label,
@@ -61,12 +67,12 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     maxCharacterAllowed,
     ...rest
   } = _ref3;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const getTooltipProps = () => {
     return typeof tooltip === 'string' ? {
       content: tooltip
@@ -79,7 +85,7 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [selectLabelStyles(themeTokens, themeOptions), selectGapStyles(themeTokens), staticStyles.label],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.LabelContent, {
           forId: forId,
           children: label
         })
@@ -92,7 +98,7 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height: themeTokens.fontSize * themeTokens.lineHeight,
           color: themeTokens.color
         }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
           copy: copy,
           ...getTooltipProps()
         })
@@ -149,7 +155,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: _propTypes.default.oneOfType([_propTypes.default.shape(_shared.default), _propTypes.default.string]),
+  tooltip: _propTypes.default.oneOfType([_propTypes.default.shape(_shared.propTypes), _propTypes.default.string]),
   /**
    * Current number of characterts of an input text.
    */
@@ -158,10 +164,9 @@ InputLabel.propTypes = {
    * Max number of characters that allows an input text.
    */
   maxCharacterAllowed: _propTypes.default.number,
-  tokens: (0, _utils.getTokensPropType)('InputLabel'),
-  variant: _utils.variantProp.propType
+  tokens: (0, _tokens.getTokensPropType)('InputLabel'),
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = InputLabel;
 const staticStyles = _StyleSheet.default.create({
   container: {
     flexShrink: 1,

package/lib/cjs/InputLabel/LabelContent.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.LabelContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const LabelContent = exports.LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     forId
@@ -31,5 +31,4 @@ const staticStyles = {
   inheritCursor: {
     cursor: 'inherit'
   }
-};
-var _default = exports.default = LabelContent;
+};

package/lib/cjs/InputLabel/LabelContent.native.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.LabelContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-const LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const LabelContent = exports.LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -22,5 +22,4 @@ const LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: _propTypes.default.node
-};
-var _default = exports.default = LabelContent;
+};