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

package/lib/cjs/StackView/StackView.js

@@ -3,18 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StackView = 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 _Divider = _interopRequireDefault(require("../Divider"));
-var _utils = require("../utils");
-var _useTheme = _interopRequireDefault(require("../ThemeProvider/useTheme"));
-var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+var _Divider = require("../Divider/Divider");
+var _a11yProps = require("../utils/props/a11yProps");
+var _semantics = require("../utils/a11y/semantics");
+var _tokens = require("../utils/props/tokens");
+var _responsiveProps = require("../utils/props/responsiveProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _spacingProps = require("../utils/props/spacingProps");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _useAllViewportTokens = require("../utils/ssr-media-query/utils/use-all-viewport-tokens");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _getStackedContent = require("./getStackedContent");
 var _common = require("./common");
 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]);
 
 /**
  * StackView evenly spaces its children, by default placing `Spacer` components between them.
@@ -58,7 +68,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
-const StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const StackView = exports.StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     space = 0,
     divider,
@@ -71,23 +81,23 @@ const StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
-  const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
+  const direction = (0, _useResponsiveProp.useResponsiveProp)(directionProp, 'column');
   const {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _useTheme.default)();
+  } = (0, _useTheme.useTheme)();
   const selectedProps = selectProps({
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...rest
   });
-  const content = (0, _getStackedContent.default)(children, {
+  const content = (0, _getStackedContent.getStackedContent)(children, {
     direction,
     divider,
     space
   });
-  const allTokens = (0, _utils.useAllViewportTokens)('StackView', tokens, variant);
+  const allTokens = (0, _useAllViewportTokens.useAllViewportTokens)('StackView', tokens, variant);
   let stackViewStyles;
   let dataSetValue = dataSet;
   if (enableMediaQueryStyleSheet) {
@@ -113,11 +123,11 @@ const StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         width: allTokens.xl.width
       }
     };
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       stackView: {
         ...mediaQueryStyles
       }
@@ -145,30 +155,30 @@ const StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 StackView.displayName = 'StackView';
 StackView.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('StackView'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('StackView'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
    */
-  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
+  direction: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
   /**
    * If true, renders a UDS `Divider` component between each item. If an object is passed,
    * this object is passes as props to each Divider.
    */
-  divider: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape(_Divider.default.propTypes)]),
+  divider: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape(_Divider.Divider.propTypes)]),
   /**
    * The size of the spacer according to the theme's spacing scale.
    * 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,
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: _propTypes.default.oneOf(_semantics.layoutTags),
   /**
    * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
@@ -179,5 +189,4 @@ StackView.propTypes = {
    * this will include media query IDs for responsive styling.
    */
   dataSet: _propTypes.default.object
-};
-var _default = exports.default = StackView;
+};

package/lib/cjs/StackView/StackWrap.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StackWrap = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _useSafeLayoutEffect = _interopRequireDefault(require("../utils/useSafeLayoutEffect"));
-var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
-var _StackWrapGap = _interopRequireDefault(require("./StackWrapGap"));
+var _useSafeLayoutEffect = require("../utils/useSafeLayoutEffect");
+var _StackWrapBox = require("./StackWrapBox");
+var _StackWrapGap = require("./StackWrapGap");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
@@ -25,7 +25,7 @@ const exampleGapValue = '1px';
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-const StackWrap = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const StackWrap = exports.StackWrap = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [canUseCSSGap, setCanUseCSSGap] = _react.default.useState(false);
   const {
     space
@@ -38,10 +38,10 @@ const StackWrap = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   // preserving direct parent-child relationships between the container and each item, which
   // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).
   // Else, use the fallback implementation which renders a `Box` component around each child.
-  const Component = canUseCSSGap ? _StackWrapGap.default : _StackWrapBox.default;
+  const Component = canUseCSSGap ? _StackWrapGap.StackWrapGap : _StackWrapBox.StackWrapBox;
   // In SSR, the type of implementation must match the server during hydration, but
   // the server can't know if gap is supported, so never use it until after hydration.
-  (0, _useSafeLayoutEffect.default)(() => {
+  (0, _useSafeLayoutEffect.useSafeLayoutEffect)(() => {
     setCanUseCSSGap(gapEqualsSpace && cssSupports('gap', exampleGapValue));
   }, [gapEqualsSpace]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
@@ -50,5 +50,4 @@ const StackWrap = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   });
 });
 StackWrap.displayName = 'StackWrap';
-StackWrap.propTypes = _StackWrapBox.default.propTypes;
-var _default = exports.default = StackWrap;
+StackWrap.propTypes = _StackWrapBox.StackWrapBox.propTypes;

package/lib/cjs/StackView/StackWrap.native.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
-var _default = exports.default = _StackWrapBox.default;
+Object.defineProperty(exports, "StackWrap", {
+  enumerable: true,
+  get: function () {
+    return _StackWrapBox.StackWrapBox;
+  }
+});
+var _StackWrapBox = require("./StackWrapBox");

package/lib/cjs/StackView/StackWrapBox.js

@@ -3,18 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StackWrapBox = 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 _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _semantics = require("../utils/a11y/semantics");
+var _tokens = require("../utils/props/tokens");
+var _responsiveProps = require("../utils/props/responsiveProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _spacingProps = require("../utils/props/spacingProps");
+var _useSpacingScale = require("../utils/useSpacingScale");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _viewProps = require("../utils/props/viewProps");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _getStackedContent = require("./getStackedContent");
 var _common = require("./common");
 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 offsetSides = {
   row: 'marginBottom',
   column: 'marginRight'
@@ -40,7 +48,7 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const StackWrapBox = exports.StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     space = 1,
     gap = space,
@@ -52,20 +60,20 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityRole,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const direction = (0, _useResponsiveProp.useResponsiveProp)(directionProp, 'row');
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
   const selectedProps = selectProps({
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...rest
   });
 
   // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
-  const gapSize = (0, _utils.useSpacingScale)(gap);
+  const gapSize = (0, _useSpacingScale.useSpacingScale)(gap);
   const offsetStyle = {
     [offsetSides[direction]]: -1 * gapSize
   };
@@ -73,7 +81,7 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     [gapSides[direction]]: gap,
     [spaceSides[direction]]: space
   };
-  const content = (0, _getStackedContent.default)(children, {
+  const content = (0, _getStackedContent.getStackedContent)(children, {
     direction,
     space: 0,
     box: boxProps
@@ -88,34 +96,33 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 StackWrapBox.displayName = 'StackWrapBox';
 StackWrapBox.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('StackView'),
+  tokens: (0, _tokens.getTokensPropType)('StackView'),
   /**
    * Sets the `flexDirection` of the container
    */
-  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
+  direction: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
   /**
    * The size of the space between items according to the theme's spacing scale.
    * 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 size of the space between lines of content, according to the theme's spacing scale. By default, matches `space`.
    * 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).
    */
-  gap: _utils.spacingProps.types.spacingValue,
+  gap: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: _propTypes.default.oneOf(_semantics.layoutTags),
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
    */
   children: _propTypes.default.node
-};
-var _default = exports.default = StackWrapBox;
+};

package/lib/cjs/StackView/StackWrapGap.js

@@ -3,18 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StackWrapGap = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+var _StackWrapBox = require("./StackWrapBox");
+var _a11yProps = require("../utils/props/a11yProps");
+var _semantics = require("../utils/a11y/semantics");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useSpacingScale = require("../utils/useSpacingScale");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _viewProps = require("../utils/props/viewProps");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _getStackedContent = require("./getStackedContent");
 var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  * The primary implementation of StackWrap.
@@ -26,7 +31,7 @@ const [selectProps] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.vi
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const StackWrapGap = exports.StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     space = 1,
     tokens,
@@ -37,22 +42,22 @@ const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityRole,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const direction = (0, _useResponsiveProp.useResponsiveProp)(directionProp, 'row');
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
   const selectedProps = selectProps({
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...rest
   });
-  const size = (0, _utils.useSpacingScale)(space);
+  const size = (0, _useSpacingScale.useSpacingScale)(space);
   const gapStyle = {
     gap: size
   };
-  const content = (0, _getStackedContent.default)(children, {
+  const content = (0, _getStackedContent.getStackedContent)(children, {
     direction,
     space: 0
   });
@@ -64,5 +69,4 @@ const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 StackWrapGap.displayName = 'StackWrapGap';
-StackWrapGap.propTypes = _StackWrapBox.default.propTypes;
-var _default = exports.default = StackWrapGap;
+StackWrapGap.propTypes = _StackWrapBox.StackWrapBox.propTypes;

package/lib/cjs/StackView/common.js

@@ -24,7 +24,8 @@ exports.selectFlexStyles = selectFlexStyles;
 const staticStyles = exports.staticStyles = _StyleSheet.default.create({
   wrap: {
     flexShrink: 1,
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    alignContent: 'stretch'
   },
   row: {
     flexDirection: 'row'

package/lib/cjs/StackView/getStackedContent.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getStackedContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("../Box"));
-var _Divider = _interopRequireDefault(require("../Divider"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _Box = require("../Box/Box");
+var _Divider = require("../Divider/Divider");
+var _Spacer = require("../Spacer/Spacer");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
@@ -37,7 +35,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @param {"row" | "column" | "row-reverse" | "column-reverse"} [options.direction]
  * @param {boolean} [options.preserveFragments]
  * @returns {ReactElement[]}
- */const getStackedContent = (children, _ref) => {
+ */
+const getStackedContent = (children, _ref) => {
   let {
     divider,
     space,
@@ -59,7 +58,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
     // If possible, use an existing content key; use an index-based key only if necessary.
-    (0, _react.createElement)(_Box.default, {
+    (0, _react.createElement)(_Box.Box, {
       ...boxProps,
       key: child.key || boxID,
       testID: boxID
@@ -70,11 +69,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
       testID,
       space
     };
-    const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+    const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.Divider, {
       vertical: direction.startsWith('row'),
       ...dividerProps,
       ...commonProps
-    }, testID) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }, testID) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
       direction: direction.startsWith('row') ? 'row' : 'column',
       ...commonProps
     }, testID);
@@ -115,6 +114,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @param {ReactChildren} child
  * @returns {ReactChildren}
  */
+exports.getStackedContent = getStackedContent;
 const unpackFragment = child => {
   // If this level is a set of top-level siblings rather than one child, check each in turn
   if (_react.default.Children.count(child) > 1) return _react.default.Children.map(child, unpackFragment);
@@ -124,5 +124,4 @@ const unpackFragment = child => {
 
   // Stop unpacking as soon as any non-fragment child is found
   return child;
-};
-var _default = exports.default = getStackedContent;
+};

package/lib/cjs/Status/Status.js

@@ -3,18 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Status = void 0;
 var _react = _interopRequireDefault(require("react"));
 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 _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _styles = require("../ThemeProvider/utils/styles");
+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 _children = require("../utils/children");
+var _transformGradient = require("../utils/transformGradient");
+var _Icon = require("../Icon/Icon");
 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 selectContainerStyles = _ref => {
   let {
     backgroundColor,
@@ -38,7 +45,7 @@ const selectContainerStyles = _ref => {
   };
   if (backgroundGradient) {
     if (_Platform.default.OS === 'web') {
-      styles.background = (0, _utils.transformGradient)(backgroundGradient);
+      styles.background = (0, _transformGradient.transformGradient)(backgroundGradient);
     } else {
       const {
         stops: [stopOne, stopTwo]
@@ -87,7 +94,7 @@ const selectTextStyles = _ref3 => {
     fontWeight,
     marginLeft
   } = _ref3;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontColor: textColor,
     fontName,
     fontSize,
@@ -110,7 +117,7 @@ const selectTextStyles = _ref3 => {
  * @param {React.Ref} ref - The ref to be applied to the status component.
  * @returns {ReactNode} The rendered status component.
  */
-const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const Status = exports.Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     tokens,
     variant,
@@ -118,7 +125,7 @@ const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     customGradient,
     ...rest
   } = _ref4;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Status', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Status', tokens, variant);
   const {
     icon
   } = themeTokens;
@@ -127,9 +134,9 @@ const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     ...staticStyles.container
   };
   let content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       ...selectIconProps(themeTokens)
-    }) : null, (0, _utils.wrapStringsInText)(children, {
+    }) : null, (0, _children.wrapStringsInText)(children, {
       style: selectTextStyles(themeTokens)
     })]
   });
@@ -146,8 +153,8 @@ const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
 Status.displayName = 'Status';
 Status.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Status'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Status'),
+  variant: _variantProp.variantProp.propType,
   /**
    * The content to be displayed inside the status component.
    */
@@ -172,5 +179,4 @@ const staticStyles = _StyleSheet.default.create({
       }
     })
   }
-});
-var _default = exports.default = Status;
+});