@hero-design/rn 8.91.3 → 8.91.4

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3043) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3014) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 51.4s
+created lib/index.js, es/index.js in 55s

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @hero-design/rn
 
+## 8.91.4
+
+### Patch Changes
+
+- [#3699](https://github.com/Thinkei/hero-design/pull/3699) [`8e1eb77ac97e7b367b74361717772c7e15a61627`](https://github.com/Thinkei/hero-design/commit/8e1eb77ac97e7b367b74361717772c7e15a61627) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [FAB][bottomsheet] Update color
+
+  - FAB: Update button and backdrop color and shadow
+  - BottomSheet: Remove shadow and update backdrop color
+
+- [#3704](https://github.com/Thinkei/hero-design/pull/3704) [`643421d7d76789a9bb7f65a850d1c754bed52449`](https://github.com/Thinkei/hero-design/commit/643421d7d76789a9bb7f65a850d1c754bed52449) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Calendar.Range] Allow selecting same date
+
 ## 8.91.3
 
 ### Patch Changes

package/es/index.js

@@ -1910,8 +1910,10 @@ var globalPalette$1 = {
   archived: palette$9.silverChalice,
   mutedArchived: palette$9.silverChaliceLight20,
   archivedSurface: palette$9.cumberlandFog,
-  onArchivedSurface: palette$9.windsorGrey
+  onArchivedSurface: palette$9.windsorGrey,
   // End of Updated 21 / Nov / 22
+  black: '#000000',
+  white: '#ffffff'
 };
 
 var swagBrandSystemPallete$1 = {
@@ -2664,7 +2666,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.overlayGlobalSurface,
+    backdrop: theme.colors.black,
     floatingHeaderIconBackground: theme.colors.archivedSurface
   };
   var sizes = {
@@ -2681,15 +2683,6 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     floatingInnerPadding: theme.space.small,
     floatingHeaderIconPadding: theme.space.small
   };
-  var shadows = {
-    offset: {
-      width: 0,
-      height: 3
-    },
-    opacity: 0.4,
-    radius: theme.radii.xlarge,
-    elevation: 10
-  };
   var radii = {
     "default": theme.radii.xlarge,
     floating: theme.radii['5xlarge'],
@@ -2697,7 +2690,6 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   };
   return {
     colors: colors,
-    shadows: shadows,
     radii: radii,
     sizes: sizes,
     space: space
@@ -3141,12 +3133,12 @@ var getFABTheme = function getFABTheme(theme) {
     buttonBackground: theme.colors.overlayGlobalSurface,
     buttonPressedBackground: theme.colors.overlayGlobalSurface,
     buttonActiveBackground: theme.colors.overlayGlobalSurface,
-    icon: theme.colors.onPrimary,
+    icon: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.overlayGlobalSurface,
     actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
-    titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary
+    backdropBackground: theme.colors.black,
+    titleText: theme.colors.onDarkGlobalSurface,
+    actionItemText: theme.colors.onDarkGlobalSurface
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -3170,11 +3162,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    offset: theme.shadows["default"].shadowOffset,
-    opacity: theme.shadows["default"].shadowOpacity,
-    radius: theme.shadows["default"].shadowRadius,
-    elevation: theme.shadows["default"].elevation,
-    color: theme.shadows["default"].shadowColor
+    "default": theme.shadows.cardDrawer
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -9799,11 +9787,6 @@ var StyledFloatingBottomSheet = index$a(Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     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%',
@@ -9817,11 +9800,6 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     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%'
   };
 });
@@ -13179,8 +13157,8 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
   var date = _ref2.date,
     startDate = _ref2.startDate,
     endDate = _ref2.endDate;
-  // 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: startDate,
       endDate: endDate
@@ -13349,7 +13327,7 @@ var CalendarRange = function CalendarRange(_ref) {
     if (isEqDate(value === null || value === void 0 ? void 0 : value.startDate, date) || isEqDate(value === null || value === void 0 ? void 0 : value.endDate, date)) {
       return /*#__PURE__*/React__default.createElement(SelectedDate, {
         isStart: isEqDate(date, value === null || value === void 0 ? void 0 : value.startDate),
-        showConnector: !!(value !== null && value !== void 0 && value.startDate) && !!(value !== null && value !== void 0 && value.endDate),
+        showConnector: !!(value !== null && value !== void 0 && value.startDate) && !!(value !== null && value !== void 0 && value.endDate) && !isEqDate(value.startDate, value.endDate),
         key: date.toDateString(),
         date: date,
         onPress: function onPress() {
@@ -16269,7 +16247,7 @@ var AnimatedTouchableHighlight = Animated.createAnimatedComponent(TouchableOpaci
 var StyledFAB$2 = index$a(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     themeActive = _ref.themeActive;
-  return {
+  return _objectSpread2({
     backgroundColor: themeActive ? theme.__hd__.fab.colors.buttonActiveBackground : theme.__hd__.fab.colors.buttonBackground,
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
@@ -16277,13 +16255,8 @@ var StyledFAB$2 = index$a(AnimatedTouchableHighlight)(function (_ref) {
     alignSelf: 'flex-start',
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.shadows.color,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity,
     height: theme.__hd__.fab.sizes.height
-  };
+  }, theme.__hd__.fab.shadows["default"]);
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
   var theme = _ref2.theme;
@@ -16579,7 +16552,7 @@ var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
-    opacity: 0.8,
+    opacity: 0.4,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });

package/lib/index.js

@@ -1938,8 +1938,10 @@ var globalPalette$1 = {
   archived: palette$9.silverChalice,
   mutedArchived: palette$9.silverChaliceLight20,
   archivedSurface: palette$9.cumberlandFog,
-  onArchivedSurface: palette$9.windsorGrey
+  onArchivedSurface: palette$9.windsorGrey,
   // End of Updated 21 / Nov / 22
+  black: '#000000',
+  white: '#ffffff'
 };
 
 var swagBrandSystemPallete$1 = {
@@ -2692,7 +2694,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.overlayGlobalSurface,
+    backdrop: theme.colors.black,
     floatingHeaderIconBackground: theme.colors.archivedSurface
   };
   var sizes = {
@@ -2709,15 +2711,6 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     floatingInnerPadding: theme.space.small,
     floatingHeaderIconPadding: theme.space.small
   };
-  var shadows = {
-    offset: {
-      width: 0,
-      height: 3
-    },
-    opacity: 0.4,
-    radius: theme.radii.xlarge,
-    elevation: 10
-  };
   var radii = {
     "default": theme.radii.xlarge,
     floating: theme.radii['5xlarge'],
@@ -2725,7 +2718,6 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   };
   return {
     colors: colors,
-    shadows: shadows,
     radii: radii,
     sizes: sizes,
     space: space
@@ -3169,12 +3161,12 @@ var getFABTheme = function getFABTheme(theme) {
     buttonBackground: theme.colors.overlayGlobalSurface,
     buttonPressedBackground: theme.colors.overlayGlobalSurface,
     buttonActiveBackground: theme.colors.overlayGlobalSurface,
-    icon: theme.colors.onPrimary,
+    icon: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.overlayGlobalSurface,
     actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
-    titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary
+    backdropBackground: theme.colors.black,
+    titleText: theme.colors.onDarkGlobalSurface,
+    actionItemText: theme.colors.onDarkGlobalSurface
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -3198,11 +3190,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    offset: theme.shadows["default"].shadowOffset,
-    opacity: theme.shadows["default"].shadowOpacity,
-    radius: theme.shadows["default"].shadowRadius,
-    elevation: theme.shadows["default"].elevation,
-    color: theme.shadows["default"].shadowColor
+    "default": theme.shadows.cardDrawer
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -9827,11 +9815,6 @@ var StyledFloatingBottomSheet = index$a(reactNative.Animated.View)(function (_re
   var theme = _ref2.theme;
   return {
     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%',
@@ -9845,11 +9828,6 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     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%'
   };
 });
@@ -13207,8 +13185,8 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
   var date = _ref2.date,
     startDate = _ref2.startDate,
     endDate = _ref2.endDate;
-  // 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: startDate,
       endDate: endDate
@@ -13377,7 +13355,7 @@ var CalendarRange = function CalendarRange(_ref) {
     if (isEqDate(value === null || value === void 0 ? void 0 : value.startDate, date) || isEqDate(value === null || value === void 0 ? void 0 : value.endDate, date)) {
       return /*#__PURE__*/React__namespace.default.createElement(SelectedDate, {
         isStart: isEqDate(date, value === null || value === void 0 ? void 0 : value.startDate),
-        showConnector: !!(value !== null && value !== void 0 && value.startDate) && !!(value !== null && value !== void 0 && value.endDate),
+        showConnector: !!(value !== null && value !== void 0 && value.startDate) && !!(value !== null && value !== void 0 && value.endDate) && !isEqDate(value.startDate, value.endDate),
         key: date.toDateString(),
         date: date,
         onPress: function onPress() {
@@ -16297,7 +16275,7 @@ var AnimatedTouchableHighlight = reactNative.Animated.createAnimatedComponent(re
 var StyledFAB$2 = index$a(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     themeActive = _ref.themeActive;
-  return {
+  return _objectSpread2({
     backgroundColor: themeActive ? theme.__hd__.fab.colors.buttonActiveBackground : theme.__hd__.fab.colors.buttonBackground,
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
@@ -16305,13 +16283,8 @@ var StyledFAB$2 = index$a(AnimatedTouchableHighlight)(function (_ref) {
     alignSelf: 'flex-start',
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.shadows.color,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity,
     height: theme.__hd__.fab.sizes.height
-  };
+  }, theme.__hd__.fab.shadows["default"]);
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
   var theme = _ref2.theme;
@@ -16607,7 +16580,7 @@ var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
-    opacity: 0.8,
+    opacity: 0.4,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.91.3",
+  "version": "8.91.4",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -807,7 +807,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
             "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 64,
             "justifyContent": "center",
@@ -815,13 +815,13 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
             "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,
@@ -1721,19 +1721,19 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
         "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 0,
@@ -1991,7 +1991,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
             "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 64,
             "justifyContent": "center",
@@ -1999,13 +1999,13 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
             "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,
@@ -2245,19 +2245,19 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
         "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 0,
@@ -2822,7 +2822,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
             "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 64,
             "justifyContent": "center",
@@ -2830,13 +2830,13 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
             "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,
@@ -3383,19 +3383,19 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
         "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 0,

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,