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

package/lib/cjs/Box/Box.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Box = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -12,15 +12,28 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _backgroundImageStylesMap = _interopRequireWildcard(require("./backgroundImageStylesMap"));
-var _ViewportProvider = require("../ViewportProvider");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useResponsiveThemeTokens = require("../ThemeProvider/useResponsiveThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _createMediaQueryStyles = require("../utils/ssr-media-query/utils/create-media-query-styles");
+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 _useSpacingScale = require("../utils/useSpacingScale");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _getSpacingScale = require("../utils/getSpacingScale");
+var _formatImageSource = require("../utils/formatImageSource");
+var _backgroundImageStylesMap = require("./backgroundImageStylesMap");
+var _useViewport = require("../ViewportProvider/useViewport");
 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 }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
@@ -98,7 +111,7 @@ const setBackgroundImage = _ref2 => {
         children: content
       });
     }
-    const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
+    const positionStyles = _backgroundImageStylesMap.backgroundImageStylesMap[positionKey] || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: staticStyles.containContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
@@ -191,7 +204,7 @@ const setBackgroundImage = _ref2 => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -215,27 +228,27 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   } = _ref3;
   const props = {
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const {
     enableMediaQueryStyleSheet
   } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const useTokens = enableMediaQueryStyleSheet ? _useResponsiveThemeTokens.useResponsiveThemeTokens : _useThemeTokens.useThemeTokens;
   const themeTokens = useTokens('Box', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
-  const getSpacingTokens = (0, _ThemeProvider.useThemeTokensCallback)('spacingScale');
+  const getSpacingTokens = (0, _useThemeTokens.useThemeTokensCallback)('spacingScale');
   let boxStyles = {
     flex,
-    paddingLeft: (0, _utils.useSpacingScale)(left),
-    paddingRight: (0, _utils.useSpacingScale)(right),
-    paddingTop: (0, _utils.useSpacingScale)(top),
-    paddingBottom: (0, _utils.useSpacingScale)(bottom),
+    paddingLeft: (0, _useSpacingScale.useSpacingScale)(left),
+    paddingRight: (0, _useSpacingScale.useSpacingScale)(right),
+    paddingTop: (0, _useSpacingScale.useSpacingScale)(top),
+    paddingBottom: (0, _useSpacingScale.useSpacingScale)(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
   let boxMediaIds;
@@ -245,19 +258,19 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     } = Object.entries(themeTokens).reduce((acc, _ref4) => {
       let [vp] = _ref4;
       acc.transformedThemeTokens[vp] = {
-        paddingLeft: (0, _utils.getSpacingScale)(left, vp, getSpacingTokens),
-        paddingRight: (0, _utils.getSpacingScale)(right, vp, getSpacingTokens),
-        paddingTop: (0, _utils.getSpacingScale)(top, vp, getSpacingTokens),
-        paddingBottom: (0, _utils.getSpacingScale)(bottom, vp, getSpacingTokens)
+        paddingLeft: (0, _getSpacingScale.getSpacingScale)(left, vp, getSpacingTokens),
+        paddingRight: (0, _getSpacingScale.getSpacingScale)(right, vp, getSpacingTokens),
+        paddingTop: (0, _getSpacingScale.getSpacingScale)(top, vp, getSpacingTokens),
+        paddingBottom: (0, _getSpacingScale.getSpacingScale)(bottom, vp, getSpacingTokens)
       };
       return acc;
     }, {
       transformedThemeTokens: {}
     });
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedThemeTokens);
+    const mediaQueryStyles = (0, _createMediaQueryStyles.createMediaQueryStyles)(transformedThemeTokens);
     const {
       ids
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       box: {
         ...mediaQueryStyles
       }
@@ -277,10 +290,10 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     position = '',
     align = ''
   } = backgroundImage || {};
-  const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
-  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
-  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
-  const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  const backgroundImageResizeMode = (0, _useResponsiveProp.useResponsiveProp)(resizeMode, 'cover');
+  const backgroundImagePosition = (0, _useResponsiveProp.useResponsiveProp)(position);
+  const backgroundImageAlign = (0, _useResponsiveProp.useResponsiveProp)(align);
+  const imageSourceViewport = (0, _formatImageSource.formatImageSource)((0, _useResponsiveProp.useResponsiveProp)(src));
   if (backgroundImage && src) {
     const {
       paddingTop,
@@ -361,50 +374,50 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 Box.displayName = 'Box';
 Box.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Box'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Box'),
   /**
    * Sets default padding on all sides of the box using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  space: _utils.spacingProps.types.spacingValue,
+  space: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Sets top and bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  vertical: _utils.spacingProps.types.spacingValue,
+  vertical: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Sets left and right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  horizontal: _utils.spacingProps.types.spacingValue,
+  horizontal: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Sets bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  bottom: _utils.spacingProps.types.spacingValue,
+  bottom: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Sets left padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  left: _utils.spacingProps.types.spacingValue,
+  left: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Sets right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  right: _utils.spacingProps.types.spacingValue,
+  right: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Sets top padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  top: _utils.spacingProps.types.spacingValue,
+  top: _spacingProps.spacingProps.types.spacingValue,
   /**
    * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
    *
@@ -426,7 +439,7 @@ Box.propTypes = {
    * 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),
   /**
    * Use in tests if the box itself needs to be targetted and no other way of selecting the
    * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
@@ -452,12 +465,11 @@ Box.propTypes = {
     // src is an object when used responsively to provide different image sources for different screen sizes
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
-    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
-    position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
-    align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
+    resizeMode: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
+    align: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
   })
 };
-var _default = exports.default = Box;
 const staticStyles = _StyleSheet.default.create({
   imageBackground: {
     width: '100%',

package/lib/cjs/Box/backgroundImageStylesMap.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.backgroundPositions = void 0;
+exports.backgroundPositions = exports.backgroundImageStylesMap = void 0;
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const webStyles = {
@@ -205,4 +205,4 @@ const nativeStyles = {
   }
 };
 const backgroundPositions = exports.backgroundPositions = _Platform.default.OS === 'web' ? webBackgroundPositions : {};
-var _default = exports.default = _Platform.default.OS === 'web' ? webStyles : nativeStyles;
+const backgroundImageStylesMap = exports.backgroundImageStylesMap = _Platform.default.OS === 'web' ? webStyles : nativeStyles;

package/lib/cjs/Button/Button.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Button = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _propTypes = _interopRequireWildcard(require("./propTypes"));
-var _ThemeProvider = require("../ThemeProvider");
-var _props = require("../utils/props");
-var _ViewportProvider = require("../ViewportProvider");
+var _ButtonBase = require("./ButtonBase");
+var _propTypes = require("./propTypes");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useResponsiveThemeTokensCallback = require("../ThemeProvider/useResponsiveThemeTokensCallback");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _a11yProps = require("../utils/props/a11yProps");
+var _useViewport = require("../ViewportProvider/useViewport");
 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 }; }
-const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Button = exports.Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'button',
     tokens,
@@ -22,19 +22,19 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     heightFull = true,
     ...props
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const buttonVariant = enableMediaQueryStyleSheet ? variant : {
     viewport,
     ...variant
   };
-  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokensCallback : _ThemeProvider.useThemeTokensCallback;
+  const useTokens = enableMediaQueryStyleSheet ? _useResponsiveThemeTokensCallback.useResponsiveThemeTokensCallback : _useThemeTokens.useThemeTokensCallback;
   const getTokens = useTokens('Button', tokens, buttonVariant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
     ...props,
     tokens: getTokens,
     heightFull: heightFull,
@@ -45,8 +45,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Button.displayName = 'Button';
 Button.propTypes = {
-  ..._props.a11yProps.types,
-  ..._propTypes.default,
+  ..._a11yProps.a11yProps.types,
+  ..._propTypes.buttonPropTypes,
   children: _propTypes.textAndA11yText
-};
-var _default = exports.default = Button;
+};

package/lib/cjs/Button/ButtonBase.js

@@ -3,20 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ButtonBase = 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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ThemeProvider = require("../ThemeProvider");
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
-var _utils = require("../utils");
-var _Icon = require("../Icon");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _propTypes2 = require("./propTypes");
+var _a11yProps = require("../utils/props/a11yProps");
+var _clickProps = require("../utils/props/clickProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _pressability = require("../utils/pressability");
+var _linkProps = require("../utils/props/linkProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _viewProps = require("../utils/props/viewProps");
+var _children = require("../utils/children");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _contentfulProps = require("../utils/props/contentfulProps");
+var _createMediaQueryStyles = require("../utils/ssr-media-query/utils/create-media-query-styles");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _IconText = require("../Icon/IconText");
 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.linkProps, _utils.viewProps, _utils.contentfulProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _linkProps.linkProps, _viewProps.viewProps, _contentfulProps.contentfulProps]);
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,
@@ -61,7 +73,7 @@ const selectOuterContainerStyles = (_ref3, heightFull) => {
         alignSelf: 'flex-start'
       }
     }),
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...(0, _styles.applyOuterBorder)({
       outerBorderGap,
       outerBorderWidth,
       outerBorderColor,
@@ -163,7 +175,7 @@ const selectInnerContainerStyles = _ref5 => {
     }),
     backgroundColor,
     minWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...(0, _styles.applyShadowToken)(shadow)
   };
 };
 const selectBorderStyles = _ref7 => {
@@ -197,7 +209,7 @@ const selectTextStyles = (_ref8, themeOptions) => {
     textLine,
     textLineStyle
   } = _ref8;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontSize,
     color,
     lineHeight,
@@ -220,32 +232,32 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref9) => {
       width: 'fit-content',
       outline: 'none',
       // removes the default browser :focus outline
-      ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)
+      ...(0, _pressability.getCursorStyle)(inactive, accessibilityRole)
     },
     default: {}
   });
 };
-const selectButtonStyles = _ref10 => {
+const selectButtonStyles = _ref0 => {
   let {
     textAlign
-  } = _ref10;
+  } = _ref0;
   return {
     flexDirection: 'row',
     justifyContent: textAlign
   };
 };
-const selectItemIconTokens = _ref11 => {
+const selectItemIconTokens = _ref1 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref11;
+  } = _ref1;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
+const ButtonBaseInner = /*#__PURE__*/_react.default.forwardRef((_ref10, ref) => {
   let {
     id,
     href,
@@ -261,10 +273,10 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     iconProps,
     heightFull = true,
     ...rawRest
-  } = _ref12;
+  } = _ref10;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const {
     viewport
   } = rawRest;
@@ -272,13 +284,13 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
+  } = _clickProps.clickProps.toPressProps(rawRest);
   const extraButtonState = {
     inactive,
     selected,
     iconPosition
   };
-  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
+  const resolveButtonTokens = pressableState => (0, _pressability.resolvePressableTokens)(tokens, pressableState, extraButtonState);
   const systemProps = selectProps(rest);
   let layoutMediaQueryStyles;
   let flexAndWidthStylesIds;
@@ -289,8 +301,8 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
       focused: false
     };
     const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
-    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
-      let [vp, viewportTokens] = _ref13;
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref11) => {
+      let [vp, viewportTokens] = _ref11;
       const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
       acc[vp] = {
         ...staticStyles.row,
@@ -300,11 +312,11 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
       };
       return acc;
     }, {});
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(layoutTokensByViewport);
+    const mediaQueryStyles = (0, _createMediaQueryStyles.createMediaQueryStyles)(layoutTokensByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       layout: {
         ...mediaQueryStyles
       }
@@ -332,7 +344,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
-    onPress: _utils.linkProps.handleHref({
+    onPress: _linkProps.linkProps.handleHref({
       href,
       onPress
     }),
@@ -373,7 +385,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
             ...rowStyles
           }
         })],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconText.IconText, {
           icon: IconComponent,
           iconPosition: iconPosition,
           space: icon ? iconSpace : 0,
@@ -381,8 +393,8 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
             ...iconProps,
             tokens: iconTokens
           },
-          children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
-            ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
+          children: (0, _children.wrapStringsInText)(typeof children === 'function' ? children({
+            ...(0, _pressability.resolvePressableState)(pressableState, extraButtonState),
             textStyles
           }) : children, {
             style: textStyles
@@ -392,11 +404,11 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     }
   });
 });
-ButtonBase.displayName = 'ButtonBase';
-ButtonBase.propTypes = {
+ButtonBaseInner.displayName = 'ButtonBase';
+ButtonBaseInner.propTypes = {
   id: _propTypes.default.string,
   ...selectedSystemPropTypes,
-  ..._propTypes2.default
+  ..._propTypes2.buttonPropTypes
 };
 const staticStyles = _StyleSheet.default.create({
   row: {
@@ -421,4 +433,4 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'center'
   }
 });
-var _default = exports.default = (0, _utils.withLinkRouter)(ButtonBase);
+const ButtonBase = exports.ButtonBase = (0, _withLinkRouter.withLinkRouter)(ButtonBaseInner);

package/lib/cjs/Button/ButtonDropdown.js

@@ -3,22 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ButtonDropdown = 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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _propTypes2 = require("./propTypes");
+var _ButtonBase = require("./ButtonBase");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _handlerProps = require("../utils/props/handlerProps");
 var _pressability = require("../utils/pressability");
+var _input = require("../utils/input");
+var _Icon = require("../Icon/Icon");
 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 }; }
 const FULL_WIDTH_STYLE = 'full';
 const selectIconTokens = _ref => {
@@ -60,7 +62,7 @@ const selectIconTokens = _ref => {
   };
 };
 const selectDescriptionTextStyles = tokens => ({
-  ...(0, _ThemeProvider.applyTextStyles)({
+  ...(0, _styles.applyTextStyles)({
     fontName: tokens?.descriptionFontName,
     fontSize: tokens?.descriptionFontSize,
     fontWeight: tokens?.descriptionFontWeight,
@@ -98,7 +100,7 @@ const selectStackedContentStyles = (tokens, iconPosition, isFullWidth) => ({
     flex: 1
   })
 });
-const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value,
     initialValue,
@@ -119,7 +121,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const {
     currentValue: isOpen,
     setValue: setIsOpen
-  } = (0, _utils.useInputValue)({
+  } = (0, _input.useInputValue)({
     value,
     initialValue,
     onChange,
@@ -130,9 +132,9 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     inactive,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
   const getButtonTokens = buttonState => ({
-    ...(0, _utils.selectTokens)('Button', getTokens(buttonState)),
+    ...(0, _tokens.selectTokens)('Button', getTokens(buttonState)),
     iconSpace: props?.icon ? getTokens(buttonState)?.iconSpace : 0,
     ...(isFullWidth && {
       width: 'full'
@@ -150,7 +152,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       setIsOpen(!isOpen, event);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
     ref: ref,
     ...pressHandlers,
     onPress: handlePress,
@@ -181,20 +183,20 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       } = selectIconTokens(itemTokens);
       const iconContent = IconComponent && !singleOption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: iconWrapperStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           icon: IconComponent,
           tokens: iconTokens
         })
       }) : null;
       const childrenContent = () => typeof children === 'function' ? children({
-        ...(0, _utils.resolvePressableState)(buttonState, extraState),
+        ...(0, _pressability.resolvePressableState)(buttonState, extraState),
         textStyles
       }) : children;
       const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: staticStyles.contentContainer,
         children: [leadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: selectLeadIconContainerStyles(itemTokens),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             icon: leadIcon,
             tokens: selectLeadIconTokens(itemTokens)
           })
@@ -218,11 +220,11 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 ButtonDropdown.displayName = 'ButtonDropdown';
 ButtonDropdown.propTypes = {
-  ..._utils.a11yProps.types,
-  ..._utils.focusHandlerProps.types,
-  ..._propTypes2.default,
+  ..._a11yProps.a11yProps.types,
+  ..._handlerProps.focusHandlerProps.types,
+  ..._propTypes2.buttonPropTypes,
   children: _propTypes2.textAndA11yText,
-  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+  tokens: (0, _tokens.getTokensPropType)('ButtonDropdown'),
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.
    */
@@ -274,5 +276,4 @@ const staticStyles = _StyleSheet.default.create({
     flexDirection: 'row',
     alignItems: 'center'
   }
-});
-var _default = exports.default = ButtonDropdown;
+});