@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.MultiSelectFilter = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _portal = require("@gorhom/portal");
@@ -13,26 +13,33 @@ var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 var _SafeAreaView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/SafeAreaView"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _ViewportProvider = require("../ViewportProvider");
-var _Box = _interopRequireDefault(require("../Box"));
-var _Button = require("../Button");
-var _Checkbox = require("../Checkbox");
-var _Divider = _interopRequireDefault(require("../Divider"));
-var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _Link = require("../Link");
-var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _styles = require("../ThemeProvider/utils/styles");
+var _containUniqueFields = require("../utils/containUniqueFields");
+var _tokens = require("../utils/props/tokens");
+var _pressability = require("../utils/pressability");
+var _useOverlaidPosition = require("../utils/useOverlaidPosition");
+var _useCopy = require("../utils/useCopy");
+var _input = require("../utils/input");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _variantProp = require("../utils/props/variantProp");
+var _useScrollBlocking = require("../utils/useScrollBlocking");
+var _dictionary = require("./dictionary");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _Box = require("../Box/Box");
+var _Button = require("../Button/Button");
+var _ButtonDropdown = require("../Button/ButtonDropdown");
+var _CheckboxGroup = require("../Checkbox/CheckboxGroup");
+var _Divider = require("../Divider/Divider");
+var _FlexGridRow = require("../FlexGrid/FlexGridRow/FlexGridRow");
+var _FlexGridCol = require("../FlexGrid/FlexGridCol/FlexGridCol");
+var _Spacer = require("../Spacer/Spacer");
+var _StackView = require("../StackView/StackView");
+var _Typography = require("../Typography/Typography");
+var _TextButton = require("../Link/TextButton");
+var _ModalOverlay = require("./ModalOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const {
-  Col,
-  Row
-} = _FlexGrid.default;
 const selectHeaderTokens = _ref => {
   let {
     contentMarginLeft,
@@ -71,7 +78,7 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
   width: windowWidth
 });
 const TOTAL_COLUMNS = 12;
-const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const MultiSelectFilter = exports.MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     label,
     subtitle,
@@ -91,15 +98,14 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     readOnly = false,
     inactive = false,
     rowLimit = 12,
-    dictionary = _dictionary.default,
-    dismissWhenPressedOutside = false,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = _ref3;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     currentValues,
     setValues
-  } = (0, _utils.useMultipleInputValues)({
+  } = (0, _input.useMultipleInputValues)({
     initialValues,
     values,
     maxValues,
@@ -144,7 +150,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     buttonBackgroundColorSelected,
     containerBorderColor,
     ...restTokens
-  } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
+  } = (0, _useThemeTokens.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
     maxHeight,
     maxWidth,
@@ -169,9 +175,9 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     iconColor: isSelected ? iconColorSelected : iconColor,
     backgroundColor: isSelected ? buttonBackgroundColorSelected : buttonBackgroundColor
   };
-  const getButtonDropdownTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', dropdownTokens, variant);
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('ButtonDropdown', getButtonDropdownTokens(buttonState));
-  const getCopy = (0, _utils.useCopy)({
+  const getButtonDropdownTokens = (0, _useThemeTokens.useThemeTokensCallback)('ButtonDropdown', dropdownTokens, variant);
+  const getButtonTokens = buttonState => (0, _tokens.selectTokens)('ButtonDropdown', getButtonDropdownTokens(buttonState));
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary,
     copy
   });
@@ -191,11 +197,11 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     }
   }, [isOpen, onOpen]);
   const uniqueFields = ['id', 'label'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
   }
   // Pass an object of relevant component state as first argument for any passed-in press handlers
-  const pressHandlers = (0, _utils.getPressHandlersWithArgs)(rest, [{
+  const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
     id,
     label,
     currentValues
@@ -236,7 +242,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   const {
     align,
     offsets
-  } = (0, _utils.useResponsiveProp)({
+  } = (0, _useResponsiveProp.useResponsiveProp)({
     xs: {
       align: {
         top: 'top',
@@ -254,12 +260,12 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       }
     }
   });
-  const headerStyles = (0, _ThemeProvider.applyTextStyles)({
+  const headerStyles = (0, _styles.applyTextStyles)({
     fontSize: headerFontSize,
     fontWeight: headerFontWeight,
     fontColor: headerFontColor
   });
-  const subeHeaderStyles = (0, _ThemeProvider.applyTextStyles)({
+  const subeHeaderStyles = (0, _styles.applyTextStyles)({
     fontSize: subHeaderFontSize,
     fontWeight: subHeaderFontWeight,
     fontColor: subtitleColor
@@ -269,7 +275,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     onTargetLayout,
     isReady,
     sourceRef
-  } = (0, _utils.useOverlaidPosition)({
+  } = (0, _useOverlaidPosition.useOverlaidPosition)({
     isShown: isOpen,
     offsets,
     align
@@ -277,7 +283,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   const [isScrolling, setIsScrolling] = _react.default.useState(false);
   const [scrollViewHeight, setScrollViewHeight] = _react.default.useState(0);
   const [rowHeight, setRowHeight] = _react.default.useState(0);
-  const modalRef = (0, _utils.useScrollBlocking)(isOpen && viewport === 'xs');
+  const modalRef = (0, _useScrollBlocking.useScrollBlocking)(isOpen && viewport === 'xs');
   const windowWidth = _Dimensions.default.get('window').width;
   const windowHeight = _Dimensions.default.get('window').height;
   _react.default.useEffect(() => {
@@ -301,9 +307,9 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   };
   const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: [selectHeaderTokens(restTokens), styles.container],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGridRow.FlexGridRow, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
           tokens: {
             ...headerStyles,
             lineHeight: headerLineHeight
@@ -312,10 +318,10 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
         })
       })
     }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGridRow.FlexGridRow, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
           tokens: {
             ...subeHeaderStyles,
             lineHeight: subHeaderLineHeight
@@ -323,23 +329,23 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
           children: subtitle
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
       space: 4
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: styles.options,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
         onLayout: handleScrollViewLayout,
         style: styles.scrollContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGridRow.FlexGridRow, {
           distribute: "between",
           onLayout: handleRowLayout,
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FlexGridCol.FlexGridCol, {
             xs: TOTAL_COLUMNS / colSize,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxGroup.CheckboxGroup, {
               items: items.slice(i * rowLength, (i + 1) * rowLength),
               checkedIds: checkedIds,
               onChange: e => setCheckedIds(e, i)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
               size: 4
             })]
           }, i))
@@ -348,17 +354,17 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     })]
   });
   const controlsContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isScrolling && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+    children: [isScrolling && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.Divider, {
       tokens: {
         color: dividerColor
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
       space: 4
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectControlsTokens(restTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGridRow.FlexGridRow, {
         horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
           direction: buttonDirection,
           space: 3,
           tokens: {
@@ -376,8 +382,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
               })
             },
             children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextButton.TextButton, {
               onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
@@ -392,7 +398,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
         ref: appRootRef,
         style: styles.appRootRef
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDropdown.ButtonDropdown, {
       ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
@@ -401,7 +407,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       onChange: handleChange,
       tokens: getButtonTokens,
       inactive: inactive
-    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalOverlay.default, {
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalOverlay.ModalOverlay, {
       overlaidPosition: {
         top: 0,
         left: 0
@@ -430,8 +436,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
           children: controlsContent
         })]
       })
-    }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
-      dismissWhenPressedOutside: dismissWhenPressedOutside,
+    }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.ModalOverlay, {
       onClose: onClose,
       overlaidPosition: overlaidPosition,
       maxHeight: items.length >= rowLimit ? true : maxHeight,
@@ -504,11 +509,11 @@ MultiSelectFilter.propTypes = {
   /**
    * Sets the variant for ButtonDropdown element.
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: (0, _utils.getTokensPropType)('MultiSelectFilter'),
+  tokens: (0, _tokens.getTokensPropType)('MultiSelectFilter'),
   /**
    * The options a user may select.
    */
@@ -590,11 +595,5 @@ MultiSelectFilter.propTypes = {
    * Sets the maximum number of items in one column. If number of items are more
    * than the `rowLimit`, they will be rendered in 2 columns.
    */
-  rowLimit: _propTypes.default.number,
-  /**
-   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
-   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
-   */
-  dismissWhenPressedOutside: _propTypes.default.bool
-};
-var _default = exports.default = MultiSelectFilter;
+  rowLimit: _propTypes.default.number
+};

package/lib/cjs/MultiSelectFilter/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: {
     filterByLabel: 'Filter by %{filterCategory}:',
     applyButtonLabel: 'Apply',

package/lib/cjs/Notification/Notification.js

@@ -3,26 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Notification = 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 _systemConstants = require("@telus-uds/system-constants");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _ViewportProvider = require("../ViewportProvider");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useResponsiveThemeTokens = require("../ThemeProvider/useResponsiveThemeTokens");
+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 _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _IconButton = require("../IconButton/IconButton");
+var _useCopy = require("../utils/useCopy");
+var _dictionary = require("./dictionary");
+var _useViewport = require("../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CONTENT_MAX_WIDTH = 'max';
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectContainerStyles = tokens => ({
   ...tokens
 });
 const selectTextStyles = (tokens, themeOptions, isDismissible) => {
-  const textTokens = (0, _utils.selectTokens)('Typography', tokens);
+  const textTokens = (0, _tokens.selectTokens)('Typography', tokens);
   const styles = {
     ...textTokens,
     themeOptions,
@@ -31,7 +41,7 @@ const selectTextStyles = (tokens, themeOptions, isDismissible) => {
   if (!isDismissible) {
     styles.flexShrink = 1;
   }
-  return (0, _ThemeProvider.applyTextStyles)(styles);
+  return (0, _styles.applyTextStyles)(styles);
 };
 const selectIconProps = _ref => {
   let {
@@ -88,11 +98,11 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     };
     return acc;
   }, {});
-  const selectContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContainerStyles);
+  const selectContainerMediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(transformedSelectContainerStyles);
   const {
     ids: containerIds,
     styles: containerStyles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     container: {
       ...selectContainerMediaQueryStyles
     }
@@ -110,11 +120,11 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     };
     return acc;
   }, {});
-  const selectContentContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContentContainerStyles);
+  const selectContentContainerMediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(transformedSelectContentContainerStyles);
   const {
     ids: contentContainerIds,
     styles: contentContainerStyles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     contentContainer: {
       ...selectContentContainerMediaQueryStyles
     }
@@ -122,7 +132,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
   const {
     ids: staticContentContainerIds,
     styles: staticContentContainerStyles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     staticContentContainer: {
       flexDirection: 'row',
       flexShrink: 1
@@ -131,29 +141,29 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
   const {
     ids: iconContainerIds,
     styles: iconContainerStyles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     iconContainer: selectIconContainerStyles(themeTokens[viewport])
   });
   const {
     ids: dismissButtonContainerIds,
     styles: dismissButtonContainerStyles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
   });
   const {
     ids: textIds,
     styles: textStyles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
   });
   const {
     styles: selectIconPropsStyles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     selectIconProps: selectIconProps(themeTokens[viewport])
   });
   const {
     styles: selectDismissIconPropsStyles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
   });
 
@@ -245,11 +255,10 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * ### Variants
  * - Use `variant.style` to set the visual style of the notification
  * - Use `dismissible` prop to enable dismissible functionality
- * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
  *
- * ### When to use the system prop?
- * - Use `system` to show system-based messages coming from the application
- * - Don’t use `system` when the message is in response to user action
+ * ### When to use the system style variant?
+ * - Use `variant.style ‘system’` to show system-based messages coming from the application
+ * - Don’t use the `system` style variant when the message is in response to user action
  *
  * ## Variants
  *
@@ -279,10 +288,9 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const Notification = exports.Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     children,
-    system,
     dismissible,
     copy = 'en',
     tokens,
@@ -292,27 +300,25 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     ...rest
   } = _ref7;
   const [isDismissed, setIsDismissed] = _react.default.useState(false);
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  const viewport = (0, _useViewport.useViewport)();
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
-
-  // TODO: Remove this once the system style variant is deprecated
-  const isSystemEnabled = system || variant?.style?.includes('system');
+  const isSystemEnabled = variant?.style?.includes('system');
   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('Notification', tokens, variant, {
     system: isSystemEnabled,
     viewport
   });
-  const useContentMaxWidth = (0, _utils.useResponsiveProp)(contentMinWidth) === CONTENT_MAX_WIDTH;
-  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth, _systemConstants.viewports.map.get(_systemConstants.viewports.xl));
+  const useContentMaxWidth = (0, _useResponsiveProp.useResponsiveProp)(contentMinWidth) === CONTENT_MAX_WIDTH;
+  const maxWidth = (0, _useResponsiveProp.useResponsiveProp)(themeOptions?.contentMaxWidth, _systemConstants.viewports.map.get(_systemConstants.viewports.xl));
   const notificationComponentRef = _react.default.useRef({
     containerStyles: {},
     contentContainerStyles: {},
@@ -341,7 +347,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   if (isDismissed) {
     return null;
   }
-  const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
+  const content = (0, _children.wrapStringsInText)(typeof children === 'function' ? children({
     textStyles: notificationComponentRef.current.textStyles.text,
     variant
   }) : children, {
@@ -390,7 +396,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
         dataSet: mediaIdsRef && {
           media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
           action: "close",
           onPress: onDismissPress,
           icon: DismissIconComponent,
@@ -415,10 +421,6 @@ Notification.propTypes = {
    * Content of the `Notification`.
    */
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
-  /**
-   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
-   */
-  system: _propTypes.default.bool,
   /**
    * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
    */
@@ -449,7 +451,6 @@ Notification.propTypes = {
     sm: _propTypes.default.oneOf(['max', 'full']),
     xs: _propTypes.default.oneOf(['max', 'full'])
   }),
-  tokens: (0, _utils.getTokensPropType)('Notification'),
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = Notification;
+  tokens: (0, _tokens.getTokensPropType)('Notification'),
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/Notification/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: {
     dismiss: 'Close'
   },

package/lib/cjs/OrderedList/OrderedList.js

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OrderedList = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _OrderedListBase = _interopRequireDefault(require("./OrderedListBase"));
-var _Item = _interopRequireDefault(require("./Item"));
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _tokens = require("../utils/props/tokens");
+var _OrderedListBase = require("./OrderedListBase");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropsTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
-const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropsTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps]);
+const OrderedList = exports.OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     start = 1,
@@ -46,7 +49,7 @@ const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return children;
   }, [children, variant, start, tokens]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListBase.OrderedListBase, {
     ref: ref,
     ...selectProps(rest),
     children: childrenWithParentVariants
@@ -55,16 +58,14 @@ const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 OrderedList.propTypes = {
   ...selectedSystemPropsTypes,
   /**
-   * A list of ordered items wrapped in `OrderedList.Item`.
+   * A list of ordered items wrapped in `OrderedListItem`.
    */
   children: _propTypes.default.node.isRequired,
   /**
    * The position to start the list with.
    */
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('OrderedList')
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('OrderedList')
 };
-OrderedList.displayName = 'OrderedList';
-OrderedList.Item = _Item.default;
-var _default = exports.default = OrderedList;
+OrderedList.displayName = 'OrderedList';

package/lib/cjs/OrderedList/OrderedListBase.js

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OrderedListBase = 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 _ItemBase = _interopRequireDefault(require("./ItemBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 
-const OrderedListBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const OrderedListBase = exports.OrderedListBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest
@@ -33,8 +32,6 @@ OrderedListBase.propTypes = {
   children: _propTypes.default.node.isRequired
 };
 OrderedListBase.displayName = 'OrderedList';
-OrderedListBase.Item = _ItemBase.default;
-var _default = exports.default = OrderedListBase;
 const staticStyles = _StyleSheet.default.create({
   container: {
     flexDirection: 'column',