@hero-design/rn 8.88.0 → 8.89.0-alpha.1

package/es/index.js

@@ -2062,6 +2062,64 @@ var eBensBrandSystemPallete = {
 };
 var eBensSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), eBensBrandSystemPallete);
 
+var ehWorkDarkPalette = {
+  black: '#000000',
+  white: '#ffffff',
+  // Surface
+  defaultGlobalSurface: '#27272A',
+  neutralGlobalSurface: '#121214',
+  darkGlobalSurface: '#fcfbff',
+  overlayGlobalSurface: '#ffffff',
+  // On Surface
+  onDefaultGlobalSurface: '#ffffff',
+  mutedOnDefaultGlobalSurface: '#a9a9b2',
+  inactiveOnDefaultGlobalSurface: '#71717a',
+  disabledOnDefaultGlobalSurface: '#52525b',
+  onDarkGlobalSurface: '#121214',
+  // Outline:
+  primaryOutline: '#a9a9b2',
+  secondaryOutline: '#3f3f46',
+  inactiveOutline: '#71717a',
+  disabledOutline: '#52525b',
+  // Archived:
+  archivedSurface: '#52525b',
+  mutedArchived: '#3f3f46',
+  archived: '#71717a',
+  onArchivedSurface: '#a9a9b2',
+  // Error:
+  errorSurface: '#7a1d06',
+  mutedError: '#9b2508',
+  error: '#bd2d09',
+  onErrorSurface: '#fecfca',
+  // Warning:
+  warningSurface: '#963e03',
+  mutedWarning: '#c35004',
+  warning: '#dc6204',
+  onWarningSurface: '#fff0d5',
+  // Success:
+  successSurface: '#00483e',
+  mutedSuccess: '#016256',
+  success: '#017d6d',
+  onSuccessSurface: '#a7f3e9',
+  // Info:
+  infoSurface: '#004a61',
+  mutedInfo: '#006585',
+  info: '#007da3',
+  onInfoSurface: '#a0e8ff',
+  // Brand:
+  primary: '#cdacfe',
+  onPrimary: '#fdfbff',
+  secondary: '#7622d7',
+  onSecondary: '#ffffff',
+  defaultSurface: '#fdfbff',
+  highlightedSurface: '#460078',
+  pressedSurface: '#9a58fc',
+  decorativePrimary: '#fdfbff',
+  decorativePrimarySurface: '#74409a',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#f0e6ff'
+};
+
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 var horizontalScale = function horizontalScale(size) {
   if (Platform.OS === 'web') {
@@ -2628,9 +2686,13 @@ var getCalendarTheme = function getCalendarTheme(theme) {
     background: theme.colors.defaultGlobalSurface,
     border: theme.colors.primaryOutline,
     primary: theme.colors.primary,
-    inverted: theme.colors.onDarkGlobalSurface
+    inverted: theme.colors.onDarkGlobalSurface,
+    rowItem: {
+      selected: theme.colors.primary,
+      highlighted: theme.colors.highlightedSurface
+    }
   };
-  var cellSize = theme.sizes.xxxlarge;
+  var cellSize = theme.sizes.xxxxlarge;
   var markSize = theme.sizes.xsmall;
   var sizes = {
     cellWidth: cellSize,
@@ -2645,7 +2707,8 @@ var getCalendarTheme = function getCalendarTheme(theme) {
     headerVerticalPadding: theme.space.medium,
     headerHorizontalPadding: theme.space.smallMedium,
     headerMarginRight: theme.space.small,
-    iosPickerMarginVertical: theme.space['5xlarge']
+    iosPickerMarginVertical: theme.space['5xlarge'],
+    cellPadding: theme.space.xlarge
   };
   var radii = {
     "default": theme.radii.rounded
@@ -12859,17 +12922,18 @@ var StyledCalendarDayNameCell = index$a(View)(function (_ref3) {
 var StyledCalendarCell = index$a(TouchableOpacity)(function (_ref4) {
   var theme = _ref4.theme,
     _ref4$variant = _ref4.variant,
-    variant = _ref4$variant === void 0 ? 'default' : _ref4$variant,
-    themeItemWidth = _ref4.themeItemWidth;
+    variant = _ref4$variant === void 0 ? 'default' : _ref4$variant;
   return {
     borderColor: theme.__hd__.calendar.colors.border,
     borderWidth: variant === 'current' ? 1 : 0,
-    borderRadius: theme.__hd__.calendar.radii["default"],
+    borderRadius: variant === 'highlighted' ? undefined : theme.__hd__.calendar.radii["default"],
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: variant === 'selected' ? theme.__hd__.calendar.colors.primary : undefined,
-    width: themeItemWidth || theme.__hd__.calendar.sizes.cellCircleWidth,
-    height: theme.__hd__.calendar.sizes.cellCircleHeight
+    backgroundColor: variant === 'selected' ? theme.__hd__.calendar.colors.rowItem.selected : 'transparent',
+    width: '100%',
+    height: '100%',
+    maxWidth: theme.__hd__.calendar.sizes.cellWidth,
+    maxHeight: theme.__hd__.calendar.sizes.cellHeight
   };
 });
 var StyledCalendarRow = index$a(View)(function (_ref5) {
@@ -12877,18 +12941,24 @@ var StyledCalendarRow = index$a(View)(function (_ref5) {
   return {
     flexDirection: 'row',
     paddingHorizontal: theme.__hd__.calendar.space.rowVerticalPadding,
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignItems: 'center'
   };
 });
 var StyledCalendarRowItem = index$a(View)(function (_ref6) {
   var theme = _ref6.theme,
-    themeItemWidth = _ref6.themeItemWidth;
+    themeItemWidth = _ref6.themeItemWidth,
+    isHighlighted = _ref6.isHighlighted;
   return {
     flexBasis: "".concat(Math.floor(100.0 / 7.0), "%"),
+    lineHeight: 0,
     alignItems: 'center',
     width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
-    height: theme.__hd__.calendar.sizes.cellHeight,
-    justifyContent: 'center'
+    height: themeItemWidth || theme.__hd__.calendar.sizes.cellHeight,
+    maxHeight: theme.__hd__.calendar.sizes.cellHeight,
+    justifyContent: 'center',
+    backgroundColor: isHighlighted ? theme.__hd__.calendar.colors.rowItem.highlighted : undefined
   };
 });
 var StyledDisabledCalendarRowItem = index$a(View)(function (_ref7) {
@@ -12898,7 +12968,8 @@ var StyledDisabledCalendarRowItem = index$a(View)(function (_ref7) {
     flexBasis: "".concat(Math.floor(100.0 / 7.0), "%"),
     alignItems: 'center',
     width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
-    height: theme.__hd__.calendar.sizes.cellHeight
+    height: themeItemWidth || theme.__hd__.calendar.sizes.cellHeight,
+    maxHeight: theme.__hd__.calendar.sizes.cellHeight
   };
 });
 var StyledMark = index$a(View)(function (_ref8) {
@@ -12918,8 +12989,10 @@ var StyledMark = index$a(View)(function (_ref8) {
 var getCellVariant = function getCellVariant() {
   var isSelected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var isCurrent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isHighlighted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (isSelected) return 'selected';
   if (isCurrent) return 'current';
+  if (isHighlighted) return 'highlighted';
   return 'default';
 };
 var CalendarRowItem = function CalendarRowItem(_ref) {
@@ -12931,12 +13004,14 @@ var CalendarRowItem = function CalendarRowItem(_ref) {
     textIntent = _ref$textIntent === void 0 ? 'body' : _ref$textIntent,
     _ref$marked = _ref.marked,
     marked = _ref$marked === void 0 ? false : _ref$marked,
-    itemWidth = _ref.itemWidth;
+    itemWidth = _ref.itemWidth,
+    isHighlighted = _ref.isHighlighted;
   return /*#__PURE__*/React__default.createElement(StyledCalendarRowItem, {
     testID: "calendar-date-cell",
-    themeItemWidth: itemWidth
+    themeItemWidth: itemWidth,
+    isHighlighted: isHighlighted
   }, /*#__PURE__*/React__default.createElement(StyledCalendarCell, {
-    variant: getCellVariant(isSelected, isCurrent),
+    variant: getCellVariant(isSelected, isCurrent, isHighlighted),
     onPress: onPress
   }, /*#__PURE__*/React__default.createElement(Typography.Body, {
     variant: "small",
@@ -12955,6 +13030,14 @@ var initArray = function initArray(length, func) {
 var isEqDate = function isEqDate(dateA, dateB) {
   return (dateA === null || dateA === void 0 ? void 0 : dateA.toDateString()) === (dateB === null || dateB === void 0 ? void 0 : dateB.toDateString());
 };
+var isDateInRange = function isDateInRange(_ref) {
+  var date = _ref.date,
+    range = _ref.range;
+  if (!range || range.startDate === undefined || range.endDate === undefined) {
+    return false;
+  }
+  return date >= range.startDate && date <= range.endDate;
+};
 var getValidDate = function getValidDate(date, minDate, maxDate) {
   if (minDate === undefined && maxDate === undefined) {
     return date;
@@ -12970,6 +13053,297 @@ var getValidDate = function getValidDate(date, minDate, maxDate) {
   }
   return undefined;
 };
+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)) {
+    return {
+      startDate: startDate,
+      endDate: endDate
+    };
+  }
+  // No start date yet - set as start
+  if (!startDate) {
+    return {
+      startDate: date,
+      endDate: undefined
+    };
+  }
+  // Have start but no end - set as end and reorder if needed
+  if (!endDate) {
+    return date < startDate ? {
+      startDate: date,
+      endDate: startDate
+    } : {
+      startDate: startDate,
+      endDate: date
+    };
+  }
+  // Clicking within range - start new selection
+  if (date >= startDate && date <= endDate) {
+    return {
+      startDate: date,
+      endDate: undefined
+    };
+  }
+  // Clicking outside range - extend range
+  return date < startDate ? {
+    startDate: date,
+    endDate: endDate
+  } : {
+    startDate: startDate,
+    endDate: date
+  };
+};
+
+var SelectedDate = function SelectedDate(_ref) {
+  var date = _ref.date,
+    onPress = _ref.onPress,
+    marked = _ref.marked,
+    isStart = _ref.isStart,
+    showConnector = _ref.showConnector,
+    itemWidth = _ref.itemWidth;
+  return /*#__PURE__*/React__default.createElement(StyledCalendarRowItem, {
+    themeItemWidth: itemWidth,
+    testID: "calendar-date-cell"
+  }, showConnector ? /*#__PURE__*/React__default.createElement(Box, {
+    testID: "range-connector",
+    style: _objectSpread2(_objectSpread2({
+      width: '50%',
+      height: '100%'
+    }, StyleSheet$1.absoluteFillObject), {}, {
+      transform: isStart ? [{
+        translateX: itemWidth ? itemWidth / 2 : 0
+      }] : undefined
+    }),
+    bgColor: "highlightedSurface"
+  }) : null, /*#__PURE__*/React__default.createElement(StyledCalendarCell, {
+    testID: "selected-date-cell",
+    variant: "selected",
+    onPress: onPress
+  }, /*#__PURE__*/React__default.createElement(Typography.Body, {
+    variant: "small",
+    intent: "inverted"
+  }, date ? date.getDate() : ''), marked ? /*#__PURE__*/React__default.createElement(StyledMark, {
+    testID: "calendar-date-mark",
+    variant: "inverted"
+  }) : null));
+};
+
+var DAYS_OF_WEEK$1 = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+// Sunday first column => 0
+// Sunday last column  => 1
+var WEEK_INDEX_OFFSET$1 = 1;
+var SUNDAY_INDEX$1 = 6;
+// Always render 7 rows x 6 items for consistent layout
+var TOTAL_DATES_ITEMS$1 = 7 * 6;
+var CalendarRange = function CalendarRange(_ref) {
+  var value = _ref.value,
+    visibleDate = _ref.visibleDate,
+    onChange = _ref.onChange,
+    _ref$onPreviousPress = _ref.onPreviousPress,
+    onPreviousPress = _ref$onPreviousPress === void 0 ? noop$1 : _ref$onPreviousPress,
+    _ref$onNextPress = _ref.onNextPress,
+    onNextPress = _ref$onNextPress === void 0 ? noop$1 : _ref$onNextPress,
+    _ref$onTitlePress = _ref.onTitlePress,
+    onTitlePress = _ref$onTitlePress === void 0 ? noop$1 : _ref$onTitlePress,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    _ref$markedDates = _ref.markedDates,
+    markedDates = _ref$markedDates === void 0 ? [] : _ref$markedDates,
+    testID = _ref.testID,
+    _ref$onMonthChange = _ref.onMonthChange,
+    onMonthChange = _ref$onMonthChange === void 0 ? noop$1 : _ref$onMonthChange,
+    _ref$onToggleMonthPic = _ref.onToggleMonthPicker,
+    onToggleMonthPicker = _ref$onToggleMonthPic === void 0 ? noop$1 : _ref$onToggleMonthPic,
+    monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
+    monthPickerCancelLabel = _ref.monthPickerCancelLabel;
+  var theme = useTheme();
+  var currentMonth = visibleDate.getMonth();
+  var currentYear = visibleDate.getFullYear();
+  var now = new Date();
+  var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
+    return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
+  }, {});
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    monthPickerVisible = _useState2[0],
+    setMonthPickerVisible = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentHeight = _useState4[0],
+    setContentHeight = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    contentWidth = _useState6[0],
+    setContentWidth = _useState6[1];
+  var calendarItemWidth = useMemo(function () {
+    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
+  }, [contentWidth, theme]);
+  var useMonthPicker = onMonthChange !== noop$1;
+  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
+  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
+  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
+  // Index of day in week is shifted by 1 due to Sunday is the last column
+  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX$1 : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET$1;
+  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
+  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
+    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
+    var count = lastDayIndexOfPreviousMonth - reversedIndex;
+    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
+  });
+  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
+    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
+  });
+  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS$1 - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
+    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
+  });
+  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
+    return date !== undefined;
+  }) && minDate >= firstDateOfMonth;
+  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
+    return date !== undefined;
+  }) || maxDate <= lastDateOfMonth;
+  var onDateChange = function onDateChange(date) {
+    var newDateRange = setStartOrEndDate({
+      date: date,
+      startDate: value === null || value === void 0 ? void 0 : value.startDate,
+      endDate: value === null || value === void 0 ? void 0 : value.endDate
+    });
+    onChange === null || onChange === void 0 || onChange(newDateRange);
+  };
+  var renderDateCell = function renderDateCell(_ref2) {
+    var date = _ref2.date,
+      isCurrentMonth = _ref2.isCurrentMonth;
+    if (!date) {
+      return /*#__PURE__*/React__default.createElement(StyledDisabledCalendarRowItem, {
+        themeItemWidth: calendarItemWidth,
+        testID: "calendar-disabled-cell"
+      });
+    }
+    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),
+        key: date.toDateString(),
+        date: date,
+        onPress: function onPress() {
+          return onDateChange(date);
+        },
+        marked: parsedMaskedDate[date.toDateString()],
+        itemWidth: calendarItemWidth
+      });
+    }
+    return /*#__PURE__*/React__default.createElement(CalendarRowItem, {
+      itemWidth: calendarItemWidth,
+      key: date.toDateString(),
+      date: date,
+      isCurrent: isEqDate(now, date),
+      isSelected: isEqDate(value === null || value === void 0 ? void 0 : value.startDate, date) || isEqDate(value === null || value === void 0 ? void 0 : value.endDate, date),
+      isHighlighted: isDateInRange({
+        date: date,
+        range: value
+      }),
+      onPress: function onPress() {
+        return onDateChange(date);
+      },
+      marked: parsedMaskedDate[date.toDateString()],
+      textIntent: isCurrentMonth ? undefined : 'subdued'
+    });
+  };
+  var onLayout = function onLayout(e) {
+    var _e$nativeEvent$layout = e.nativeEvent.layout,
+      width = _e$nativeEvent$layout.width,
+      height = _e$nativeEvent$layout.height;
+    setContentHeight(height);
+    setContentWidth(width);
+  };
+  return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
+    testID: testID
+  }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
+    value: !useMonthPicker ? format('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
+      testID: "calendar-month-picker",
+      onPress: function onPress() {
+        onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(!monthPickerVisible);
+        setMonthPickerVisible(!monthPickerVisible);
+      }
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(Typography.Title, {
+      level: "h5",
+      style: {
+        textAlign: 'center',
+        marginRight: theme.__hd__.calendar.space.headerMarginRight
+      }
+    }, format('MMMM yyyy', visibleDate)), /*#__PURE__*/React__default.createElement(Icon, {
+      icon: monthPickerVisible ? 'arrow-up' : 'arrow-down',
+      size: "small"
+    }))),
+    onPreviousPress: onPreviousPress,
+    onNextPress: onNextPress,
+    onPress: useMonthPicker ? undefined : onTitlePress,
+    previousDisabled: disablePrevButton,
+    nextDisabled: disableNextButton,
+    fontSize: "large"
+  })), Platform.OS === 'ios' && monthPickerVisible ? /*#__PURE__*/React__default.createElement(Box, {
+    style: {
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React__default.createElement(MonthYearPickerViewIOS, {
+    value: value === null || value === void 0 ? void 0 : value.startDate,
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    onChange: onMonthChange,
+    style: {
+      height: contentHeight + theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
+      marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical,
+      width: contentWidth
+    }
+  })) : /*#__PURE__*/React__default.createElement(Box, {
+    onLayout: onLayout
+  }, /*#__PURE__*/React__default.createElement(StyledCalendarRow, null, DAYS_OF_WEEK$1.map(function (day) {
+    return /*#__PURE__*/React__default.createElement(StyledCalendarRowItem, {
+      key: day
+    }, /*#__PURE__*/React__default.createElement(StyledCalendarDayNameCell, {
+      themeItemWidth: calendarItemWidth
+    }, /*#__PURE__*/React__default.createElement(Typography.Body, {
+      variant: "small"
+    }, day)));
+  })), /*#__PURE__*/React__default.createElement(StyledCalendarRow, null, daysOfPreviousMonth.map(function (date) {
+    return renderDateCell({
+      date: date,
+      isCurrentMonth: false
+    });
+  }), daysOfCurrentMonth.map(function (date) {
+    return renderDateCell({
+      date: date,
+      isCurrentMonth: true
+    });
+  }), daysOfNextMonth.map(function (date) {
+    return renderDateCell({
+      date: date,
+      isCurrentMonth: false
+    });
+  })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__default.createElement(MonthYearPickerDialogueAndroid, {
+    doneButtonLabel: monthPickerConfirmLabel,
+    cancelButtonLabel: monthPickerCancelLabel,
+    value: value === null || value === void 0 ? void 0 : value.startDate,
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    onChange: function onChange(action, date) {
+      setMonthPickerVisible(false);
+      onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(false);
+      if (action === 'dateSetAction' && !!date) {
+        onMonthChange(date);
+      }
+    }
+  })));
+};
 
 var DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 // Sunday first column => 0
@@ -13019,8 +13393,8 @@ var Calendar = function Calendar(_ref) {
     contentWidth = _useState6[0],
     setContentWidth = _useState6[1];
   var calendarItemWidth = useMemo(function () {
-    return contentWidth > 0 ? contentWidth / 7 : undefined;
-  }, [contentWidth]);
+    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
+  }, [contentWidth, theme]);
   var useMonthPicker = onMonthChange !== noop$1;
   var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
   var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
@@ -13046,6 +13420,13 @@ var Calendar = function Calendar(_ref) {
   var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
     return date !== undefined;
   }) || maxDate <= lastDateOfMonth;
+  var onLayout = function onLayout(e) {
+    var _e$nativeEvent$layout = e.nativeEvent.layout,
+      width = _e$nativeEvent$layout.width,
+      height = _e$nativeEvent$layout.height;
+    setContentHeight(height);
+    setContentWidth(width);
+  };
   return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
@@ -13090,13 +13471,7 @@ var Calendar = function Calendar(_ref) {
       width: contentWidth
     }
   })) : /*#__PURE__*/React__default.createElement(Box, {
-    onLayout: Platform.OS === 'ios' ? function (e) {
-      var _e$nativeEvent$layout = e.nativeEvent.layout,
-        width = _e$nativeEvent$layout.width,
-        height = _e$nativeEvent$layout.height;
-      setContentHeight(height);
-      setContentWidth(width);
-    } : undefined
+    onLayout: onLayout
   }, /*#__PURE__*/React__default.createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
     return /*#__PURE__*/React__default.createElement(StyledCalendarRowItem, {
       key: day
@@ -13167,6 +13542,9 @@ var Calendar = function Calendar(_ref) {
     }
   })));
 };
+var Calendar$1 = Object.assign(Calendar, {
+  Range: CalendarRange
+});
 
 var StyledDataCard = index$a(View)(function (_ref) {
   var theme = _ref.theme;
@@ -14582,7 +14960,7 @@ var InternalCalendar = function InternalCalendar(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectingDate = _useState4[0],
     setSelectingDate = _useState4[1];
-  return /*#__PURE__*/React__default.createElement(Calendar, {
+  return /*#__PURE__*/React__default.createElement(Calendar$1, {
     testID: "calendar",
     value: selectingDate,
     visibleDate: visibleDate,
@@ -39244,10 +39622,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     inputSize = _React$useState2[0],
     setInputSize = _React$useState2[1];
-  var _React$useState3 = React__default.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    labelWidth = _React$useState4[0],
-    setLabelWidth = _React$useState4[1];
   var focusAnimation = useRef(new Animated.Value(0)).current;
   useEffect(function () {
     Animated.timing(focusAnimation, {
@@ -39268,10 +39642,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
       });
     });
   }, []);
-  var onLabelLayout = useCallback(function (event) {
-    var width = event.nativeEvent.layout.width;
-    setLabelWidth(width);
-  }, []);
   useEffect(function () {
     var removeFocusListener = on(emitter, normalizeEventName('editor-focus'), function () {
       return setIsFocused(true);
@@ -39398,12 +39768,12 @@ var RichTextEditor = function RichTextEditor(_ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [inputSize.height / 2, 0]
+          outputRange: [inputSize.height / 2, theme.space.xsmall]
         })
       }, {
         translateX: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [-inputSize.width / 2 + labelWidth / 2 + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
+          outputRange: [theme.space.medium, -theme.space.xlarge + theme.space.xsmall]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -39412,19 +39782,18 @@ var RichTextEditor = function RichTextEditor(_ref) {
         })
       }]
     }]
-  }, required && /*#__PURE__*/React__default.createElement(StyledAsteriskLabelInsideTextInput, {
+  }, !!label && /*#__PURE__*/React__default.createElement(StyledLabelInsideTextInput, {
     style: {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
+    testID: "input-label",
     themeState: state
-  }, "*"), !!label && /*#__PURE__*/React__default.createElement(StyledLabelInsideTextInput, {
+  }, required && /*#__PURE__*/React__default.createElement(StyledAsteriskLabelInsideTextInput, {
     style: {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
-    testID: "input-label",
-    themeState: state,
-    onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
+    themeState: state
+  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeState: state,
@@ -40033,4 +40402,4 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
-export { Accordion, Alert, AppCue, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, AppCue, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehWorkDarkPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };