@hero-design/rn 8.91.1 → 8.91.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3055) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3043) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 52.1s
+created lib/index.js, es/index.js in 51.4s

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @hero-design/rn
 
+## 8.91.3
+
+### Patch Changes
+
+- [#3696](https://github.com/Thinkei/hero-design/pull/3696) [`769f2738b4d870703ad169290f3cc36305920a28`](https://github.com/Thinkei/hero-design/commit/769f2738b4d870703ad169290f3cc36305920a28) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Update mobile shadow tokens
+
+## 8.91.2
+
+### Patch Changes
+
+- [#3694](https://github.com/Thinkei/hero-design/pull/3694) [`6b5810543df428ac5e4ffb6be8a3a0c820177d23`](https://github.com/Thinkei/hero-design/commit/6b5810543df428ac5e4ffb6be8a3a0c820177d23) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Checkbox][switch] Update color
+
+- [#3695](https://github.com/Thinkei/hero-design/pull/3695) [`5b3d9e000462957834b653bf9f2a3934f39aca6b`](https://github.com/Thinkei/hero-design/commit/5b3d9e000462957834b653bf9f2a3934f39aca6b) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Search.OneLine][textinput] Update placeholder color
+
+- [#3697](https://github.com/Thinkei/hero-design/pull/3697) [`0bb02b0f890e99650c5dce6afc231da2c3507539`](https://github.com/Thinkei/hero-design/commit/0bb02b0f890e99650c5dce6afc231da2c3507539) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [TextInput][richtexteditor] Add element to wrap the label
+
 ## 8.91.1
 
 ### Patch Changes

package/es/index.js

@@ -1986,10 +1986,10 @@ var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, glo
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
-  mutedOnDefaultGlobalSurface: palette$3.offBlackLight30,
-  inactiveOnDefaultGlobalSurface: palette$3.offBlackLight50,
+  mutedOnDefaultGlobalSurface: '#4d6265',
+  inactiveOnDefaultGlobalSurface: '#808f91',
   primaryOutline: palette$3.offBlack,
-  inactiveOutline: palette$3.offBlackLight50
+  inactiveOutline: '#808f91'
 });
 
 var swagBrandSystemPallete = {
@@ -2005,9 +2005,12 @@ var swagBrandSystemPallete = {
   decorativeSecondary: '#fdfbff',
   decorativeSecondarySurface: '#f0e6ff'
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
+var swagSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete), {}, {
+  name: 'swagLight'
+});
 
 var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
+  name: 'swagLightJobs',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',
@@ -2124,7 +2127,8 @@ var ehWorkDarkSystemPalette = {
   decorativeSecondary: '#280541',
   decorativeSecondarySurface: '#4c1d95',
   // Theme Mode
-  themeMode: 'dark'
+  themeMode: 'dark',
+  name: 'ehWorkDark'
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -2289,19 +2293,116 @@ var getRadii = function getRadii(baseRadius) {
   };
 };
 
-var getShadows = function getShadows(systemPalette) {
-  return {
-    "default": {
-      shadowOffset: {
-        width: 0,
-        height: 2
-      },
-      shadowColor: systemPalette.primaryOutline,
-      shadowOpacity: 0.12,
-      shadowRadius: 4,
-      elevation: 3
-    }
-  };
+var swagLightShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var swagLightJobsShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagLightJobsSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var ehWorkDarkShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.56,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.24,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var getShadows = function getShadows(palette) {
+  switch (palette.name) {
+    case 'swagLight':
+      return swagLightShadowPalette;
+    case 'swagLightJobs':
+      return swagLightJobsShadowPalette;
+    case 'ehWorkDark':
+      return ehWorkDarkShadowPalette;
+    default:
+      return swagLightShadowPalette;
+  }
 };
 
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
@@ -2808,8 +2909,15 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
     borders: {
       "default": theme.colors.primaryOutline,
+      checked: theme.colors.primaryOutline,
       disabled: theme.colors.disabledOutline,
       readonly: theme.colors.inactiveOutline
+    },
+    checkboxBorder: {
+      "default": theme.colors.primaryOutline,
+      checked: theme.colors.primary,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface
     }
   };
   var space = {
@@ -3582,14 +3690,14 @@ var getSwipeableTheme = function getSwipeableTheme(theme) {
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
     backgroundColors: {
-      checked: theme.colors.primary,
+      checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.highlightedSurface,
-      'disabled-unchecked': theme.colors.mutedOnDefaultGlobalSurface
+      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface
     },
-    thumb: theme.colors.onDarkGlobalSurface,
+    thumb: theme.colors.white,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
+      background: theme.colors.neutralGlobalSurface,
       textBackground: theme.colors.decorativePrimarySurface
     }
   };
@@ -3745,7 +3853,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.inactiveOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
-    }
+    },
+    placeholder: theme.colors.mutedOnDefaultGlobalSurface
   };
   var space = {
     containerPadding: theme.space.medium,
@@ -14352,7 +14461,7 @@ var StyledCheckbox = index$a(View)(function (_ref4) {
     flex: 1,
     borderRadius: theme.__hd__.checkbox.radii.icon,
     borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
+    borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 var StyledCheckMark = index$a(Icon)(function (_ref5) {
@@ -14361,19 +14470,23 @@ var StyledCheckMark = index$a(Icon)(function (_ref5) {
   return {
     position: 'absolute',
     top: theme.__hd__.checkbox.space.iconTop,
-    color: theme.__hd__.checkbox.colors.borders[themeState]
+    color: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 
 var getThemeState = function getThemeState(_ref) {
   var disabled = _ref.disabled,
-    readonly = _ref.readonly;
+    readonly = _ref.readonly,
+    checked = _ref.checked;
   if (disabled) {
     return 'disabled';
   }
   if (readonly) {
     return 'readonly';
   }
+  if (checked) {
+    return 'checked';
+  }
   return 'default';
 };
 var Checkbox = function Checkbox(_ref2) {
@@ -14391,7 +14504,8 @@ var Checkbox = function Checkbox(_ref2) {
   useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
-    readonly: readonly
+    readonly: readonly,
+    checked: checked
   });
   return /*#__PURE__*/React__default.createElement(StyledWrapper$8, {
     onPress: onPress,
@@ -14584,11 +14698,13 @@ var renderInput$1 = function renderInput(_ref3) {
   var variant = _ref3.variant,
     nativeInputProps = _ref3.nativeInputProps,
     renderInputValue = _ref3.renderInputValue,
-    ref = _ref3.ref;
+    ref = _ref3.ref,
+    theme = _ref3.theme;
   return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeInputProps.multiline,
-    ref: ref
+    ref: ref,
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
   }));
 };
 var renderSuffix$1 = function renderSuffix(_ref4) {
@@ -14843,13 +14959,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
-    }
+    },
+    theme: theme
   })), renderSuffix$1({
     state: state,
     loading: loading,
@@ -19459,7 +19576,8 @@ var StyledWrapper$2 = index$a(View)(function (_ref) {
     borderRadius: theme.__hd__["switch"].radii.rounded,
     backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    opacity: themeVariant.includes('disabled') ? 0.4 : 1
   };
 });
 var StyledKnot = index$a(Animated.View)(function (_ref2) {
@@ -39814,7 +39932,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeState: state,
@@ -40209,6 +40327,7 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
     setIsFocused = _React$useState2[1];
+  var theme = useTheme();
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var state = getState({
@@ -40293,7 +40412,8 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
       maxLength: maxLength,
       value: value,
       defaultValue: defaultValue,
-      placeholder: placeholder
+      placeholder: placeholder,
+      placeholderTextColor: theme.__hd__.textInput.colors.placeholder
     }),
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;

package/lib/index.js

@@ -2014,10 +2014,10 @@ var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, glo
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
-  mutedOnDefaultGlobalSurface: palette$3.offBlackLight30,
-  inactiveOnDefaultGlobalSurface: palette$3.offBlackLight50,
+  mutedOnDefaultGlobalSurface: '#4d6265',
+  inactiveOnDefaultGlobalSurface: '#808f91',
   primaryOutline: palette$3.offBlack,
-  inactiveOutline: palette$3.offBlackLight50
+  inactiveOutline: '#808f91'
 });
 
 var swagBrandSystemPallete = {
@@ -2033,9 +2033,12 @@ var swagBrandSystemPallete = {
   decorativeSecondary: '#fdfbff',
   decorativeSecondarySurface: '#f0e6ff'
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
+var swagSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete), {}, {
+  name: 'swagLight'
+});
 
 var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
+  name: 'swagLightJobs',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',
@@ -2152,7 +2155,8 @@ var ehWorkDarkSystemPalette = {
   decorativeSecondary: '#280541',
   decorativeSecondarySurface: '#4c1d95',
   // Theme Mode
-  themeMode: 'dark'
+  themeMode: 'dark',
+  name: 'ehWorkDark'
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -2317,19 +2321,116 @@ var getRadii = function getRadii(baseRadius) {
   };
 };
 
-var getShadows = function getShadows(systemPalette) {
-  return {
-    "default": {
-      shadowOffset: {
-        width: 0,
-        height: 2
-      },
-      shadowColor: systemPalette.primaryOutline,
-      shadowOpacity: 0.12,
-      shadowRadius: 4,
-      elevation: 3
-    }
-  };
+var swagLightShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var swagLightJobsShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagLightJobsSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var ehWorkDarkShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.56,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.24,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var getShadows = function getShadows(palette) {
+  switch (palette.name) {
+    case 'swagLight':
+      return swagLightShadowPalette;
+    case 'swagLightJobs':
+      return swagLightJobsShadowPalette;
+    case 'ehWorkDark':
+      return ehWorkDarkShadowPalette;
+    default:
+      return swagLightShadowPalette;
+  }
 };
 
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
@@ -2836,8 +2937,15 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
     borders: {
       "default": theme.colors.primaryOutline,
+      checked: theme.colors.primaryOutline,
       disabled: theme.colors.disabledOutline,
       readonly: theme.colors.inactiveOutline
+    },
+    checkboxBorder: {
+      "default": theme.colors.primaryOutline,
+      checked: theme.colors.primary,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface
     }
   };
   var space = {
@@ -3610,14 +3718,14 @@ var getSwipeableTheme = function getSwipeableTheme(theme) {
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
     backgroundColors: {
-      checked: theme.colors.primary,
+      checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.highlightedSurface,
-      'disabled-unchecked': theme.colors.mutedOnDefaultGlobalSurface
+      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface
     },
-    thumb: theme.colors.onDarkGlobalSurface,
+    thumb: theme.colors.white,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
+      background: theme.colors.neutralGlobalSurface,
       textBackground: theme.colors.decorativePrimarySurface
     }
   };
@@ -3773,7 +3881,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.inactiveOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
-    }
+    },
+    placeholder: theme.colors.mutedOnDefaultGlobalSurface
   };
   var space = {
     containerPadding: theme.space.medium,
@@ -14380,7 +14489,7 @@ var StyledCheckbox = index$a(reactNative.View)(function (_ref4) {
     flex: 1,
     borderRadius: theme.__hd__.checkbox.radii.icon,
     borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
+    borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 var StyledCheckMark = index$a(Icon)(function (_ref5) {
@@ -14389,19 +14498,23 @@ var StyledCheckMark = index$a(Icon)(function (_ref5) {
   return {
     position: 'absolute',
     top: theme.__hd__.checkbox.space.iconTop,
-    color: theme.__hd__.checkbox.colors.borders[themeState]
+    color: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 
 var getThemeState = function getThemeState(_ref) {
   var disabled = _ref.disabled,
-    readonly = _ref.readonly;
+    readonly = _ref.readonly,
+    checked = _ref.checked;
   if (disabled) {
     return 'disabled';
   }
   if (readonly) {
     return 'readonly';
   }
+  if (checked) {
+    return 'checked';
+  }
   return 'default';
 };
 var Checkbox = function Checkbox(_ref2) {
@@ -14419,7 +14532,8 @@ var Checkbox = function Checkbox(_ref2) {
   useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
-    readonly: readonly
+    readonly: readonly,
+    checked: checked
   });
   return /*#__PURE__*/React__namespace.default.createElement(StyledWrapper$8, {
     onPress: onPress,
@@ -14612,11 +14726,13 @@ var renderInput$1 = function renderInput(_ref3) {
   var variant = _ref3.variant,
     nativeInputProps = _ref3.nativeInputProps,
     renderInputValue = _ref3.renderInputValue,
-    ref = _ref3.ref;
+    ref = _ref3.ref,
+    theme = _ref3.theme;
   return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__namespace.default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeInputProps.multiline,
-    ref: ref
+    ref: ref,
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
   }));
 };
 var renderSuffix$1 = function renderSuffix(_ref4) {
@@ -14871,13 +14987,14 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
-    }
+    },
+    theme: theme
   })), renderSuffix$1({
     state: state,
     loading: loading,
@@ -19487,7 +19604,8 @@ var StyledWrapper$2 = index$a(reactNative.View)(function (_ref) {
     borderRadius: theme.__hd__["switch"].radii.rounded,
     backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    opacity: themeVariant.includes('disabled') ? 0.4 : 1
   };
 });
 var StyledKnot = index$a(reactNative.Animated.View)(function (_ref2) {
@@ -39842,7 +39960,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBorderBackDrop, {
     themeState: state,
@@ -40237,6 +40355,7 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
     setIsFocused = _React$useState2[1];
+  var theme = useTheme();
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var state = getState({
@@ -40321,7 +40440,8 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
       maxLength: maxLength,
       value: value,
       defaultValue: defaultValue,
-      placeholder: placeholder
+      placeholder: placeholder,
+      placeholderTextColor: theme.__hd__.textInput.colors.placeholder
     }),
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.91.1",
+  "version": "8.91.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",