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

package/lib/esm/Radio/RadioGroup.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
-import { getStackedContent } from '../StackView';
-import Radio from './Radio';
-import Fieldset from '../Fieldset';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { containUniqueFields } from '../utils/containUniqueFields';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useInputValue } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { getStackedContent } from '../StackView/getStackedContent';
+import { Radio } from './Radio';
+import { Fieldset } from '../Fieldset/Fieldset';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
@@ -59,7 +65,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * />
  * ```
  */
-const RadioGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const RadioGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,
@@ -198,7 +204,9 @@ RadioGroup.propTypes = {
     id: PropTypes.string,
     onChange: PropTypes.func,
     description: PropTypes.string,
-    ref: ABBPropTypes.ref()
+    ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.any
+    })])
   })),
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.
@@ -251,5 +259,4 @@ RadioGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each radio input.
    */
   name: PropTypes.string
-};
-export default RadioGroup;
+};

package/lib/esm/Radio/RadioInput.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
  * On Web we need to include an actual input but hide it.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const RadioInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const RadioInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     checked,
     defaultChecked,
@@ -46,5 +46,4 @@ RadioInput.propTypes = {
   name: PropTypes.string,
   onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
-};
-export default RadioInput;
+};

package/lib/esm/Radio/RadioInput.native.js

@@ -1,5 +1,4 @@
 /**
  * There's no radio button input on native platforms, so this is a noop.
  */
-const RadioInput = () => null;
-export default RadioInput;
+export const RadioInput = () => null;

package/lib/esm/RadioCard/RadioCard.js

@@ -3,11 +3,20 @@ import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
-import { PressableCardBase, selectPressableCardTokens } from '../Card';
-import StackView from '../StackView';
-import RadioButton, { selectRadioButtonTokens } from '../Radio/RadioButton';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useInputValue } from '../utils/input';
+import { useUniqueId } from '../utils/useUniqueId';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { PressableCardBase, selectPressableCardTokens } from '../Card/PressableCardBase';
+import { StackView } from '../StackView/StackView';
+import { RadioButton, selectRadioButtonTokens } from '../Radio/RadioButton';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
@@ -46,7 +55,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
  * or the internal state in case of uncontrolled radio button.
  */
-const RadioCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const RadioCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -206,5 +215,4 @@ const staticStyles = StyleSheet.create({
   alignWithText: {
     justifyContent: 'center'
   }
-});
-export default RadioCard;
+});

package/lib/esm/RadioCard/RadioCardGroup.js

@@ -1,11 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
-import StackView, { StackWrap } from '../StackView';
-import RadioCard from './RadioCard';
-import Fieldset from '../Fieldset';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { containUniqueFields } from '../utils/containUniqueFields';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useInputValue } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { StackView } from '../StackView/StackView';
+import { StackWrap } from '../StackView/StackWrap';
+import { RadioCard } from './RadioCard';
+import { Fieldset } from '../Fieldset/Fieldset';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
@@ -60,7 +68,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * />
  * ```
  */
-const RadioCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const RadioCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,
@@ -253,5 +261,4 @@ RadioCardGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each radio input.
    */
   name: PropTypes.string
-};
-export default RadioCardGroup;
+};

package/lib/esm/Responsive/Responsive.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme } from '../ThemeProvider';
-import ResponsiveProp from './ResponsiveProp';
-import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleSheet';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { ResponsiveProp } from './ResponsiveProp';
+import { ResponsiveWithMediaQueryStyleSheet } from './ResponsiveWithMediaQueryStyleSheet';
 
 /**
  * Responsive conditionally renders children based on whether the viewport matches the provided
@@ -17,7 +17,7 @@ import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleS
  * is used to hide and show children of `Responsive` within a View.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const Responsive = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Responsive = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     min = 'xs',
     max,
@@ -61,5 +61,4 @@ Responsive.propTypes = {
    */
   inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
-};
-export default Responsive;
+};

package/lib/esm/Responsive/ResponsiveProp.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
-import { useResponsiveProp } from '../utils';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-const ResponsiveProp = _ref => {
+export const ResponsiveProp = _ref => {
   let {
     min = 'xs',
     max,
@@ -34,5 +34,4 @@ ResponsiveProp.propTypes = {
    */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   children: PropTypes.node.isRequired
-};
-export default ResponsiveProp;
+};

package/lib/esm/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
-import { BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
+import { BaseView } from '../utils/BaseView/BaseView';
+import { StyleSheet, createMediaQueryStyles } from '../utils/ssr-media-query/ssr-media-query';
 import { jsx as _jsx } from "react/jsx-runtime";
 function generateResponsiveStyles(min, max) {
   const viewportsArray = viewports.keys;
@@ -24,7 +25,7 @@ function generateResponsiveStyles(min, max) {
   });
   return createMediaQueryStyles(styles, false);
 }
-const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     min,
     max,
@@ -64,5 +65,4 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
   max: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
-};
-export default ResponsiveWithMediaQueryStyleSheet;
+};

package/lib/esm/Search/Search.js

@@ -2,13 +2,22 @@ import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps, contentfulProps } from '../utils';
-import TextInputBase from '../TextInput/TextInputBase';
-import ButtonBase from '../Button/ButtonBase';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import Icon from '../Icon';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useInputValue } from '../utils/input';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { textInputHandlerProps } from '../utils/props/handlerProps';
+import { textInputProps } from '../utils/props/textInputProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { contentfulProps } from '../utils/props/contentfulProps';
+import { TextInputBase } from '../TextInput/TextInputBase';
+import { ButtonBase } from '../Button/ButtonBase';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
+import { Icon } from '../Icon/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
@@ -80,7 +89,7 @@ const modifyButtonTokens = tokens => {
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const Search = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     initialValue,
     value,
@@ -270,5 +279,4 @@ Search.propTypes = {
    * ID for Submit button element on web
    */
   nativeSubmitBtnID: PropTypes.string
-};
-export default Search;
+};

package/lib/esm/Search/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     accessibilityLabel: 'Search',
     clearButtonAccessibilityLabel: 'Clear',

package/lib/esm/Select/Picker.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { componentPropType, selectSystemProps, htmlAttrs } from '../utils';
+import { componentPropType } from '../utils/props/componentPropType';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { htmlAttrs } from '../utils/htmlAttrs';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     value,
     onChange,
@@ -66,8 +68,7 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })
   );
 });
-Picker.displayName = 'Picker';
-export default Picker;
+Picker.displayName = 'SelectPicker';
 Picker.propTypes = {
   ...selectedSystemPropTypes,
   value: PropTypes.string,

package/lib/esm/Select/Picker.native.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import NativePicker from 'react-native-picker-select';
-import { a11yProps, componentPropType } from '../utils';
-import Group from './Group';
+import { a11yProps } from '../utils/props/a11yProps';
+import { componentPropType } from '../utils/props/componentPropType';
+import { SelectGroup } from './SelectGroup';
 import { ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING, ALLOW_FONT_SCALING, ADJUSTS_FONT_SIZE_TO_FIT, MAX_FONT_SIZE_MULTIPLIER } from './constants';
 
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
@@ -37,7 +38,7 @@ const selectAndroidContainerStyles = _ref2 => {
     paddingTop: ANDROID_DEFAULT_PADDING
   };
 };
-const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     value,
     onChange,
@@ -51,7 +52,7 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   } = _ref3;
   // Ungroup items, since there's no way to support groups on native
   const flatChildren = React.Children.toArray(children).flatMap(child => {
-    if (child.type === Group) {
+    if (child.type === SelectGroup) {
       return child.props.children;
     }
     return child;
@@ -108,7 +109,6 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
 });
 Picker.displayName = 'Picker';
-export default Picker;
 Picker.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func,

package/lib/esm/Select/Select.js

@@ -4,10 +4,20 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
-import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider';
-import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps, htmlAttrs } from '../utils';
-import Picker from './Picker';
-import InputSupports from '../InputSupports';
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider/utils/styles';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { a11yProps } from '../utils/props/a11yProps';
+import { componentPropType } from '../utils/props/componentPropType';
+import { getTokensPropType } from '../utils/props/tokens';
+import { inputSupportsProps } from '../utils/props/inputSupportsProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useInputValue } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { Picker } from './Picker';
+import { InputSupports } from '../InputSupports/InputSupports';
 import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps, htmlAttrs]);
@@ -184,11 +194,11 @@ const selectCustomFeedbackStyles = _ref7 => {
  * When a more in-depth explanation is needed to fill out a `Select` properly, the tooltip prop may be used.
  *
  * ## Grouping options
- * `Select` supports option groups. Use a `Select.Group` component to render an `<optgroup>` element with its items.
+ * `Select` supports option groups. Use a `SelectGroup` component to render an `<optgroup>` element with its items.
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+export const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     value,
     initialValue,
@@ -331,7 +341,6 @@ Select.propTypes = {
    */
   testID: PropTypes.string
 };
-export default Select;
 const staticStyles = StyleSheet.create({
   iconContainer: {
     position: 'absolute',

package/lib/esm/Select/{Group.js → SelectGroup.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
+import { componentPropType } from '../utils/props/componentPropType';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Group = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const SelectGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     label
@@ -13,9 +13,8 @@ const Group = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Group.displayName = 'Group';
-export default Group;
-Group.propTypes = {
+SelectGroup.displayName = 'SelectGroup';
+SelectGroup.propTypes = {
   children: componentPropType('Item'),
   /**
    * The label for the group.

package/lib/esm/Select/{Group.native.js → SelectGroup.native.js}

@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-const Group = _ref => {
+import { componentPropType } from '../utils/props/componentPropType';
+export const SelectGroup = _ref => {
   let {
     children
   } = _ref;
   return children;
 };
-export default Group;
-Group.propTypes = {
+SelectGroup.propTypes = {
   children: componentPropType('Item'),
   /**
    * The label for the group.

package/lib/esm/Select/{Item.js → SelectItem.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const SelectItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     value
@@ -12,9 +12,8 @@ const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Item.displayName = 'Item';
-export default Item;
-Item.propTypes = {
+SelectItem.displayName = 'SelectItem';
+SelectItem.propTypes = {
   children: PropTypes.string.isRequired,
   /**
    * The value of the option

package/lib/esm/Select/SelectItem.native.js

@@ -0,0 +1 @@
+export const SelectItem = () => null;

package/lib/esm/Shortcuts/Shortcuts.js

@@ -4,10 +4,17 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import { viewports } from '@telus-uds/system-constants';
-import { useTheme, useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useResponsiveProp, variantProp, viewProps } from '../utils';
-import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { HorizontalScroll, horizontalScrollUtils } from '../HorizontalScroll/HorizontalScroll';
+import { HorizontalScrollButton } from '../HorizontalScroll/HorizontalScrollButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const {
@@ -70,7 +77,7 @@ const selectStyles = (themeTokens, maxWidth, viewport) => {
  *   <ShortcutsItem icon={SettingsIcon} label="Settings" />
  * </Shortcuts>
  */
-const Shortcuts = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Shortcuts = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -156,5 +163,4 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row',
     flex: 1
   }
-});
-export default Shortcuts;
+});

package/lib/esm/Shortcuts/ShortcutsItem.js

@@ -5,9 +5,19 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
-import Icon from '../Icon';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { clickProps } from '../utils/props/clickProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { resolvePressableState } from '../utils/pressability';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { wrapStringsInText } from '../utils/children';
+import { Icon } from '../Icon/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DYNAMIC_WIDTH_VARIANT = 'dynamic';
 const EQUAL_WIDTH_VARIANT = 'equal';
@@ -106,7 +116,7 @@ const selectTitleTextStyles = tokens => applyTextStyles({
  *   onPressableStateChange={(state) => console.log(state)}
  * />
  */
-const ShortcutsItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ShortcutsItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     icon,
     image = {
@@ -267,7 +277,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'center'
   },
   label: {
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    alignContent: 'stretch'
   }
-});
-export default ShortcutsItem;
+});

package/lib/esm/SideNav/SideNav.js

@@ -1,10 +1,15 @@
 import React, { createElement as _createElement } from 'react';
 import PropTypes from 'prop-types';
-import ExpandCollapse from '../ExpandCollapse';
-import Item from './Item';
-import ItemsGroup from './ItemsGroup';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { ExpandCollapse } from '../ExpandCollapse/ExpandCollapse';
+import { SideNavItem } from './SideNavItem';
+import { SideNavItemsGroup } from './SideNavItemsGroup';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { componentPropType } from '../utils/props/componentPropType';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectContainerTokens = _ref => {
   let {
@@ -35,7 +40,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const SideNav = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     variant = {},
@@ -79,7 +84,7 @@ const SideNav = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           onItemPress(...arguments);
           if (onPress) onPress(...arguments);
         };
-        return /*#__PURE__*/_createElement(Item, {
+        return /*#__PURE__*/_createElement(SideNavItem, {
           ...item.props,
           key: itemId,
           itemId: itemId,
@@ -95,14 +100,14 @@ const SideNav = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       };
       return React.Children.map(children, (child, index) => {
         // iterate over children and identify them internally to later reference expanded groups and active items
-        if (child.type === Item) return renderItem(child, index);
-        if (child.type === ItemsGroup) {
+        if (child.type === SideNavItem) return renderItem(child, index);
+        if (child.type === SideNavItemsGroup) {
           const {
             groupId = `group-${index}`
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
           const handleToggle = event => onToggle(groupId, event);
-          return /*#__PURE__*/_createElement(ItemsGroup, {
+          return /*#__PURE__*/_createElement(SideNavItemsGroup, {
             ...child.props,
             key: groupId,
             groupId: groupId,
@@ -123,24 +128,21 @@ SideNav.displayName = 'SideNav';
 SideNav.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
+   * Specifies the structure and links of the `SideNav`. It may only consist of `SideNavItem` and `SideNavItemsGroup`.
    */
   children: componentPropType(['Item', 'ItemsGroup']),
   /**
-   * Identifies if only one `SideNav.ItemsGroup` should be open at a time.
+   * Identifies if only one `SideNavItemsGroup` should be open at a time.
    */
   accordion: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNav'),
   /**
-   * Custom tokens for `SideNav.Item`
+   * Custom tokens for `SideNavItem`
    */
   itemTokens: getTokensPropType('SideNavItem'),
   /**
    * Custom tokens for `SideNavItemsGroup`
    */
   groupTokens: getTokensPropType('SideNavItemsGroup')
-};
-SideNav.Item = Item;
-SideNav.ItemsGroup = ItemsGroup;
-export default SideNav;
+};