@hero-design/rn 7.22.2 → 7.23.0

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -29,16 +29,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="default"
         >
           <View
             style={
@@ -52,6 +48,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="default"
+            />
             <View
               style={
                 Array [
@@ -627,7 +641,7 @@ Array [
                         style={
                           Array [
                             Object {
-                              "color": "#808f91",
+                              "color": "#4d6265",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
                               "letterSpacing": 0.48,
@@ -772,7 +786,7 @@ Array [
                         style={
                           Array [
                             Object {
-                              "color": "#808f91",
+                              "color": "#4d6265",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
                               "letterSpacing": 0.48,
@@ -1032,7 +1046,7 @@ Array [
                         style={
                           Array [
                             Object {
-                              "color": "#808f91",
+                              "color": "#4d6265",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
                               "letterSpacing": 0.48,
@@ -1177,7 +1191,7 @@ Array [
                         style={
                           Array [
                             Object {
-                              "color": "#808f91",
+                              "color": "#4d6265",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
                               "letterSpacing": 0.48,
@@ -1292,16 +1306,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -1315,6 +1325,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -1790,7 +1818,7 @@ Array [
                       Array [
                         Object {
                           "alignItems": "center",
-                          "backgroundColor": "#ECE8EF",
+                          "backgroundColor": "#d9d1df",
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,
@@ -2700,16 +2728,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -2723,6 +2747,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -3193,7 +3235,7 @@ Array [
                       Array [
                         Object {
                           "alignItems": "center",
-                          "backgroundColor": "#ECE8EF",
+                          "backgroundColor": "#d9d1df",
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,
@@ -4105,16 +4147,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#808f91",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="readonly"
         >
           <View
             style={
@@ -4128,6 +4166,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#808f91",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="readonly"
+            />
             <View
               pointerEvents="none"
               style={
@@ -4157,7 +4213,7 @@ Array [
                     },
                     Array [
                       Object {
-                        "color": "#808f91",
+                        "color": "#bfc1c5",
                       },
                       undefined,
                     ],
@@ -4617,7 +4673,7 @@ Array [
                       Array [
                         Object {
                           "alignItems": "center",
-                          "backgroundColor": "#ECE8EF",
+                          "backgroundColor": "#d9d1df",
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,
@@ -5527,16 +5583,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -5550,6 +5602,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -6061,7 +6131,7 @@ Array [
                       Array [
                         Object {
                           "alignItems": "center",
-                          "backgroundColor": "#ECE8EF",
+                          "backgroundColor": "#d9d1df",
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,

package/src/components/Select/SingleSelect/index.tsx

@@ -75,6 +75,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
           }
           <View pointerEvents="none">
             <TextInput
+              {...inputProps}
               label={label}
               value={displayedValue}
               suffix="arrow-down"
@@ -82,7 +83,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
               error={error}
               editable={editable}
               disabled={disabled}
-              loading={inputProps?.loading}
               numberOfLines={numberOfLines}
               pointerEvents="none"
               style={style}

package/src/components/Select/__tests__/__snapshots__/StyledSelect.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`FooterText has correct style 1`] = `
       },
       Array [
         Object {
-          "color": "#8505a2",
+          "color": "#401960",
         },
         undefined,
       ],

package/src/components/Select/types.ts

@@ -81,9 +81,7 @@ export interface SelectProps<V, T extends OptionType<V>>
   /**
    * Props that are passed to TextInput.
    */
-  inputProps?: {
-    loading?: boolean;
-  };
+  inputProps?: Pick<TextInputProps, 'loading' | 'required'>;
   /**
    * Field label.
    */

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

@@ -8,7 +8,7 @@ exports[`Slider renders correctly by default 1`] = `
   minimumTrackTintColor="#401960"
   minimumValue={0}
   step={0}
-  thumbTintColor="#e6e9e9"
+  thumbTintColor="#f6f6f7"
   value={0}
 />
 `;
@@ -21,7 +21,7 @@ exports[`Slider renders correctly when disabled 1`] = `
   minimumTrackTintColor="#401960"
   minimumValue={0}
   step={0}
-  thumbTintColor="#e6e9e9"
+  thumbTintColor="#f6f6f7"
   value={0}
 />
 `;
@@ -37,7 +37,7 @@ exports[`Slider renders correctly with props 1`] = `
   onSlidingStart={[MockFunction]}
   onValueChange={[MockFunction]}
   step={0.25}
-  thumbTintColor="#e6e9e9"
+  thumbTintColor="#f6f6f7"
   value={0.5}
 />
 `;

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 {},