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

package/lib/cjs/SideNav/{Item.js → SideNavItem.js}

@@ -3,17 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SideNavItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _ItemContent = _interopRequireDefault(require("./ItemContent"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _linkProps = require("../utils/props/linkProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _styles = require("../ThemeProvider/utils/styles");
+var _SideNavItemContent = require("./SideNavItemContent");
 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.linkProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _linkProps.linkProps, _viewProps.viewProps]);
 function selectItemStyles(_ref) {
   let {
     backgroundColor,
@@ -37,16 +44,16 @@ function selectItemStyles(_ref) {
     paddingTop,
     paddingBottom,
     justifyContent,
-    ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign)
+    ...(0, _styles.verticalAlignRow)(verticalAlign)
   };
 }
 
 /**
- `SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.
+ `SideNavItem` is a navigational element that is used within `SideNav` or `SideNavItemsGroup`.
 
- This component can only be accessed as a name-spaced component: `SideNav.Item`.
+ This component can only be accessed as a name-spaced component: `SideNavItem`.
  */
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const SideNavItem = exports.SideNavItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     itemId,
@@ -65,7 +72,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const {
     hrefAttrs,
     rest
-  } = _utils.hrefAttrsProp.bundle(props);
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     accessibilityRole,
     href,
@@ -73,7 +80,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     hrefAttrs,
     ...rest
   });
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', tokens, variant);
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('SideNavItem', tokens, variant);
   const getAppearanceState = _ref3 => {
     let {
       hovered,
@@ -101,15 +108,15 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...selectedProps,
     children: pressableState => {
       const themeTokens = getTokens(getAppearanceState(pressableState));
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContent.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
         tokens: themeTokens,
         children: children
       });
     }
   });
 });
-Item.displayName = 'Item';
-Item.propTypes = {
+SideNavItem.displayName = 'SideNavItem';
+SideNavItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Text content of the `Item`.
@@ -131,7 +138,7 @@ Item.propTypes = {
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
    */
-  hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+  hrefAttrs: _propTypes.default.shape(_hrefAttrsProp.hrefAttrsProp.types),
   /**
    * @ignore
    * Set internally in `SideNav` render function.
@@ -139,12 +146,11 @@ Item.propTypes = {
   isActive: _propTypes.default.bool,
   /**
    * @ignore
-   * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
+   * Set internally in `SideNavItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: _propTypes.default.bool,
   accessibilityRole: _propTypes.default.string,
   testID: _propTypes.default.number,
-  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = Item;
+  tokens: (0, _tokens.getTokensPropType)('SideNavItem'),
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/SideNav/{ItemContent.js → SideNavItemContent.js}

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SideNavItemContent = void 0;
 exports.selectAccentStyles = selectAccentStyles;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _utils = require("../utils");
+var _Typography = require("../Typography/Typography");
+var _tokens = require("../utils/props/tokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function selectAccentStyles(tokens) {
@@ -27,14 +27,14 @@ function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const SideNavItemContent = exports.SideNavItemContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
   } = _ref;
-  const typographyTokens = (0, _utils.selectTokens)('Typography', tokens);
+  const typographyTokens = (0, _tokens.selectTokens)('Typography', tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
       tokens: typographyTokens,
       ref: ref,
       children: children
@@ -43,14 +43,13 @@ const ItemContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     })]
   });
 });
-ItemContent.displayName = 'ItemContent';
-ItemContent.propTypes = {
-  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
+SideNavItemContent.displayName = 'SideNavItemContent';
+SideNavItemContent.propTypes = {
+  tokens: (0, _tokens.getTokensPropType)('SideNavItem'),
   children: _propTypes.default.node
 };
 const staticStyles = _StyleSheet.default.create({
   absolute: {
     position: 'absolute'
   }
-});
-var _default = exports.default = ItemContent;
+});

package/lib/cjs/SideNav/{ItemsGroup.js → SideNavItemsGroup.js}

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SideNavItemsGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ItemContent = _interopRequireDefault(require("./ItemContent"));
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
+var _SideNavItemContent = require("./SideNavItemContent");
+var _ExpandCollapsePanel = require("../ExpandCollapse/ExpandCollapsePanel");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _componentPropType = require("../utils/props/componentPropType");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectPanelTokens = _ref => {
@@ -28,14 +30,14 @@ const selectPanelTokens = _ref => {
 /**
  Expandable content areas for use within `SideNav`.
 
- This component can only be accessed as a name-spaced component: `SideNav.ItemsGroup`.
+ This component can only be accessed as a name-spaced component: `SideNavItemsGroup`.
 
- `SideNav.ItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
+ `SideNavItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
 
  ## Usage Criteria
- - Use `SideNav.ItemsGroup` with large pages that have multiple sections
+ - Use `SideNavItemsGroup` with large pages that have multiple sections
  */
-const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const SideNavItemsGroup = exports.SideNavItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     label,
@@ -58,15 +60,15 @@ const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...getAppearance(appearance),
     type: 'parent'
   });
-  const getGroupTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
-  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
-  const getPanelTokens = appearance => (0, _utils.selectTokens)('ExpandCollapsePanel', {
+  const getGroupTokens = (0, _useThemeTokens.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
+  const getItemTokens = (0, _useThemeTokens.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
+  const getPanelTokens = appearance => (0, _tokens.selectTokens)('ExpandCollapsePanel', {
     ...staticTokens.panel,
     ...getGroupTokens(getAppearance(appearance)),
     ...selectPanelTokens(getItemTokens(getItemAppearance(appearance)))
   });
   const getControlTokens = appearance => ({
-    ...(0, _utils.selectTokens)('ExpandCollapseControl', {
+    ...(0, _tokens.selectTokens)('ExpandCollapseControl', {
       ...getItemTokens(getItemAppearance(appearance)),
       // main style from SideNavItem
       ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc,
@@ -75,7 +77,7 @@ const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   const controlContent = controlState => {
     const currentItemTokens = getItemTokens(getItemAppearance(controlState));
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContent.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
       tokens: {
         ...currentItemTokens,
         ...staticTokens.content
@@ -83,7 +85,7 @@ const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       children: label
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapsePanel.ExpandCollapsePanel, {
     ref: ref,
     openIds: openGroups,
     panelId: groupId,
@@ -93,7 +95,7 @@ const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     control: controlContent,
     accessibilityState: {
       active: isActive
-    } // ExpandCollapse.Panel handles expanded state
+    } // ExpandCollapsePanel handles expanded state
     ,
     disableMobileScrollBuffer: true,
     children: children
@@ -112,14 +114,14 @@ const staticTokens = {
     accentWidth: 0
   }
 };
-ItemsGroup.displayName = 'ItemsGroup';
-ItemsGroup.propTypes = {
+SideNavItemsGroup.displayName = 'SideNavItemsGroup';
+SideNavItemsGroup.propTypes = {
   /**
-   * Specifies the links contained within. It may only contain `SideNav.Item`.
+   * Specifies the links contained within. It may only contain `SideNavItem`.
    */
-  children: (0, _utils.componentPropType)('Item'),
+  children: (0, _componentPropType.componentPropType)('Item'),
   /**
-   * Text content of the group's parent `SideNav.Item`.
+   * Text content of the group's parent `SideNavItem`.
    */
   label: _propTypes.default.string.isRequired,
   /**
@@ -139,14 +141,13 @@ ItemsGroup.propTypes = {
   openGroups: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
   /**
    * @ignore
-   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
+   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNavItem`.
    */
   isActive: _propTypes.default.bool,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('SideNavItemsGroup'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('SideNavItemsGroup'),
   /**
-   * Custom tokens for `SideNav.Item`
+   * Custom tokens for `SideNavItem`
    */
-  itemTokens: (0, _utils.getTokensPropType)('SideNavItem')
-};
-var _default = exports.default = ItemsGroup;
+  itemTokens: (0, _tokens.getTokensPropType)('SideNavItem')
+};

package/lib/cjs/Skeleton/Skeleton.js

@@ -3,21 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Skeleton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _useSkeletonNativeAnimation = _interopRequireDefault(require("./useSkeletonNativeAnimation"));
-var _skeletonWebAnimation = _interopRequireDefault(require("./skeletonWebAnimation"));
+var _StackView = require("../StackView/StackView");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _responsiveProps = require("../utils/props/responsiveProps");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _useSpacingScale = require("../utils/useSpacingScale");
+var _spacingProps = require("../utils/props/spacingProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _useSkeletonNativeAnimation = require("./useSkeletonNativeAnimation");
+var _skeletonWebAnimation = require("./skeletonWebAnimation");
 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 selectSkeletonStyles = _ref => {
   let {
     color,
@@ -58,20 +66,19 @@ const selectSquareStyles = _ref4 => {
     borderRadius: radius
   };
 };
-const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Skeleton = exports.Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     tokens,
     variant,
-    size,
-    sizeIndex = size,
+    sizeIndex,
     sizePixels,
     characters,
     lines,
     shape = 'line',
     ...rest
   } = _ref5;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
-  const pixels = (0, _utils.useResponsiveProp)(sizePixels);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Skeleton', tokens, variant);
+  const pixels = (0, _useResponsiveProp.useResponsiveProp)(sizePixels);
   const spacingScaleValue = typeof pixels === 'number' ?
   // Size by an exact number of pixels
   {
@@ -81,18 +88,18 @@ const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   } :
   // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
+  const skeletonHeight = (0, _useSpacingScale.useSpacingScale)(spacingScaleValue);
 
   // Animation color and animation duration
   const {
     secondColor,
     animationDuration
   } = themeTokens;
-  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)({
+  const nativeAnimation = (0, _useSkeletonNativeAnimation.useSkeletonNativeAnimation)({
     animationDuration
   });
   const getAnimationBasedOnPlatform = () => {
-    const animation = _Platform.default.OS === 'web' ? (0, _skeletonWebAnimation.default)(secondColor, animationDuration) : nativeAnimation;
+    const animation = _Platform.default.OS === 'web' ? (0, _skeletonWebAnimation.skeletonWebAnimation)(secondColor, animationDuration) : nativeAnimation;
     // We must pass the animation styles through `StyleSheet.create`
     // @see https://github.com/necolas/react-native-web/issues/2387
     const styles = _StyleSheet.default.create({
@@ -134,7 +141,7 @@ const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
     }, `skeleton-${index + 1}`);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
     space: themeTokens.spaceBetweenLines,
     ref: ref,
     ...selectProps(rest),
@@ -144,24 +151,20 @@ const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
 Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Skeleton'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Skeleton'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
    *
    * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
    */
-  sizeIndex: _utils.spacingProps.types.spacingValue,
-  /**
-   * @deprecated alias for `sizeIndex`
-   */
-  size: _utils.spacingProps.types.spacingValue,
+  sizeIndex: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
    *
    * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
    */
-  sizePixels: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
+  sizePixels: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
   /**
    * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
    *
@@ -180,5 +183,4 @@ Skeleton.propTypes = {
    * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
    */
   shape: _propTypes.default.oneOf(['line', 'circle', 'box'])
-};
-var _default = exports.default = Skeleton;
+};

package/lib/cjs/Skeleton/skeletonWebAnimation.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.skeletonWebAnimation = void 0;
 const skeletonWebAnimation = (secondColor, animationTime) => {
   return {
     animationDuration: `${animationTime}ms`,
@@ -17,4 +17,4 @@ const skeletonWebAnimation = (secondColor, animationTime) => {
     }
   };
 };
-var _default = exports.default = skeletonWebAnimation;
+exports.skeletonWebAnimation = skeletonWebAnimation;

package/lib/cjs/Skeleton/useSkeletonNativeAnimation.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useSkeletonNativeAnimation = void 0;
 var _react = require("react");
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -32,4 +32,4 @@ const useSkeletonNativeAnimation = _ref => {
     opacity: fadeAnimation
   };
 };
-var _default = exports.default = useSkeletonNativeAnimation;
+exports.useSkeletonNativeAnimation = useSkeletonNativeAnimation;

package/lib/cjs/SkipLink/SkipLink.js

@@ -3,18 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SkipLinkBase = exports.SkipLink = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _clickProps = require("../utils/props/clickProps");
+var _tokens = require("../utils/props/tokens");
+var _linkProps = require("../utils/props/linkProps");
+var _pressability = require("../utils/pressability");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _withLinkRouter = require("../utils/withLinkRouter");
 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.linkProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _linkProps.linkProps]);
 
 // ensure explicit selection of tokens
 const selectStyles = _ref => {
@@ -112,7 +119,7 @@ const selectTextStyles = _ref2 => {
  *
  * Skip link supports all the common a11y and link props.
  */
-const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const SkipLinkBase = exports.SkipLinkBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -123,8 +130,8 @@ const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SkipLink', tokens, variant);
+  } = _clickProps.clickProps.toPressProps(rawRest);
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('SkipLink', tokens, variant);
   const handlePress = event => {
     if (typeof onPress === 'function') onPress(event);
     // TODO - support native apps with something based on refs and/or setAccessibilityFocus
@@ -135,7 +142,7 @@ const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     onPress: handlePress,
     href: href,
     style: pressableState => {
-      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
+      const themeTokens = (0, _pressability.resolvePressableTokens)(getTokens, pressableState);
       const skipLinkStyle = selectStyles(themeTokens);
       const {
         focused
@@ -144,7 +151,7 @@ const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     },
     ...selectProps(rest),
     children: pressableState => {
-      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
+      const themeTokens = (0, _pressability.resolvePressableTokens)(getTokens, pressableState);
       const textStyles = selectTextStyles(themeTokens);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [textStyles, staticStyles.baseline],
@@ -153,8 +160,8 @@ const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
   });
 });
-SkipLink.displayName = 'SkipLink';
-SkipLink.propTypes = {
+SkipLinkBase.displayName = 'SkipLink';
+SkipLinkBase.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * The text content shown or read out when the SkipLink is focused, usually a string.
@@ -164,8 +171,8 @@ SkipLink.propTypes = {
    * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
    */
   href: _propTypes.default.string,
-  tokens: (0, _utils.getTokensPropType)('SkipLink'),
-  variant: _utils.variantProp.propType
+  tokens: (0, _tokens.getTokensPropType)('SkipLink'),
+  variant: _variantProp.variantProp.propType
 };
 const staticStyles = _StyleSheet.default.create({
   baseline: {
@@ -193,4 +200,7 @@ const staticStyles = _StyleSheet.default.create({
     })
   }
 });
-var _default = exports.default = (0, _utils.withLinkRouter)(SkipLink);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+const SkipLink = exports.SkipLink = (0, _withLinkRouter.withLinkRouter)(SkipLinkBase);

package/lib/cjs/Spacer/Spacer.js

@@ -3,20 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Spacer = 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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _utils = require("../utils");
-var _useMediaQuerySpacing = _interopRequireDefault(require("../utils/useMediaQuerySpacing"));
-var _useTheme = _interopRequireDefault(require("../ThemeProvider/useTheme"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _spacingProps = require("../utils/props/spacingProps");
+var _useSpacingScale = require("../utils/useSpacingScale");
+var _viewProps = require("../utils/props/viewProps");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _useMediaQuerySpacing = require("../utils/useMediaQuerySpacing");
+var _useTheme = require("../ThemeProvider/useTheme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
- */const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+ */const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectSizeStyle = (size, direction) => ({
   // Only apply space in one direction at a time, else large spacers will increase the
   // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
@@ -63,7 +68,7 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-const Spacer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Spacer = exports.Spacer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     space = 1,
     direction = 'column',
@@ -74,11 +79,11 @@ const Spacer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _useTheme.default)();
+  } = (0, _useTheme.useTheme)();
   const {
     sizeByViewport
-  } = (0, _useMediaQuerySpacing.default)(space);
-  const fallbackSize = (0, _utils.useSpacingScale)(space);
+  } = (0, _useMediaQuerySpacing.useMediaQuerySpacing)(space);
+  const fallbackSize = (0, _useSpacingScale.useSpacingScale)(space);
   const sizeStyle = selectSizeStyle(fallbackSize, direction);
   let spacerStyles;
   let dataSetValue = dataSet;
@@ -106,11 +111,11 @@ const Spacer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         ...staticStyles.stretch
       }
     };
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       spacer: {
         ...mediaQueryStyles
       }
@@ -138,7 +143,7 @@ Spacer.propTypes = {
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
-  space: _utils.spacingProps.types.spacingValue,
+  space: _spacingProps.spacingProps.types.spacingValue,
   /**
    * The spacer applies space in only one direction, which is controlled by the `direction` prop:
    *
@@ -156,5 +161,4 @@ const staticStyles = _StyleSheet.default.create({
   stretch: {
     alignSelf: 'stretch'
   }
-});
-var _default = exports.default = Spacer;
+});