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

package/lib/cjs/CheckboxCard/CheckboxCard.js

@@ -3,23 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CheckboxCard = 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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Card = require("../Card");
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _CheckboxButton = _interopRequireWildcard(require("../Checkbox/CheckboxButton"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _useUniqueId = require("../utils/useUniqueId");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _PressableCardBase = require("../Card/PressableCardBase");
+var _StackView = require("../StackView/StackView");
+var _CheckboxButton = require("../Checkbox/CheckboxButton");
 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.focusHandlerProps, _utils.viewProps]);
-const CheckboxCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
+const CheckboxCard = exports.CheckboxCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -39,7 +46,7 @@ const CheckboxCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     currentValue: isChecked,
     setValue: setIsChecked,
     isControlled
-  } = (0, _utils.useInputValue)({
+  } = (0, _input.useInputValue)({
     value: checked,
     initialValue: defaultChecked,
     onChange
@@ -49,15 +56,15 @@ const CheckboxCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       setIsChecked(!isChecked, event);
     }
   };
-  const uniqueId = (0, _utils.useUniqueId)('CheckboxCard');
+  const uniqueId = (0, _useUniqueId.useUniqueId)('CheckboxCard');
   const inputId = id ?? uniqueId;
-  const uniqueIconId = (0, _utils.useUniqueId)('CheckboxIcon');
+  const uniqueIconId = (0, _useUniqueId.useUniqueId)('CheckboxIcon');
   const iconCheckboxId = iconId ?? uniqueIconId;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CheckboxCard', tokens, variant);
-  const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('CheckboxCard', tokens, variant);
+  const getCardTokens = cardState => (0, _PressableCardBase.selectPressableCardTokens)(getTokens(cardState));
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const selectedProps = selectProps({
     accessibilityRole: 'checkbox',
     accessibilityState: {
@@ -66,7 +73,7 @@ const CheckboxCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     },
     ...rest
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.PressableCardBase, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.PressableCardBase, {
     ref: ref,
     inactive: inactive,
     checked: isChecked,
@@ -80,19 +87,19 @@ const CheckboxCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         ...themeTokens
       } = getTokens(cardState);
       const checkboxTokens = (0, _CheckboxButton.selectCheckboxTokens)(themeTokens, 'checkbox');
-      const titleTokens = (0, _utils.selectTokens)('Typography', themeTokens);
-      const textStyle = (0, _ThemeProvider.applyTextStyles)({
+      const titleTokens = (0, _tokens.selectTokens)('Typography', themeTokens);
+      const textStyle = (0, _styles.applyTextStyles)({
         ...titleTokens,
         themeOptions
       });
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
         direction: "row",
         space: checkboxSpace,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.alignWithText, {
             height: textStyle.lineHeight
           }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.CheckboxButton, {
             tokens: checkboxTokens,
             isControlled: isControlled,
             isChecked: isChecked,
@@ -104,7 +111,7 @@ const CheckboxCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             name: inputName,
             value: value
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
           direction: "column",
           space: contentSpace,
           tokens: {
@@ -177,13 +184,12 @@ CheckboxCard.propTypes = {
   /**
    * checkbox card tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('CheckboxCard'),
+  tokens: (0, _tokens.getTokensPropType)('CheckboxCard'),
   /**
    * checkbox variant.
    */
-  variant: _utils.variantProp.propType
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = CheckboxCard;
 const staticStyles = _StyleSheet.default.create({
   alignWithText: {
     justifyContent: 'center'

package/lib/cjs/CheckboxCardGroup/CheckboxCardGroup.js

@@ -3,22 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CheckboxCardGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _StackView = _interopRequireWildcard(require("../StackView"));
-var _CheckboxCard = _interopRequireDefault(require("../CheckboxCard"));
-var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _containUniqueFields = require("../utils/containUniqueFields");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _StackView = require("../StackView/StackView");
+var _StackWrap = require("../StackView/StackWrap");
+var _CheckboxCard = require("../CheckboxCard/CheckboxCard");
+var _Fieldset = require("../Fieldset/Fieldset");
 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 [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
-const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
+const CheckboxCardGroup = exports.CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,
@@ -39,7 +45,7 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     inactive,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     space,
     fieldSpace,
@@ -51,7 +57,7 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     borderBottomLeftRadius,
     borderBottomRightRadius,
     outlineOffset
-  } = (0, _ThemeProvider.useThemeTokens)('CheckboxCardGroup', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('CheckboxCardGroup', tokens, variant, {
     viewport
   });
   const borderTokens = {
@@ -65,22 +71,22 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = (0, _input.useMultipleInputValues)({
     value: checkedIds,
     initialValues: initialCheckedIds,
     onChange,
     readOnly: readOnly || inactive
   });
-  const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
+  const StackContainer = direction === 'row' ? _StackWrap.StackWrap : _StackView.StackView;
   // Needs 'checkboxgroup' role on direct parent of checkboxes for MacOS Voiceover's numbering to work,
   // and also needs 'checkboxgroup' role on fieldset for correct description on focusing the set.
   // TODO: test this on more web screen readers.
 
   const uniqueFields = ['id'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`CheckboxCardGroup items must have unique ${uniqueFields.join(', ')}`);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
     copy: copy,
     ref: ref,
     name: inputGroupName,
@@ -113,7 +119,7 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
           toggleOneValue(cardId, event);
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxCard.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxCard.CheckboxCard, {
           id: cardId,
           checked: currentValues.includes(cardId),
           onChange: handleChange,
@@ -141,15 +147,15 @@ CheckboxCardGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer CheckboxCardGroup component
    */
-  tokens: (0, _utils.getTokensPropType)('CheckboxCardGroup'),
+  tokens: (0, _tokens.getTokensPropType)('CheckboxCardGroup'),
   /**
    * Optional theme token overrides for each inner CheckboxCard component
    */
-  checkboxCardTokens: (0, _utils.getTokensPropType)('CheckboxCard'),
+  checkboxCardTokens: (0, _tokens.getTokensPropType)('CheckboxCard'),
   /**
    * Theme variants, shared between both CheckboxCardGroup and CheckboxCard
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Array of objects containing specifics for each CheckboxCard to be rendered in the group.
    */
@@ -211,5 +217,4 @@ CheckboxCardGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */
   name: _propTypes.default.string
-};
-var _default = exports.default = CheckboxCardGroup;
+};

package/lib/cjs/ColourToggle/ColourBubble.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ColourBubble = 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 _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _pressability = require("../utils/pressability");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _styles = require("../ThemeProvider/utils/styles");
+var _tokens = require("../utils/props/tokens");
+var _Tooltip = require("../Tooltip/Tooltip.native");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectGeneralBubbleTokens = _ref => {
@@ -54,7 +55,7 @@ const selectInnerBubbleTokens = _ref2 => {
     borderRadius: innerBubbleBorderRadius,
     borderColor,
     borderWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...(0, _styles.applyShadowToken)(shadow)
   };
 };
 const selectBorderBubbleTokens = _ref3 => {
@@ -69,21 +70,22 @@ const selectBorderBubbleTokens = _ref3 => {
     borderRadius: bubbleBorderRadius
   };
 };
-const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const ColourBubble = exports.ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     tokens = {},
     id,
     colourHexCode,
     colourName,
     isSelected,
-    onPress
+    onPress,
+    showTooltip
   } = _ref4;
   const defaultTokens = tokens({
     selected: isSelected
   });
   const resolveColourBubbleTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, pressState, {});
   const themeTokens = _react.default.useMemo(() => tokens(), [tokens]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  const pressable = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
     accessible: true,
@@ -100,13 +102,21 @@ const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
       }]
     })
   });
+  if (showTooltip) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+      content: colourName,
+      activateOnHover: true,
+      children: pressable
+    });
+  }
+  return pressable;
 });
 ColourBubble.displayName = 'ColourBubble';
 ColourBubble.propTypes = {
   /**
    * Colour toggle tokens callback.
    */
-  tokens: (0, _utils.getTokensPropType)('ColourToggle'),
+  tokens: (0, _tokens.getTokensPropType)('ColourToggle'),
   /**
    * ID of each colour bubble
    */
@@ -128,6 +138,9 @@ ColourBubble.propTypes = {
    * of the color is changed of all currently `items`.
    * Receives two parameters: item object selected and the event
    */
-  onPress: _propTypes.default.func
-};
-var _default = exports.default = ColourBubble;
+  onPress: _propTypes.default.func,
+  /**
+   * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
+   */
+  showTooltip: _propTypes.default.bool
+};

package/lib/cjs/ColourToggle/ColourToggle.js

@@ -3,29 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ColourToggle = void 0;
 var _react = _interopRequireDefault(require("react"));
 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 _StackView = require("../StackView");
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _ColourBubble = _interopRequireDefault(require("./ColourBubble"));
+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 _StackWrap = require("../StackView/StackWrap");
+var _Typography = require("../Typography/Typography");
+var _ColourBubble = require("./ColourBubble");
 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 ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const ColourToggle = exports.ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
     defaultColourId,
     items,
     onChange,
+    showTooltips,
     ...rest
   } = _ref;
   const [currentColourId, setCurrentColourId] = _react.default.useState(defaultColourId);
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ColourToggle', tokens, variant);
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('ColourToggle', tokens, variant);
   const {
     space
   } = getTokens();
@@ -35,9 +40,9 @@ const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
       children: currentColourName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.StackWrap, {
       space: space,
       accessibilityRole: "radiogroup",
       children: items.map((_ref2, index) => {
@@ -55,13 +60,14 @@ const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             colourName
           });
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColourBubble.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColourBubble.ColourBubble, {
           id: colourBubbleId,
           tokens: getTokens,
           isSelected: id === currentColourId,
           colourHexCode: colourHexCode,
           colourName: colourName,
-          onPress: handleChangeColour
+          onPress: handleChangeColour,
+          showTooltip: showTooltips
         }, colourBubbleId);
       })
     })]
@@ -73,11 +79,11 @@ ColourToggle.propTypes = {
   /**
    * Optional theme token overrides for the outer ColourToggle component
    */
-  tokens: (0, _utils.getTokensPropType)('ColourToggle'),
+  tokens: (0, _tokens.getTokensPropType)('ColourToggle'),
   /**
    * Colour toggle variant.
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Id of the selected color when component mounts
    */
@@ -93,6 +99,9 @@ ColourToggle.propTypes = {
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
    */
-  onChange: _propTypes.default.func
-};
-var _default = exports.default = ColourToggle;
+  onChange: _propTypes.default.func,
+  /**
+   * When true, displays each colour's name as a tooltip on hover (web only).
+   */
+  showTooltips: _propTypes.default.bool
+};

package/lib/cjs/Divider/Divider.js

@@ -3,18 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Divider = 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ThemeProvider = require("../ThemeProvider");
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-var _utils = require("../utils");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _Spacer = require("../Spacer/Spacer");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _spacingProps = require("../utils/props/spacingProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
 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]);
 
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
@@ -57,7 +62,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Divider = exports.Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
     vertical = false,
@@ -68,7 +73,7 @@ const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     color,
     width
-  } = (0, _ThemeProvider.useThemeTokens)('Divider', tokens, variant);
+  } = (0, _useThemeTokens.useThemeTokens)('Divider', tokens, variant);
   const borderStyles = vertical ? {
     borderRightColor: color,
     borderRightWidth: width
@@ -106,10 +111,10 @@ const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     direction: vertical ? 'row' : 'column'
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
       ...spacerProps,
       testID: testID ? `${testID}-Spacer-before` : undefined
-    }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
       ...spacerProps,
       testID: testID ? `${testID}-Spacer-after` : undefined
     })]
@@ -118,12 +123,12 @@ const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 Divider.displayName = 'Divider';
 Divider.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Divider'),
+  tokens: (0, _tokens.getTokensPropType)('Divider'),
   /**
    * A number referring to a position on the space scale to create space on either side of the divider
    */
-  space: _utils.spacingProps.types.spacingValue,
-  variant: _utils.variantProp.propType,
+  space: _spacingProps.spacingProps.types.spacingValue,
+  variant: _variantProp.variantProp.propType,
   /**
    * By default, the divider is a horizontal line the full width of its parent.
    * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
@@ -134,5 +139,4 @@ const styles = _StyleSheet.default.create({
   divider: {
     alignSelf: 'stretch'
   }
-});
-var _default = exports.default = Divider;
+});

package/lib/cjs/DownloadApp/DownloadApp.js

@@ -3,18 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.DownloadApp = 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 _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _linkProps = require("../utils/props/linkProps");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _viewProps = require("../utils/props/viewProps");
+var _tokens = require("../utils/props/tokens");
+var _pressability = require("../utils/pressability");
+var _variantProp = require("../utils/props/variantProp");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useCopy = require("../utils/useCopy");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _linkProps.linkProps, _viewProps.viewProps]);
 const selectOuterStyles = _ref => {
   let {
     borderColor,
@@ -32,10 +41,10 @@ const selectOuterStyles = _ref => {
     padding
   };
 };
-const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const DownloadApp = exports.DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     type = 'ios',
     href,
     onPress,
@@ -43,27 +52,27 @@ const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     variant = {},
     ...props
   } = _ref2;
-  const getCopy = (0, _utils.useCopy)({
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary,
     copy
   });
   const {
     hrefAttrs,
     rest
-  } = _utils.hrefAttrsProp.bundle(props);
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     accessibilityRole: href ? 'link' : 'button',
     href,
-    onPress: _utils.linkProps.handleHref({
+    onPress: _linkProps.linkProps.handleHref({
       href,
       onPress
     }),
     hrefAttrs,
     ...rest
   });
-  const getDownloadAppTokens = (0, _ThemeProvider.useThemeTokensCallback)('DownloadApp', tokens, variant);
+  const getDownloadAppTokens = (0, _useThemeTokens.useThemeTokensCallback)('DownloadApp', tokens, variant);
   const resolveDownloadAppTokens = pressableState => {
-    const themeTokens = (0, _utils.resolvePressableTokens)(getDownloadAppTokens, pressableState, {});
+    const themeTokens = (0, _pressability.resolvePressableTokens)(getDownloadAppTokens, pressableState, {});
     return selectOuterStyles(themeTokens);
   };
   const {
@@ -100,7 +109,7 @@ const dictionaryContentShape = _propTypes.default.shape({
 });
 DownloadApp.propTypes = {
   ...selectedSystemPropTypes,
-  copy: _utils.copyPropTypes,
+  copy: _copyPropTypes.copyPropTypes,
   /**
    * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
    */
@@ -123,11 +132,11 @@ DownloadApp.propTypes = {
   /**
    * DownloadApp tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('DownloadApp'),
+  tokens: (0, _tokens.getTokensPropType)('DownloadApp'),
   /**
    * DownloadApp variant.
    */
-  variant: _utils.variantProp.propType
+  variant: _variantProp.variantProp.propType
 };
 const staticStyles = _StyleSheet.default.create({
   row: {
@@ -163,5 +172,4 @@ const staticImageSizes = {
       height: 48
     }
   }
-};
-var _default = exports.default = DownloadApp;
+};

package/lib/cjs/DownloadApp/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: {
     altTextAndroid: 'Get it on Google Play',
     altTextIos: 'Download on the App Store'