@hero-design/rn 8.92.1 → 8.92.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.92.1",
+  "version": "8.92.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -38,6 +38,7 @@
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.2.1",
     "react-native-safe-area-context": "^4.7.0",
+    "react-native-svg": "^15.11.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^13.10.2"
   },
@@ -46,7 +47,7 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.20.0",
     "@babel/preset-typescript": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.26.10",
     "@emotion/jest": "^11.11.0",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
@@ -85,6 +86,7 @@
     "react-native-linear-gradient": "2.8.3",
     "react-native-pager-view": "^6.2.1",
     "react-native-safe-area-context": "^4.7.0",
+    "react-native-svg": "^15.11.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "13.10.3",
     "react-test-renderer": "18.2.0",

package/rollup.config.mjs

@@ -34,6 +34,7 @@ export default {
     'react',
     'react-native',
     'react-native-safe-area-context',
+    'react-native-svg',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
     'react-native-gesture-handler',

package/src/components/Button/StyledButton.tsx

@@ -1,10 +1,10 @@
-import { TouchableHighlight, View } from 'react-native';
-import styled from '@emotion/native';
 import type { ReactNativeStyle } from '@emotion/native';
+import styled from '@emotion/native';
 import type { Theme } from '@emotion/react';
+import { TouchableHighlight, View } from 'react-native';
+import { scale } from '../../utils/scale';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import { scale } from '../../utils/scale';
 
 type Intent = 'primary' | 'secondary' | 'danger' | 'white';
 
@@ -319,11 +319,17 @@ const StyledButtonText = styled(Typography.Title)<{
   return {
     flexShrink: 1,
     textAlign: 'center',
+    textAlignVertical: 'center',
+    lineHeight: theme.__hd__.button.lineHeights.buttonText,
     ...themeStyling(),
   };
 });
 
-const StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
+const StyledSmallButtonText = styled(
+  StyledButtonText.withComponent(Typography.Body)
+)(({ theme }) => ({
+  lineHeight: theme.__hd__.button.lineHeights.utilityButtonText,
+}));
 
 const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   disabled?: boolean;
@@ -352,8 +358,9 @@ const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   };
   return {
     flexShrink: 1,
-    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant, // align text on Android
+    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
     textAlign: 'center',
+    textAlignVertical: 'center',
     ...themeStyling(),
   };
 });
@@ -427,10 +434,10 @@ const StyledButtonIcon = styled(Icon)<{
 
 export {
   StyledButtonContainer,
-  StyledButtonText,
-  StyledSmallButtonText,
-  StyledButtonIconWrapper,
   StyledButtonIcon,
+  StyledButtonIconWrapper,
+  StyledButtonText,
   StyledButtonTitleOfVariantText,
+  StyledSmallButtonText,
 };
 export type { Intent, ThemeVariant };

package/src/components/Button/UtilityButton/StyledUtilityButton.tsx

@@ -1,5 +1,5 @@
-import { View, TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
+import { TouchableOpacity, View } from 'react-native';
 
 import Typography from '../../Typography';
 
@@ -17,7 +17,9 @@ export const IconWrapper = styled(View)(({ theme }) => ({
   paddingRight: theme.__hd__.button.space.default.iconPadding,
 }));
 
-export const ButtonText = styled(Typography.Body)({
+export const ButtonText = styled(Typography.Body)(({ theme }) => ({
   flexShrink: 1,
   textAlign: 'center',
-});
+  textAlignVertical: 'center',
+  lineHeight: theme.__hd__.button.lineHeights.utilityButtonText,
+}));

package/src/components/Button/UtilityButton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -90,7 +90,9 @@ exports[`UtilityButton snapshot has intent primary style 1`] = `
           [
             {
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -216,7 +218,9 @@ exports[`UtilityButton snapshot has intent text style 1`] = `
           [
             {
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],

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

@@ -93,7 +93,9 @@ exports[`Button allows render custom icon 1`] = `
             {
               "color": "#ffffff",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -223,7 +225,9 @@ exports[`Button renders correctly 1`] = `
             {
               "color": "#ffffff",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -501,7 +505,9 @@ exports[`Button renders correctly 3`] = `
             {
               "color": "#ffffff",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -603,7 +609,9 @@ exports[`Button renders correctly 4`] = `
             {
               "color": "#401960",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -881,7 +889,9 @@ exports[`Button renders correctly 6`] = `
             {
               "color": "#ffffff",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -985,7 +995,9 @@ exports[`Button renders correctly 7`] = `
             {
               "color": "#401960",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -1267,7 +1279,9 @@ exports[`Button renders correctly 9`] = `
             {
               "color": "#bfc1c5",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -1371,7 +1385,9 @@ exports[`Button renders correctly 10`] = `
             {
               "color": "#ffffff",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -1653,7 +1669,9 @@ exports[`Button renders correctly 12`] = `
             {
               "color": "#bfc1c5",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -1757,6 +1775,7 @@ exports[`Button renders correctly 13`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -2037,6 +2056,7 @@ exports[`Button renders correctly 15`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -2141,6 +2161,7 @@ exports[`Button renders correctly 16`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -2421,6 +2442,7 @@ exports[`Button renders correctly 18`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -2525,6 +2547,7 @@ exports[`Button renders correctly 19`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -2805,6 +2828,7 @@ exports[`Button renders correctly 21`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -2909,6 +2933,7 @@ exports[`Button renders correctly 22`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -3189,6 +3214,7 @@ exports[`Button renders correctly 24`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -3293,6 +3319,7 @@ exports[`Button renders correctly 25`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -3573,6 +3600,7 @@ exports[`Button renders correctly 27`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -3853,6 +3881,7 @@ exports[`Button renders correctly 29`] = `
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -3956,9 +3985,16 @@ exports[`Button renders correctly 30`] = `
             {
               "color": "#ffffff",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
-            undefined,
+            [
+              {
+                "lineHeight": undefined,
+              },
+              undefined,
+            ],
           ],
         ]
       }
@@ -4236,9 +4272,16 @@ exports[`Button renders correctly 32`] = `
             {
               "color": "#ffffff",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
-            undefined,
+            [
+              {
+                "lineHeight": undefined,
+              },
+              undefined,
+            ],
           ],
         ]
       }
@@ -4341,9 +4384,16 @@ exports[`Button renders correctly 33`] = `
             {
               "color": "#401960",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
-            undefined,
+            [
+              {
+                "lineHeight": undefined,
+              },
+              undefined,
+            ],
           ],
         ]
       }
@@ -4625,9 +4675,16 @@ exports[`Button renders correctly 35`] = `
             {
               "color": "#bfc1c5",
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
-            undefined,
+            [
+              {
+                "lineHeight": undefined,
+              },
+              undefined,
+            ],
           ],
         ]
       }

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -2373,7 +2373,9 @@ exports[`StyledButtonText has filled-danger style 1`] = `
           {
             "color": "#ffffff",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2432,7 +2434,9 @@ exports[`StyledButtonText has filled-primary style 1`] = `
           {
             "color": "#ffffff",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2491,7 +2495,9 @@ exports[`StyledButtonText has filled-secondary style 1`] = `
           {
             "color": "#ffffff",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2550,7 +2556,9 @@ exports[`StyledButtonText has filled-white style 1`] = `
           {
             "color": "#401960",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2609,7 +2617,9 @@ exports[`StyledButtonText has outlined-danger style 1`] = `
           {
             "color": "#cb300a",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2668,7 +2678,9 @@ exports[`StyledButtonText has outlined-primary style 1`] = `
           {
             "color": "#401960",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2727,7 +2739,9 @@ exports[`StyledButtonText has outlined-secondary style 1`] = `
           {
             "color": "#4d6265",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2786,7 +2800,9 @@ exports[`StyledButtonText has outlined-white style 1`] = `
           {
             "color": "#ffffff",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2845,7 +2861,9 @@ exports[`StyledButtonText has text-danger style 1`] = `
           {
             "color": "#cb300a",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2904,7 +2922,9 @@ exports[`StyledButtonText has text-primary style 1`] = `
           {
             "color": "#401960",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -2963,7 +2983,9 @@ exports[`StyledButtonText has text-secondary style 1`] = `
           {
             "color": "#4d6265",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -3022,7 +3044,9 @@ exports[`StyledButtonText has text-white style 1`] = `
           {
             "color": "#ffffff",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],
@@ -3082,7 +3106,9 @@ exports[`StyledButtonText renders disabled correctly 1`] = `
           {
             "color": "#ffffff",
             "flexShrink": 1,
+            "lineHeight": undefined,
             "textAlign": "center",
+            "textAlignVertical": "center",
           },
           undefined,
         ],

package/src/components/Calendar/__tests__/CalendarRange.spec.tsx

@@ -47,17 +47,32 @@ describe('CalendarRange', () => {
     expect(queryAllByTestId('calendar-disabled-cell')).toHaveLength(0);
     expect(queryAllByTestId('calendar-date-mark')).toHaveLength(5);
 
-    // Test range selection
-    fireEvent.press(queryAllByText('11')[0]); // Select start date
+    // Select outside range
+    fireEvent.press(queryAllByText('11')[0]);
     expect(onChange).toHaveBeenCalledWith({
       startDate: new Date('2022-10-11'),
-      endDate: new Date('2022-10-15'),
+      endDate: undefined,
     });
 
-    fireEvent.press(queryAllByText('20')[0]); // Select end date
+    // Select start date
+    fireEvent.press(queryAllByText('12')[0]);
     expect(onChange).toHaveBeenCalledWith({
       startDate: new Date('2022-10-12'),
-      endDate: new Date('2022-10-20'),
+      endDate: new Date('2022-10-12'),
+    });
+
+    // Select end date
+    fireEvent.press(queryAllByText('15')[0]);
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-15'),
+      endDate: new Date('2022-10-15'),
+    });
+
+    // Select inside range
+    fireEvent.press(queryAllByText('13')[0]);
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-13'),
+      endDate: undefined,
     });
 
     fireEvent.press(queryByTestId('previous-icon-button'));
@@ -129,14 +144,14 @@ describe('CalendarRange', () => {
     // Test range selection within constraints
     fireEvent.press(getByText('17')); // Select start date
     expect(onChange).toHaveBeenCalledWith({
-      startDate: new Date('2022-10-12'),
-      endDate: new Date('2022-10-17'),
+      startDate: new Date('2022-10-17'),
+      endDate: undefined,
     });
 
     fireEvent.press(getByText('11')); // Select end date
     expect(onChange).toHaveBeenCalledWith({
       startDate: new Date('2022-10-11'),
-      endDate: new Date('2022-10-15'),
+      endDate: undefined,
     });
   });
 
@@ -156,14 +171,14 @@ describe('CalendarRange', () => {
     fireEvent.press(getByText('11'));
     expect(onChange).toHaveBeenCalledWith({
       startDate: new Date('2022-10-11'),
-      endDate: new Date('2022-10-15'),
+      endDate: undefined,
     });
 
     // Select end date
     fireEvent.press(getByText('20'));
     expect(onChange).toHaveBeenCalledWith({
-      startDate: new Date('2022-10-12'),
-      endDate: new Date('2022-10-20'),
+      startDate: new Date('2022-10-20'),
+      endDate: undefined,
     });
 
     // Select new start date (should clear end date)