@telus-uds/components-base 3.12.1 → 3.13.0

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 16 Jul 2025 15:16:33 GMT and should not be manually modified.
+This log was last generated on Fri, 15 Aug 2025 00:45:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.13.0
+
+Fri, 15 Aug 2025 00:45:23 GMT
+
+### Minor changes
+
+- `Carousel`: add new stories & documentation (sergio.ramirez@telus.com)
+- `Notification`: Add `contentMinWidth` prop for system variant (guillermo.peitzner@telus.com)
+- `FlexGrid`: add min-content-width prop (guillermo.peitzner@telus.com)
+- `Checkbox`: Update storybook to add description to the component (sergio.ramirez@telus.com)
+- `ButtonDropdown`: add lead icon props and new variants (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.12.0
+
+### Patches
+
+- `ExpandCollapseMini` fix design & animations (sergio.ramirez@telus.com)
+- Invalid argument supplied to oneOfType issue fixed (35577399+JoshHC@users.noreply.github.com)
+
+## 3.12.2
+
+Fri, 25 Jul 2025 04:13:56 GMT
+
+### Patches
+
+- `Carousel`: fix tab navigation (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.11.0
+
 ## 3.12.1
 
-Wed, 16 Jul 2025 15:16:33 GMT
+Wed, 16 Jul 2025 15:18:31 GMT
 
 ### Patches
 

package/lib/cjs/Button/ButtonDropdown.js

@@ -7,6 +7,7 @@ exports.default = 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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
@@ -14,12 +15,12 @@ var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _StackView = require("../StackView");
 var _pressability = require("../utils/pressability");
 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 FULL_WIDTH_STYLE = 'full';
 const selectIconTokens = _ref => {
   let {
     icon,
@@ -58,6 +59,44 @@ const selectIconTokens = _ref => {
     }
   };
 };
+const selectDescriptionTextStyles = tokens => ({
+  ...(0, _ThemeProvider.applyTextStyles)({
+    fontName: tokens?.descriptionFontName,
+    fontSize: tokens?.descriptionFontSize,
+    fontWeight: tokens?.descriptionFontWeight,
+    fontColor: tokens?.color
+  }),
+  paddingBottom: tokens?.descriptionTextPaddingBottom
+});
+const selectLeadIconTokens = tokens => ({
+  color: tokens?.leadIconColor,
+  backgroundColor: tokens?.leadIconBackgroundColor,
+  size: tokens?.leadIconSize,
+  borderRadius: tokens?.leadIconBorderRadius,
+  padding: tokens?.leadIconPadding
+});
+const selectLeadIconContainerStyles = tokens => ({
+  paddingTop: tokens?.leadIconContainerPaddingTop,
+  paddingBottom: tokens?.leadIconContainerPaddingBottom,
+  paddingLeft: tokens?.leadIconContainerPaddingLeft,
+  paddingRight: tokens?.leadIconContainerPaddingRight
+});
+const selectTextContainerStyles = tokens => ({
+  paddingLeft: tokens?.textPaddingLeft,
+  paddingRight: tokens?.textPaddingRight
+});
+const selectStackedContentStyles = (tokens, iconPosition, isFullWidth) => ({
+  ...staticStyles.stackedContent,
+  gap: tokens?.iconSpace,
+  flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse',
+  ...(_Platform.default.OS === 'web' && {
+    flex: 1
+  }),
+  ...(isFullWidth && {
+    justifyContent: 'space-between',
+    flex: 1
+  })
+});
 const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value,
@@ -70,8 +109,11 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     readOnly = false,
     children = null,
     accessibilityRole = 'radio',
+    description,
+    singleOption,
     ...props
   } = _ref2;
+  const isFullWidth = variant?.width === FULL_WIDTH_STYLE;
   const {
     currentValue: isOpen,
     setValue: setIsOpen
@@ -87,7 +129,13 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...variant
   };
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => ({
+    ...(0, _utils.selectTokens)('Button', getTokens(buttonState)),
+    iconSpace: props?.icon ? getTokens(buttonState)?.iconSpace : 0,
+    ...(isFullWidth && {
+      width: 'full'
+    })
+  });
 
   // Pass an object of relevant component state as first argument for any passed-in press handlers
   const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(props, [{
@@ -105,7 +153,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...pressHandlers,
     onPress: handlePress,
     tokens: getButtonTokens,
-    inactive: inactive,
+    inactive: singleOption || inactive,
     icon: () => null,
     accessibilityRole: accessibilityRole,
     ...props,
@@ -121,14 +169,14 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       // - Token sets: https://github.com/telus/universal-design-system/issues/782
 
       const itemTokens = getTokens(buttonState);
+      const leadIcon = itemTokens?.leadIcon;
       const {
         iconTokens,
         iconPosition,
-        iconSpace,
         iconWrapperStyle,
         icon: IconComponent
       } = selectIconTokens(itemTokens);
-      const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      const iconContent = IconComponent && !singleOption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: iconWrapperStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent,
@@ -139,13 +187,28 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         ...(0, _utils.resolvePressableState)(buttonState, extraState),
         textStyles
       }) : children;
-      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: textStyles,
-        children: label
+      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.contentContainer,
+        children: [leadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectLeadIconContainerStyles(itemTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: leadIcon,
+            tokens: selectLeadIconTokens(itemTokens)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: [staticStyles.textContainer, selectTextContainerStyles(itemTokens)],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: textStyles,
+            children: label
+          }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: selectDescriptionTextStyles(itemTokens),
+            children: description
+          })]
+        })]
       });
-      return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
-        space: iconSpace,
-        direction: 'row'
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectStackedContentStyles(itemTokens, iconPosition, isFullWidth),
+        children: [iconContent, content]
       });
     }
   });
@@ -177,6 +240,36 @@ ButtonDropdown.propTypes = {
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: _propTypes.default.string,
+  /**
+   * The description of ButtonDropdown.
+   */
+  description: _propTypes.default.string,
+  /**
+   * Use this prop to render the ButtonDropdown as display only without any interaction when there is only one option.
+   */
+  singleOption: _propTypes.default.bool
 };
+const staticStyles = _StyleSheet.default.create({
+  textContainer: {
+    alignItems: 'flex-start',
+    flexShrink: 1,
+    ...(_Platform.default.OS === 'web' && {
+      flex: 1
+    })
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    ...(_Platform.default.OS === 'web' && {
+      flex: 1
+    }),
+    flexShrink: 1
+  },
+  stackedContent: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
 var _default = exports.default = ButtonDropdown;

package/lib/cjs/Carousel/Carousel.js

@@ -172,6 +172,31 @@ const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewpo
   }
   return childrenArray.length;
 };
+
+/**
+ * Determines the maximum number of items that can be displayed per slide based on viewport
+ *
+ * @param {boolean} enableDisplayMultipleItemsPerSlide - Flag indicating whether multiple items per slide is enabled
+ * @param {string} viewport - The current viewport size ('xs', 'sm', 'md', 'lg', 'xl')
+ * @returns {number} The maximum number of items that can be displayed per slide
+ */
+const getMaximumItemsForSlide = (enableDisplayMultipleItemsPerSlide, viewport) => {
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        return _Constants.ITEMS_PER_VIEWPORT_XS_SM;
+      case 'md':
+        return _Constants.ITEMS_PER_VIEWPORT_MD;
+      case 'lg':
+      case 'xl':
+        return _Constants.ITEMS_PER_VIEWPORT_LG_XL;
+      default:
+        return _Constants.ITEMS_PER_VIEWPORT_XS_SM;
+    }
+  }
+  return _Constants.ITEMS_PER_VIEWPORT_XS_SM;
+};
 const selectRootContainerStyles = (enableHero, viewport) => {
   if (enableHero && viewport === 'xl' && _Platform.default.OS === 'web') {
     return {
@@ -867,6 +892,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         firstFocusRef: firstFocusRef,
         refocus: refocus,
         width: containerLayout.width,
+        maximumItemsForSlide: getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
           style: [staticStyles.root, {
             ...(_Platform.default.OS === 'web' ? {

package/lib/cjs/Carousel/CarouselContext.js

@@ -21,7 +21,8 @@ const CarouselProvider = _ref => {
     refocus = false,
     themeTokens,
     totalItems,
-    width
+    width,
+    maximumItemsForSlide
   } = _ref;
   const value = _react.default.useMemo(() => ({
     activeIndex,
@@ -31,8 +32,9 @@ const CarouselProvider = _ref => {
     refocus,
     themeTokens,
     totalItems,
-    width
-  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
+    width,
+    maximumItemsForSlide
+  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width, maximumItemsForSlide]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
     value: value,
     children: children
@@ -55,5 +57,6 @@ CarouselProvider.propTypes = {
   refocus: _propTypes.default.bool,
   themeTokens: (0, _utils.getTokensPropType)('Carousel'),
   totalItems: _propTypes.default.number.isRequired,
-  width: _propTypes.default.number.isRequired
+  width: _propTypes.default.number.isRequired,
+  maximumItemsForSlide: _propTypes.default.number
 };

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -94,13 +94,23 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   } = _ref2;
   const {
     width,
-    activeIndex
+    activeIndex,
+    goTo,
+    maximumItemsForSlide
   } = (0, _CarouselContext.useCarousel)();
   const selectedProps = selectProps({
     ...rest,
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
   });
-  const focusabilityProps = activeIndex === elementIndex ? {} : _utils.a11yProps.nonFocusableProps;
+  const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : _utils.a11yProps.nonFocusableProps;
+  const handleFocus = _react.default.useCallback(event => {
+    if (_Platform.default.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
+      goTo(activeIndex + 1);
+    }
+    if (rest.onFocus) {
+      rest.onFocus(event);
+    }
+  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: selectContainerStyle({
       width,
@@ -114,6 +124,7 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
+    onFocus: handleFocus,
     children: children
   });
 });

package/lib/cjs/Carousel/Constants.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
+exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
+const ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_XS_SM = 1;
 const ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_MD = 2;
 const ITEMS_PER_VIEWPORT_LG_XL = exports.ITEMS_PER_VIEWPORT_LG_XL = 3;
 const GAP_BETWEEN_ITEMS = exports.GAP_BETWEEN_ITEMS = 16;

package/lib/cjs/ExpandCollapse/ExpandCollapse.js

@@ -40,6 +40,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
+  const instanceId = (0, _utils.useUniqueId)('ExpandCollapse');
   const {
     currentValues: openIds,
     toggleOneValue: onToggle,
@@ -65,7 +66,8 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         onToggle,
         resetValues,
         setValues,
-        unsetValues
+        unsetValues,
+        instanceId
       }) : children
     })
   });

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -23,7 +23,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     dataSet,
     ...rest
   } = _ref;
-  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
+  const expandCollapeMiniPanelId = (0, _utils.useUniqueId)('ExpandCollapseMiniPanel');
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -52,7 +52,9 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
     pressed
   });
   const {
-    size,
+    fontSize,
+    lineHeight,
+    iconSize,
     icon
   } = (0, _ThemeProvider.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
@@ -69,18 +71,38 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
       hover: linkHover
     } = linkState || {};
     const isHovered = hover || linkHover;
+    const iconBaselineOffset = 0;
+    const hoverTranslateY = 4;
+
+    // Calculate baseline alignment to vertically center icon with text
+    // This combines font and icon metrics with adjustments for visual balance
+    const fontBaseline = fontSize / hoverTranslateY; // Quarter of font size - adjusts for text's visual center point
+    const iconBaseline = iconSize / hoverTranslateY; // Quarter of icon size - adjusts for icon's visual center point
+    const staticOffset = hoverTranslateY; // Fixed downward adjustment to fine-tune vertical alignment
+    const sizeCompensation = -Math.abs(iconSize - fontSize); // Compensates when icon and text sizes differ significantly
+
+    const baselineAlignment = fontBaseline + iconBaseline - staticOffset + sizeCompensation;
     if (_Platform.default.OS !== 'web') {
+      // For native platforms, use baseline alignment with optional offset
       return {
-        iconTranslateY: -1
+        iconTranslateY: baselineAlignment + iconBaselineOffset
       };
     }
     if (isHovered) {
-      // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
+      // Apply animation offset to the baseline-aligned position
+      // When expanded: move icon UP (1.3 the hover distance for clear movement)
+      // When collapsed: move icon DOWN (single hover distance)
+      const hoverMovementDistance = 1.3;
+      const animationOffset = expanded ? -(hoverTranslateY * hoverMovementDistance) : hoverTranslateY;
       return {
-        iconTranslateY: (expanded ? -1 : 1) * size
+        iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset
       };
     }
-    return {};
+
+    // Default state uses baseline alignment with optional offset
+    return {
+      iconTranslateY: baselineAlignment + iconBaselineOffset
+    };
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
     variant: appearance,
@@ -88,7 +110,9 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
     iconPosition: iconPosition,
     tokens: linkState => ({
       ...linkTokens,
-      ...getTokens(linkState)
+      ...getTokens(linkState),
+      iconSize,
+      blockLineHeight: lineHeight
     }),
     ref: ref,
     ...presentationOnly,

package/lib/cjs/FlexGrid/FlexGrid.js

@@ -17,6 +17,32 @@ var _ViewportProvider = require("../ViewportProvider");
 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.viewProps]);
+const CONTENT_MAX_WIDTH = 'max';
+const CONTENT_FULL_WIDTH = 'full';
+
+/**
+ * Resolves the maximum width for content based on the provided value and responsive width.
+ *
+ * @param {number|string|null|undefined} contentMinWidthValue - The minimum width value for the content.
+ *        Can be a number (pixels), a string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
+ * @param {number|string} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, which can be a number, a string (e.g., '100%'), or null.
+ */
+const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
+  if (!contentMinWidthValue) {
+    return null;
+  }
+  if (contentMinWidthValue === CONTENT_FULL_WIDTH) {
+    return '100%';
+  }
+  if (Number.isFinite(contentMinWidthValue)) {
+    return contentMinWidthValue;
+  }
+  if (contentMinWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth;
+  }
+  return contentMinWidthValue;
+};
 
 /**
  * A mobile-first flexbox grid.
@@ -36,35 +62,41 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityRole,
     children,
     dataSet,
+    contentMinWidth,
     ...rest
   } = _ref;
   const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
+    themeOptions,
     themeOptions: {
       enableMediaQueryStyleSheet
     }
   } = (0, _ThemeProvider.useTheme)();
   let flexgridStyles;
   let mediaIds;
+  const contentMinWidthValue = (0, _utils.useResponsiveProp)(contentMinWidth);
+  const responsiveWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth);
   const stylesByViewport = {
     xs: {
+      maxWidth: limitWidth ? _systemConstants.viewports.map.get('sm') : maxWidth,
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
     sm: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('sm'),
+      maxWidth: limitWidth ? _systemConstants.viewports.map.get('sm') : maxWidth,
       flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
     },
     md: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('md'),
+      maxWidth: limitWidth ? _systemConstants.viewports.map.get('md') : maxWidth,
       flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
     },
     lg: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('lg'),
+      maxWidth: limitWidth ? _systemConstants.viewports.map.get('lg') : maxWidth,
       flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
     },
     xl: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('xl'),
+      maxWidth: limitWidth ? _systemConstants.viewports.map.get('xl') : maxWidth,
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
   };
@@ -158,7 +190,24 @@ FlexGrid.propTypes = {
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */
-  children: _propTypes.default.node.isRequired
+  children: _propTypes.default.node.isRequired,
+  /**
+   * The minimum width of the content in the FlexGrid.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMinWidth: _propTypes.default.shape({
+    xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number])
+  })
 };
 FlexGrid.Row = _Row.default;
 FlexGrid.Col = _Col.default;

package/lib/cjs/Icon/Icon.js

@@ -39,7 +39,9 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     width: themeTokens.size + themeTokens.width * 2,
     // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
     height: themeTokens.size + themeTokens.width * 2
-  } : {};
+  } : {
+    padding: themeTokens.padding
+  };
   const getIconContentForMobile = () => {
     if (Object.keys(paddingStyles).length) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/cjs/InputLabel/InputLabel.js

@@ -149,7 +149,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: _propTypes.default.oneOfType([_shared.default, _propTypes.default.string]),
+  tooltip: _propTypes.default.oneOfType([_propTypes.default.shape(_shared.default), _propTypes.default.string]),
   /**
    * Current number of characterts of an input text.
    */

package/lib/cjs/InputSupports/InputSupports.js

@@ -123,7 +123,7 @@ InputSupports.propTypes = {
    * 1. `tooltip` as a string - The content of the tooltip.
    * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: _propTypes.default.oneOfType([_shared.default, _propTypes.default.string]),
+  tooltip: _propTypes.default.oneOfType([_propTypes.default.shape(_shared.default), _propTypes.default.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */