@hero-design/rn 8.91.3 → 8.91.5

package/src/components/Avatar/StyledAvatar.tsx

@@ -32,7 +32,7 @@ const StyledTextWrapper = styled(View)(() => ({
   height: '100%',
 }));
 
-const StyledText = styled(Typography.Text)<
+const StyledText = styled(Typography.Body)<
   TextProps & {
     themeSize: ThemeSize;
   }

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -133,9 +133,9 @@ exports[`StyledText renders correct style 1`] = `
         {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
         },
         [
           {
@@ -151,11 +151,10 @@ exports[`StyledText renders correct style 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeSize="small"
     themeTypeface="neutral"
+    themeVariant="regular"
   >
     MD
   </Text>

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

@@ -67,9 +67,9 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
             {
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
             },
             [
               {
@@ -85,11 +85,10 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeSize="small"
         themeTypeface="neutral"
+        themeVariant="regular"
       >
         TT
       </Text>
@@ -300,9 +299,9 @@ exports[`Avatar shows title when there is no source 1`] = `
             {
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
             },
             [
               {
@@ -318,11 +317,10 @@ exports[`Avatar shows title when there is no source 1`] = `
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeSize="small"
         themeTypeface="neutral"
+        themeVariant="regular"
       >
         TT
       </Text>

package/src/components/BottomNavigation/StyledBottomNavigation.tsx

@@ -26,11 +26,9 @@ const BottomBarWrapper = styled(View)<{
   paddingLeft: Math.max(themeInsets.left, themeInsets.right),
   paddingRight: Math.max(themeInsets.left, themeInsets.right),
   backgroundColor: theme.__hd__.bottomNavigation.colors.background,
-  shadowColor: theme.__hd__.bottomNavigation.colors.shadow,
-  shadowOffset: theme.__hd__.bottomNavigation.shadows.offset,
-  shadowOpacity: theme.__hd__.bottomNavigation.shadows.opacity,
-  shadowRadius: theme.__hd__.bottomNavigation.shadows.radius,
-  elevation: theme.__hd__.bottomNavigation.shadows.elevation,
+  borderTopColor: theme.__hd__.bottomNavigation.colors.borderTop,
+  borderTopWidth: theme.__hd__.bottomNavigation.borderWidths.borderTop,
+  ...theme.__hd__.bottomNavigation.shadows.wrapper,
 }));
 
 const BottomBar = styled(View)({

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

@@ -67,18 +67,20 @@ exports[`BottomNavigation renders correctly 1`] = `
           [
             {
               "backgroundColor": "#ffffff",
+              "borderTopColor": "#e8e9ea",
+              "borderTopWidth": 1,
               "elevation": 10,
               "height": 72,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
-              "shadowColor": "#401960",
+              "shadowColor": "#001f23",
               "shadowOffset": {
-                "height": 3,
+                "height": -4,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.04,
+              "shadowRadius": 6,
             },
             undefined,
           ]

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -33,11 +33,6 @@ const StyledFloatingWrapper = styled(AnimatedSafeAreaView)(({ theme }) => ({
 
 const StyledFloatingBottomSheet = styled(Animated.View)(({ theme }) => ({
   width: '100%',
-  shadowColor: theme.__hd__.bottomSheet.colors.shadow,
-  shadowOffset: theme.__hd__.bottomSheet.shadows.offset,
-  shadowOpacity: theme.__hd__.bottomSheet.shadows.opacity,
-  shadowRadius: theme.__hd__.bottomSheet.shadows.radius,
-  elevation: theme.__hd__.bottomSheet.shadows.elevation,
   backgroundColor: theme.__hd__.bottomSheet.colors.background,
   borderRadius: theme.__hd__.bottomSheet.radii.floating,
   maxHeight: '100%',
@@ -51,11 +46,6 @@ const StyledBottomSheet = styled(AnimatedSafeAreaView)<
   borderTopRightRadius: theme.__hd__.bottomSheet.radii.default,
   backgroundColor: theme.__hd__.bottomSheet.colors.background,
   width: '100%',
-  shadowColor: theme.__hd__.bottomSheet.colors.shadow,
-  shadowOffset: theme.__hd__.bottomSheet.shadows.offset,
-  shadowOpacity: theme.__hd__.bottomSheet.shadows.opacity,
-  shadowRadius: theme.__hd__.bottomSheet.shadows.radius,
-  elevation: theme.__hd__.bottomSheet.shadows.elevation,
   maxHeight: '94%',
 }));
 

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

@@ -163,15 +163,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
-              "elevation": 10,
               "maxHeight": "94%",
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
               "transform": [
                 {
                   "scaleY": 1,
@@ -507,16 +499,8 @@ exports[`BottomSheet renders floating BottomSheet correctly 1`] = `
               {
                 "backgroundColor": "#ffffff",
                 "borderRadius": 32,
-                "elevation": 10,
                 "maxHeight": "100%",
                 "padding": 8,
-                "shadowColor": "#001f23",
-                "shadowOffset": {
-                  "height": 3,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.4,
-                "shadowRadius": 16,
                 "transform": [
                   {
                     "scaleY": 1,

package/src/components/Calendar/CalendarRange.tsx

@@ -191,7 +191,11 @@ const CalendarRange = ({
       return (
         <SelectedDate
           isStart={isEqDate(date, value?.startDate)}
-          showConnector={!!value?.startDate && !!value?.endDate}
+          showConnector={
+            !!value?.startDate &&
+            !!value?.endDate &&
+            !isEqDate(value.startDate, value.endDate)
+          }
           key={date.toDateString()}
           date={date}
           onPress={() => onDateChange(date)}

package/src/components/Calendar/__tests__/helper.spec.ts

@@ -73,8 +73,8 @@ describe('isDateInRange', () => {
 });
 
 describe('setStartOrEndDate', () => {
-  // Test case 1: Selecting same date as start or end date
-  it('should not change dates when selecting same date as start date', () => {
+  // Test case 1: Prevent selecting same date when both dates are set
+  it('should not change dates when selecting same date as start date and both dates are set', () => {
     const date = new Date('2024-03-15');
     const startDate = new Date('2024-03-15');
     const endDate = new Date('2024-03-20');
@@ -83,7 +83,19 @@ describe('setStartOrEndDate', () => {
     expect(result).toEqual({ startDate, endDate });
   });
 
-  // Test case 2: Initial selection (no start date)
+  // Test case 2: Allow selecting same date as start date when only start date is set
+  it('should allow selecting same date as start date when only start date is set', () => {
+    const date = new Date('2024-03-15');
+    const startDate = new Date('2024-03-15');
+
+    const result = setStartOrEndDate({ date, startDate });
+    expect(result).toEqual({
+      startDate: new Date('2024-03-15'),
+      endDate: new Date('2024-03-15'),
+    });
+  });
+
+  // Test case 3: Initial selection (no start date)
   it('should set start date when no dates are selected', () => {
     const date = new Date('2024-03-15');
 
@@ -94,7 +106,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 3: Setting end date after start date
+  // Test case 4: Setting end date after start date
   it('should set end date when start date exists and selected date is after', () => {
     const date = new Date('2024-03-20');
     const startDate = new Date('2024-03-15');
@@ -106,7 +118,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 4: Setting end date before start date (should reorder)
+  // Test case 5: Setting end date before start date (should reorder)
   it('should reorder dates when end date is selected before start date', () => {
     const date = new Date('2024-03-10');
     const startDate = new Date('2024-03-15');
@@ -118,7 +130,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 5: Clicking within existing range
+  // Test case 6: Clicking within existing range
   it('should start new selection when clicking within existing range', () => {
     const date = new Date('2024-03-17');
     const startDate = new Date('2024-03-15');
@@ -131,7 +143,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 6: Extending range before start date
+  // Test case 7: Extending range before start date
   it('should extend range when clicking before start date', () => {
     const date = new Date('2024-03-10');
     const startDate = new Date('2024-03-15');
@@ -144,7 +156,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 7: Extending range after end date
+  // Test case 8: Extending range after end date
   it('should extend range when clicking after end date', () => {
     const date = new Date('2024-03-25');
     const startDate = new Date('2024-03-15');

package/src/components/Calendar/helpers.ts

@@ -54,8 +54,12 @@ export const setStartOrEndDate = ({
   startDate?: Date;
   endDate?: Date;
 }) => {
-  // Prevent selecting same date
-  if (isEqDate(date, startDate) || isEqDate(date, endDate)) {
+  // Prevent selecting same date when both dates are set
+  if (
+    startDate &&
+    endDate &&
+    (isEqDate(date, startDate) || isEqDate(date, endDate))
+  ) {
     return {
       startDate,
       endDate,

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

@@ -363,19 +363,19 @@ exports[`Chip renders correctly with custom icon 1`] = `
         "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "justifyContent": "center",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
     testID="chip"
@@ -496,22 +496,22 @@ exports[`Chip renders correctly with custom icon 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#ece8ef",
+        "backgroundColor": undefined,
         "borderColor": "transparent",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "justifyContent": "center",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
     testID="chip"
@@ -861,19 +861,19 @@ exports[`Chip renders correctly with variant compact and selected false 1`] = `
         "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "justifyContent": "center",
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
     testID="chip"
@@ -962,22 +962,22 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#ece8ef",
+        "backgroundColor": undefined,
         "borderColor": "transparent",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "justifyContent": "center",
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
     testID="chip"
@@ -1295,19 +1295,19 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
         "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "justifyContent": "center",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
     testID="chip"
@@ -1396,22 +1396,22 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#ece8ef",
+        "backgroundColor": undefined,
         "borderColor": "transparent",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "justifyContent": "center",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
     testID="chip"
@@ -1503,19 +1503,19 @@ exports[`Chip renders correctly with variant filter and selected false 1`] = `
         "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "justifyContent": "center",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
     testID="chip"
@@ -1604,22 +1604,22 @@ exports[`Chip renders correctly with variant filter and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#ece8ef",
+        "backgroundColor": undefined,
         "borderColor": "transparent",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "justifyContent": "center",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
     testID="chip"

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -413,15 +413,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       "backgroundColor": "#ffffff",
                       "borderTopLeftRadius": 16,
                       "borderTopRightRadius": 16,
-                      "elevation": 10,
                       "maxHeight": "94%",
-                      "shadowColor": "#001f23",
-                      "shadowOffset": {
-                        "height": 3,
-                        "width": 0,
-                      },
-                      "shadowOpacity": 0.4,
-                      "shadowRadius": 16,
                       "transform": [
                         {
                           "scaleY": 1,
@@ -1102,15 +1094,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
                       "backgroundColor": "#ffffff",
                       "borderTopLeftRadius": 16,
                       "borderTopRightRadius": 16,
-                      "elevation": 10,
                       "maxHeight": "94%",
-                      "shadowColor": "#001f23",
-                      "shadowOffset": {
-                        "height": 3,
-                        "width": 0,
-                      },
-                      "shadowOpacity": 0.4,
-                      "shadowRadius": 16,
                       "transform": [
                         {
                           "scaleY": 1,

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -45,7 +45,7 @@ const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   right: 0,
   top: 0,
   bottom: 0,
-  opacity: 0.8,
+  opacity: 0.4,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -65,7 +65,7 @@ exports[`ActionGroup has active false 1`] = `
             "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 64,
             "justifyContent": "center",
@@ -73,13 +73,13 @@ exports[`ActionGroup has active false 1`] = `
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#121214",
+            "shadowColor": "#001f23",
             "shadowOffset": {
               "height": 2,
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
             "transform": [
               {
                 "translateY": 0,
@@ -258,7 +258,7 @@ exports[`ActionGroup has active true 1`] = `
             "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 64,
             "justifyContent": "center",
@@ -266,13 +266,13 @@ exports[`ActionGroup has active true 1`] = `
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#121214",
+            "shadowColor": "#001f23",
             "shadowOffset": {
               "height": 2,
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
             "transform": [
               {
                 "translateY": 0,
@@ -409,10 +409,10 @@ exports[`ActionGroup has active true 1`] = `
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "backgroundColor": "#f6f6f7",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
-              "opacity": 0.8,
+              "opacity": 0.4,
               "position": "absolute",
               "right": 0,
               "top": 0,
@@ -1079,7 +1079,7 @@ exports[`ActionGroup has active true 1`] = `
               "backgroundColor": "#000000",
               "borderRadius": 999,
               "bottom": undefined,
-              "elevation": 3,
+              "elevation": 6,
               "flexDirection": "row",
               "height": 64,
               "justifyContent": "center",
@@ -1088,13 +1088,13 @@ exports[`ActionGroup has active true 1`] = `
               "marginTop": 24,
               "opacity": 1,
               "padding": 20,
-              "shadowColor": "#121214",
+              "shadowColor": "#001f23",
               "shadowOffset": {
                 "height": 2,
                 "width": 0,
               },
               "shadowOpacity": 0.12,
-              "shadowRadius": 4,
+              "shadowRadius": 2,
               "transform": [
                 {
                   "translateY": 0,