@hero-design/rn 8.81.1 → 8.81.3-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.81.3-alpha.0
+
+### Patch Changes
+
+- [#3532](https://github.com/Thinkei/hero-design/pull/3532) [`b2a99b76972adb906c364ef193e030e352981d92`](https://github.com/Thinkei/hero-design/commit/b2a99b76972adb906c364ef193e030e352981d92) Thanks [@ttkien](https://github.com/ttkien)! - [Toast] Update colors
+
+## 8.81.2
+
+### Patch Changes
+
+- [#3527](https://github.com/Thinkei/hero-design/pull/3527) [`228f8de96b09802ce890eeb6277a12a774af99ad`](https://github.com/Thinkei/hero-design/commit/228f8de96b09802ce890eeb6277a12a774af99ad) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [TimePicker] Fix bottom sheet value not in sync
+
 ## 8.81.1
 
 ### Patch Changes

package/es/index.js

@@ -3597,12 +3597,22 @@ var getTimePickerTheme = function getTimePickerTheme(theme) {
 
 var getToastTheme = function getToastTheme(theme) {
   var colors = {
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-    notification: theme.colors.defaultGlobalSurface,
-    snackbar: theme.colors.darkGlobalSurface,
+    backgrounds: {
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      error: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      notification: theme.colors.defaultGlobalSurface,
+      snackbar: theme.colors.darkGlobalSurface
+    },
+    texts: {
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      error: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      notification: theme.colors.onDefaultGlobalSurface,
+      snackbar: theme.colors.onDarkGlobalSurface
+    },
     divider: theme.colors.secondaryOutline
   };
   var sizes = {
@@ -7272,7 +7282,7 @@ var FONTSIZE_MAP = {
   'regular-bold': 'regular',
   'small-bold': 'small'
 };
-var StyledBody$1 = index$a(Text$1)(function (_ref) {
+var StyledBody$2 = index$a(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme,
     themeTypeface = _ref.themeTypeface,
@@ -7298,7 +7308,7 @@ var Body = function Body(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     nativeProps = _objectWithoutProperties(_ref, _excluded$H);
-  return /*#__PURE__*/React__default.createElement(StyledBody$1, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
     themeVariant: variant,
@@ -8040,7 +8050,7 @@ var IconContainer$1 = index$a(View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$3 = index$a(Icon)(function (_ref3) {
+var StyledIcon$4 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -8054,7 +8064,7 @@ var TextContainer$1 = index$a(View)(function (_ref4) {
     flex: 1
   };
 });
-var StyledBody = index$a(Typography.Body)(function (_ref5) {
+var StyledBody$1 = index$a(Typography.Body)(function (_ref5) {
   var theme = _ref5.theme,
     themeIntent = _ref5.themeIntent;
   return {
@@ -8099,7 +8109,7 @@ var AlertIcon = function AlertIcon(_ref) {
     intent = _ref.intent;
   return icon ? /*#__PURE__*/React__default.createElement(IconContainer$1, {
     testID: "alert-left-icon"
-  }, /*#__PURE__*/React__default.createElement(StyledIcon$3, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$4, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -8128,19 +8138,19 @@ var Alert = function Alert(_ref2) {
   }, icon !== null ? /*#__PURE__*/React__default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
     intent: intent
-  }) : null, /*#__PURE__*/React__default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+  }) : null, /*#__PURE__*/React__default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody$1, {
     variant: "small-bold",
     themeIntent: intent
-  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody$1, {
     variant: "small",
     themeIntent: intent
   }, content) : content)), onClose ? /*#__PURE__*/React__default.createElement(CTAWrapper$1, {
     onPress: onClose,
     testID: "alert-close-icon"
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody$1, {
     variant: "small-bold",
     themeIntent: intent
-  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$3, {
+  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$4, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8758,7 +8768,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
     borderRadius: theme.radii.rounded
   };
 });
-var StyledIcon$2 = index$a(Icon)(function (_ref4) {
+var StyledIcon$3 = index$a(Icon)(function (_ref4) {
   var themeSize = _ref4.themeSize,
     theme = _ref4.theme;
   return {
@@ -8866,7 +8876,7 @@ var Badge = function Badge(_ref) {
       }]
     }, style],
     testID: testID
-  }), isIconBadge ? /*#__PURE__*/React__default.createElement(StyledIcon$2, {
+  }), isIconBadge ? /*#__PURE__*/React__default.createElement(StyledIcon$3, {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
@@ -14462,7 +14472,7 @@ var customAlphabet = function customAlphabet(alphabet) {
   return function () {
     var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSize;
     var id = '';
-    var i = size;
+    var i = size | 0;
     while (i--) {
       id += alphabet[Math.random() * alphabet.length | 0];
     }
@@ -15024,7 +15034,7 @@ var StyledActionItemText = index$a(Typography.Body)(function (_ref2) {
     color: theme.__hd__.fab.colors.actionItemText
   };
 });
-var StyledIcon$1 = index$a(Icon)(function (_ref3) {
+var StyledIcon$2 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     color: theme.__hd__.fab.colors.actionItemText
@@ -15113,7 +15123,7 @@ var ActionItem = function ActionItem(_ref) {
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     size: "xsmall",
     icon: icon
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
@@ -15524,7 +15534,7 @@ var Container = index$a(Animated.View)(function (_ref2) {
     themeIntent = _ref2.themeIntent;
   return {
     borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii["default"] : 0,
-    backgroundColor: theme.__hd__.toast.colors[themeIntent],
+    backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
     minHeight: theme.__hd__.toast.sizes.height,
     flexDirection: 'row',
     shadowColor: theme.__hd__.toast.shadows.color,
@@ -15566,6 +15576,20 @@ var CTAWrapper = index$a(TouchableOpacity)(function (_ref6) {
     justifyContent: 'center'
   };
 });
+var StyledBody = index$a(Typography.Body)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeIntent = _ref7.themeIntent;
+  return {
+    color: theme.__hd__.toast.colors.texts[themeIntent]
+  };
+});
+var StyledIcon$1 = index$a(Icon)(function (_ref8) {
+  var theme = _ref8.theme,
+    themeIntent = _ref8.themeIntent;
+  return {
+    color: theme.__hd__.toast.colors.texts[themeIntent]
+  };
+});
 
 var fallbackToastControlContext = {
   show: function show(_) {
@@ -15612,10 +15636,10 @@ var ToastIcon = function ToastIcon(_ref) {
     icon = _ref.icon;
   return icon ? /*#__PURE__*/React__default.createElement(IconContainer, {
     testID: "toast-left-icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     icon: icon,
     size: "small",
-    intent: themeIntent === 'snackbar' ? 'text-inverted' : 'text'
+    themeIntent: themeIntent
   })) : null;
 };
 var Toast$1 = function Toast(_ref2) {
@@ -15679,18 +15703,18 @@ var Toast$1 = function Toast(_ref2) {
   }, icon !== null ? /*#__PURE__*/React__default.createElement(ToastIcon, {
     themeIntent: intent,
     icon: icon || getIntentIcon(intent)
-  }) : null, /*#__PURE__*/React__default.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(Typography.Body, {
+  }) : null, /*#__PURE__*/React__default.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
     variant: "small",
-    intent: intent === 'snackbar' ? 'inverted' : 'body'
+    themeIntent: intent
   }, content) : content)), actionLabel ? /*#__PURE__*/React__default.createElement(CTAWrapper, {
     testID: "toast-action-button",
     onPress: function onPress() {
       onAction === null || onAction === void 0 || onAction();
       onDismiss === null || onDismiss === void 0 || onDismiss();
     }
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(Typography.Body, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
     variant: "small-bold",
-    intent: intent === 'snackbar' ? 'inverted' : 'body'
+    themeIntent: intent
   }, actionLabel) : actionLabel) : null);
 };
 
@@ -19117,6 +19141,9 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? format(displayFormat, value) : '';
   var theme = useTheme();
+  useEffect(function () {
+    setSelectingDate(value || new Date());
+  }, [value]);
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);

package/lib/index.js

@@ -3624,12 +3624,22 @@ var getTimePickerTheme = function getTimePickerTheme(theme) {
 
 var getToastTheme = function getToastTheme(theme) {
   var colors = {
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-    notification: theme.colors.defaultGlobalSurface,
-    snackbar: theme.colors.darkGlobalSurface,
+    backgrounds: {
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      error: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      notification: theme.colors.defaultGlobalSurface,
+      snackbar: theme.colors.darkGlobalSurface
+    },
+    texts: {
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      error: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      notification: theme.colors.onDefaultGlobalSurface,
+      snackbar: theme.colors.onDarkGlobalSurface
+    },
     divider: theme.colors.secondaryOutline
   };
   var sizes = {
@@ -7299,7 +7309,7 @@ var FONTSIZE_MAP = {
   'regular-bold': 'regular',
   'small-bold': 'small'
 };
-var StyledBody$1 = index$a(reactNative.Text)(function (_ref) {
+var StyledBody$2 = index$a(reactNative.Text)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme,
     themeTypeface = _ref.themeTypeface,
@@ -7325,7 +7335,7 @@ var Body = function Body(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     nativeProps = _objectWithoutProperties(_ref, _excluded$H);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledBody$1, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
     themeVariant: variant,
@@ -8067,7 +8077,7 @@ var IconContainer$1 = index$a(reactNative.View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$3 = index$a(Icon)(function (_ref3) {
+var StyledIcon$4 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -8081,7 +8091,7 @@ var TextContainer$1 = index$a(reactNative.View)(function (_ref4) {
     flex: 1
   };
 });
-var StyledBody = index$a(Typography.Body)(function (_ref5) {
+var StyledBody$1 = index$a(Typography.Body)(function (_ref5) {
   var theme = _ref5.theme,
     themeIntent = _ref5.themeIntent;
   return {
@@ -8126,7 +8136,7 @@ var AlertIcon = function AlertIcon(_ref) {
     intent = _ref.intent;
   return icon ? /*#__PURE__*/React__namespace.default.createElement(IconContainer$1, {
     testID: "alert-left-icon"
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$3, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$4, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -8155,19 +8165,19 @@ var Alert = function Alert(_ref2) {
   }, icon !== null ? /*#__PURE__*/React__namespace.default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
     intent: intent
-  }) : null, /*#__PURE__*/React__namespace.default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
+  }) : null, /*#__PURE__*/React__namespace.default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody$1, {
     variant: "small-bold",
     themeIntent: intent
-  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
+  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody$1, {
     variant: "small",
     themeIntent: intent
   }, content) : content)), onClose ? /*#__PURE__*/React__namespace.default.createElement(CTAWrapper$1, {
     onPress: onClose,
     testID: "alert-close-icon"
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody$1, {
     variant: "small-bold",
     themeIntent: intent
-  }, actionLabel) : /*#__PURE__*/React__namespace.default.createElement(StyledIcon$3, {
+  }, actionLabel) : /*#__PURE__*/React__namespace.default.createElement(StyledIcon$4, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8785,7 +8795,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
     borderRadius: theme.radii.rounded
   };
 });
-var StyledIcon$2 = index$a(Icon)(function (_ref4) {
+var StyledIcon$3 = index$a(Icon)(function (_ref4) {
   var themeSize = _ref4.themeSize,
     theme = _ref4.theme;
   return {
@@ -8893,7 +8903,7 @@ var Badge = function Badge(_ref) {
       }]
     }, style],
     testID: testID
-  }), isIconBadge ? /*#__PURE__*/React__namespace.default.createElement(StyledIcon$2, {
+  }), isIconBadge ? /*#__PURE__*/React__namespace.default.createElement(StyledIcon$3, {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
@@ -14489,7 +14499,7 @@ var customAlphabet = function customAlphabet(alphabet) {
   return function () {
     var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSize;
     var id = '';
-    var i = size;
+    var i = size | 0;
     while (i--) {
       id += alphabet[Math.random() * alphabet.length | 0];
     }
@@ -15051,7 +15061,7 @@ var StyledActionItemText = index$a(Typography.Body)(function (_ref2) {
     color: theme.__hd__.fab.colors.actionItemText
   };
 });
-var StyledIcon$1 = index$a(Icon)(function (_ref3) {
+var StyledIcon$2 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     color: theme.__hd__.fab.colors.actionItemText
@@ -15140,7 +15150,7 @@ var ActionItem = function ActionItem(_ref) {
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$1, {
+  }, /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$2, {
     size: "xsmall",
     icon: icon
   })), /*#__PURE__*/React__namespace.default.createElement(StyledActionItemText, null, title))));
@@ -15551,7 +15561,7 @@ var Container = index$a(reactNative.Animated.View)(function (_ref2) {
     themeIntent = _ref2.themeIntent;
   return {
     borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii["default"] : 0,
-    backgroundColor: theme.__hd__.toast.colors[themeIntent],
+    backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
     minHeight: theme.__hd__.toast.sizes.height,
     flexDirection: 'row',
     shadowColor: theme.__hd__.toast.shadows.color,
@@ -15593,6 +15603,20 @@ var CTAWrapper = index$a(reactNative.TouchableOpacity)(function (_ref6) {
     justifyContent: 'center'
   };
 });
+var StyledBody = index$a(Typography.Body)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeIntent = _ref7.themeIntent;
+  return {
+    color: theme.__hd__.toast.colors.texts[themeIntent]
+  };
+});
+var StyledIcon$1 = index$a(Icon)(function (_ref8) {
+  var theme = _ref8.theme,
+    themeIntent = _ref8.themeIntent;
+  return {
+    color: theme.__hd__.toast.colors.texts[themeIntent]
+  };
+});
 
 var fallbackToastControlContext = {
   show: function show(_) {
@@ -15639,10 +15663,10 @@ var ToastIcon = function ToastIcon(_ref) {
     icon = _ref.icon;
   return icon ? /*#__PURE__*/React__namespace.default.createElement(IconContainer, {
     testID: "toast-left-icon"
-  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$1, {
     icon: icon,
     size: "small",
-    intent: themeIntent === 'snackbar' ? 'text-inverted' : 'text'
+    themeIntent: themeIntent
   })) : null;
 };
 var Toast$1 = function Toast(_ref2) {
@@ -15706,18 +15730,18 @@ var Toast$1 = function Toast(_ref2) {
   }, icon !== null ? /*#__PURE__*/React__namespace.default.createElement(ToastIcon, {
     themeIntent: intent,
     icon: icon || getIntentIcon(intent)
-  }) : null, /*#__PURE__*/React__namespace.default.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+  }) : null, /*#__PURE__*/React__namespace.default.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
     variant: "small",
-    intent: intent === 'snackbar' ? 'inverted' : 'body'
+    themeIntent: intent
   }, content) : content)), actionLabel ? /*#__PURE__*/React__namespace.default.createElement(CTAWrapper, {
     testID: "toast-action-button",
     onPress: function onPress() {
       onAction === null || onAction === void 0 || onAction();
       onDismiss === null || onDismiss === void 0 || onDismiss();
     }
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
     variant: "small-bold",
-    intent: intent === 'snackbar' ? 'inverted' : 'body'
+    themeIntent: intent
   }, actionLabel) : actionLabel) : null);
 };
 
@@ -19144,6 +19168,9 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? format(displayFormat, value) : '';
   var theme = useTheme();
+  React.useEffect(function () {
+    setSelectingDate(value || new Date());
+  }, [value]);
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.81.1",
+  "version": "8.81.3-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,7 +25,7 @@
     "@hero-design/colors": "8.45.1",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
-    "nanoid": "^4.0.2"
+    "nanoid": "^5.0.9"
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.42.10",
@@ -93,6 +93,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd",
-  "react-native": "src/index.ts"
+  "prettier": "prettier-config-hd"
 }

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -1,5 +1,5 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import formatTime from 'date-fns/fp/format';
 
@@ -33,6 +33,10 @@ const TimePickerIOS = ({
   const displayValue = value ? formatTime(displayFormat, value) : '';
   const theme = useTheme();
 
+  useEffect(() => {
+    setSelectingDate(value || new Date());
+  }, [value]);
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="timePickerInputIOS">

package/src/components/Toast/StyledToast.tsx

@@ -3,6 +3,9 @@ import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import { IntentType } from './types';
+import { TextProps } from '../Typography/Text';
+import Typography from '../Typography';
+import Icon, { IconProps } from '../Icon';
 
 const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
   ({ theme, position }) => ({
@@ -19,7 +22,7 @@ const Container = styled(Animated.View)<{
   themeIntent: IntentType;
 }>(({ theme, themeVariant, themeIntent }) => ({
   borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii.default : 0,
-  backgroundColor: theme.__hd__.toast.colors[themeIntent],
+  backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
   minHeight: theme.__hd__.toast.sizes.height,
   flexDirection: 'row',
   shadowColor: theme.__hd__.toast.shadows.color,
@@ -56,6 +59,22 @@ const CTAWrapper = styled(TouchableOpacity)<
   justifyContent: 'center',
 }));
 
+const StyledBody = styled(Typography.Body)<
+  TextProps & {
+    themeIntent: IntentType;
+  }
+>(({ theme, themeIntent }) => ({
+  color: theme.__hd__.toast.colors.texts[themeIntent],
+}));
+
+const StyledIcon = styled(Icon)<
+  IconProps & {
+    themeIntent: IntentType;
+  }
+>(({ theme, themeIntent }) => ({
+  color: theme.__hd__.toast.colors.texts[themeIntent],
+}));
+
 export {
   ToastContainerWrapper,
   Container,
@@ -63,4 +82,6 @@ export {
   TextContainer,
   IconContainer,
   CTAWrapper,
+  StyledBody,
+  StyledIcon,
 };

package/src/components/Toast/Toast.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { Animated, LayoutAnimation } from 'react-native';
-import Icon from '../Icon';
-import Typography from '../Typography';
 import {
   Container,
   ContentContainer,
   IconContainer,
   CTAWrapper,
   TextContainer,
+  StyledBody,
+  StyledIcon,
 } from './StyledToast';
 import { useToastConfig } from './ToastContext';
 import type { IconName } from '../Icon';
@@ -37,11 +37,7 @@ const ToastIcon = ({
 }) =>
   icon ? (
     <IconContainer testID="toast-left-icon">
-      <Icon
-        icon={icon}
-        size="small"
-        intent={themeIntent === 'snackbar' ? 'text-inverted' : 'text'}
-      />
+      <StyledIcon icon={icon} size="small" themeIntent={themeIntent} />
     </IconContainer>
   ) : null;
 
@@ -112,12 +108,9 @@ const Toast = ({
         ) : null}
         <TextContainer>
           {typeof content === 'string' ? (
-            <Typography.Body
-              variant="small"
-              intent={intent === 'snackbar' ? 'inverted' : 'body'}
-            >
+            <StyledBody variant="small" themeIntent={intent}>
               {content}
-            </Typography.Body>
+            </StyledBody>
           ) : (
             content
           )}
@@ -132,12 +125,9 @@ const Toast = ({
           }}
         >
           {typeof actionLabel === 'string' ? (
-            <Typography.Body
-              variant="small-bold"
-              intent={intent === 'snackbar' ? 'inverted' : 'body'}
-            >
+            <StyledBody variant="small-bold" themeIntent={intent}>
               {actionLabel}
-            </Typography.Body>
+            </StyledBody>
           ) : (
             actionLabel
           )}