@telus-uds/components-base 3.12.2 → 3.14.0

package/lib/cjs/Card/backgroundImageStylesMap.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const webStyles = {
+  'top-start': {
+    top: 0,
+    left: 0
+  },
+  'top-center': {
+    top: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
+  },
+  'top-end': {
+    top: 0,
+    right: 0
+  },
+  'right-start': {
+    top: 0,
+    right: 0
+  },
+  'left-start': {
+    top: 0,
+    left: 0
+  },
+  'left-center': {
+    top: '50%',
+    left: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'right-center': {
+    top: '50%',
+    right: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    bottom: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
+  },
+  'bottom-end': {
+    bottom: 0,
+    right: 0
+  },
+  'right-end': {
+    bottom: 0,
+    right: 0
+  },
+  'top-stretch': {
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    height: '100%'
+  },
+  'right-stretch': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  }
+};
+const nativeStyles = {
+  'top-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'top-center': {
+    top: 0,
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
+  },
+  'top-end': {
+    top: 0,
+    right: 0,
+    width: 150,
+    height: 200
+  },
+  'right-start': {
+    top: 0,
+    right: 0,
+    width: 150,
+    height: 200
+  },
+  'left-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'left-center': {
+    left: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
+  },
+  'right-center': {
+    right: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'bottom-center': {
+    bottom: 0,
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
+  },
+  'bottom-end': {
+    bottom: 0,
+    right: 0,
+    width: 150,
+    height: 200
+  },
+  'right-end': {
+    bottom: 0,
+    right: 0,
+    width: 150,
+    height: 200
+  },
+  'top-stretch': {
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    height: '100%'
+  },
+  'right-stretch': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  }
+};
+var _default = exports.default = _Platform.default.OS === 'web' ? webStyles : nativeStyles;

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,48 @@ 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, a special string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
+ * @param {number} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
+ */
+const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
+  if (!contentMinWidthValue || contentMinWidthValue === CONTENT_FULL_WIDTH) {
+    return null;
+  }
+  if (Number.isFinite(contentMinWidthValue)) {
+    return contentMinWidthValue;
+  }
+  if (contentMinWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth;
+  }
+  return contentMinWidthValue;
+};
+
+/**
+ * Calculates the maximum width for a given viewport based on limitWidth and contentMinWidth settings.
+ *
+ * @param {string} viewportKey - The viewport key ('xs', 'sm', 'md', 'lg', 'xl')
+ * @param {boolean} limitWidth - Whether to limit the width to viewport breakpoints
+ * @param {any} contentMinWidth - The contentMinWidth prop value
+ * @param {number|string|null} maxWidth - The resolved max width value
+ * @returns {number|string|null} The calculated maximum width for the viewport
+ */
+const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWidth) => {
+  if (limitWidth) {
+    return _systemConstants.viewports.map.get(viewportKey === 'xs' ? 'sm' : viewportKey);
+  }
+  if (contentMinWidth) {
+    return maxWidth;
+  }
+  return viewportKey === 'xl' ? _systemConstants.viewports.map.get('xl') : null;
+};
 
 /**
  * A mobile-first flexbox grid.
@@ -24,7 +66,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    limitWidth = true,
+    limitWidth = false,
     gutter = true,
     outsideGutter = true,
     xsReverse,
@@ -36,35 +78,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: getMaxWidthForViewport('xs', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
     sm: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('sm'),
+      maxWidth: getMaxWidthForViewport('sm', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
     },
     md: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('md'),
+      maxWidth: getMaxWidthForViewport('md', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
     },
     lg: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('lg'),
+      maxWidth: getMaxWidthForViewport('lg', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
     },
     xl: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('xl'),
+      maxWidth: getMaxWidthForViewport('xl', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
   };
@@ -158,7 +206,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.
    */

package/lib/cjs/Notification/Notification.js

@@ -16,6 +16,7 @@ var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _ViewportProvider = require("../ViewportProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CONTENT_MAX_WIDTH = 'max';
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectContainerStyles = tokens => ({
   ...tokens
@@ -70,13 +71,13 @@ const selectDismissButtonContainerStyles = _ref4 => {
     placeContent: 'start'
   };
 };
-const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
-  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
+const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport, useContentMaxWidth) => ({
+  maxWidth: system && (useContentMaxWidth || viewport === 'xl') ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system, useContentMaxWidth) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = {
@@ -99,7 +100,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
   const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce((acc, _ref6) => {
     let [vp, viewportTokens] = _ref6;
     acc[vp] = {
-      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp, useContentMaxWidth),
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
@@ -176,7 +177,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     selectDismissIconPropsStyles
   };
 };
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system, useContentMaxWidth) => ({
   containerStyles: {
     container: {
       flexDirection: 'column',
@@ -188,7 +189,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport, useContentMaxWidth),
       ...(system && {
         alignSelf: 'center'
       })
@@ -287,6 +288,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     tokens,
     variant,
     onDismiss,
+    contentMinWidth,
     ...rest
   } = _ref7;
   const [isDismissed, setIsDismissed] = _react.default.useState(false);
@@ -309,6 +311,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     system: isSystemEnabled,
     viewport
   });
+  const useContentMaxWidth = (0, _utils.useResponsiveProp)(contentMinWidth) === CONTENT_MAX_WIDTH;
   const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth, _systemConstants.viewports.map.get(_systemConstants.viewports.xl));
   const notificationComponentRef = _react.default.useRef({
     containerStyles: {},
@@ -331,9 +334,9 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled, useContentMaxWidth);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled, useContentMaxWidth);
   }
   if (isDismissed) {
     return null;
@@ -430,6 +433,22 @@ Notification.propTypes = {
    * Callback function called when the dismiss button is clicked
    */
   onDismiss: _propTypes.default.func,
+  /**
+   * The minimum width of the content in the Notification when using the system variant.
+   * This prop accepts responsive values for different viewports.
+   * - `xs`: 'max' | 'full'
+   * - `sm`: 'max' | 'full'
+   * - `md`: 'max' | 'full'
+   * - `lg`: 'max' | 'full'
+   * - `xl`: 'max' | 'full'
+   */
+  contentMinWidth: _propTypes.default.shape({
+    xl: _propTypes.default.oneOf(['max', 'full']),
+    lg: _propTypes.default.oneOf(['max', 'full']),
+    md: _propTypes.default.oneOf(['max', 'full']),
+    sm: _propTypes.default.oneOf(['max', 'full']),
+    xs: _propTypes.default.oneOf(['max', 'full'])
+  }),
   tokens: (0, _utils.getTokensPropType)('Notification'),
   variant: _utils.variantProp.propType
 };

package/lib/cjs/Tabs/Tabs.js

@@ -13,6 +13,7 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 var _utils = require("../utils");
 var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 var _TabsItem = _interopRequireDefault(require("./TabsItem"));
+var _TabsDropdown = _interopRequireDefault(require("./TabsDropdown"));
 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; }
@@ -48,6 +49,12 @@ const getStackViewTokens = variant => {
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
  *
+ * By default, Tabs always renders as horizontal scrolling tabs regardless of viewport.
+ * To enable dropdown mode, you must explicitly pass `variant={{ dropdown: true }}`.
+ * When dropdown is enabled, it will only render as a dropdown on mobile and tablet
+ * viewports (XS and SM). On larger viewports (MD, LG, XL), it will still render as
+ * horizontal tabs even with dropdown enabled.
+ *
  * If you are using Tabs to navigate to a new page (web-only) you should pass
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
@@ -93,6 +100,31 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
   const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
   const stackViewTokens = getStackViewTokens(variant);
+
+  // Render dropdown only if explicitly requested via variant AND viewport is xs or sm
+  const isSmallViewport = (0, _utils.useResponsiveProp)({
+    xs: true,
+    sm: true,
+    md: false,
+    lg: false,
+    xl: false
+  }, false);
+  const shouldRenderDropdown = variant?.dropdown === true && isSmallViewport;
+  if (shouldRenderDropdown) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsDropdown.default, {
+      ref: ref,
+      tokens: tokens,
+      itemTokens: itemTokens,
+      variant: variant,
+      value: currentValue,
+      onChange: setValue,
+      items: items,
+      LinkRouter: LinkRouter,
+      linkRouterProps: linkRouterProps,
+      accessibilityRole: parentAccessibilityRole === 'tablist' ? 'button' : parentAccessibilityRole,
+      ...restProps
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
     ref: ref,
     ScrollButton: _HorizontalScroll.HorizontalScrollButton,
@@ -152,13 +184,13 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.PropTypes,
+  ..._utils.withLinkRouter.propTypes,
   /**
    * Array of `TabsItem`s
    */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     ...selectedItemPropTypes,
-    ..._utils.withLinkRouter.PropTypes,
+    ..._utils.withLinkRouter.propTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,