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

package/src/Listbox/Listbox.jsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform, StyleSheet } from 'react-native'
-import { useThemeTokens } from '../ThemeProvider'
-import { withLinkRouter, getTokensPropType, variantProp } from '../utils'
-import ExpandCollapse from '../ExpandCollapse'
-import ListboxGroup from './ListboxGroup'
-import ListboxItem from './ListboxItem'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
+import { ExpandCollapse } from '../ExpandCollapse/ExpandCollapse'
+import { ListboxGroup } from './ListboxGroup'
+import { ListboxItem } from './ListboxItem'
 import { ListboxContext } from './ListboxContext'
-import DropdownOverlay from './ListboxOverlay'
-import defaultDictionary from './dictionary'
+import { dictionary as defaultDictionary } from './dictionary'
 
 const styles = StyleSheet.create({
   container: {
@@ -34,7 +35,7 @@ const getInitialOpen = (items, selectedId) =>
     )
     .map((item) => item.id ?? item.label)
 
-const Listbox = React.forwardRef(
+export const Listbox = React.forwardRef(
   (
     {
       items = [],
@@ -227,7 +228,3 @@ Listbox.propTypes = {
    */
   variant: variantProp.propType
 }
-
-Listbox.Overlay = DropdownOverlay
-
-export default Listbox

package/src/Listbox/ListboxGroup.jsx

@@ -2,14 +2,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-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'
 
 const styles = StyleSheet.create({
   groupWrapper: {
@@ -46,7 +48,7 @@ const selectSecondLevelContainerStyles = ({ secondLevelHeaderBackgroundColor })
   backgroundColor: secondLevelHeaderBackgroundColor
 })
 
-const ListboxGroup = React.forwardRef(
+export const ListboxGroup = React.forwardRef(
   (
     {
       id,
@@ -141,7 +143,7 @@ const ListboxGroup = React.forwardRef(
     // TODO: implement keyboard navigation via refs for grouped items separately here
     return (
       <View id="test" style={styles.groupWrapper} accessibilityRole={getAccessibilityRole()}>
-        <ExpandCollapse.Panel
+        <ExpandCollapsePanel
           panelId={id ?? label}
           controlTokens={{
             icon: null,
@@ -200,7 +202,7 @@ const ListboxGroup = React.forwardRef(
               })}
             </View>
           )}
-        </ExpandCollapse.Panel>
+        </ExpandCollapsePanel>
       </View>
     )
   }
@@ -256,5 +258,3 @@ ListboxGroup.propTypes = {
    */
   onClose: PropTypes.func
 }
-
-export default ListboxGroup

package/src/Listbox/ListboxItem.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
-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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -20,7 +22,7 @@ const styles = StyleSheet.create({
   }
 })
 
-const ListboxItem = React.forwardRef(
+const ListboxItemInner = React.forwardRef(
   (
     {
       href,
@@ -70,9 +72,9 @@ const ListboxItem = React.forwardRef(
     )
   }
 )
-ListboxItem.displayName = 'ListboxItem'
+ListboxItemInner.displayName = 'ListboxItem'
 
-ListboxItem.propTypes = {
+ListboxItemInner.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   href: PropTypes.string,
@@ -84,4 +86,4 @@ ListboxItem.propTypes = {
   nestedChild: PropTypes.bool
 }
 
-export default withLinkRouter(ListboxItem)
+export const ListboxItem = withLinkRouter(ListboxItemInner)

package/src/Listbox/ListboxOverlay.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-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'
 
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -104,4 +104,4 @@ DropdownOverlay.propTypes = {
   variant: PropTypes.object
 }
 
-export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay
+export const ListboxOverlay = Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay

package/src/Listbox/PressableItem.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Text } from 'react-native'
-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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -51,7 +53,7 @@ const getItemStyles = ({
   justifyContent: 'center'
 })
 
-const PressableItem = React.forwardRef(
+export const PressableItem = React.forwardRef(
   (
     {
       children,
@@ -138,5 +140,3 @@ PressableItem.propTypes = {
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object
 }
-
-export default PressableItem

package/src/Listbox/SecondLevelHeader.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Text, Pressable } from 'react-native'
-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'
 
 const styles = StyleSheet.create({
   headerContainer: {
@@ -69,7 +71,7 @@ const selectLabelTextStyles = ({
  * Displays a header with back button icon, title text, and close button (IconButton),
  * separated from content by a Divider.
  */
-const SecondLevelHeader = React.forwardRef(
+export const SecondLevelHeader = React.forwardRef(
   (
     {
       label,
@@ -178,5 +180,3 @@ SecondLevelHeader.propTypes = {
    */
   variant: variantProp.propType
 }
-
-export default SecondLevelHeader

package/src/Listbox/dictionary.js

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

package/src/Modal/Modal.jsx

@@ -9,22 +9,21 @@ import {
 } from 'react-native'
 
 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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -97,7 +96,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 = React.forwardRef(
+export const Modal = React.forwardRef(
   (
     {
       children,
@@ -262,7 +261,7 @@ const Modal = React.forwardRef(
           </View>
           {/* when a modal becomes open its first focusable element is being automatically focused */}
           {/* and we prefer the close button over backdrop */}
-          <TouchableWithoutFeedback onPress={isBackdropClickable && handleClose}>
+          <TouchableWithoutFeedback onPress={isBackdropClickable ? handleClose : undefined}>
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
         </ScrollView>
@@ -369,8 +368,6 @@ Modal.propTypes = {
   backgroundDismissible: PropTypes.bool
 }
 
-export default Modal
-
 const staticStyles = StyleSheet.create({
   backdrop: {
     position: 'absolute',

package/src/Modal/ModalContent.jsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import { View, StyleSheet, Platform } from 'react-native'
 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'
 
-const ModalContent = React.forwardRef(
+export const ModalContent = React.forwardRef(
   (
     {
       heading,
@@ -195,5 +195,3 @@ ModalContent.propTypes = {
   onCancel: PropTypes.func,
   footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 }
-
-export default ModalContent

package/src/Modal/WebModal.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
-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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -14,7 +16,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 = React.forwardRef(({ children, ...rest }, ref) => {
+export const WebModal = React.forwardRef(({ children, ...rest }, ref) => {
   return (
     <Portal>
       <View style={staticStyles.container} {...selectProps(rest)} focusable={true} ref={ref}>
@@ -66,5 +68,3 @@ const staticStyles = StyleSheet.create({
     overflowY: 'auto'
   }
 })
-
-export default WebModal

package/src/Modal/dictionary.js

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

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -2,14 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 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 { 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'
-import IconButton from '../IconButton'
-import useDetectOutsideClick from '../utils/useDetectOutsideClick'
+import { Card } from '../Card/Card'
+import { IconButton } from '../IconButton/IconButton'
+import { useDetectOutsideClick } from '../utils/useDetectOutsideClick'
 
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -66,7 +69,7 @@ const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
   paddingTop
 })
 
-const ModalOverlay = React.forwardRef(
+export const ModalOverlay = React.forwardRef(
   (
     {
       children,
@@ -82,8 +85,7 @@ const ModalOverlay = React.forwardRef(
       tokens,
       copy,
       onClose,
-      enableFullscreen = false,
-      dismissWhenPressedOutside = false
+      enableFullscreen = false
     },
     ref
   ) => {
@@ -91,7 +93,7 @@ const ModalOverlay = React.forwardRef(
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
 
     const containerRef = React.useRef(ref || null)
-    useDetectOutsideClick(containerRef, onClose, dismissWhenPressedOutside)
+    useDetectOutsideClick(containerRef, onClose)
 
     const containerWidthHeight = {
       minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
@@ -161,12 +163,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
+  enableFullscreen: PropTypes.bool
 }
-
-export default ModalOverlay

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -2,33 +2,31 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Portal } from '@gorhom/portal'
 import { View, StyleSheet, Dimensions, SafeAreaView, Platform, ScrollView } from 'react-native'
-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'
-
-const { Col, Row } = FlexGrid
+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'
 
 const selectHeaderTokens = ({
   contentMarginLeft,
@@ -66,7 +64,7 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
 
 const TOTAL_COLUMNS = 12
 
-const MultiSelectFilter = React.forwardRef(
+export const MultiSelectFilter = React.forwardRef(
   (
     {
       label,
@@ -88,7 +86,6 @@ const MultiSelectFilter = React.forwardRef(
       inactive = false,
       rowLimit = 12,
       dictionary = defaultDictionary,
-      dismissWhenPressedOutside = false,
       ...rest
     },
     ref
@@ -290,38 +287,38 @@ const MultiSelectFilter = React.forwardRef(
 
     const headerContent = (
       <View style={[selectHeaderTokens(restTokens), styles.container]}>
-        <Row>
+        <FlexGridRow>
           <View>
             <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
               {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label)}
             </Typography>
           </View>
-        </Row>
+        </FlexGridRow>
         {subtitle && (
           <>
             <Spacer space={4} />
-            <Row>
+            <FlexGridRow>
               <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
                 {subtitle}
               </Typography>
-            </Row>
+            </FlexGridRow>
           </>
         )}
         <Spacer space={4} />
         <View style={styles.options}>
           <ScrollView onLayout={handleScrollViewLayout} style={styles.scrollContainer}>
-            <Row distribute="between" onLayout={handleRowLayout}>
+            <FlexGridRow distribute="between" onLayout={handleRowLayout}>
               {[...Array(colSize).keys()].map((i) => (
-                <Col xs={TOTAL_COLUMNS / colSize} key={i}>
+                <FlexGridCol xs={TOTAL_COLUMNS / colSize} key={i}>
                   <CheckboxGroup
                     items={items.slice(i * rowLength, (i + 1) * rowLength)}
                     checkedIds={checkedIds}
                     onChange={(e) => setCheckedIds(e, i)}
                   />
                   <Spacer size={4} />
-                </Col>
+                </FlexGridCol>
               ))}
-            </Row>
+            </FlexGridRow>
           </ScrollView>
         </View>
       </View>
@@ -338,7 +335,7 @@ const MultiSelectFilter = React.forwardRef(
         )}
         <Spacer space={4} />
         <View style={selectControlsTokens(restTokens)}>
-          <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
+          <FlexGridRow horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
             <StackView
               direction={buttonDirection}
               space={3}
@@ -360,7 +357,7 @@ const MultiSelectFilter = React.forwardRef(
                 <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
               </Box>
             </StackView>
-          </Row>
+          </FlexGridRow>
         </View>
       </>
     )
@@ -417,7 +414,6 @@ const MultiSelectFilter = React.forwardRef(
         )}
         {isOpen && viewport !== 'xs' && (
           <ModalOverlay
-            dismissWhenPressedOutside={dismissWhenPressedOutside}
             onClose={onClose}
             overlaidPosition={overlaidPosition}
             maxHeight={items.length >= rowLimit ? true : maxHeight}
@@ -584,12 +580,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
+  rowLimit: PropTypes.number
 }
-
-export default MultiSelectFilter

package/src/MultiSelectFilter/dictionary.js

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

package/src/Notification/Notification.jsx

@@ -3,28 +3,22 @@ import { View } from 'react-native'
 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'
 
 const CONTENT_MAX_WIDTH = 'max'
 
@@ -267,7 +261,7 @@ const getDefaultStyles = (
  * 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 = React.forwardRef(
+export const Notification = React.forwardRef(
   (
     {
       children,
@@ -486,5 +480,3 @@ Notification.propTypes = {
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 }
-
-export default Notification