@hero-design/rn 7.22.2 → 7.23.0

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,19 +10,9 @@ export type Variant =
   | 'readonly'
   | 'error';
 
-const StyledContainer = styled(View)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
+const StyledContainer = styled(View)(({ theme }) => ({
   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 }) => ({
@@ -107,6 +97,20 @@ 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',
@@ -147,5 +151,6 @@ export {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 };

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

@@ -10,7 +10,7 @@ import {
   StyledAsteriskLabel,
   StyledLabelContainer,
   StyledLabelInsideTextInput,
-  StyledContainer,
+  StyledBorderBackDrop,
 } from '../StyledTextInput';
 
 describe('Label', () => {
@@ -133,7 +133,7 @@ describe('StyledHelperText', () => {
   });
 });
 
-describe('StyledContainer', () => {
+describe('StyledBorderBackDrop', () => {
   it.each`
     themeVariant
     ${'default'}
@@ -146,7 +146,7 @@ describe('StyledContainer', () => {
     'renders correctly with themeVariant $themeVariant',
     ({ themeVariant }): void => {
       const { toJSON } = renderWithTheme(
-        <StyledContainer themeVariant={themeVariant} />
+        <StyledBorderBackDrop 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[`StyledContainer renders correctly with themeVariant default 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] = `
 <View
   style={
     Array [
@@ -555,8 +555,11 @@ exports[`StyledContainer renders correctly with themeVariant default 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -565,7 +568,7 @@ exports[`StyledContainer renders correctly with themeVariant default 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] = `
 <View
   style={
     Array [
@@ -573,8 +576,11 @@ exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
         "borderColor": "#bfc1c5",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -583,16 +589,19 @@ exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant error 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
 <View
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#f46363",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -601,7 +610,7 @@ exports[`StyledContainer renders correctly with themeVariant error 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
 <View
   style={
     Array [
@@ -609,8 +618,11 @@ exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -619,7 +631,7 @@ exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] = `
 <View
   style={
     Array [
@@ -627,8 +639,11 @@ exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 2,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -637,7 +652,7 @@ exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant readonly 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] = `
 <View
   style={
     Array [
@@ -645,8 +660,11 @@ exports[`StyledContainer renders correctly with themeVariant readonly 1`] = `
         "borderColor": "#808f91",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -668,7 +686,7 @@ exports[`StyledErrorMessage renders correctly 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
           "fontSize": 12,
           "marginLeft": 4,
         },
@@ -816,7 +834,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant error 1`] =
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#de350b",
+          "color": "#f46363",
           "flex": 1,
           "flexGrow": 1,
           "fontSize": 12,
@@ -918,7 +936,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`]
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#808f91",
+          "color": "#bfc1c5",
           "flex": 1,
           "flexGrow": 1,
           "fontSize": 12,