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

package/lib/cjs/Select/Select.js

@@ -3,21 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Select = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _systemConstants = require("@telus-uds/system-constants");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Picker = _interopRequireDefault(require("./Picker"));
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _a11yProps = require("../utils/props/a11yProps");
+var _componentPropType = require("../utils/props/componentPropType");
+var _tokens = require("../utils/props/tokens");
+var _inputSupportsProps = require("../utils/props/inputSupportsProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _Picker = require("./Picker");
+var _InputSupports = require("../InputSupports/InputSupports");
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps, _utils.htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _inputSupportsProps.inputSupportsProps, _viewProps.viewProps, _htmlAttrs.htmlAttrs]);
 const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
@@ -42,7 +52,7 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
-  const textStyles = (0, _ThemeProvider.applyTextStyles)({
+  const textStyles = (0, _styles.applyTextStyles)({
     fontName,
     fontSize,
     lineHeight,
@@ -100,7 +110,7 @@ const selectOuterBorderStyles = _ref2 => {
   } = _ref2;
   return {
     background: outerBackgroundColor,
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...(0, _styles.applyOuterBorder)({
       outerBorderColor,
       outerBorderWidth,
       borderRadius
@@ -191,11 +201,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.default.forwardRef((_ref8, ref) => {
+const Select = exports.Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     value,
     initialValue,
@@ -213,7 +223,7 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   const {
     currentValue,
     setValue
-  } = (0, _utils.useInputValue)({
+  } = (0, _input.useInputValue)({
     value,
     initialValue,
     onChange,
@@ -230,7 +240,7 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     supportsProps,
     ...selectedProps
   } = selectProps(rest);
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Select', tokens, variant, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Select', tokens, variant, {
     focus: isFocused,
     hover: isHovered,
     inactive,
@@ -243,8 +253,8 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   } = themeTokens;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+  } = (0, _useTheme.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.InputSupports, {
     ...supportsProps,
     ...selectedProps,
     validation: validation,
@@ -256,7 +266,7 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       } = _ref9;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: selectOuterBorderStyles(themeTokens),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.Picker, {
           ref: ref,
           style: selectInputStyles(themeTokens, themeOptions, inactive),
           onFocus: handleFocus,
@@ -311,7 +321,7 @@ Select.propTypes = {
   /**
    * An array of items or item groups to be used as options.
    */
-  children: (0, _utils.componentPropType)(['Item', 'Group']),
+  children: (0, _componentPropType.componentPropType)(['Item', 'Group']),
   /**
    * Whether the select is disabled.
    */
@@ -328,17 +338,16 @@ Select.propTypes = {
   /**
    * Select tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Select'),
+  tokens: (0, _tokens.getTokensPropType)('Select'),
   /**
    * Select variant.
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Dedicated ID for testing.
    */
   testID: _propTypes.default.string
 };
-var _default = exports.default = Select;
 const staticStyles = _StyleSheet.default.create({
   iconContainer: {
     position: 'absolute',

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SelectGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _componentPropType = require("../utils/props/componentPropType");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Group = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const SelectGroup = exports.SelectGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     label
@@ -20,10 +20,9 @@ const Group = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Group.displayName = 'Group';
-var _default = exports.default = Group;
-Group.propTypes = {
-  children: (0, _utils.componentPropType)('Item'),
+SelectGroup.displayName = 'SelectGroup';
+SelectGroup.propTypes = {
+  children: (0, _componentPropType.componentPropType)('Item'),
   /**
    * The label for the group.
    */

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

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SelectGroup = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _componentPropType = require("../utils/props/componentPropType");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Group = _ref => {
+const SelectGroup = _ref => {
   let {
     children
   } = _ref;
   return children;
 };
-var _default = exports.default = Group;
-Group.propTypes = {
-  children: (0, _utils.componentPropType)('Item'),
+exports.SelectGroup = SelectGroup;
+SelectGroup.propTypes = {
+  children: (0, _componentPropType.componentPropType)('Item'),
   /**
    * The label for the group.
    */

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SelectItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const SelectItem = exports.SelectItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     value
@@ -19,9 +19,8 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Item.displayName = 'Item';
-var _default = exports.default = Item;
-Item.propTypes = {
+SelectItem.displayName = 'SelectItem';
+SelectItem.propTypes = {
   children: _propTypes.default.string.isRequired,
   /**
    * The value of the option

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectItem = void 0;
+const SelectItem = () => null;
+exports.SelectItem = SelectItem;

package/lib/cjs/Shortcuts/Shortcuts.js

@@ -3,22 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Shortcuts = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _systemConstants = require("@telus-uds/system-constants");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _utils = require("../utils");
-var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
+var _HorizontalScrollButton = require("../HorizontalScroll/HorizontalScrollButton");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const {
   selectHorizontalScrollTokens,
   useItemPositions
@@ -79,7 +84,7 @@ const selectStyles = (themeTokens, maxWidth, viewport) => {
  *   <ShortcutsItem icon={SettingsIcon} label="Settings" />
  * </Shortcuts>
  */
-const Shortcuts = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Shortcuts = exports.Shortcuts = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -89,14 +94,14 @@ const Shortcuts = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Shortcuts', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Shortcuts', tokens, variant, {
     viewport
   });
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth, _systemConstants.viewports.map.get(_systemConstants.viewports.xl));
+  } = (0, _useTheme.useTheme)();
+  const maxWidth = (0, _useResponsiveProp.useResponsiveProp)(themeOptions?.contentMaxWidth, _systemConstants.viewports.map.get(_systemConstants.viewports.xl));
   const [itemPositions] = useItemPositions();
   const [maxItemWidth, setMaxItemWidth] = _react.default.useState(null);
   const registerWidth = _react.default.useCallback(width => setMaxItemWidth(prev => prev == null || width > prev ? width : prev), []);
@@ -119,8 +124,8 @@ const Shortcuts = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: styles.scrollContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
-        ScrollButton: _HorizontalScroll.HorizontalScrollButton,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.HorizontalScroll, {
+        ScrollButton: _HorizontalScrollButton.HorizontalScrollButton,
         itemPositions: itemPositions,
         tokens: selectHorizontalScrollTokens(themeTokens),
         scrollButtonTokens: scrollButtonTokens,
@@ -138,12 +143,12 @@ const Shortcuts = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 Shortcuts.displayName = 'Shortcuts';
 Shortcuts.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Shortcuts'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Shortcuts'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Custom tokens for `HorizontalScrollButton`
    */
-  scrollButtonTokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
+  scrollButtonTokens: (0, _tokens.getTokensPropType)('HorizontalScrollButton'),
   /**
    * Hide labels for all ShortcutsItem children. When true, labels are visually hidden but remain accessible to screen readers via the icon's accessibilityLabel.
    */
@@ -151,7 +156,7 @@ Shortcuts.propTypes = {
   /**
    * Icon variant to apply to all ShortcutsItem children.
    */
-  iconVariant: _utils.variantProp.propType,
+  iconVariant: _variantProp.variantProp.propType,
   /**
    * ShortcutsItem components to be rendered within the Shortcuts container
    */
@@ -165,5 +170,4 @@ const staticStyles = _StyleSheet.default.create({
     flexDirection: 'row',
     flex: 1
   }
-});
-var _default = exports.default = Shortcuts;
+});

package/lib/cjs/Shortcuts/ShortcutsItem.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ShortcutsItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -11,14 +11,24 @@ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _clickProps = require("../utils/props/clickProps");
+var _tokens = require("../utils/props/tokens");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _linkProps = require("../utils/props/linkProps");
+var _pressability = require("../utils/pressability");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _children = require("../utils/children");
+var _Icon = require("../Icon/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DYNAMIC_WIDTH_VARIANT = 'dynamic';
 const EQUAL_WIDTH_VARIANT = 'equal';
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _linkProps.linkProps, _viewProps.viewProps]);
 const selectPressableStyles = (tokens, widthVariant, equalWidth) => {
   const styles = {
     borderColor: tokens.borderColor,
@@ -69,7 +79,7 @@ const selectLabelContainerStyles = tokens => ({
   paddingRight: tokens.labelContainerPaddingRight,
   paddingTop: tokens.labelContainerPaddingTop
 });
-const selectTitleTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)({
+const selectTitleTextStyles = tokens => (0, _styles.applyTextStyles)({
   fontColor: tokens.labelFontColor,
   fontName: tokens.labelFontName,
   fontSize: tokens.labelFontSize,
@@ -113,7 +123,7 @@ const selectTitleTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)({
  *   onPressableStateChange={(state) => console.log(state)}
  * />
  */
-const ShortcutsItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ShortcutsItem = exports.ShortcutsItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     icon,
     image = {
@@ -141,19 +151,19 @@ const ShortcutsItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const widthVariant = mergedVariant?.width;
   const shouldHideLabel = hideLabel || containerHideLabels;
   const mergedIconVariant = iconVariant ?? containerIconVariant;
-  const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('ShortcutsItem', tokens, mergedVariant);
-  const getTokens = pressableState => getThemeTokens((0, _utils.resolvePressableState)(pressableState));
+  const getThemeTokens = (0, _useThemeTokens.useThemeTokensCallback)('ShortcutsItem', tokens, mergedVariant);
+  const getTokens = pressableState => getThemeTokens((0, _pressability.resolvePressableState)(pressableState));
   const {
     onPress,
     ...props
-  } = _utils.clickProps.toPressProps(rest);
+  } = _clickProps.clickProps.toPressProps(rest);
   const {
     hrefAttrs,
     rawRest
-  } = _utils.hrefAttrsProp.bundle(props);
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     href,
-    onPress: _utils.linkProps.handleHref({
+    onPress: _linkProps.linkProps.handleHref({
       href,
       onPress
     }),
@@ -176,13 +186,13 @@ const ShortcutsItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: pressableState => {
       const themeTokens = getTokens(pressableState);
       if (onPressableStateChange) {
-        onPressableStateChange((0, _utils.resolvePressableState)(pressableState));
+        onPressableStateChange((0, _pressability.resolvePressableState)(pressableState));
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: staticStyles.container,
         children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: selectIconContainerStyles(themeTokens),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             icon: icon,
             variant: mergedIconVariant ?? selectIconVariant(),
             tokens: mergedIconVariant ? {} : selectIconTokens(themeTokens),
@@ -198,7 +208,7 @@ const ShortcutsItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           accessibilityIgnoresInvertColors: true
         }), label && !shouldHideLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.label, selectLabelContainerStyles(themeTokens)],
-          children: (0, _utils.wrapStringsInText)(label, {
+          children: (0, _children.wrapStringsInText)(label, {
             style: selectTitleTextStyles(themeTokens)
           })
         })]
@@ -209,8 +219,8 @@ const ShortcutsItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 ShortcutsItem.displayName = 'ShortcutsItem';
 ShortcutsItem.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('ShortcutsItem'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('ShortcutsItem'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Icon for the ShortcutsItem
    */
@@ -237,7 +247,7 @@ ShortcutsItem.propTypes = {
   /**
    * Icon variant for this specific ShortcutsItem
    */
-  iconVariant: _utils.variantProp.propType,
+  iconVariant: _variantProp.variantProp.propType,
   /**
    * Callback function that receives the pressable state object containing pressed, hovered, and focused boolean properties
    */
@@ -256,7 +266,7 @@ ShortcutsItem.propTypes = {
    * Variant configuration from Shortcuts container (automatically injected by Shortcuts container)
    * @private
    */
-  containerVariant: _utils.variantProp.propType,
+  containerVariant: _variantProp.variantProp.propType,
   /**
    * Hide labels setting from Shortcuts container (automatically injected by Shortcuts container)
    * @private
@@ -266,7 +276,7 @@ ShortcutsItem.propTypes = {
    * Icon variant from Shortcuts container (automatically injected by Shortcuts container)
    * @private
    */
-  containerIconVariant: _utils.variantProp.propType
+  containerIconVariant: _variantProp.variantProp.propType
 };
 const staticStyles = _StyleSheet.default.create({
   container: {
@@ -274,7 +284,7 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'center'
   },
   label: {
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    alignContent: 'stretch'
   }
-});
-var _default = exports.default = ShortcutsItem;
+});

package/lib/cjs/SideNav/SideNav.js

@@ -3,18 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SideNav = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _Item = _interopRequireDefault(require("./Item"));
-var _ItemsGroup = _interopRequireDefault(require("./ItemsGroup"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _ExpandCollapse = require("../ExpandCollapse/ExpandCollapse");
+var _SideNavItem = require("./SideNavItem");
+var _SideNavItemsGroup = require("./SideNavItemsGroup");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _componentPropType = require("../utils/props/componentPropType");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const selectContainerTokens = _ref => {
   let {
     borderWidth,
@@ -37,14 +41,14 @@ const selectItemTokens = function () {
     } : {})
   };
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  ## Usage Criteria
  - 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.default.forwardRef((_ref2, ref) => {
+const SideNav = exports.SideNav = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     variant = {},
@@ -54,7 +58,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     groupTokens,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('SideNav', tokens, variant);
   const [active, setActive] = _react.default.useState({
     groupId: undefined,
     itemId: undefined
@@ -68,7 +72,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const isItemActive = (itemId, groupId) => {
     return active.groupId === groupId && active.itemId === itemId;
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.ExpandCollapse, {
     ref: ref,
     maxOpen: accordion ? 1 : null,
     tokens: selectContainerTokens(themeTokens),
@@ -88,7 +92,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           onItemPress(...arguments);
           if (onPress) onPress(...arguments);
         };
-        return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
+        return /*#__PURE__*/(0, _react.createElement)(_SideNavItem.SideNavItem, {
           ...item.props,
           key: itemId,
           itemId: itemId,
@@ -104,14 +108,14 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       };
       return _react.default.Children.map(children, (child, index) => {
         // iterate over children and identify them internally to later reference expanded groups and active items
-        if (child.type === _Item.default) return renderItem(child, index);
-        if (child.type === _ItemsGroup.default) {
+        if (child.type === _SideNavItem.SideNavItem) return renderItem(child, index);
+        if (child.type === _SideNavItemsGroup.SideNavItemsGroup) {
           const {
             groupId = `group-${index}`
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
           const handleToggle = event => onToggle(groupId, event);
-          return /*#__PURE__*/(0, _react.createElement)(_ItemsGroup.default, {
+          return /*#__PURE__*/(0, _react.createElement)(_SideNavItemsGroup.SideNavItemsGroup, {
             ...child.props,
             key: groupId,
             groupId: groupId,
@@ -132,24 +136,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: (0, _utils.componentPropType)(['Item', 'ItemsGroup']),
+  children: (0, _componentPropType.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.default.bool,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('SideNav'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('SideNav'),
   /**
-   * Custom tokens for `SideNav.Item`
+   * Custom tokens for `SideNavItem`
    */
-  itemTokens: (0, _utils.getTokensPropType)('SideNavItem'),
+  itemTokens: (0, _tokens.getTokensPropType)('SideNavItem'),
   /**
    * Custom tokens for `SideNavItemsGroup`
    */
-  groupTokens: (0, _utils.getTokensPropType)('SideNavItemsGroup')
-};
-SideNav.Item = _Item.default;
-SideNav.ItemsGroup = _ItemsGroup.default;
-var _default = exports.default = SideNav;
+  groupTokens: (0, _tokens.getTokensPropType)('SideNavItemsGroup')
+};