@telus-uds/components-base 3.5.2 → 3.7.0

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 08 Apr 2025 19:33:55 GMT and should not be manually modified.
+This log was last generated on Thu, 01 May 2025 20:07:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.7.0
+
+Thu, 01 May 2025 20:07:44 GMT
+
+### Minor changes
+
+- `Card`: add href and hrefAttrs props (guillermo.peitzner@telus.com)
+- `Icon`: add gradient color support (guillermo.peitzner@telus.com)
+- `togglePosition`: add prop to ToggleSwitch & ToggleSwitchGroup (sergio.ramirez@telus.com)
+- `TextArea`: update tooltip prop object to control tooltip entirely by only one prop object (shivam.gupta3@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.5.0
+
+## 3.6.0
+
+Thu, 24 Apr 2025 18:56:23 GMT
+
+### Minor changes
+
+- `MultiSelectFilter`: add new tokens (sergio.ramirez@telus.com)
+- `Box`: add RNMQ support (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.4.0
+
+### Patches
+
+- `ExpandCollapseMini`: allow support for style variants (Mauricio.BatresMontejo@telus.com)
+- Update react dependencies to match valid versions (sergio.ramirez@telus.com)
+
 ## 3.5.2
 
-Tue, 08 Apr 2025 19:33:55 GMT
+Tue, 08 Apr 2025 19:36:14 GMT
 
 ### Patches
 

package/lib/cjs/Box/Box.js

@@ -15,6 +15,7 @@ var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/I
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+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]);
@@ -203,8 +204,19 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
-  const styles = {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Box', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const getSpacingTokens = (0, _ThemeProvider.useThemeTokensCallback)('spacingScale');
+  let boxStyles = {
     flex,
     paddingLeft: (0, _utils.useSpacingScale)(left),
     paddingRight: (0, _utils.useSpacingScale)(right),
@@ -212,8 +224,38 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     paddingBottom: (0, _utils.useSpacingScale)(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
+  let boxMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp] = _ref4;
+      acc.transformedThemeTokens[vp] = {
+        paddingLeft: (0, _utils.getSpacingScale)(left, vp, getSpacingTokens),
+        paddingRight: (0, _utils.getSpacingScale)(right, vp, getSpacingTokens),
+        paddingTop: (0, _utils.getSpacingScale)(top, vp, getSpacingTokens),
+        paddingBottom: (0, _utils.getSpacingScale)(bottom, vp, getSpacingTokens)
+      };
+      return acc;
+    }, {
+      transformedThemeTokens: {}
+    });
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedThemeTokens);
+    const {
+      ids
+    } = _utils.StyleSheet.create({
+      box: {
+        ...mediaQueryStyles
+      }
+    });
+    boxStyles = {
+      flex,
+      ...selectBoxStyles(themeTokens[viewport], customGradient)
+    };
+    boxMediaIds = ids.box;
+  }
   let content = children;
-  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
+  if (typeof customGradient === 'function') content = customGradient(boxStyles.colors, boxStyles)(children);
   const {
     src = '',
     alt = '',
@@ -247,23 +289,27 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       });
     }
   }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+  const dataSetValue = boxMediaIds ? {
+    media: boxMediaIds,
+    ...dataSet
+  } : dataSet;
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
+    scrollProps.contentContainerStyle = [boxStyles, scrollProps.contentContainerStyle];
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
       ...scrollProps,
       ...props,
       testID: testID,
-      dataSet: dataSet,
+      dataSet: dataSetValue,
       ref: ref,
       children: content
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ...props,
-    style: styles,
+    style: boxStyles,
     testID: testID,
-    dataSet: dataSet,
+    dataSet: dataSetValue,
     ref: ref,
     children: content
   });

package/lib/cjs/Card/Card.js

@@ -251,6 +251,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           tokens: getThemeTokens,
           dataSet: dataSet,
           onPress: onPress,
+          href: interactiveCard?.href,
+          hrefAttrs: interactiveCard?.hrefAttrs,
           ...selectProps(rest),
           children: cardState => {
             const {
@@ -313,12 +315,16 @@ Card.propTypes = {
         - `radiogroup`
         - `checkbox`
    * - variant: The variant to be used for the interactive card
+   * - href: The href to be used for the interactive card
+   * - hrefAttrs: The href attributes to be used for the interactive card
    */
   interactiveCard: _propTypes.default.shape({
     body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
     tokens: (0, _utils.getTokensPropType)('Card'),
     selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
-    variant: _utils.variantProp.propType
+    variant: _utils.variantProp.propType,
+    href: _propTypes.default.string,
+    hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types)
   }),
   /**
    * Apply background image to the card.
@@ -329,6 +335,10 @@ Card.propTypes = {
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
     resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
-  })
+  }),
+  /**
+   * Data set for the card.
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = exports.default = Card;

package/lib/cjs/Card/PressableCardBase.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
@@ -88,8 +90,66 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   });
   const handleKeyDown = event => {
     // The expected keyboard shortcut for selecting a focused item is the Space key
-    if (event?.key === ' ') handleChange(event);
+    if (event?.key === ' ') handleChange?.(event);
   };
+  const [hovered, setHovered] = _react.default.useState(false);
+  const [focused, setFocused] = _react.default.useState(false);
+  const [pressed, setPressed] = _react.default.useState(false);
+  if (_Platform.default.OS === 'web' && href) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      style: getOuterBorderStyle({
+        pressed,
+        focused,
+        hovered
+      }),
+      dataSet: dataSet,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...selectProps({
+        ...rest,
+        accessibilityRole
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: href,
+        tabIndex: 0,
+        onClick: event => {
+          setPressed(false);
+          handleChange?.(event);
+        },
+        onKeyDown: event => {
+          if (event.key === ' ') {
+            setPressed(true);
+            handleKeyDown(event);
+          }
+        },
+        onKeyUp: event => {
+          if (event.key === ' ') setPressed(false);
+        },
+        onMouseDown: () => setPressed(true),
+        onMouseUp: () => setPressed(false),
+        onFocus: () => setFocused(true),
+        onBlur: () => {
+          setFocused(false);
+          setPressed(false);
+        },
+        style: staticStyles.container,
+        ...(hrefAttrs || {}),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+          tokens: getCardTokens({
+            pressed,
+            focused,
+            hovered
+          }),
+          children: typeof children === 'function' ? children(getCardState({
+            pressed,
+            focused,
+            hovered
+          })) : children
+        })
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
@@ -108,6 +168,12 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     })
   });
 });
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flex: 1,
+    display: 'flex'
+  }
+});
 PressableCardBase.displayName = 'PressableCardBase';
 PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
 var _utils = require("../utils");
+var _props = require("../utils/props");
 var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -85,6 +86,10 @@ ExpandCollapseMini.propTypes = {
    * Optional variant object to override the default theme tokens
    */
   tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini'),
+  /**
+   * ExpandCollapseMini variant.
+   */
+  variant: _props.variantProp.propType,
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -23,21 +23,7 @@ const presentationOnly = {
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 };
-const selectLinkTokens = _ref => {
-  let {
-    color,
-    textLine,
-    lineHeight,
-    fontSize
-  } = _ref;
-  return {
-    color,
-    textLine,
-    blockLineHeight: lineHeight,
-    blockFontSize: fontSize
-  };
-};
-const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -46,22 +32,28 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref;
   const {
     expanded,
     hover,
-    focus
+    focus,
+    pressed
   } = pressableState || {};
-  // we only want focus outline when focusing, if user is pressing we don't want the border.
   const {
-    outerBorderColor
-  } = (0, _ThemeProvider.useThemeTokens)('Link', {}, {}, {
-    focus: _Platform.default.OS !== 'web' ? expanded : focus
+    quiet
+  } = variant;
+  const isFocusVisible = _Platform.default.OS === 'web' ? focus && !pressed && !hover : expanded;
+  const linkTokens = (0, _ThemeProvider.useThemeTokens)('Link', {}, {
+    ...variant,
+    quiet: expanded ?? quiet
+  }, {
+    focus: isFocusVisible,
+    hover,
+    pressed
   });
   const {
     size,
-    icon,
-    ...themeTokens
+    icon
   } = (0, _ThemeProvider.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
@@ -95,9 +87,8 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({
-      ...getTokens(linkState),
-      ...selectLinkTokens(themeTokens),
-      outerBorderColor
+      ...linkTokens,
+      ...getTokens(linkState)
     }),
     ref: ref,
     ...presentationOnly,

package/lib/cjs/Icon/Icon.js

@@ -31,7 +31,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
     title: accessibilityLabel,
     size: size,
-    color: themeTokens.color
+    color: themeTokens.color,
+    gradient: themeTokens.gradient
   });
   const paddingStyles = variant?.padding ? {
     padding: themeTokens.width,

package/lib/cjs/InputLabel/InputLabel.js

@@ -13,6 +13,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _LabelContent = _interopRequireDefault(require("./LabelContent"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _shared = _interopRequireDefault(require("../Tooltip/shared"));
 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]);
@@ -66,6 +67,11 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
+  const getTooltipProps = () => {
+    return typeof tooltip === 'string' ? {
+      content: tooltip
+    } : tooltip;
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       ref: ref,
@@ -87,8 +93,8 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           color: themeTokens.color
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-          content: tooltip,
-          copy: copy
+          copy: copy,
+          ...getTooltipProps()
         })
       }), maxCharacterAllowed && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
         style: [selectHintStyles({
@@ -143,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.string,
+  tooltip: _propTypes.default.oneOfType([_shared.default, _propTypes.default.string]),
   /**
    * Current number of characterts of an input text.
    */

package/lib/cjs/InputSupports/InputSupports.js

@@ -13,6 +13,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _useInputSupports = _interopRequireDefault(require("./useInputSupports"));
 var _utils = require("../utils");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _shared = _interopRequireDefault(require("../Tooltip/shared"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -117,9 +118,12 @@ InputSupports.propTypes = {
    */
   feedbackProps: _propTypes.default.object,
   /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   * an optional `Tooltip`. If set, tooltip will be shown next to the label.
+   * Props can be passed to the tooltip in one of the following ways.
+   * 1. `tooltip` as a string - The content of the tooltip.
+   * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: _propTypes.default.string,
+  tooltip: _propTypes.default.oneOfType([_shared.default, _propTypes.default.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/lib/cjs/List/ListItemMark.js

@@ -75,7 +75,6 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     iconSize,
     tokens = {}
   } = _ref5;
-  const IconComponent = icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
@@ -83,9 +82,14 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [sideItemContainerStyles, bulletContainerStyles],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-        size: iconSize || iconTokens.size,
-        color: iconColor || iconTokens.color
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: icon,
+        tokens: {
+          size: iconSize ?? iconTokens.size
+        },
+        variant: {
+          color: iconColor ?? iconTokens.color
+        }
       })
     });
   }

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -137,6 +137,10 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     buttonIconPadding,
     subtitleColor,
     dividerColor,
+    iconColor,
+    buttonBackgroundColor,
+    iconColorSelected,
+    buttonBackgroundColorSelected,
     ...restTokens
   } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
@@ -159,7 +163,9 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
     paddingRight: labelPaddingRight,
-    iconBackground: buttonIconBackgroundColor
+    iconBackground: buttonIconBackgroundColor,
+    iconColor: isSelected ? iconColorSelected : iconColor,
+    backgroundColor: isSelected ? buttonBackgroundColorSelected : buttonBackgroundColor
   };
   const getButtonDropdownTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('ButtonDropdown', getButtonDropdownTokens(buttonState));

package/lib/cjs/ToggleSwitch/ToggleSwitch.js

@@ -139,6 +139,7 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     variant,
     accessibilityRole = 'switch',
     accessibilityLabel = label,
+    togglePosition = 'end',
     ...rest
   } = _ref9;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
@@ -157,9 +158,10 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: themeTokens.space,
-    direction: "row",
+    direction: togglePosition === 'start' ? 'row-reverse' : 'row',
     tokens: {
-      alignItems: 'center'
+      alignItems: 'center',
+      justifyContent: 'start'
     },
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
@@ -265,7 +267,13 @@ ToggleSwitch.propTypes = {
   /**
    * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: _propTypes.default.string
+  tooltip: _propTypes.default.string,
+  /**
+   * Controls the position of the switch in relation to the label.
+   * - 'start': switch on the start, before the `label` and `tooltip`.
+   * - 'end': switch to the end, after the `label` and `tooltip` (default).
+   */
+  togglePosition: _propTypes.default.oneOf(['start', 'end'])
 };
 const staticStyles = _StyleSheet.default.create({
   track: {

package/lib/cjs/ToggleSwitch/ToggleSwitchGroup.js

@@ -79,6 +79,7 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       onChange: itemOnChange,
       ref: itemRef,
       tooltip: itemTooltip,
+      togglePosition,
       ...itemRest
     } = _ref2;
     const isSelected = currentValues.includes(id);
@@ -104,6 +105,7 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       inactive: inactive,
       label: label,
       tooltip: itemTooltip,
+      togglePosition: togglePosition,
       ...itemA11y,
       ...selectItemProps(itemRest)
     }, id);
@@ -163,7 +165,13 @@ ToggleSwitchGroup.propTypes = {
     /**
      * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
      */
-    ref: _airbnbPropTypes.default.ref()
+    ref: _airbnbPropTypes.default.ref(),
+    /**
+     * Controls the position of the switch in relation to the label.
+     * - 'start': switch on the start, before the `label` and `tooltip`.
+     * - 'end': switch to the end, after the `label` and `tooltip` (default).
+     */
+    togglePosition: _propTypes.default.oneOf(['start', 'end'])
   })),
   /**
    * If provided, this function is called when the current selection is changed

package/lib/cjs/Tooltip/shared.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = _interopRequireDefault(require("../utils/props/variantProp"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const propTypes = {
   /**
@@ -41,8 +42,8 @@ const propTypes = {
    * Set to `true` to open the tooltip on hover
    */
   activateOnHover: _propTypes.default.bool,
-  tooltipButtonTokens: (0, _utils.getTokensPropType)('TooltipButton'),
-  tokens: (0, _utils.getTokensPropType)('Tooltip'),
-  variant: _utils.variantProp.propType
+  tooltipButtonTokens: (0, _tokens.getTokensPropType)('TooltipButton'),
+  tokens: (0, _tokens.getTokensPropType)('Tooltip'),
+  variant: _variantProp.default.propType
 };
 var _default = exports.default = propTypes;

package/lib/cjs/utils/getSpacingScale.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _useResponsiveProp = require("./useResponsiveProp");
+/**
+ * Resolves spacing options from the provided space object.
+ *
+ * @param {Object} space - The space configuration object.
+ * @param {Object} [space.options] - The options for spacing.
+ * @param {number|string} [space.options.size] - The size of the spacing. Can be a number or a string.
+ * @param {string} [space.options.variant] - The variant of the spacing.
+ * @param {number} [space.options.subtract=0] - A value to subtract from the spacing size.
+ * @returns {Object} An object containing resolved spacing tokens, variant, overridden flag, and subtract value.
+ * @property {Object} tokens - The resolved spacing tokens.
+ * @property {number|string} tokens.size - The size of the spacing.
+ * @property {string} [variant] - The variant of the spacing.
+ * @property {boolean} overridden - Indicates if the size is explicitly overridden as a number.
+ * @property {number} subtract - The value to subtract from the spacing size.
+ */
+const resolveSpacingOptions = space => {
+  if (!space?.options) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number';
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
+
+/**
+ * Calculates the spacing scale based on the provided space value, viewport, and spacing tokens.
+ *
+ * @param {Object} spaceValue - The space value configuration, which may include responsive properties.
+ * @param {Object} viewport - The current viewport dimensions or configuration.
+ * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
+ * @returns {number} The calculated spacing scale, ensuring it is non-negative.
+ */
+const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+  const {
+    tokens,
+    variant,
+    overridden,
+    subtract = 0
+  } = resolveSpacingOptions(spaceValue);
+  const space = !overridden && (spaceValue?.space ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
+  const {
+    size
+  } = getSpacingTokens({
+    ...variant,
+    space: typeof space === 'number' ? space : 0,
+    viewport
+  }, tokens);
+  return Math.max(size - subtract, 0);
+};
+var _default = exports.default = getSpacingScale;