@hero-design/rn 8.91.1 → 8.91.4

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 = {
@@ -2014,10 +2016,10 @@ var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, glo
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
-  mutedOnDefaultGlobalSurface: palette$3.offBlackLight30,
-  inactiveOnDefaultGlobalSurface: palette$3.offBlackLight50,
+  mutedOnDefaultGlobalSurface: '#4d6265',
+  inactiveOnDefaultGlobalSurface: '#808f91',
   primaryOutline: palette$3.offBlack,
-  inactiveOutline: palette$3.offBlackLight50
+  inactiveOutline: '#808f91'
 });
 
 var swagBrandSystemPallete = {
@@ -2033,9 +2035,12 @@ var swagBrandSystemPallete = {
   decorativeSecondary: '#fdfbff',
   decorativeSecondarySurface: '#f0e6ff'
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
+var swagSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete), {}, {
+  name: 'swagLight'
+});
 
 var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
+  name: 'swagLightJobs',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',
@@ -2152,7 +2157,8 @@ var ehWorkDarkSystemPalette = {
   decorativeSecondary: '#280541',
   decorativeSecondarySurface: '#4c1d95',
   // Theme Mode
-  themeMode: 'dark'
+  themeMode: 'dark',
+  name: 'ehWorkDark'
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -2317,19 +2323,116 @@ var getRadii = function getRadii(baseRadius) {
   };
 };
 
-var getShadows = function getShadows(systemPalette) {
-  return {
-    "default": {
-      shadowOffset: {
-        width: 0,
-        height: 2
-      },
-      shadowColor: systemPalette.primaryOutline,
-      shadowOpacity: 0.12,
-      shadowRadius: 4,
-      elevation: 3
-    }
-  };
+var swagLightShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var swagLightJobsShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagLightJobsSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var ehWorkDarkShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.56,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.24,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var getShadows = function getShadows(palette) {
+  switch (palette.name) {
+    case 'swagLight':
+      return swagLightShadowPalette;
+    case 'swagLightJobs':
+      return swagLightJobsShadowPalette;
+    case 'ehWorkDark':
+      return ehWorkDarkShadowPalette;
+    default:
+      return swagLightShadowPalette;
+  }
 };
 
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
@@ -2591,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 = {
@@ -2608,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'],
@@ -2624,7 +2718,6 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   };
   return {
     colors: colors,
-    shadows: shadows,
     radii: radii,
     sizes: sizes,
     space: space
@@ -2836,8 +2929,15 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
     borders: {
       "default": theme.colors.primaryOutline,
+      checked: theme.colors.primaryOutline,
       disabled: theme.colors.disabledOutline,
       readonly: theme.colors.inactiveOutline
+    },
+    checkboxBorder: {
+      "default": theme.colors.primaryOutline,
+      checked: theme.colors.primary,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface
     }
   };
   var space = {
@@ -3061,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,
@@ -3090,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,
@@ -3610,14 +3706,14 @@ var getSwipeableTheme = function getSwipeableTheme(theme) {
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
     backgroundColors: {
-      checked: theme.colors.primary,
+      checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.highlightedSurface,
-      'disabled-unchecked': theme.colors.mutedOnDefaultGlobalSurface
+      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface
     },
-    thumb: theme.colors.onDarkGlobalSurface,
+    thumb: theme.colors.white,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
+      background: theme.colors.neutralGlobalSurface,
       textBackground: theme.colors.decorativePrimarySurface
     }
   };
@@ -3773,7 +3869,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.inactiveOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
-    }
+    },
+    placeholder: theme.colors.mutedOnDefaultGlobalSurface
   };
   var space = {
     containerPadding: theme.space.medium,
@@ -9718,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%',
@@ -9736,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%'
   };
 });
@@ -13098,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
@@ -13268,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() {
@@ -14380,7 +14467,7 @@ var StyledCheckbox = index$a(reactNative.View)(function (_ref4) {
     flex: 1,
     borderRadius: theme.__hd__.checkbox.radii.icon,
     borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
+    borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 var StyledCheckMark = index$a(Icon)(function (_ref5) {
@@ -14389,19 +14476,23 @@ var StyledCheckMark = index$a(Icon)(function (_ref5) {
   return {
     position: 'absolute',
     top: theme.__hd__.checkbox.space.iconTop,
-    color: theme.__hd__.checkbox.colors.borders[themeState]
+    color: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 
 var getThemeState = function getThemeState(_ref) {
   var disabled = _ref.disabled,
-    readonly = _ref.readonly;
+    readonly = _ref.readonly,
+    checked = _ref.checked;
   if (disabled) {
     return 'disabled';
   }
   if (readonly) {
     return 'readonly';
   }
+  if (checked) {
+    return 'checked';
+  }
   return 'default';
 };
 var Checkbox = function Checkbox(_ref2) {
@@ -14419,7 +14510,8 @@ var Checkbox = function Checkbox(_ref2) {
   useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
-    readonly: readonly
+    readonly: readonly,
+    checked: checked
   });
   return /*#__PURE__*/React__namespace.default.createElement(StyledWrapper$8, {
     onPress: onPress,
@@ -14612,11 +14704,13 @@ var renderInput$1 = function renderInput(_ref3) {
   var variant = _ref3.variant,
     nativeInputProps = _ref3.nativeInputProps,
     renderInputValue = _ref3.renderInputValue,
-    ref = _ref3.ref;
+    ref = _ref3.ref,
+    theme = _ref3.theme;
   return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__namespace.default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeInputProps.multiline,
-    ref: ref
+    ref: ref,
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
   }));
 };
 var renderSuffix$1 = function renderSuffix(_ref4) {
@@ -14871,13 +14965,14 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
-    }
+    },
+    theme: theme
   })), renderSuffix$1({
     state: state,
     loading: loading,
@@ -16180,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',
@@ -16188,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;
@@ -16490,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
   };
 });
@@ -19487,7 +19577,8 @@ var StyledWrapper$2 = index$a(reactNative.View)(function (_ref) {
     borderRadius: theme.__hd__["switch"].radii.rounded,
     backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    opacity: themeVariant.includes('disabled') ? 0.4 : 1
   };
 });
 var StyledKnot = index$a(reactNative.Animated.View)(function (_ref2) {
@@ -39842,7 +39933,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBorderBackDrop, {
     themeState: state,
@@ -40237,6 +40328,7 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
     setIsFocused = _React$useState2[1];
+  var theme = useTheme();
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var state = getState({
@@ -40321,7 +40413,8 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
       maxLength: maxLength,
       value: value,
       defaultValue: defaultValue,
-      placeholder: placeholder
+      placeholder: placeholder,
+      placeholderTextColor: theme.__hd__.textInput.colors.placeholder
     }),
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.91.1",
+  "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",
@@ -821,7 +821,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
             "transform": [
               {
                 "translateY": 0,
@@ -1721,7 +1721,7 @@ 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",
@@ -1733,7 +1733,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
           "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",
@@ -2005,7 +2005,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
             "transform": [
               {
                 "translateY": 0,
@@ -2245,7 +2245,7 @@ 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",
@@ -2257,7 +2257,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
           "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",
@@ -2836,7 +2836,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
             "transform": [
               {
                 "translateY": 0,
@@ -3383,7 +3383,7 @@ 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",
@@ -3395,7 +3395,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
           "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)}