@telus-uds/components-base 3.5.2 → 3.7.0

package/lib/cjs/utils/index.js

@@ -19,7 +19,8 @@ var _exportNames = {
   htmlAttrs: true,
   transformGradient: true,
   convertFromMegaByteToByte: true,
-  formatImageSource: true
+  formatImageSource: true,
+  getSpacingScale: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -45,6 +46,12 @@ Object.defineProperty(exports, "formatImageSource", {
     return _formatImageSource.default;
   }
 });
+Object.defineProperty(exports, "getSpacingScale", {
+  enumerable: true,
+  get: function () {
+    return _getSpacingScale.default;
+  }
+});
 Object.defineProperty(exports, "htmlAttrs", {
   enumerable: true,
   get: function () {
@@ -240,6 +247,7 @@ var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
 var _transformGradient = require("./transformGradient");
 var _convertFromMegaByteToByte = _interopRequireDefault(require("./convertFromMegaByteToByte"));
 var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
+var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
 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 }; }

package/lib/cjs/utils/props/inputSupportsProps.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _shared = _interopRequireDefault(require("../../Tooltip/shared"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = {
   types: {
@@ -38,9 +39,12 @@ var _default = exports.default = {
      */
     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/esm/Box/Box.js

@@ -6,9 +6,10 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import Image from "react-native-web/dist/exports/Image";
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps } from '../utils';
+import { useTheme, useThemeTokens, useResponsiveThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, createMediaQueryStyles, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps, StyleSheet as RNMQStyleSheet, getSpacingScale } from '../utils';
 import backgroundImageStylesMap from './backgroundImageStylesMap';
+import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -196,8 +197,19 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const themeTokens = useThemeTokens('Box', tokens, variant);
-  const styles = {
+  const viewport = useViewport();
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Box', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const getSpacingTokens = useThemeTokensCallback('spacingScale');
+  let boxStyles = {
     flex,
     paddingLeft: useSpacingScale(left),
     paddingRight: useSpacingScale(right),
@@ -205,8 +217,38 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     paddingBottom: useSpacingScale(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
+  let boxMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp] = _ref4;
+      acc.transformedThemeTokens[vp] = {
+        paddingLeft: getSpacingScale(left, vp, getSpacingTokens),
+        paddingRight: getSpacingScale(right, vp, getSpacingTokens),
+        paddingTop: getSpacingScale(top, vp, getSpacingTokens),
+        paddingBottom: getSpacingScale(bottom, vp, getSpacingTokens)
+      };
+      return acc;
+    }, {
+      transformedThemeTokens: {}
+    });
+    const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);
+    const {
+      ids
+    } = RNMQStyleSheet.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 = '',
@@ -240,23 +282,27 @@ const Box = /*#__PURE__*/React.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__*/_jsx(ScrollView, {
       ...scrollProps,
       ...props,
       testID: testID,
-      dataSet: dataSet,
+      dataSet: dataSetValue,
       ref: ref,
       children: content
     });
   }
   return /*#__PURE__*/_jsx(View, {
     ...props,
-    style: styles,
+    style: boxStyles,
     testID: testID,
-    dataSet: dataSet,
+    dataSet: dataSetValue,
     ref: ref,
     children: content
   });

package/lib/esm/Card/Card.js

@@ -4,7 +4,7 @@ import View from "react-native-web/dist/exports/View";
 import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
 import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
 import { useViewport } from '../ViewportProvider';
-import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps } from '../utils/props';
+import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps, hrefAttrsProp } from '../utils/props';
 import CardBase from './CardBase';
 import PressableCardBase from './PressableCardBase';
 import CheckboxButton from '../Checkbox/CheckboxButton';
@@ -244,6 +244,8 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           tokens: getThemeTokens,
           dataSet: dataSet,
           onPress: onPress,
+          href: interactiveCard?.href,
+          hrefAttrs: interactiveCard?.hrefAttrs,
           ...selectProps(rest),
           children: cardState => {
             const {
@@ -306,12 +308,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.shape({
     body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
-    variant: variantProp.propType
+    variant: variantProp.propType,
+    href: PropTypes.string,
+    hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
   }),
   /**
    * Apply background image to the card.
@@ -322,6 +328,10 @@ Card.propTypes = {
     src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
-  })
+  }),
+  /**
+   * Data set for the card.
+   */
+  dataSet: PropTypes.object
 };
 export default Card;

package/lib/esm/Card/PressableCardBase.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
 import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
@@ -80,8 +82,66 @@ const PressableCardBase = /*#__PURE__*/React.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.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const [pressed, setPressed] = React.useState(false);
+  if (Platform.OS === 'web' && href) {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      style: getOuterBorderStyle({
+        pressed,
+        focused,
+        hovered
+      }),
+      dataSet: dataSet,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...selectProps({
+        ...rest,
+        accessibilityRole
+      }),
+      children: /*#__PURE__*/_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__*/_jsx(CardBase, {
+          tokens: getCardTokens({
+            pressed,
+            focused,
+            hovered
+          }),
+          children: typeof children === 'function' ? children(getCardState({
+            pressed,
+            focused,
+            hovered
+          })) : children
+        })
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -100,6 +160,12 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })
   });
 });
+const staticStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    display: 'flex'
+  }
+});
 PressableCardBase.displayName = 'PressableCardBase';
 PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
 import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils';
+import { variantProp } from '../utils/props';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps]);
@@ -78,6 +79,10 @@ ExpandCollapseMini.propTypes = {
    * Optional variant object to override the default theme tokens
    */
   tokens: getTokensPropType('ExpandCollapseMini'),
+  /**
+   * ExpandCollapseMini variant.
+   */
+  variant: variantProp.propType,
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -16,21 +16,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.forwardRef((_ref2, ref) => {
+const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -39,22 +25,28 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) =>
     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
-  } = useThemeTokens('Link', {}, {}, {
-    focus: Platform.OS !== 'web' ? expanded : focus
+    quiet
+  } = variant;
+  const isFocusVisible = Platform.OS === 'web' ? focus && !pressed && !hover : expanded;
+  const linkTokens = useThemeTokens('Link', {}, {
+    ...variant,
+    quiet: expanded ?? quiet
+  }, {
+    focus: isFocusVisible,
+    hover,
+    pressed
   });
   const {
     size,
-    icon,
-    ...themeTokens
+    icon
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
@@ -88,9 +80,8 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) =>
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({
-      ...getTokens(linkState),
-      ...selectLinkTokens(themeTokens),
-      outerBorderColor
+      ...linkTokens,
+      ...getTokens(linkState)
     }),
     ref: ref,
     ...presentationOnly,

package/lib/esm/Icon/Icon.js

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

package/lib/esm/InputLabel/InputLabel.js

@@ -7,6 +7,7 @@ import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
 import LabelContent from './LabelContent';
 import Tooltip from '../Tooltip';
+import tooltipPropTypes from '../Tooltip/shared';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectLabelStyles = (tokens, themeOptions) => applyTextStyles({
@@ -59,6 +60,11 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const getTooltipProps = () => {
+    return typeof tooltip === 'string' ? {
+      content: tooltip
+    } : tooltip;
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       ref: ref,
@@ -80,8 +86,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           color: themeTokens.color
         }],
         children: /*#__PURE__*/_jsx(Tooltip, {
-          content: tooltip,
-          copy: copy
+          copy: copy,
+          ...getTooltipProps()
         })
       }), maxCharacterAllowed && isHintInline && /*#__PURE__*/_jsxs(Text, {
         style: [selectHintStyles({
@@ -136,7 +142,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.string,
+  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
   /**
    * Current number of characterts of an input text.
    */

package/lib/esm/InputSupports/InputSupports.js

@@ -7,6 +7,7 @@ import { useThemeTokens } from '../ThemeProvider';
 import useInputSupports from './useInputSupports';
 import { getTokensPropType, useCopy } from '../utils';
 import dictionary from './dictionary';
+import tooltipPropTypes from '../Tooltip/shared';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -110,9 +111,12 @@ InputSupports.propTypes = {
    */
   feedbackProps: PropTypes.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.string,
+  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/lib/esm/List/ListItemMark.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Icon from '../Icon';
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
   itemIconColor: PropTypes.string.isRequired,
@@ -68,7 +68,6 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     iconSize,
     tokens = {}
   } = _ref5;
-  const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
@@ -76,9 +75,14 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/_jsx(View, {
       style: [sideItemContainerStyles, bulletContainerStyles],
-      children: /*#__PURE__*/_jsx(IconComponent, {
-        size: iconSize || iconTokens.size,
-        color: iconColor || iconTokens.color
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        tokens: {
+          size: iconSize ?? iconTokens.size
+        },
+        variant: {
+          color: iconColor ?? iconTokens.color
+        }
       })
     });
   }

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

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

package/lib/esm/ToggleSwitch/ToggleSwitch.js

@@ -132,6 +132,7 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     variant,
     accessibilityRole = 'switch',
     accessibilityLabel = label,
+    togglePosition = 'end',
     ...rest
   } = _ref9;
   const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
@@ -150,9 +151,10 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/_jsxs(StackView, {
     space: themeTokens.space,
-    direction: "row",
+    direction: togglePosition === 'start' ? 'row-reverse' : 'row',
     tokens: {
-      alignItems: 'center'
+      alignItems: 'center',
+      justifyContent: 'start'
     },
     children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
@@ -258,7 +260,13 @@ ToggleSwitch.propTypes = {
   /**
    * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.string
+  tooltip: PropTypes.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.oneOf(['start', 'end'])
 };
 const staticStyles = StyleSheet.create({
   track: {

package/lib/esm/ToggleSwitch/ToggleSwitchGroup.js

@@ -72,6 +72,7 @@ const ToggleSwitchGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onChange: itemOnChange,
       ref: itemRef,
       tooltip: itemTooltip,
+      togglePosition,
       ...itemRest
     } = _ref2;
     const isSelected = currentValues.includes(id);
@@ -97,6 +98,7 @@ const ToggleSwitchGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       inactive: inactive,
       label: label,
       tooltip: itemTooltip,
+      togglePosition: togglePosition,
       ...itemA11y,
       ...selectItemProps(itemRest)
     }, id);
@@ -156,7 +158,13 @@ ToggleSwitchGroup.propTypes = {
     /**
      * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
      */
-    ref: ABBPropTypes.ref()
+    ref: ABBPropTypes.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.oneOf(['start', 'end'])
   })),
   /**
    * If provided, this function is called when the current selection is changed

package/lib/esm/Tooltip/shared.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
-import { getTokensPropType, variantProp } from '../utils';
+import { getTokensPropType } from '../utils/props/tokens';
+import variantProp from '../utils/props/variantProp';
 const propTypes = {
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the

package/lib/esm/utils/getSpacingScale.js

@@ -0,0 +1,61 @@
+import { resolveResponsiveProp } from './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 ?? resolveResponsiveProp(spaceValue, viewport, 0));
+  const {
+    size
+  } = getSpacingTokens({
+    ...variant,
+    space: typeof space === 'number' ? space : 0,
+    viewport
+  }, tokens);
+  return Math.max(size - subtract, 0);
+};
+export default getSpacingScale;

package/lib/esm/utils/index.js

@@ -22,4 +22,5 @@ export { default as BaseView } from './BaseView';
 export { default as htmlAttrs } from './htmlAttrs';
 export { transformGradient } from './transformGradient';
 export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte';
-export { default as formatImageSource } from './formatImageSource';
+export { default as formatImageSource } from './formatImageSource';
+export { default as getSpacingScale } from './getSpacingScale';