@hero-design/rn 8.91.1 → 8.91.3

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -815,7 +815,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -1727,7 +1727,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1999,7 +1999,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -2251,7 +2251,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -2830,7 +2830,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -3389,7 +3389,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -3,7 +3,7 @@ import { TouchableOpacity, View } from 'react-native';
 import HeroIcon from '../Icon';
 import Typography from '../Typography';
 
-type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
+type CheckboxThemeState = 'default' | 'checked' | 'disabled' | 'readonly';
 
 export const StyledWrapper = styled(TouchableOpacity)<{
   themeState: CheckboxThemeState;
@@ -32,7 +32,7 @@ export const StyledCheckbox = styled(View)<{
   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],
 }));
 
 export const StyledCheckMark = styled(HeroIcon)<{
@@ -40,5 +40,5 @@ export const StyledCheckMark = styled(HeroIcon)<{
 }>(({ theme, themeState }) => ({
   position: 'absolute',
   top: theme.__hd__.checkbox.space.iconTop,
-  color: theme.__hd__.checkbox.colors.borders[themeState],
+  color: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
 }));

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -57,7 +57,7 @@ exports[`StyledCheckbox renders correctly when disabled is false and readonly is
     style={
       [
         {
-          "borderColor": "#808f91",
+          "borderColor": "#4d6265",
           "borderRadius": 4,
           "borderWidth": 2,
           "flex": 1,

package/src/components/Checkbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -167,7 +167,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
             },
             [
               {
-                "color": "#001f23",
+                "color": "#401960",
                 "position": "absolute",
                 "top": 0,
               },
@@ -183,7 +183,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
         style={
           [
             {
-              "borderColor": "#001f23",
+              "borderColor": "#401960",
               "borderRadius": 4,
               "borderWidth": 2,
               "flex": 1,
@@ -191,7 +191,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
             undefined,
           ]
         }
-        themeState="default"
+        themeState="checked"
       />
     </View>
   </View>
@@ -431,7 +431,7 @@ exports[`Checkbox renders correctly when disabled is false and readonly is true
         style={
           [
             {
-              "borderColor": "#808f91",
+              "borderColor": "#4d6265",
               "borderRadius": 4,
               "borderWidth": 2,
               "flex": 1,

package/src/components/Checkbox/__tests__/index.spec.tsx

@@ -6,15 +6,19 @@ import Checkbox, { getThemeState } from '..';
 
 describe('getThemeState', () => {
   it.each`
-    disabled | readonly | expected
-    ${false} | ${false} | ${'default'}
-    ${false} | ${true}  | ${'readonly'}
-    ${true}  | ${false} | ${'disabled'}
-    ${true}  | ${true}  | ${'disabled'}
+    disabled | readonly | checked  | expected
+    ${false} | ${false} | ${false} | ${'default'}
+    ${false} | ${false} | ${true}  | ${'checked'}
+    ${false} | ${true}  | ${false} | ${'readonly'}
+    ${false} | ${true}  | ${true}  | ${'readonly'}
+    ${true}  | ${false} | ${false} | ${'disabled'}
+    ${true}  | ${false} | ${true}  | ${'disabled'}
+    ${true}  | ${true}  | ${false} | ${'disabled'}
+    ${true}  | ${true}  | ${true}  | ${'disabled'}
   `(
     `should return correctly if disabled is $disabled and readonly is $readonly`,
-    ({ disabled, readonly, expected }) => {
-      expect(getThemeState({ disabled, readonly })).toBe(expected);
+    ({ disabled, readonly, checked, expected }) => {
+      expect(getThemeState({ disabled, readonly, checked })).toBe(expected);
     }
   );
 });

package/src/components/Checkbox/index.tsx

@@ -48,9 +48,14 @@ export interface CheckboxProps {
 type getStateType = {
   disabled: boolean;
   readonly: boolean;
+  checked?: boolean;
 };
 
-export const getThemeState = ({ disabled, readonly }: getStateType) => {
+export const getThemeState = ({
+  disabled,
+  readonly,
+  checked,
+}: getStateType) => {
   if (disabled) {
     return 'disabled';
   }
@@ -59,6 +64,10 @@ export const getThemeState = ({ disabled, readonly }: getStateType) => {
     return 'readonly';
   }
 
+  if (checked) {
+    return 'checked';
+  }
+
   return 'default';
 };
 
@@ -77,7 +86,7 @@ const Checkbox = ({
     withBorder === true
   );
 
-  const themeState = getThemeState({ disabled, readonly });
+  const themeState = getThemeState({ disabled, readonly, checked });
 
   return (
     <StyledWrapper

package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap

@@ -369,7 +369,7 @@ exports[`Chip renders correctly with custom icon 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -505,7 +505,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -867,7 +867,7 @@ exports[`Chip renders correctly with variant compact and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -971,7 +971,7 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1301,7 +1301,7 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1405,7 +1405,7 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1509,7 +1509,7 @@ exports[`Chip renders correctly with variant filter and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1613,7 +1613,7 @@ exports[`Chip renders correctly with variant filter and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -444,7 +464,26 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -473,6 +512,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -726,7 +766,26 @@ exports[`DatePicker renders variant Calendar 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -755,6 +814,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerIOS renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -831,7 +851,26 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -860,6 +899,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -73,7 +73,7 @@ exports[`ActionGroup has active false 1`] = `
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -266,7 +266,7 @@ exports[`ActionGroup has active true 1`] = `
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -1088,7 +1088,7 @@ exports[`ActionGroup has active true 1`] = `
               "marginTop": 24,
               "opacity": 1,
               "padding": 20,
-              "shadowColor": "#001f23",
+              "shadowColor": "#121214",
               "shadowOffset": {
                 "height": 2,
                 "width": 0,

package/src/components/FAB/Pair/__tests__/__snapshots__/index.spec.tsx.snap

@@ -66,7 +66,7 @@ exports[`FABPair renders correctly 1`] = `
           "marginRight": 8,
           "opacity": 1,
           "padding": 20,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -177,7 +177,7 @@ exports[`FABPair renders correctly 1`] = `
           "marginRight": undefined,
           "opacity": 1,
           "padding": 20,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -48,7 +48,7 @@ exports[`StyledFAB renders correctly 1`] = `
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -150,7 +150,7 @@ exports[`StyledFAB renders correctly 2`] = `
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap

@@ -50,7 +50,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -189,7 +189,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -341,7 +341,7 @@ exports[`FAB when title has value renders correctly 1`] = `
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

package/src/components/FloatingIsland/__tests__/__snapshots__/index.spec.tsx.snap

@@ -50,7 +50,7 @@ exports[`FloatingIsland renders correctly 1`] = `
         "opacity": 1,
         "padding": 8,
         "position": "absolute",
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -156,7 +156,7 @@ exports[`FloatingIsland renders icons as prefix and suffix correctly 1`] = `
         "opacity": 1,
         "padding": 8,
         "position": "absolute",
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -330,7 +330,7 @@ exports[`FloatingIsland renders prefix correctly 1`] = `
         "opacity": 1,
         "padding": 8,
         "position": "absolute",
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -470,7 +470,7 @@ exports[`FloatingIsland renders suffix correctly 1`] = `
         "opacity": 1,
         "padding": 8,
         "position": "absolute",
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -945,11 +945,12 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             style={
               [
                 {
-                  "backgroundColor": "#401960",
+                  "backgroundColor": "#33144d",
                   "borderRadius": 999,
                   "display": "flex",
                   "height": 24,
                   "justifyContent": "center",
+                  "opacity": 1,
                   "paddingHorizontal": 4,
                   "width": 48,
                 },
@@ -963,7 +964,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
               collapsable={false}
               style={
                 {
-                  "backgroundColor": "#ffffff",
+                  "backgroundColor": undefined,
                   "borderRadius": 999,
                   "height": 16,
                   "left": 24,