@hero-design/rn 7.22.2 → 7.22.3

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

@@ -26,7 +26,7 @@ exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#808f91",
+        "borderColor": "#4d6265",
         "borderRadius": 4,
         "borderWidth": 2,
         "flexDirection": "row",
@@ -105,7 +105,7 @@ exports[`StyledWrapper renders correctly when disabled is true, withBorder is tr
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#808f91",
+      "borderColor": "#4d6265",
       "borderRadius": 8,
       "borderWidth": 1,
       "flexDirection": "row",

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

@@ -264,7 +264,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
     style={
       Array [
         Object {
-          "color": "#808f91",
+          "color": "#4d6265",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -289,7 +289,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
     style={
       Array [
         Object {
-          "borderColor": "#808f91",
+          "borderColor": "#4d6265",
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",
@@ -321,7 +321,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#808f91",
+      "borderColor": "#4d6265",
       "borderRadius": 8,
       "borderWidth": 1,
       "flexDirection": "row",
@@ -334,7 +334,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
     style={
       Array [
         Object {
-          "color": "#808f91",
+          "color": "#4d6265",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -359,7 +359,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
     style={
       Array [
         Object {
-          "borderColor": "#808f91",
+          "borderColor": "#4d6265",
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",

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

@@ -146,7 +146,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       style={
         Array [
           Object {
-            "color": "#808f91",
+            "color": "#4d6265",
             "fontSize": 24,
           },
           undefined,
@@ -205,7 +205,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       style={
         Array [
           Object {
-            "color": "#808f91",
+            "color": "#4d6265",
             "fontSize": 24,
           },
           undefined,

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

@@ -488,7 +488,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "#8505a2",
+                              "color": "#001f23",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
                               "letterSpacing": 0.48,

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

@@ -44,7 +44,7 @@ exports[`Drawer renders correctly in invisible state 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "bottom": 0,
         "left": 0,
         "opacity": 0,
@@ -125,7 +125,7 @@ exports[`Drawer renders correctly in visible state 1`] = `
     pointerEvents="auto"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "bottom": 0,
         "left": 0,
         "opacity": 0.35,
@@ -206,7 +206,7 @@ exports[`Drawer renders correctly with no backdrop 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "bottom": 0,
         "left": 0,
         "opacity": 0,

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

@@ -102,7 +102,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -181,7 +181,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -260,7 +260,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -339,7 +339,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -418,7 +418,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -665,7 +665,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -744,7 +744,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -823,7 +823,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -902,7 +902,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -981,7 +981,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,

package/src/components/Icon/HeroIcon/index.tsx

@@ -6,6 +6,7 @@ type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type ThemeIntent =
   | 'text'
   | 'primary'
+  | 'secondary'
   | 'info'
   | 'danger'
   | 'success'
@@ -22,6 +23,7 @@ const HeroIcon = createIconSetFromIcoMoon(
 const COLOR_INTENTS = {
   text: 'text',
   primary: 'primary',
+  secondary: 'secondary',
   info: 'info',
   danger: 'danger',
   success: 'success',

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

@@ -71,7 +71,7 @@ exports[`Icon renders correctly with intent 1`] = `
   style={
     Array [
       Object {
-        "color": "#8505a2",
+        "color": "#001f23",
         "fontSize": 24,
       },
       undefined,

package/src/components/Icon/index.tsx

@@ -17,6 +17,7 @@ export interface IconProps {
   intent?:
     | 'text'
     | 'primary'
+    | 'secondary'
     | 'info'
     | 'danger'
     | 'success'

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

@@ -89,7 +89,7 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
       style={
         Array [
           Object {
-            "color": "#808f91",
+            "color": "#4d6265",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -223,7 +223,7 @@ exports[`BasicListItem when suffix and prefix are react element renders correctl
       style={
         Array [
           Object {
-            "color": "#808f91",
+            "color": "#4d6265",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "letterSpacing": 0.36,

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

@@ -61,7 +61,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#8505a2",
+                "borderColor": "#001f23",
                 "borderRadius": 999,
                 "borderWidth": 1,
                 "height": 32,
@@ -92,7 +92,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#8505a2",
+                    "color": "#001f23",
                     "fontSize": 16,
                     "overflow": "hidden",
                   },
@@ -140,7 +140,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
           style={
             Array [
               Object {
-                "color": "#808f91",
+                "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
                 "letterSpacing": 0.36,
@@ -171,7 +171,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
           style={
             Array [
               Object {
-                "color": "#8505a2",
+                "color": "#001f23",
                 "fontSize": 20,
               },
               undefined,
@@ -376,7 +376,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
           style={
             Array [
               Object {
-                "color": "#808f91",
+                "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
                 "letterSpacing": 0.36,
@@ -407,7 +407,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
           style={
             Array [
               Object {
-                "color": "#8505a2",
+                "color": "#001f23",
                 "fontSize": 20,
               },
               undefined,
@@ -453,7 +453,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
     style={
       Array [
         Object {
-          "backgroundColor": "#bfc1c5",
+          "backgroundColor": "#ccced1",
           "borderRadius": 999,
           "marginRight": 8,
           "width": 8,
@@ -529,7 +529,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
           style={
             Array [
               Object {
-                "color": "#8505a2",
+                "color": "#001f23",
                 "fontSize": 20,
               },
               undefined,
@@ -606,7 +606,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
           style={
             Array [
               Object {
-                "borderColor": "#8505a2",
+                "borderColor": "#001f23",
                 "borderRadius": 999,
                 "borderWidth": 1,
                 "height": 32,
@@ -637,7 +637,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
               style={
                 Array [
                   Object {
-                    "color": "#8505a2",
+                    "color": "#001f23",
                     "fontSize": 16,
                     "overflow": "hidden",
                   },
@@ -685,7 +685,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
           style={
             Array [
               Object {
-                "color": "#808f91",
+                "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
                 "letterSpacing": 0.36,
@@ -729,7 +729,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "display": "flex",
                 "height": 32,

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

@@ -109,7 +109,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#ECE8EF",
+        "backgroundColor": "#d9d1df",
         "borderRadius": 4,
         "flexDirection": "row",
         "opacity": 1,
@@ -156,7 +156,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#ECE8EF",
+        "backgroundColor": "#d9d1df",
         "borderRadius": 4,
         "flexDirection": "row",
         "opacity": 0.38,

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

@@ -5,7 +5,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent archived 1`] =
   style={
     Array [
       Object {
-        "backgroundColor": "#bfc1c5",
+        "backgroundColor": "#ccced1",
         "borderRadius": 999,
         "marginRight": 8,
         "width": 8,
@@ -22,7 +22,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent danger 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#e3602a",
+        "backgroundColor": "#f46363",
         "borderRadius": 999,
         "marginRight": 8,
         "width": 8,
@@ -198,7 +198,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#ECE8EF",
+        "backgroundColor": "#d9d1df",
         "borderRadius": 8,
         "elevation": 10,
         "flexDirection": "row",
@@ -251,7 +251,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
   style={
     Array [
       Object {
-        "backgroundColor": "#ECE8EF",
+        "backgroundColor": "#d9d1df",
         "flexDirection": "row",
         "padding": 16,
       },

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -43,7 +43,7 @@ exports[`PinCell renders correctly when focused is false, state is disabled 1`]
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#bfc1c5",
+        "borderColor": "#4d6265",
         "borderRadius": 8,
         "borderWidth": 1,
         "height": 48,
@@ -60,7 +60,7 @@ exports[`PinCell renders correctly when focused is false, state is disabled 1`]
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
+          "color": "#4d6265",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 28,
         },
@@ -80,7 +80,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#f46363",
         "borderRadius": 8,
         "borderWidth": 1,
         "height": 48,
@@ -97,7 +97,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
     style={
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 28,
         },
@@ -154,7 +154,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#f46363",
         "borderRadius": 8,
         "borderWidth": 2,
         "height": 48,
@@ -171,7 +171,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
     style={
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 28,
         },

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

@@ -251,7 +251,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#bfc1c5",
+            "borderColor": "#4d6265",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -268,8 +268,8 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#bfc1c5",
-              "borderColor": "#bfc1c5",
+              "backgroundColor": "#4d6265",
+              "borderColor": "#4d6265",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -297,7 +297,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#bfc1c5",
+            "borderColor": "#4d6265",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -314,8 +314,8 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#bfc1c5",
-              "borderColor": "#bfc1c5",
+              "backgroundColor": "#4d6265",
+              "borderColor": "#4d6265",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -343,7 +343,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#bfc1c5",
+            "borderColor": "#4d6265",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -360,7 +360,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#bfc1c5",
+              "borderColor": "#4d6265",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -388,7 +388,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#bfc1c5",
+            "borderColor": "#4d6265",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -405,7 +405,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#bfc1c5",
+              "borderColor": "#4d6265",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -786,7 +786,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#f46363",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -803,8 +803,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#f46363",
+              "borderColor": "#f46363",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -832,7 +832,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#f46363",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -849,8 +849,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#f46363",
+              "borderColor": "#f46363",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -878,7 +878,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#f46363",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -895,7 +895,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#f46363",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -923,7 +923,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#f46363",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -940,7 +940,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#f46363",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -984,7 +984,7 @@ exports[`rendering renders correctly when there is error 1`] = `
       style={
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#f46363",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "paddingLeft": 4,