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

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;
+};

package/lib/esm/SideNav/{Item.js → SideNavItem.js}

@@ -2,9 +2,16 @@ import React from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import { a11yProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils';
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
-import ItemContent from './ItemContent';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { verticalAlignRow } from '../ThemeProvider/utils/styles';
+import { SideNavItemContent } from './SideNavItemContent';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 function selectItemStyles(_ref) {
@@ -35,11 +42,11 @@ function selectItemStyles(_ref) {
 }
 
 /**
- `SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.
+ `SideNavItem` is a navigational element that is used within `SideNav` or `SideNavItemsGroup`.
 
- This component can only be accessed as a name-spaced component: `SideNav.Item`.
+ This component can only be accessed as a name-spaced component: `SideNavItem`.
  */
-const Item = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const SideNavItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     itemId,
@@ -94,15 +101,15 @@ const Item = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectedProps,
     children: pressableState => {
       const themeTokens = getTokens(getAppearanceState(pressableState));
-      return /*#__PURE__*/_jsx(ItemContent, {
+      return /*#__PURE__*/_jsx(SideNavItemContent, {
         tokens: themeTokens,
         children: children
       });
     }
   });
 });
-Item.displayName = 'Item';
-Item.propTypes = {
+SideNavItem.displayName = 'SideNavItem';
+SideNavItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Text content of the `Item`.
@@ -132,12 +139,11 @@ Item.propTypes = {
   isActive: PropTypes.bool,
   /**
    * @ignore
-   * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
+   * Set internally in `SideNavItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
   accessibilityRole: PropTypes.string,
   testID: PropTypes.number,
   tokens: getTokensPropType('SideNavItem'),
   variant: variantProp.propType
-};
-export default Item;
+};

package/lib/esm/SideNav/{ItemContent.js → SideNavItemContent.js}

@@ -2,8 +2,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 Typography from '../Typography';
-import { selectTokens, getTokensPropType } from '../utils';
+import { Typography } from '../Typography/Typography';
+import { selectTokens, getTokensPropType } from '../utils/props/tokens';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function selectAccentStyles(tokens) {
   return {
@@ -19,7 +19,7 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const SideNavItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
@@ -35,8 +35,8 @@ const ItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-ItemContent.displayName = 'ItemContent';
-ItemContent.propTypes = {
+SideNavItemContent.displayName = 'SideNavItemContent';
+SideNavItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),
   children: PropTypes.node
 };
@@ -44,5 +44,4 @@ const staticStyles = StyleSheet.create({
   absolute: {
     position: 'absolute'
   }
-});
-export default ItemContent;
+});

package/lib/esm/SideNav/{ItemsGroup.js → SideNavItemsGroup.js}

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ItemContent from './ItemContent';
-import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { SideNavItemContent } from './SideNavItemContent';
+import { ExpandCollapsePanel } from '../ExpandCollapse/ExpandCollapsePanel';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { componentPropType } from '../utils/props/componentPropType';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectPanelTokens = _ref => {
   let {
@@ -21,14 +23,14 @@ const selectPanelTokens = _ref => {
 /**
  Expandable content areas for use within `SideNav`.
 
- This component can only be accessed as a name-spaced component: `SideNav.ItemsGroup`.
+ This component can only be accessed as a name-spaced component: `SideNavItemsGroup`.
 
- `SideNav.ItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
+ `SideNavItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
 
  ## Usage Criteria
- - Use `SideNav.ItemsGroup` with large pages that have multiple sections
+ - Use `SideNavItemsGroup` with large pages that have multiple sections
  */
-const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const SideNavItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     label,
@@ -68,7 +70,7 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
   const controlContent = controlState => {
     const currentItemTokens = getItemTokens(getItemAppearance(controlState));
-    return /*#__PURE__*/_jsx(ItemContent, {
+    return /*#__PURE__*/_jsx(SideNavItemContent, {
       tokens: {
         ...currentItemTokens,
         ...staticTokens.content
@@ -76,7 +78,7 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       children: label
     });
   };
-  return /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
+  return /*#__PURE__*/_jsx(ExpandCollapsePanel, {
     ref: ref,
     openIds: openGroups,
     panelId: groupId,
@@ -86,7 +88,7 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     control: controlContent,
     accessibilityState: {
       active: isActive
-    } // ExpandCollapse.Panel handles expanded state
+    } // ExpandCollapsePanel handles expanded state
     ,
     disableMobileScrollBuffer: true,
     children: children
@@ -105,14 +107,14 @@ const staticTokens = {
     accentWidth: 0
   }
 };
-ItemsGroup.displayName = 'ItemsGroup';
-ItemsGroup.propTypes = {
+SideNavItemsGroup.displayName = 'SideNavItemsGroup';
+SideNavItemsGroup.propTypes = {
   /**
-   * Specifies the links contained within. It may only contain `SideNav.Item`.
+   * Specifies the links contained within. It may only contain `SideNavItem`.
    */
   children: componentPropType('Item'),
   /**
-   * Text content of the group's parent `SideNav.Item`.
+   * Text content of the group's parent `SideNavItem`.
    */
   label: PropTypes.string.isRequired,
   /**
@@ -132,14 +134,13 @@ ItemsGroup.propTypes = {
   openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   /**
    * @ignore
-   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
+   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNavItem`.
    */
   isActive: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNavItemsGroup'),
   /**
-   * Custom tokens for `SideNav.Item`
+   * Custom tokens for `SideNavItem`
    */
   itemTokens: getTokensPropType('SideNavItem')
-};
-export default ItemsGroup;
+};

package/lib/esm/Skeleton/Skeleton.js

@@ -4,11 +4,19 @@ 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 propTypes from 'prop-types';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, responsiveProps, useResponsiveProp, useSpacingScale, spacingProps, variantProp, viewProps } from '../utils';
-import useSkeletonNativeAnimation from './useSkeletonNativeAnimation';
-import skeletonWebAnimation from './skeletonWebAnimation';
+import { StackView } from '../StackView/StackView';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { responsiveProps } from '../utils/props/responsiveProps';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { spacingProps } from '../utils/props/spacingProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { useSkeletonNativeAnimation } from './useSkeletonNativeAnimation';
+import { skeletonWebAnimation } from './skeletonWebAnimation';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectSkeletonStyles = _ref => {
@@ -51,12 +59,11 @@ const selectSquareStyles = _ref4 => {
     borderRadius: radius
   };
 };
-const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     tokens,
     variant,
-    size,
-    sizeIndex = size,
+    sizeIndex,
     sizePixels,
     characters,
     lines,
@@ -145,10 +152,6 @@ Skeleton.propTypes = {
    * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
    */
   sizeIndex: spacingProps.types.spacingValue,
-  /**
-   * @deprecated alias for `sizeIndex`
-   */
-  size: spacingProps.types.spacingValue,
   /**
    * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
    *
@@ -173,5 +176,4 @@ Skeleton.propTypes = {
    * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
    */
   shape: propTypes.oneOf(['line', 'circle', 'box'])
-};
-export default Skeleton;
+};

package/lib/esm/Skeleton/skeletonWebAnimation.js

@@ -1,4 +1,4 @@
-const skeletonWebAnimation = (secondColor, animationTime) => {
+export const skeletonWebAnimation = (secondColor, animationTime) => {
   return {
     animationDuration: `${animationTime}ms`,
     animationTimingFunction: 'ease-in-out',
@@ -10,5 +10,4 @@ const skeletonWebAnimation = (secondColor, animationTime) => {
       }
     }
   };
-};
-export default skeletonWebAnimation;
+};

package/lib/esm/Skeleton/useSkeletonNativeAnimation.js

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-const useSkeletonNativeAnimation = _ref => {
+export const useSkeletonNativeAnimation = _ref => {
   let {
     animationDuration
   } = _ref;
@@ -24,5 +24,4 @@ const useSkeletonNativeAnimation = _ref => {
   return {
     opacity: fadeAnimation
   };
-};
-export default useSkeletonNativeAnimation;
+};