@telus-uds/components-base 1.12.0 → 1.14.0

package/lib/Checkbox/CheckboxGroup.js

@@ -69,7 +69,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * @example
  * ```jsx
  * <CheckboxGroup
- *   initialCheckedId="check1"
+ *   initialCheckedIds="check1"
  *   items={[
  *     { label: 'Checkbox 1', id: 'check1' },
  *     { label: 'Checkbox 2', id: 'check2' },
@@ -90,6 +90,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedIds,
@@ -156,6 +157,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -205,6 +207,11 @@ CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: _propTypes.default.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib/Feedback/Feedback.js

@@ -33,24 +33,29 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const selectStyles = tokens => (0, _utils.selectTokens)('Feedback', tokens);
 
-const selectTitleTextStyles = _ref => {
+const selectTitleTextStyles = (_ref, themeOptions) => {
   let {
     titleFontSize,
     ...tokens
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
-    fontSize: titleFontSize
-  }));
+  return (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', { ...tokens,
+      fontSize: titleFontSize,
+      themeOptions
+    }),
+    themeOptions
+  });
 };
 
-const selectContentTextStyles = _ref2 => {
+const selectContentTextStyles = (_ref2, themeOptions) => {
   let {
     contentFontSize,
     ...tokens
   } = _ref2;
-  return (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
-    fontSize: contentFontSize
-  }));
+  return (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', { ...tokens,
+      fontSize: contentFontSize
+    }),
+    themeOptions
+  });
 };
 
 const selectIconTokens = _ref3 => {
@@ -111,8 +116,11 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const {
     icon: IconComponent
   } = themeTokens;
-  const titleTextStyles = selectTitleTextStyles(themeTokens);
-  const contentTextStyles = selectContentTextStyles(themeTokens);
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions);
+  const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions);
   const content = typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     style: contentTextStyles,
     children: children

package/lib/Icon/IconText.js

@@ -69,6 +69,9 @@ const IconText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 IconText.displayName = 'IconText';
 IconText.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */
+  // eslint is having hard time seeing these props through forwardRef
+
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
@@ -83,7 +86,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: _propTypes.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`
@@ -97,6 +100,8 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: _propTypes.default.node
+  /* eslint-enable react/no-unused-prop-types */
+
 };
 var _default = IconText;
 exports.default = _default;

package/lib/InputLabel/InputLabel.js

@@ -33,9 +33,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectLabelStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
+const selectLabelStyles = (tokens, themeOptions) => (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', tokens),
+  themeOptions
+});
 
-const selectHintStyles = _ref => {
+const selectHintStyles = (_ref, themeOptions) => {
   let {
     hintColor,
     hintFontName,
@@ -48,7 +50,8 @@ const selectHintStyles = _ref => {
     fontName: hintFontName,
     fontSize: hintFontSize,
     fontWeight: hintFontWeight,
-    lineHeight: hintLineHeight
+    lineHeight: hintLineHeight,
+    themeOptions
   });
 };
 
@@ -77,19 +80,22 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       ref: ref,
       style: staticStyles.container,
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+        style: [selectLabelStyles(themeTokens, themeOptions), selectGapStyles(themeTokens), staticStyles.label],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
           forId: forId,
           children: label
         })
       }), hint && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
+        style: [selectHintStyles(themeTokens, themeOptions), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
         nativeID: hintId,
         children: hint
       }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/Link/InlinePressable.js

@@ -27,8 +27,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
  *
- * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
- *
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
@@ -37,12 +35,11 @@ const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     style,
-    inline = false,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
-    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -51,11 +48,7 @@ InlinePressable.displayName = 'InlinePressable';
 
 const staticStyles = _StyleSheet.default.create({
   inline: {
-    // Stop Pressable defaulting to (block) flex
     display: 'inline'
-  },
-  inlineFlex: {
-    display: 'inline-flex'
   }
 });
 

package/lib/Link/LinkBase.js

@@ -37,7 +37,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps]);
 
-const selectOuterBorderStyles = _ref => {
+const selectOuterBorderStyles = (_ref, hasIcon) => {
   let {
     outerBorderColor,
     outerBorderWidth,
@@ -58,7 +58,8 @@ const selectOuterBorderStyles = _ref => {
       }),
       // Stops focus ring stretching horizontally if parent has display: block
       // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-      display: 'inline-flex'
+      display: hasIcon ? 'inline-flex' : 'inline' // Stop Pressable defaulting to (block) flex
+
     } : {}
   );
 };
@@ -78,7 +79,7 @@ const selectTextStyles = _ref2 => {
   };
 };
 
-const selectBlockStyles = _ref3 => {
+const selectBlockStyles = (_ref3, themeOptions) => {
   let {
     blockFontWeight,
     blockFontSize,
@@ -89,7 +90,8 @@ const selectBlockStyles = _ref3 => {
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
     lineHeight: blockLineHeight,
-    fontName: blockFontName
+    fontName: blockFontName,
+    themeOptions
   });
 };
 
@@ -192,15 +194,16 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
 
   const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...selectedProps,
-    inline: hasIcon // assuming links without icons should be inline (even if they are long)
-    ,
     ref: ref,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
-      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const outerBorderStyles = selectOuterBorderStyles(themeTokens, hasIcon);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -208,7 +211,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       const iconTokens = selectIconTokens(themeTokens); // TODO: may need to apply some smarter text inheritance here if inline to avoid native
       // issues like double-application of line heights breaking align-items: baseline
 
-      const blockTextStyles = selectBlockStyles(themeTokens);
+      const blockTextStyles = selectBlockStyles(themeTokens, themeOptions);
       const IconComponent = icon || themeTokens.icon;
       const {
         iconSpace
@@ -242,7 +245,7 @@ LinkBase.propTypes = { ...selectedSystemPropTypes,
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
    */
-  icon: _propTypes.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.

package/lib/List/ListItem.js

@@ -87,7 +87,7 @@ const selectBulletPositioningStyles = _ref5 => {
   };
 };
 
-const selectItemStyles = _ref6 => {
+const selectItemStyles = (_ref6, themeOptions) => {
   let {
     itemFontWeight,
     itemFontSize,
@@ -98,7 +98,8 @@ const selectItemStyles = _ref6 => {
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,
-    fontName: itemFontName
+    fontName: itemFontName,
+    themeOptions
   });
 };
 
@@ -146,7 +147,10 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
     ...rest
   } = _ref9;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  const itemStyles = selectItemStyles(themeTokens);
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const itemStyles = selectItemStyles(themeTokens, themeOptions);
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
   const dividerStyles = selectDividerStyles(themeTokens);
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
@@ -242,7 +246,7 @@ ListItem.propTypes = { ...selectedSystemPropTypes,
   /**
    * Renders side item icon
    */
-  icon: _propTypes.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * Will set display icon color

package/lib/Notification/Notification.js

@@ -36,7 +36,9 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectContainerStyles = tokens => ({ ...tokens
 });
 
-const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
+const selectTextStyles = (tokens, themeOptions) => (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', tokens),
+  themeOptions
+});
 
 const selectIconProps = _ref => {
   let {
@@ -77,6 +79,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
     paddingLeft: dismissButtonGap
   };
 };
+
+const selectContentContainerStyle = maxWidth => ({
+  width: maxWidth || '100%'
+});
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -148,12 +154,16 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     dictionary: _dictionary.default,
     copy
   });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const contentMaxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
 
   if (isDismissed) {
     return null;
   }
 
-  const textStyles = selectTextStyles(themeTokens);
+  const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
     textStyles
   }) : children, {
@@ -167,30 +177,33 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
 
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
     ...selectProps(rest),
-    children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectIconContainerStyles(themeTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.contentContainer,
-      children: content && typeof content === 'function' ? content({
-        textStyles,
-        variant
-      }) : content
-    }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectDismissButtonContainerStyles(themeTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-        onPress: onDismissPress,
-        accessibilityRole: "button",
-        accessibilityLabel: getCopy('dismiss'),
-        children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.contentContainer,
+        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
+          })
+        }), content && typeof content === 'function' ? content({
+          textStyles,
+          variant
+        }) : content]
+      }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectDismissButtonContainerStyles(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+          onPress: onDismissPress,
+          accessibilityRole: "button",
+          accessibilityLabel: getCopy('dismiss'),
+          children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+          })
         })
-      })
-    })]
+      })]
+    })
   });
 });
 Notification.displayName = 'Notification';
@@ -225,9 +238,16 @@ exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   contentContainer: {
-    flex: 1
+    flexDirection: 'row',
+    flexShrink: 1
+  },
+  content: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    justifyContent: 'space-between'
   }
 });

package/lib/Pagination/Pagination.js

@@ -37,7 +37,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     color,
     fontName,
@@ -50,7 +50,8 @@ const selectTextStyles = _ref => {
     fontName,
     fontSize,
     fontWeight,
-    lineHeight
+    lineHeight,
+    themeOptions
   });
 };
 
@@ -74,6 +75,9 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   } = (0, _ThemeProvider.useThemeTokens)('Pagination', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
 
   const items = _react.default.Children.toArray(children);
 
@@ -90,7 +94,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     items,
     truncateAbove
   });
-  const ellipsisTextStyles = selectTextStyles(themeTokens);
+  const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
 
   if (items.length === 0) {
     return null;

package/lib/Radio/RadioGroup.js

@@ -92,6 +92,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedId,
@@ -141,6 +142,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
+      error: validation === 'error',
       ref: itemRef,
       id: radioId,
       checked: isChecked,
@@ -160,6 +162,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -215,6 +218,11 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: _propTypes.default.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib/RadioCard/RadioCard.js

@@ -107,6 +107,9 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
 
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.PressableCardBase, {
     ref: ref,
     inactive: inactive,
@@ -127,7 +130,9 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       } = getTokens(cardState);
       const radioTokens = (0, _RadioButton.selectRadioButtonTokens)(themeTokens, 'radio');
       const titleTokens = (0, _utils.selectTokens)('Typography', themeTokens);
-      const textStyle = (0, _ThemeProvider.applyTextStyles)(titleTokens);
+      const textStyle = (0, _ThemeProvider.applyTextStyles)({ ...titleTokens,
+        themeOptions
+      });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
         direction: "row",
         space: radioSpace,

package/lib/RadioCard/RadioCardGroup.js

@@ -92,6 +92,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedId,
@@ -136,6 +137,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive || readOnly,
@@ -221,6 +223,11 @@ RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: _propTypes.default.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib/Select/Select.js

@@ -33,7 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
 
-const selectInputStyles = (_ref, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
     color,
@@ -63,7 +63,8 @@ const selectInputStyles = (_ref, inactive) => {
     fontName,
     fontSize,
     lineHeight,
-    fontWeight
+    fontWeight,
+    themeOptions
   });
 
   const webStyles = _Platform.default.select({
@@ -252,6 +253,9 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
     icon: IconComponent,
     validationIcon: ValidationIconComponent
   } = themeTokens;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     ...selectedProps,
     children: _ref8 => {
@@ -263,7 +267,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
         style: selectOuterBorderStyles(themeTokens),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
           ref: ref,
-          style: selectInputStyles(themeTokens, inactive),
+          style: selectInputStyles(themeTokens, themeOptions, inactive),
           onFocus: handleFocus,
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,