@telus-uds/components-base 3.22.0 → 3.24.0

package/lib/cjs/Listbox/ListboxGroup.js

@@ -10,10 +10,13 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
 var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
 var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
 var _ListboxContext = require("./ListboxContext");
 var _GroupControl = _interopRequireDefault(require("./GroupControl"));
+var _SecondLevelHeader = _interopRequireDefault(require("./SecondLevelHeader"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
@@ -22,11 +25,23 @@ const styles = _StyleSheet.default.create({
   groupWrapper: {
     margin: 0,
     padding: 0,
-    overflow: 'hidden'
+    overflow: 'visible'
   },
   list: {
     margin: 0,
     padding: 0
+  },
+  secondLevelContainer: {
+    margin: 0,
+    padding: 0,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  secondLevelList: {
+    margin: 0,
+    padding: 0,
+    width: '100%'
   }
 });
 const getAccessibilityRole = () => _Platform.default.select({
@@ -34,7 +49,15 @@ const getAccessibilityRole = () => _Platform.default.select({
   android: 'none',
   web: 'listitem'
 });
-const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const selectSecondLevelContainerStyles = _ref => {
+  let {
+    secondLevelHeaderBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: secondLevelHeaderBackgroundColor
+  };
+};
+const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     id,
     label,
@@ -44,11 +67,79 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     expandProps,
     onLastItemBlur,
     nextItemRef,
-    prevItemRef
-  } = _ref;
+    prevItemRef,
+    copy = 'en',
+    dictionary = _dictionary.default,
+    variant = {},
+    tokens = {},
+    onClose
+  } = _ref2;
   const {
-    selectedId
+    selectedId,
+    activeSecondLevelGroup,
+    setActiveSecondLevelGroup
   } = (0, _ListboxContext.useListboxContext)();
+  const [secondLevelOpen, setSecondLevelOpen] = _react.default.useState(false);
+  const isSecondLevel = variant?.secondLevel === true;
+  const listboxTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens);
+  const groupId = id ?? label;
+  const handleGroupClick = _react.default.useCallback(() => {
+    if (isSecondLevel) {
+      setSecondLevelOpen(true);
+      setActiveSecondLevelGroup(groupId);
+    }
+  }, [isSecondLevel, groupId, setActiveSecondLevelGroup]);
+  const handleBackClick = _react.default.useCallback(() => {
+    setSecondLevelOpen(false);
+    setActiveSecondLevelGroup(null);
+  }, [setActiveSecondLevelGroup]);
+  const handleCloseClick = _react.default.useCallback(() => {
+    setSecondLevelOpen(false);
+    setActiveSecondLevelGroup(null);
+    if (onClose) {
+      onClose();
+    }
+  }, [setActiveSecondLevelGroup, onClose]);
+  if (isSecondLevel && activeSecondLevelGroup && activeSecondLevelGroup !== groupId) {
+    return null;
+  }
+  if (isSecondLevel && secondLevelOpen) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [styles.secondLevelContainer, selectSecondLevelContainerStyles(listboxTokens)],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondLevelHeader.default, {
+        label: label,
+        onBack: handleBackClick,
+        onClose: handleCloseClick,
+        copy: copy,
+        dictionary: dictionary,
+        variant: variant,
+        tokens: tokens
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: styles.secondLevelList,
+        children: items && items.map((item, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
+            id: item.id ?? item.label,
+            ...item,
+            selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
+            isChild: false,
+            LinkRouter: LinkRouter,
+            linkRouterProps: linkRouterProps,
+            variant: variant,
+            tokens: tokens,
+            ...(index === 0 && {
+              prevItemRef
+            }),
+            ...(index === items.length - 1 && {
+              nextItemRef
+            }),
+            ...(index === items.length - 1 && {
+              onBlur: onLastItemBlur
+            })
+          }, item.label);
+        })
+      })]
+    });
+  }
 
   // TODO: implement keyboard navigation via refs for grouped items separately here
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -74,9 +165,16 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, {
         id: id ?? label,
         ...controlProps,
-        label: label
+        label: label,
+        variant: variant
       }),
       ...expandProps,
+      ...(isSecondLevel && {
+        open: false
+      }),
+      ...(isSecondLevel && {
+        onPress: handleGroupClick
+      }),
       tokens: {
         contentPaddingLeft: 0,
         contentPaddingRight: 0,
@@ -85,10 +183,11 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         borderRadius: 0,
         borderWidth: 0,
-        marginBottom: 0
+        marginBottom: 0,
+        contentPanelBackgroundColor: 'transparent'
       },
       controlRef: ref,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: !isSecondLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: styles.list,
         children: items.map((item, index) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
@@ -98,6 +197,8 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             isChild: true,
             LinkRouter: LinkRouter,
             linkRouterProps: linkRouterProps,
+            variant: variant,
+            tokens: tokens,
             ...(index === 0 && {
               prevItemRef
             }),
@@ -116,6 +217,10 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 ListboxGroup.displayName = 'ListboxGroup';
 ListboxGroup.propTypes = {
   ..._utils.withLinkRouter.propTypes,
+  /**
+   * Unique identifier for the group
+   */
+  id: _propTypes.default.string,
   label: _propTypes.default.string,
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     href: _propTypes.default.string,
@@ -128,6 +233,33 @@ ListboxGroup.propTypes = {
   /**
    * Use this callback to redirect the focus after it leaves the last item of the group.
    */
-  onLastItemBlur: _propTypes.default.func
+  onLastItemBlur: _propTypes.default.func,
+  /**
+   * Select English or French copy
+   */
+  copy: _utils.copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: _propTypes.default.shape({
+      closeMenu: _propTypes.default.string.isRequired
+    }),
+    fr: _propTypes.default.shape({
+      closeMenu: _propTypes.default.string.isRequired
+    })
+  }),
+  /**
+   * Variant configuration for secondLevel behavior
+   */
+  variant: _utils.variantProp.propType,
+  /**
+   * Custom tokens
+   */
+  tokens: _propTypes.default.object,
+  /**
+   * Callback when the menu is closed
+   */
+  onClose: _propTypes.default.func
 };
 var _default = exports.default = ListboxGroup;

package/lib/cjs/Listbox/ListboxOverlay.js

@@ -37,12 +37,15 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     maxWidth,
     minWidth,
     onLayout,
-    tokens
+    tokens,
+    testID,
+    variant
   } = _ref;
-  const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {});
+  const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     onLayout: onLayout,
+    testID: testID,
     style: [overlaidPosition, {
       maxWidth,
       minWidth
@@ -50,11 +53,14 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
       tokens: {
         shadow: systemTokens.shadow,
+        borderRadius: systemTokens.borderRadius,
+        ...(_Platform.default.OS === 'web' && {
+          overflowY: 'hidden'
+        }),
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
         paddingLeft: paddingHorizontal,
-        paddingRight: paddingHorizontal,
-        ...tokens
+        paddingRight: paddingHorizontal
       },
       children: children
     })
@@ -81,6 +87,8 @@ DropdownOverlay.propTypes = {
   maxWidth: _propTypes.default.number,
   minWidth: _propTypes.default.number,
   onLayout: _propTypes.default.func,
-  tokens: _propTypes.default.object
+  tokens: _propTypes.default.object,
+  testID: _propTypes.default.string,
+  variant: _propTypes.default.object
 };
 var _default = exports.default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/cjs/Listbox/PressableItem.js

@@ -48,10 +48,14 @@ const getItemStyles = _ref => {
     color: itemColor,
     outline: itemOutline,
     textDecoration: itemTextDecoration,
-    borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
-    borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
-    borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
-    borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+    borderLeftWidth: itemBorderLeftWidth,
+    borderLeftColor: itemBorderLeftColor,
+    borderRightWidth: itemBorderRightWidth,
+    borderRightColor: itemBorderRightColor,
+    borderTopWidth: itemBorderTopWidth,
+    borderTopColor: itemBorderTopColor,
+    borderBottomWidth: itemBorderBottomWidth,
+    borderBottomColor: itemBorderBottomColor,
     borderRadius: itemBorderRadius,
     justifyContent: 'center'
   };

package/lib/cjs/Listbox/SecondLevelHeader.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const styles = _StyleSheet.default.create({
+  headerContainer: {
+    width: '100%'
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
+  },
+  leftSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1
+  },
+  backIcon: {
+    marginRight: 8,
+    flexShrink: 0
+  },
+  labelText: {
+    flex: 1
+  },
+  closeButton: {
+    flexShrink: 0
+  },
+  dividerContainer: {
+    width: '100%'
+  }
+});
+const selectHeaderContainerStyles = _ref => {
+  let {
+    secondLevelHeaderBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: secondLevelHeaderBackgroundColor
+  };
+};
+const selectHeaderContentStyles = _ref2 => {
+  let {
+    secondLevelHeaderPaddingTop,
+    secondLevelHeaderPaddingBottom,
+    secondLevelHeaderPaddingLeft,
+    secondLevelHeaderPaddingRight
+  } = _ref2;
+  return {
+    paddingTop: secondLevelHeaderPaddingTop,
+    paddingBottom: secondLevelHeaderPaddingBottom,
+    paddingLeft: secondLevelHeaderPaddingLeft,
+    paddingRight: secondLevelHeaderPaddingRight
+  };
+};
+const selectLabelTextStyles = _ref3 => {
+  let {
+    secondLevelBackLinkFontName,
+    secondLevelBackLinkFontWeight,
+    secondLevelBackLinkFontSize,
+    secondLevelBackLinkColor
+  } = _ref3;
+  return {
+    fontFamily: `${secondLevelBackLinkFontName}${secondLevelBackLinkFontWeight}normal`,
+    fontSize: secondLevelBackLinkFontSize,
+    color: secondLevelBackLinkColor
+  };
+};
+
+/**
+ * SecondLevelHeader component for Listbox secondLevel variant.
+ * Displays a header with back button icon, title text, and close button (IconButton),
+ * separated from content by a Divider.
+ */
+const SecondLevelHeader = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  let {
+    label,
+    onBack,
+    onClose,
+    copy = 'en',
+    dictionary = _dictionary.default,
+    tokens: tokensProp = {},
+    variant = {}
+  } = _ref4;
+  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokensProp);
+  const getCopy = (0, _utils.useCopy)({
+    dictionary,
+    copy
+  });
+  const {
+    secondLevelBackIcon,
+    secondLevelBackIconColor,
+    secondLevelCloseIcon,
+    secondLevelCloseIconSize,
+    secondLevelCloseButtonBorderWidth,
+    secondLevelCloseButtonPadding,
+    secondLevelDividerColor,
+    secondLevelDividerWidth
+  } = tokens;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [styles.headerContainer, selectHeaderContainerStyles(tokens)],
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [styles.headerContent, selectHeaderContentStyles(tokens)],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Pressable.default, {
+        onPress: onBack,
+        style: styles.leftSection,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: styles.backIcon,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: secondLevelBackIcon,
+            tokens: {
+              color: secondLevelBackIconColor
+            },
+            variant: {
+              size: 'micro'
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          numberOfLines: 1,
+          style: [styles.labelText, selectLabelTextStyles(tokens)],
+          children: label
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: styles.closeButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          icon: secondLevelCloseIcon,
+          onPress: onClose,
+          accessibilityLabel: getCopy('closeMenu'),
+          tokens: {
+            iconSize: secondLevelCloseIconSize,
+            borderWidth: secondLevelCloseButtonBorderWidth,
+            padding: secondLevelCloseButtonPadding
+          }
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: styles.dividerContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        tokens: {
+          color: secondLevelDividerColor,
+          width: secondLevelDividerWidth
+        }
+      })
+    })]
+  });
+});
+SecondLevelHeader.displayName = 'SecondLevelHeader';
+SecondLevelHeader.propTypes = {
+  /**
+   * The label text to display (typically the parent item label)
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * Callback when back button is clicked
+   */
+  onBack: _propTypes.default.func.isRequired,
+  /**
+   * Callback when close button is clicked
+   */
+  onClose: _propTypes.default.func.isRequired,
+  /**
+   * Select English or French copy
+   */
+  copy: _utils.copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: _propTypes.default.shape({
+      closeMenu: _propTypes.default.string.isRequired
+    }),
+    fr: _propTypes.default.shape({
+      closeMenu: _propTypes.default.string.isRequired
+    })
+  }),
+  /**
+   * Custom tokens to override theme tokens
+   */
+  tokens: _propTypes.default.object,
+  /**
+   * Variant configuration
+   */
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = SecondLevelHeader;

package/lib/cjs/Listbox/dictionary.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    closeMenu: 'Close menu'
+  },
+  fr: {
+    closeMenu: 'Fermer le menu'
+  }
+};

package/lib/cjs/Shortcuts/Shortcuts.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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 _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 {
+  selectHorizontalScrollTokens,
+  useItemPositions
+} = _HorizontalScroll.horizontalScrollUtils;
+const selectStyles = (themeTokens, maxWidth, viewport) => {
+  const isDesktop = viewport === _systemConstants.viewports.md || viewport === _systemConstants.viewports.lg || viewport === _systemConstants.viewports.xl;
+  return {
+    wrapper: {
+      alignItems: isDesktop ? 'center' : 'flex-start'
+    },
+    scrollContainer: {
+      width: '100%',
+      ...(isDesktop && {
+        maxWidth
+      })
+    },
+    container: {
+      paddingTop: themeTokens.mainContainerTopPadding,
+      paddingBottom: themeTokens.mainContainerBottomPadding,
+      paddingLeft: themeTokens.mainContainerLeftPadding,
+      paddingRight: themeTokens.mainContainerRightPadding,
+      gap: themeTokens.mainContainerGap,
+      ...(isDesktop && {
+        alignItems: 'flex-start',
+        justifyContent: 'center'
+      })
+    }
+  };
+};
+
+/**
+ * A horizontal scrollable shortcuts component that displays a collection of shortcut items.
+ * This component automatically injects shared configuration props to all ShortcutsItem children
+ * via React.cloneElement, including variant settings, hideLabels, and iconVariant.
+ *
+ * @component
+ * @param {Object} props - Component properties
+ * @param {Object} [props.tokens] - Theme tokens to customize the component's appearance
+ * @param {Object} [props.variant] - Visual variant configuration for the shortcuts container and its items
+ * @param {string} [props.variant.width] - Width variant to apply to all items (e.g., 'equal', 'dynamic')
+ * @param {Object} [props.scrollButtonTokens] - Tokens to customize scroll button appearance
+ * @param {boolean} [props.hideLabels=false] - Whether to hide labels on all shortcut items (can be overridden per item)
+ * @param {Object} [props.iconVariant] - Icon variant to apply to all shortcut items (can be overridden per item)
+ * @param {React.ReactNode} props.children - ShortcutsItem components to render
+ * @param {React.Ref} ref - Forwarded ref to the component's root element
+ * @returns {React.ReactElement} Rendered shortcuts component with horizontal scroll functionality
+ *
+ * @example
+ * <Shortcuts hideLabels={false} variant={{ width: 'equal' }}>
+ *   <ShortcutsItem icon={HomeIcon} label="Home" href="/home" />
+ *   <ShortcutsItem icon={SettingsIcon} label="Settings" href="/settings" />
+ * </Shortcuts>
+ *
+ * @example
+ * // Item-level props override container props
+ * <Shortcuts hideLabels iconVariant={{ size: 'small' }}>
+ *   <ShortcutsItem icon={HomeIcon} label="Home" hideLabel={false} />
+ *   <ShortcutsItem icon={SettingsIcon} label="Settings" />
+ * </Shortcuts>
+ */
+const Shortcuts = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    scrollButtonTokens,
+    hideLabels = false,
+    iconVariant,
+    children,
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Shortcuts', tokens, variant, {
+    viewport
+  });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const maxWidth = (0, _utils.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), []);
+  const styles = selectStyles(themeTokens, maxWidth, viewport);
+  const childrenWithProps = _react.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      maxWidth: maxItemWidth,
+      registerWidth,
+      containerVariant: variant,
+      containerHideLabels: hideLabels,
+      containerIconVariant: iconVariant
+    });
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [staticStyles.wrapper, styles.wrapper],
+    ref: ref,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: styles.scrollContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
+        ScrollButton: _HorizontalScroll.HorizontalScrollButton,
+        itemPositions: itemPositions,
+        tokens: selectHorizontalScrollTokens(themeTokens),
+        scrollButtonTokens: scrollButtonTokens,
+        variant: {
+          hideNavigationButtons: _Platform.default.OS !== 'web'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.container, styles.container],
+          children: childrenWithProps
+        })
+      })
+    })
+  });
+});
+Shortcuts.displayName = 'Shortcuts';
+Shortcuts.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('Shortcuts'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
+  scrollButtonTokens: (0, _utils.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.
+   */
+  hideLabels: _propTypes.default.bool,
+  /**
+   * Icon variant to apply to all ShortcutsItem children.
+   */
+  iconVariant: _utils.variantProp.propType,
+  /**
+   * ShortcutsItem components to be rendered within the Shortcuts container
+   */
+  children: _propTypes.default.node
+};
+const staticStyles = _StyleSheet.default.create({
+  wrapper: {
+    flexGrow: 1
+  },
+  container: {
+    flexDirection: 'row',
+    flex: 1
+  }
+});
+var _default = exports.default = Shortcuts;