@hero-design/rn 7.17.0 → 7.18.0

package/src/components/TextInput/index.tsx

@@ -273,7 +273,7 @@ const TextInput = ({
       </StyledTextInputContainer>
       <StyledErrorAndHelpTextContainer>
         <StyledErrorAndMaxLengthContainer>
-          {error && (
+          {!!error && (
             <StyledErrorContainer>
               <Icon
                 testID="input-error-icon"
@@ -291,7 +291,7 @@ const TextInput = ({
             </StyledMaxLengthMessage>
           )}
         </StyledErrorAndMaxLengthContainer>
-        {helpText && <StyledHelperText>{helpText}</StyledHelperText>}
+        {!!helpText && <StyledHelperText>{helpText}</StyledHelperText>}
       </StyledErrorAndHelpTextContainer>
     </StyledContainer>
   );

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#292a2b",
+                "borderColor": "#001f23",
                 "borderRadius": 8,
                 "borderWidth": 1,
                 "bottom": 0,
@@ -84,7 +84,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
@@ -92,7 +92,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 },
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                   },
                   undefined,
                 ],
@@ -115,6 +115,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 "alignSelf": "stretch",
                 "flexDirection": "row",
                 "flexGrow": 2,
+                "flexShrink": 1,
               },
               undefined,
             ]
@@ -140,7 +141,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                 },
               ]
             }
@@ -153,7 +154,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 16,
               },
               undefined,

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#292a2b",
+                "borderColor": "#001f23",
                 "borderRadius": 8,
                 "borderWidth": 1,
                 "bottom": 0,
@@ -84,7 +84,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
@@ -92,7 +92,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 },
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                   },
                   undefined,
                 ],
@@ -115,6 +115,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 "alignSelf": "stretch",
                 "flexDirection": "row",
                 "flexGrow": 2,
+                "flexShrink": 1,
               },
               undefined,
             ]
@@ -140,7 +141,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                 },
               ]
             }
@@ -153,7 +154,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 16,
               },
               undefined,
@@ -266,7 +267,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "backgroundColor": "#292a2b",
+                  "backgroundColor": "#001f23",
                   "bottom": 0,
                   "left": 0,
                   "opacity": 0.48,
@@ -288,7 +289,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   "borderTopRightRadius": 16,
                   "elevation": 10,
                   "maxHeight": "94%",
-                  "shadowColor": "#292a2b",
+                  "shadowColor": "#001f23",
                   "shadowOffset": Object {
                     "height": 3,
                     "width": 0,
@@ -334,7 +335,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 16,
                           "letterSpacing": 0.48,
@@ -388,7 +389,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "#292a2b",
+                            "color": "#001f23",
                             "fontSize": 20,
                           },
                           undefined,
@@ -404,7 +405,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "borderBottomColor": "#dadbde",
+                      "borderBottomColor": "#e8e9ea",
                       "borderBottomWidth": 1,
                       "maxWidth": "100%",
                     },
@@ -440,7 +441,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "borderBottomColor": "#dadbde",
+                        "borderBottomColor": "#e8e9ea",
                         "borderBottomWidth": 1,
                         "maxWidth": "100%",
                       },
@@ -485,7 +486,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "#7622d7",
+                            "color": "#8505a2",
                             "fontFamily": "BeVietnamPro-SemiBold",
                             "fontSize": 16,
                             "letterSpacing": 0.48,

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

@@ -26,7 +26,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 0,
           "flex": 1,
           "flexDirection": "row",
@@ -53,7 +53,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -78,7 +78,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -104,7 +104,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
   nativeID="animatedComponent"
   style={
     Object {
-      "backgroundColor": "#de350b",
+      "backgroundColor": "#f46363",
       "borderRadius": 0,
       "flexDirection": "row",
       "minHeight": 48,
@@ -124,7 +124,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
@@ -151,7 +151,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -176,7 +176,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -218,7 +218,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -263,7 +263,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
@@ -290,7 +290,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -315,7 +315,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -357,7 +357,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -382,7 +382,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
   nativeID="animatedComponent"
   style={
     Object {
-      "backgroundColor": "#01b39c",
+      "backgroundColor": "#5ace7d",
       "borderRadius": 0,
       "flexDirection": "row",
       "minHeight": 48,
@@ -402,7 +402,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
@@ -429,7 +429,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -454,7 +454,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -496,7 +496,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -521,7 +521,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
   nativeID="animatedComponent"
   style={
     Object {
-      "backgroundColor": "#ffa234",
+      "backgroundColor": "#ffbe71",
       "borderRadius": 0,
       "flexDirection": "row",
       "minHeight": 48,
@@ -541,7 +541,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "borderColor": "#fafbfb",
+          "borderColor": "#e8e9ea",
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
@@ -568,7 +568,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 20,
             },
             undefined,
@@ -593,7 +593,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
               "letterSpacing": 0.42,
@@ -635,7 +635,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
             "letterSpacing": 0.42,

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -41,7 +41,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -55,7 +55,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -97,7 +97,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -111,7 +111,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -171,7 +171,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -185,7 +185,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -227,7 +227,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -241,7 +241,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -301,7 +301,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -315,7 +315,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -357,7 +357,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 24,
           },
           undefined,
@@ -371,7 +371,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     style={
       Array [
         Object {
-          "color": "#8b8d92",
+          "color": "#808f91",
           "fontSize": 24,
         },
         undefined,
@@ -41,7 +41,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     style={
       Array [
         Object {
-          "color": "#8b8d92",
+          "color": "#808f91",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -204,7 +204,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#7622d7",
+          "color": "#8505a2",
           "fontSize": 24,
         },
         undefined,
@@ -218,7 +218,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#7622d7",
+          "color": "#8505a2",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -263,7 +263,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "color": "#01b39c",
+          "color": "#5ace7d",
           "fontSize": 24,
         },
         undefined,
@@ -277,7 +277,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "color": "#01b39c",
+          "color": "#5ace7d",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -322,7 +322,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#ffa234",
+          "color": "#ffbe71",
           "fontSize": 24,
         },
         undefined,
@@ -336,7 +336,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#ffa234",
+          "color": "#ffbe71",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`StyledText has body intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -93,7 +93,7 @@ exports[`StyledText has large fontSize style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 16,
         "letterSpacing": 0.48,
@@ -115,7 +115,7 @@ exports[`StyledText has light fontWeight style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Light",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -137,7 +137,7 @@ exports[`StyledText has medium fontSize style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -159,7 +159,7 @@ exports[`StyledText has primary intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#7622d7",
+        "color": "#8505a2",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -181,7 +181,7 @@ exports[`StyledText has regular fontWeight style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -203,7 +203,7 @@ exports[`StyledText has semi-bold fontWeight style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-SemiBold",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -225,7 +225,7 @@ exports[`StyledText has small fontSize style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 12,
         "letterSpacing": 0.36,
@@ -247,7 +247,7 @@ exports[`StyledText has subdued intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#8b8d92",
+        "color": "#808f91",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -269,7 +269,7 @@ exports[`StyledText has success intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#01b39c",
+        "color": "#5ace7d",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -291,7 +291,7 @@ exports[`StyledText has warning intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#ffa234",
+        "color": "#ffbe71",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -313,7 +313,7 @@ exports[`StyledText has xlarge fontSize style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 18,
         "letterSpacing": 0.54,
@@ -335,7 +335,7 @@ exports[`StyledText has xxxxxlarge fontSize style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 32,
         "letterSpacing": 0.96,

package/src/index.ts

@@ -1,4 +1,10 @@
-import theme, { getTheme, ThemeProvider, useTheme } from './theme';
+import theme, {
+  getTheme,
+  ThemeProvider,
+  useTheme,
+  swagSystemPalette,
+  workSystemPalette,
+} from './theme';
 import { scale } from './utils/scale';
 
 import Accordion from './components/Accordion';
@@ -42,6 +48,8 @@ export {
   useTheme,
   scale,
   ThemeProvider,
+  swagSystemPalette,
+  workSystemPalette,
   Accordion,
   Alert,
   Avatar,