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

package/lib/esm/Listbox/ListboxGroup.js

@@ -4,14 +4,16 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { withLinkRouter, variantProp, copyPropTypes } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import ExpandCollapse from '../ExpandCollapse';
-import ListboxItem from './ListboxItem';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { variantProp } from '../utils/props/variantProp';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { ExpandCollapsePanel } from '../ExpandCollapse/ExpandCollapsePanel';
+import { ListboxItem } from './ListboxItem';
 import { useListboxContext } from './ListboxContext';
-import GroupControl from './GroupControl';
-import SecondLevelHeader from './SecondLevelHeader';
-import defaultDictionary from './dictionary';
+import { GroupControl } from './GroupControl';
+import { SecondLevelHeader } from './SecondLevelHeader';
+import { dictionary as defaultDictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = StyleSheet.create({
   groupWrapper: {
@@ -49,7 +51,7 @@ const selectSecondLevelContainerStyles = _ref => {
     backgroundColor: secondLevelHeaderBackgroundColor
   };
 };
-const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     id,
     label,
@@ -138,7 +140,7 @@ const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     id: "test",
     style: styles.groupWrapper,
     accessibilityRole: getAccessibilityRole(),
-    children: /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
+    children: /*#__PURE__*/_jsx(ExpandCollapsePanel, {
       panelId: id ?? label,
       controlTokens: {
         icon: null,
@@ -253,5 +255,4 @@ ListboxGroup.propTypes = {
    * Callback when the menu is closed
    */
   onClose: PropTypes.func
-};
-export default ListboxGroup;
+};

package/lib/esm/Listbox/ListboxItem.js

@@ -2,9 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { selectSystemProps, withLinkRouter, htmlAttrs } from '../utils';
-import PressableItem from './PressableItem';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { PressableItem } from './PressableItem';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const styles = StyleSheet.create({
@@ -19,7 +21,7 @@ const styles = StyleSheet.create({
     paddingLeft: 24
   }
 });
-const ListboxItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const ListboxItemInner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     label,
@@ -61,8 +63,8 @@ const ListboxItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })
   });
 });
-ListboxItem.displayName = 'ListboxItem';
-ListboxItem.propTypes = {
+ListboxItemInner.displayName = 'ListboxItem';
+ListboxItemInner.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   href: PropTypes.string,
@@ -73,4 +75,4 @@ ListboxItem.propTypes = {
   onPress: PropTypes.func,
   nestedChild: PropTypes.bool
 };
-export default withLinkRouter(ListboxItem);
+export const ListboxItem = withLinkRouter(ListboxItemInner);

package/lib/esm/Listbox/ListboxOverlay.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import Portal from '../Portal';
-import { useThemeTokens } from '../ThemeProvider';
-import Card from '../Card';
+import { Portal } from '../Portal/Portal';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { Card } from '../Card/Card';
 import { jsx as _jsx } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -90,4 +90,4 @@ DropdownOverlay.propTypes = {
   testID: PropTypes.string,
   variant: PropTypes.object
 };
-export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;
+export const ListboxOverlay = Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/esm/Listbox/PressableItem.js

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Text from "react-native-web/dist/exports/Text";
-import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { resolvePressableTokens } from '../utils/pressability';
+import { htmlAttrs } from '../utils/htmlAttrs';
 import { useListboxContext } from './ListboxContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -53,7 +55,7 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     href,
@@ -139,5 +141,4 @@ PressableItem.propTypes = {
   onPress: PropTypes.func,
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object
-};
-export default PressableItem;
+};

package/lib/esm/Listbox/SecondLevelHeader.js

@@ -4,12 +4,14 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import Pressable from "react-native-web/dist/exports/Pressable";
-import { useThemeTokens } from '../ThemeProvider';
-import { useCopy, variantProp, copyPropTypes } from '../utils';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import Divider from '../Divider';
-import defaultDictionary from './dictionary';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useCopy } from '../utils/useCopy';
+import { variantProp } from '../utils/props/variantProp';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { Icon } from '../Icon/Icon';
+import { IconButton } from '../IconButton/IconButton';
+import { Divider } from '../Divider/Divider';
+import { dictionary as defaultDictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = StyleSheet.create({
   headerContainer: {
@@ -80,7 +82,7 @@ const selectLabelTextStyles = _ref3 => {
  * Displays a header with back button icon, title text, and close button (IconButton),
  * separated from content by a Divider.
  */
-const SecondLevelHeader = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const SecondLevelHeader = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     label,
     onBack,
@@ -190,5 +192,4 @@ SecondLevelHeader.propTypes = {
    * Variant configuration
    */
   variant: variantProp.propType
-};
-export default SecondLevelHeader;
+};

package/lib/esm/Listbox/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     closeMenu: 'Close menu'
   },

package/lib/esm/Modal/Modal.js

@@ -6,14 +6,21 @@ import ScrollView from "react-native-web/dist/exports/ScrollView";
 import NativeModal from "react-native-web/dist/exports/Modal";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import IconButton from '../IconButton';
-import dictionary from './dictionary';
-import useScrollBlocking from '../utils/useScrollBlocking';
-import ModalContent from './ModalContent';
-import WebModal from './WebModal';
+import { applyShadowToken } from '../ThemeProvider/utils/styles';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useCopy } from '../utils/useCopy';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { IconButton } from '../IconButton/IconButton';
+import { dictionary } from './dictionary';
+import { useScrollBlocking } from '../utils/useScrollBlocking';
+import { ModalContent } from './ModalContent';
+import { WebModal } from './WebModal';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = _ref => {
@@ -103,7 +110,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     isOpen,
@@ -239,7 +246,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
           })]
         })
       }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: isBackdropClickable && handleClose,
+        onPress: isBackdropClickable ? handleClose : undefined,
         children: /*#__PURE__*/_jsx(View, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })
@@ -346,7 +353,6 @@ Modal.propTypes = {
    */
   backgroundDismissible: PropTypes.bool
 };
-export default Modal;
 const staticStyles = StyleSheet.create({
   backdrop: {
     position: 'absolute',

package/lib/esm/Modal/ModalContent.js

@@ -3,15 +3,15 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import Box from '../Box';
-import { Button } from '../Button';
-import { TextButton } from '../Link';
-import Spacer from '../Spacer';
-import Typography from '../Typography';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
+import { Box } from '../Box/Box';
+import { Button } from '../Button/Button';
+import { TextButton } from '../Link/TextButton';
+import { Spacer } from '../Spacer/Spacer';
+import { Typography } from '../Typography/Typography';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useViewport } from '../ViewportProvider/useViewport';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     heading,
     headingLevel = 'h3',
@@ -196,5 +196,4 @@ ModalContent.propTypes = {
   children: PropTypes.node,
   onCancel: PropTypes.func,
   footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
-};
-export default ModalContent;
+};

package/lib/esm/Modal/WebModal.js

@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Portal from '../Portal';
-import { a11yProps, selectSystemProps, viewProps } from '../utils';
+import { Portal } from '../Portal/Portal';
+import { a11yProps } from '../utils/props/a11yProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -15,7 +17,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @param {ReactNode} props.children - The content of the modal.
  * @returns {JSX.Element} The rendered WebModal component.
  */
-const WebModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const WebModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest
@@ -72,5 +74,4 @@ const staticStyles = StyleSheet.create({
     display: 'flex',
     overflowY: 'auto'
   }
-});
-export default WebModal;
+});

package/lib/esm/Modal/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     // English text from TDS Community `Modal`
     closeButton: 'Close'

package/lib/esm/MultiSelectFilter/ModalOverlay.js

@@ -4,13 +4,16 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import { Portal } from '@gorhom/portal';
-import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import dictionary from './dictionary';
-import Card from '../Card';
-import IconButton from '../IconButton';
-import useDetectOutsideClick from '../utils/useDetectOutsideClick';
+import { useCopy } from '../utils/useCopy';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { dictionary } from './dictionary';
+import { Card } from '../Card/Card';
+import { IconButton } from '../IconButton/IconButton';
+import { useDetectOutsideClick } from '../utils/useDetectOutsideClick';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -76,7 +79,7 @@ const selectCloseButtonContainerStyles = _ref => {
     paddingTop
   };
 };
-const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     isReady = false,
@@ -91,8 +94,7 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     tokens,
     copy,
     onClose,
-    enableFullscreen = false,
-    dismissWhenPressedOutside = false
+    enableFullscreen = false
   } = _ref2;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Modal', tokens, variant, {
@@ -100,7 +102,7 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     maxWidth: false
   });
   const containerRef = React.useRef(ref || null);
-  useDetectOutsideClick(containerRef, onClose, dismissWhenPressedOutside);
+  useDetectOutsideClick(containerRef, onClose);
   const containerWidthHeight = {
     minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
     minHeight: maxHeight ? maxHeightSize : minHeight,
@@ -159,11 +161,5 @@ ModalOverlay.propTypes = {
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,
   onClose: PropTypes.func,
-  enableFullscreen: PropTypes.bool,
-  /**
-   * 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.bool
-};
-export default ModalOverlay;
+  enableFullscreen: PropTypes.bool
+};

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -7,25 +7,32 @@ import Dimensions from "react-native-web/dist/exports/Dimensions";
 import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
 import Platform from "react-native-web/dist/exports/Platform";
 import ScrollView from "react-native-web/dist/exports/ScrollView";
-import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
-import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp, useScrollBlocking } from '../utils';
-import defaultDictionary from './dictionary';
-import { useViewport } from '../ViewportProvider';
-import Box from '../Box';
-import { Button, ButtonDropdown } from '../Button';
-import { CheckboxGroup } from '../Checkbox';
-import Divider from '../Divider';
-import FlexGrid from '../FlexGrid';
-import Spacer from '../Spacer';
-import StackView from '../StackView';
-import Typography from '../Typography';
-import { TextButton } from '../Link';
-import ModalOverlay from './ModalOverlay';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { containUniqueFields } from '../utils/containUniqueFields';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+import { useOverlaidPosition } from '../utils/useOverlaidPosition';
+import { useCopy } from '../utils/useCopy';
+import { useMultipleInputValues } from '../utils/input';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { variantProp } from '../utils/props/variantProp';
+import { useScrollBlocking } from '../utils/useScrollBlocking';
+import { dictionary as defaultDictionary } from './dictionary';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { Box } from '../Box/Box';
+import { Button } from '../Button/Button';
+import { ButtonDropdown } from '../Button/ButtonDropdown';
+import { CheckboxGroup } from '../Checkbox/CheckboxGroup';
+import { Divider } from '../Divider/Divider';
+import { FlexGridRow } from '../FlexGrid/FlexGridRow/FlexGridRow';
+import { FlexGridCol } from '../FlexGrid/FlexGridCol/FlexGridCol';
+import { Spacer } from '../Spacer/Spacer';
+import { StackView } from '../StackView/StackView';
+import { Typography } from '../Typography/Typography';
+import { TextButton } from '../Link/TextButton';
+import { ModalOverlay } from './ModalOverlay';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  Col,
-  Row
-} = FlexGrid;
 const selectHeaderTokens = _ref => {
   let {
     contentMarginLeft,
@@ -64,7 +71,7 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
   width: windowWidth
 });
 const TOTAL_COLUMNS = 12;
-const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     label,
     subtitle,
@@ -85,7 +92,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     inactive = false,
     rowLimit = 12,
     dictionary = defaultDictionary,
-    dismissWhenPressedOutside = false,
     ...rest
   } = _ref3;
   const viewport = useViewport();
@@ -294,7 +300,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   };
   const headerContent = /*#__PURE__*/_jsxs(View, {
     style: [selectHeaderTokens(restTokens), styles.container],
-    children: [/*#__PURE__*/_jsx(Row, {
+    children: [/*#__PURE__*/_jsx(FlexGridRow, {
       children: /*#__PURE__*/_jsx(View, {
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
@@ -307,7 +313,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Spacer, {
         space: 4
-      }), /*#__PURE__*/_jsx(Row, {
+      }), /*#__PURE__*/_jsx(FlexGridRow, {
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
             ...subeHeaderStyles,
@@ -323,10 +329,10 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       children: /*#__PURE__*/_jsx(ScrollView, {
         onLayout: handleScrollViewLayout,
         style: styles.scrollContainer,
-        children: /*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(FlexGridRow, {
           distribute: "between",
           onLayout: handleRowLayout,
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(FlexGridCol, {
             xs: TOTAL_COLUMNS / colSize,
             children: [/*#__PURE__*/_jsx(CheckboxGroup, {
               items: items.slice(i * rowLength, (i + 1) * rowLength),
@@ -349,7 +355,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       space: 4
     }), /*#__PURE__*/_jsx(View, {
       style: selectControlsTokens(restTokens),
-      children: /*#__PURE__*/_jsx(Row, {
+      children: /*#__PURE__*/_jsx(FlexGridRow, {
         horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
         children: /*#__PURE__*/_jsxs(StackView, {
           direction: buttonDirection,
@@ -424,7 +430,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         })]
       })
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(ModalOverlay, {
-      dismissWhenPressedOutside: dismissWhenPressedOutside,
       onClose: onClose,
       overlaidPosition: overlaidPosition,
       maxHeight: items.length >= rowLimit ? true : maxHeight,
@@ -583,11 +588,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.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.bool
-};
-export default MultiSelectFilter;
+  rowLimit: PropTypes.number
+};

package/lib/esm/MultiSelectFilter/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     filterByLabel: 'Filter by %{filterCategory}:',
     applyButtonLabel: 'Apply',

package/lib/esm/Notification/Notification.js

@@ -2,12 +2,22 @@ import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
-import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, createMediaQueryStyles, StyleSheet, useResponsiveProp } from '../utils';
-import IconButton from '../IconButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { useViewport } from '../ViewportProvider';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useResponsiveThemeTokens } from '../ThemeProvider/useResponsiveThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { wrapStringsInText } from '../utils/children';
+import { createMediaQueryStyles, StyleSheet } from '../utils/ssr-media-query/ssr-media-query';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { IconButton } from '../IconButton/IconButton';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
+import { useViewport } from '../ViewportProvider/useViewport';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CONTENT_MAX_WIDTH = 'max';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -272,7 +282,7 @@ 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.forwardRef((_ref7, ref) => {
+export const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
     system,
@@ -444,5 +454,4 @@ Notification.propTypes = {
   }),
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
-};
-export default Notification;
+};

package/lib/esm/Notification/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     dismiss: 'Close'
   },

package/lib/esm/OrderedList/OrderedList.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils';
-import OrderedListBase from './OrderedListBase';
-import Item from './Item';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { OrderedListBase } from './OrderedListBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     start = 1,
@@ -48,7 +51,7 @@ const OrderedList = /*#__PURE__*/React.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.node.isRequired,
   /**
@@ -58,6 +61,4 @@ OrderedList.propTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('OrderedList')
 };
-OrderedList.displayName = 'OrderedList';
-OrderedList.Item = Item;
-export default OrderedList;
+OrderedList.displayName = 'OrderedList';

package/lib/esm/OrderedList/OrderedListBase.js

@@ -3,9 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import ItemBase from './ItemBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest
@@ -25,8 +24,6 @@ OrderedListBase.propTypes = {
   children: PropTypes.node.isRequired
 };
 OrderedListBase.displayName = 'OrderedList';
-OrderedListBase.Item = ItemBase;
-export default OrderedListBase;
 const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'column',