@hero-design/rn 7.22.1 → 7.22.3

package/src/components/Spinner/StyledSpinner.tsx

@@ -30,21 +30,25 @@ const StyledSpinnerDot = styled(View)<{
     switch (themePosition) {
       case 'topLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot1,
+          backgroundColor: theme.__hd__.spinner.colors.dot,
+          opacity: 1,
         };
       case 'topRight':
         return {
           marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot2,
+          backgroundColor: theme.__hd__.spinner.colors.dot,
+          opacity: 0.75,
         };
       case 'bottomLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot3,
+          backgroundColor: theme.__hd__.spinner.colors.dot,
+          opacity: 0.5,
         };
       case 'bottomRight':
         return {
           marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot4,
+          backgroundColor: theme.__hd__.spinner.colors.dot,
+          opacity: 0.25,
         };
     }
   };

package/src/components/Spinner/__tests__/__snapshots__/AnimatedSpinner.spec.tsx.snap

@@ -35,9 +35,10 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#795e90",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "height": 16,
+            "opacity": 1,
             "width": 16,
           },
           Object {},
@@ -52,10 +53,11 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#a08cb0",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
+            "opacity": 0.75,
             "width": 16,
           },
           Object {},
@@ -86,9 +88,10 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#d9d1df",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "height": 16,
+            "opacity": 0.5,
             "width": 16,
           },
           Object {},
@@ -103,10 +106,11 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
+            "opacity": 0.25,
             "width": 16,
           },
           Object {},

package/src/components/Spinner/__tests__/__snapshots__/StyledSpinner.spec.tsx.snap

@@ -47,9 +47,10 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 16,
+              "opacity": 1,
               "width": 16,
             },
             Object {},
@@ -64,10 +65,11 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#a08cb0",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 16,
               "marginLeft": 8,
+              "opacity": 0.75,
               "width": 16,
             },
             Object {},
@@ -98,9 +100,10 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#d9d1df",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 16,
+              "opacity": 0.5,
               "width": 16,
             },
             Object {},
@@ -115,10 +118,11 @@ exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#ece8ef",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 16,
               "marginLeft": 8,
+              "opacity": 0.25,
               "width": 16,
             },
             Object {},
@@ -179,9 +183,10 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#795e90",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 8,
+              "opacity": 1,
               "width": 8,
             },
             Object {},
@@ -196,10 +201,11 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#a08cb0",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 8,
               "marginLeft": 4,
+              "opacity": 0.75,
               "width": 8,
             },
             Object {},
@@ -230,9 +236,10 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#d9d1df",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 8,
+              "opacity": 0.5,
               "width": 8,
             },
             Object {},
@@ -247,10 +254,11 @@ exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#ece8ef",
+              "backgroundColor": "#001f23",
               "borderRadius": 999,
               "height": 8,
               "marginLeft": 4,
+              "opacity": 0.25,
               "width": 8,
             },
             Object {},
@@ -333,9 +341,10 @@ exports[`StyledSpinnerText renders correctly when position is bottomLeft, size i
   style={
     Array [
       Object {
-        "backgroundColor": "#d9d1df",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 16,
+        "opacity": 0.5,
         "width": 16,
       },
       undefined,
@@ -351,9 +360,10 @@ exports[`StyledSpinnerText renders correctly when position is bottomLeft, size i
   style={
     Array [
       Object {
-        "backgroundColor": "#d9d1df",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 8,
+        "opacity": 0.5,
         "width": 8,
       },
       undefined,
@@ -369,10 +379,11 @@ exports[`StyledSpinnerText renders correctly when position is bottomRight, size
   style={
     Array [
       Object {
-        "backgroundColor": "#ece8ef",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
+        "opacity": 0.25,
         "width": 16,
       },
       undefined,
@@ -388,10 +399,11 @@ exports[`StyledSpinnerText renders correctly when position is bottomRight, size
   style={
     Array [
       Object {
-        "backgroundColor": "#ece8ef",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 8,
         "marginLeft": 4,
+        "opacity": 0.25,
         "width": 8,
       },
       undefined,
@@ -407,9 +419,10 @@ exports[`StyledSpinnerText renders correctly when position is topLeft, size is m
   style={
     Array [
       Object {
-        "backgroundColor": "#795e90",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 16,
+        "opacity": 1,
         "width": 16,
       },
       undefined,
@@ -425,9 +438,10 @@ exports[`StyledSpinnerText renders correctly when position is topLeft, size is s
   style={
     Array [
       Object {
-        "backgroundColor": "#795e90",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 8,
+        "opacity": 1,
         "width": 8,
       },
       undefined,
@@ -443,10 +457,11 @@ exports[`StyledSpinnerText renders correctly when position is topRight, size is
   style={
     Array [
       Object {
-        "backgroundColor": "#a08cb0",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
+        "opacity": 0.75,
         "width": 16,
       },
       undefined,
@@ -462,10 +477,11 @@ exports[`StyledSpinnerText renders correctly when position is topRight, size is
   style={
     Array [
       Object {
-        "backgroundColor": "#a08cb0",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 8,
         "marginLeft": 4,
+        "opacity": 0.75,
         "width": 8,
       },
       undefined,

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

@@ -56,9 +56,10 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#795e90",
+                "backgroundColor": "#001f23",
                 "borderRadius": 999,
                 "height": 16,
+                "opacity": 1,
                 "width": 16,
               },
               Object {},
@@ -73,10 +74,11 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#a08cb0",
+                "backgroundColor": "#001f23",
                 "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
+                "opacity": 0.75,
                 "width": 16,
               },
               Object {},
@@ -107,9 +109,10 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#d9d1df",
+                "backgroundColor": "#001f23",
                 "borderRadius": 999,
                 "height": 16,
+                "opacity": 0.5,
                 "width": 16,
               },
               Object {},
@@ -124,10 +127,11 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#ece8ef",
+                "backgroundColor": "#001f23",
                 "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
+                "opacity": 0.25,
                 "width": 16,
               },
               Object {},

package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`StyledWrapper renders correct style with variant checked 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "display": "flex",
         "height": 32,
@@ -42,7 +42,7 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
   style={
     Array [
       Object {
-        "backgroundColor": "#c282d1",
+        "backgroundColor": "#a08cb0",
         "borderRadius": 999,
         "display": "flex",
         "height": 32,
@@ -63,7 +63,7 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
   style={
     Array [
       Object {
-        "backgroundColor": "#ccced1",
+        "backgroundColor": "#bfc1c5",
         "borderRadius": 999,
         "display": "flex",
         "height": 32,

package/src/components/Tabs/ScrollableTabs.tsx

@@ -101,12 +101,9 @@ const ScrollableTab = ({
 
   return (
     <TabContainer style={containerStyle} testID={componentTestID}>
-      <HeaderTabWrapper
-        themeInsets={insets}
-        style={barStyle}
-        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-      >
+      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
         <FlatList<TabType>
+          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
           ref={flatListRef}
           horizontal
           data={tabs}

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -239,7 +239,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   nativeID="animatedComponent"
                   style={
                     Object {
-                      "backgroundColor": "#ece8ef",
+                      "backgroundColor": "#e6e9e9",
                       "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [

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

@@ -5,7 +5,7 @@ exports[`Tag has archived style when intent is archived 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#f1f2f3",
         "borderColor": "#737479",
         "borderRadius": 4,
         "borderWidth": 1,

package/src/components/TextInput/StyledTextInput.tsx

@@ -10,9 +10,19 @@ export type Variant =
   | 'readonly'
   | 'error';
 
-const StyledContainer = styled(View)(({ theme }) => ({
+const StyledContainer = styled(View)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
   width: '100%',
   marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
+  borderWidth:
+    themeVariant === 'focused'
+      ? theme.__hd__.textInput.borderWidths.container.focused
+      : theme.__hd__.textInput.borderWidths.container.normal,
+  borderRadius: theme.__hd__.textInput.radii.container,
+  borderColor:
+    theme.__hd__.textInput.colors.borders[themeVariant] ??
+    theme.__hd__.textInput.colors.borders.default,
 }));
 
 const StyledLabelContainer = styled(View)(({ theme }) => ({
@@ -97,20 +107,6 @@ const StyledTextInput = styled(TextInput)(({ theme }) => ({
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));
 
-const StyledBorderBackDrop = styled(View)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
-  ...StyleSheet.absoluteFillObject,
-  borderWidth:
-    themeVariant === 'focused'
-      ? theme.__hd__.textInput.borderWidths.container.focused
-      : theme.__hd__.textInput.borderWidths.container.normal,
-  borderRadius: theme.__hd__.textInput.radii.container,
-  borderColor:
-    theme.__hd__.textInput.colors.borders[themeVariant] ??
-    theme.__hd__.textInput.colors.borders.default,
-}));
-
 const StyledTextInputContainer = styled(View)(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'center',
@@ -151,6 +147,5 @@ export {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
-  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 };

package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx

@@ -10,7 +10,7 @@ import {
   StyledAsteriskLabel,
   StyledLabelContainer,
   StyledLabelInsideTextInput,
-  StyledBorderBackDrop,
+  StyledContainer,
 } from '../StyledTextInput';
 
 describe('Label', () => {
@@ -133,7 +133,7 @@ describe('StyledHelperText', () => {
   });
 });
 
-describe('StyledBorderBackDrop', () => {
+describe('StyledContainer', () => {
   it.each`
     themeVariant
     ${'default'}
@@ -146,7 +146,7 @@ describe('StyledBorderBackDrop', () => {
     'renders correctly with themeVariant $themeVariant',
     ({ themeVariant }): void => {
       const { toJSON } = renderWithTheme(
-        <StyledBorderBackDrop themeVariant={themeVariant} />
+        <StyledContainer themeVariant={themeVariant} />
       );
 
       expect(toJSON()).toMatchSnapshot();

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -153,7 +153,7 @@ exports[`Label renders correctly with themeVariant readonly 1`] = `
       },
       Array [
         Object {
-          "color": "#808f91",
+          "color": "#bfc1c5",
         },
         undefined,
       ],
@@ -362,7 +362,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] =
         Object {
           "alignContent": "center",
           "alignItems": "center",
-          "color": "#808f91",
+          "color": "#bfc1c5",
           "fontSize": 14,
           "textAlignVertical": "center",
         },
@@ -392,7 +392,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant default 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
         },
         undefined,
       ],
@@ -448,7 +448,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant error 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
         },
         undefined,
       ],
@@ -476,7 +476,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant filled 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
         },
         undefined,
       ],
@@ -504,7 +504,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant focused 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
         },
         undefined,
       ],
@@ -547,7 +547,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] =
 </Text>
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] = `
+exports[`StyledContainer renders correctly with themeVariant default 1`] = `
 <View
   style={
     Array [
@@ -555,11 +555,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] =
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -568,7 +565,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] =
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] = `
+exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
 <View
   style={
     Array [
@@ -576,11 +573,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] =
         "borderColor": "#bfc1c5",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -589,19 +583,16 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] =
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
+exports[`StyledContainer renders correctly with themeVariant error 1`] = `
 <View
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#f46363",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -610,7 +601,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
+exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
 <View
   style={
     Array [
@@ -618,11 +609,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -631,7 +619,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] = `
+exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
 <View
   style={
     Array [
@@ -639,11 +627,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] =
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 2,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -652,7 +637,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] =
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] = `
+exports[`StyledContainer renders correctly with themeVariant readonly 1`] = `
 <View
   style={
     Array [
@@ -660,11 +645,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] =
         "borderColor": "#808f91",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -686,7 +668,7 @@ exports[`StyledErrorMessage renders correctly 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
           "fontSize": 12,
           "marginLeft": 4,
         },
@@ -834,7 +816,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant error 1`] =
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#de350b",
+          "color": "#f46363",
           "flex": 1,
           "flexGrow": 1,
           "fontSize": 12,
@@ -936,7 +918,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`]
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#808f91",
+          "color": "#bfc1c5",
           "flex": 1,
           "flexGrow": 1,
           "fontSize": 12,