@elliemae/ds-controlled-form 2.3.0-alpha.9 → 2.3.0-next.11

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -0,0 +1,34 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, useMemo } from 'react';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
+import { DatePicker } from '@elliemae/ds-icons';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { CalendarContext } from './CalendarContext.js';
+import { StyledIconTriggerButton } from './Styleds.js';
+
+var _DatePicker;
+// this is particularly usefull due to how usePopper needs to check the references
+// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
+
+const CalendarIconTrigger = () => {
+  const {
+    handleToggleCalendar,
+    handleSetTriggerRef,
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs,
+    disabled
+  } = useContext(CalendarContext);
+  return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
+    "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
+    variant: BUTTON_VARIANT.DEFAULT,
+    innerRef: handleSetTriggerRef,
+    onClick: handleToggleCalendar,
+    onKeyDown: handlePickerIconKeyDown,
+    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
+    disabled: disabled
+  }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {}))), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
+};
+
+export { CalendarIconTrigger };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarMonthDays.js

@@ -0,0 +1,21 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { CalendarDaysList } from './CalendarDaysList.js';
+import { CalendarContext } from './CalendarContext.js';
+
+const CalendarMonthDays = () => {
+  const {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
+    calendarDaysWrapperRef
+  } = useContext(CalendarContext);
+  return /*#__PURE__*/_jsx(CalendarDaysList, {
+    invisibleFirstDay: invisibleFirstDay,
+    daysMatrixByWeekday: daysMatrixByWeekday,
+    invisibleLastDay: invisibleLastDay,
+    innerRef: calendarDaysWrapperRef
+  });
+};
+
+export { CalendarMonthDays };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWeekDays.js

@@ -0,0 +1,40 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import { StyledWeekDaysListWrapper, StyledWeekDaysHeaderItem } from './Styleds.js';
+
+var _StyledWeekDaysHeader, _StyledWeekDaysHeader2, _StyledWeekDaysHeader3, _StyledWeekDaysHeader4, _StyledWeekDaysHeader5, _StyledWeekDaysHeader6, _StyledWeekDaysHeader7;
+const CalendarWeekDays = /*#__PURE__*/React.memo(() => /*#__PURE__*/_jsx("span", {
+  role: "rowgroup"
+}, void 0, /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
+  role: "row",
+  cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+  rows: ['22px'],
+  py: "xxxs",
+  px: "6px",
+  justifyContent: "space-between",
+  alignItems: "center",
+  isHeader: true
+}, void 0, _StyledWeekDaysHeader || (_StyledWeekDaysHeader = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 1
+}, void 0, "sun")), _StyledWeekDaysHeader2 || (_StyledWeekDaysHeader2 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 2
+}, void 0, "mon")), _StyledWeekDaysHeader3 || (_StyledWeekDaysHeader3 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 3
+}, void 0, "tue")), _StyledWeekDaysHeader4 || (_StyledWeekDaysHeader4 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 4
+}, void 0, "wed")), _StyledWeekDaysHeader5 || (_StyledWeekDaysHeader5 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 5
+}, void 0, "thu")), _StyledWeekDaysHeader6 || (_StyledWeekDaysHeader6 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 6
+}, void 0, "fri")), _StyledWeekDaysHeader7 || (_StyledWeekDaysHeader7 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 7
+}, void 0, "sat")))));
+
+export { CalendarWeekDays };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWrapper.js

@@ -0,0 +1,45 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { CalendarContent } from './CalendarContent.js';
+import { CalendarContext } from './CalendarContext.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _CalendarContent, _CalendarContent2;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const CalendarWrapper = () => {
+  const {
+    setPopperElement,
+    usePopperHelpers: {
+      styles,
+      attributes
+    },
+    setArrowElement,
+    isControllerOnly
+  } = useContext(CalendarContext);
+  if (isControllerOnly) return _CalendarContent || (_CalendarContent = /*#__PURE__*/_jsx(CalendarContent, {}));
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    ref: setPopperElement,
+    style: _objectSpread(_objectSpread({}, styles.popper), {}, {
+      background: 'white',
+      zIndex: 110
+    })
+  }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
+    children: [_CalendarContent2 || (_CalendarContent2 = /*#__PURE__*/_jsx(CalendarContent, {})), /*#__PURE__*/jsx("div", {
+      ref: setArrowElement,
+      style: styles.arrow
+    })]
+  }));
+};
+
+export { CalendarWrapper };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/Day.js

@@ -0,0 +1,135 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, useMemo, useCallback } from 'react';
+import { compareTwoDatesDayEquality, getDayFromDateString, isSameDateMoment, getDateStringFromDay, getDateValuesFromDate } from '../../../utils/dateHelpers.js';
+import { defaultMetaInfo, weekDays } from '../../../utils/constants.js';
+import { getAriaDayFromDateString } from '../../../utils/stringHelpers.js';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import { CalendarContext } from './CalendarContext.js';
+import { StyledDayBtn } from './Styleds.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const displayNone = {
+  display: 'none'
+};
+const Day = _ref => {
+  let {
+    metaDay,
+    colIndex,
+    isInvisible
+  } = _ref;
+  const {
+    day,
+    isCurrMonthDay,
+    isHidden,
+    dayBtnRef,
+    dayAsString
+  } = metaDay;
+  const {
+    handleChangeComposedDateString,
+    dateStringFromProps,
+    props: {
+      getIsDisabledDay,
+      getIsOutOfRangeDay,
+      getIsStartRangeDay,
+      getIsDayInRange,
+      getIsEndRangeDay,
+      preventCloseOnSelection,
+      onMonthChange,
+      onDayChange,
+      onYearChange
+    },
+    latestInteractionRegion,
+    setLatestInteractionRegion
+  } = useContext(ControlledDateTimePickerContext);
+  const {
+    handleDayOnKeyDown,
+    focusedDay,
+    handleFocusMetaDayByDay,
+    isWithTimeWheelToo,
+    closeCalendar,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = useContext(CalendarContext);
+  const isFocusedMetaDay = compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day);
+  const isSelected = useMemo(() => {
+    const selectedDate = getDayFromDateString(dateStringFromProps);
+    return isSameDateMoment(day, selectedDate);
+  }, [dateStringFromProps, day]);
+  const isFocused = latestInteractionRegion === 'calendar-days' && isFocusedMetaDay;
+  const isDisabled = getIsDisabledDay(metaDay.dayAsString);
+  const isOutOfRange = getIsOutOfRangeDay(metaDay.dayAsString);
+  const isStartRangeDay = getIsStartRangeDay(metaDay.dayAsString);
+  const isEndRangeDay = getIsEndRangeDay(metaDay.dayAsString);
+  const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);
+  const handleOnDayClick = useCallback(e => {
+    handleFocusMetaDayByDay(day);
+    tryToFocusCurrentlyDataIsFocusedDay();
+
+    if (!isDisabled && !isOutOfRange) {
+      const newDateString = getDateStringFromDay(day);
+
+      const metaInfo = _objectSpread(_objectSpread({}, defaultMetaInfo), {}, {
+        newDateString
+      });
+
+      const {
+        month,
+        day: dayNumber,
+        year
+      } = getDateValuesFromDate(day);
+      onMonthChange("".concat(month + 1), e, metaInfo);
+      onDayChange("".concat(dayNumber), e, metaInfo);
+      onYearChange("".concat(year), e, metaInfo);
+      handleChangeComposedDateString(newDateString, metaInfo);
+      setLatestInteractionRegion('calendar-days');
+      if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
+    }
+  }, [isDisabled, isOutOfRange, day, onMonthChange, onDayChange, onYearChange, handleChangeComposedDateString, handleFocusMetaDayByDay, tryToFocusCurrentlyDataIsFocusedDay, setLatestInteractionRegion, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
+  const handleOnDayFocus = useCallback(() => {
+    setLatestInteractionRegion('calendar-days');
+  }, [setLatestInteractionRegion]);
+  const dayClassModifiers = useMemo(() => "dayWrapper ".concat(isSelected ? 'selectedDay ' : '').concat(isDisabled ? 'disabledDay ' : '').concat(isOutOfRange ? 'outOfRangeDay ' : '').concat(isFocused ? 'focusedDay ' : '').concat(isStartRangeDay ? 'startRangeDay ' : '').concat(isDayInRange ? 'inRangeDay ' : '').concat(isEndRangeDay ? 'endRangeDay ' : '').concat(isCurrMonthDay ? '' : 'notCurrentMonth'), [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
+  let dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.DAY;
+  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
+  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
+  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;
+  if (isStartRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;
+  if (isEndRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;
+  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    className: dayClassModifiers,
+    style: isHidden ? displayNone : undefined,
+    role: !isInvisible ? 'gridcell' : undefined
+  }, Number.isInteger(colIndex) && {
+    'aria-colindex': colIndex
+  }), {}, {
+    children: /*#__PURE__*/_jsx(StyledDayBtn, {
+      "aria-label": "".concat(getAriaDayFromDateString(dayAsString), ", ").concat(weekDays[metaDay.day.getDay()]),
+      "aria-disabled": isOutOfRange || isDisabled,
+      "aria-hidden": !!isInvisible,
+      buttonType: "raw",
+      size: "m",
+      onClick: handleOnDayClick // DSButton triggers this with "spacebar" and "enter" too...
+      ,
+      onFocus: handleOnDayFocus,
+      onKeyDown: e => {
+        handleDayOnKeyDown(e, metaDay);
+      },
+      innerRef: dayBtnRef,
+      tabIndex: isSelected ? 0 : -1,
+      "data-isfocused": isFocused,
+      "data-testid": dataTestid
+    }, void 0, "".concat(day.getDate()))
+  }));
+};
+
+export { Day };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/Styleds.js

@@ -0,0 +1,347 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const diagonalLine = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral[500];
+});
+const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n"])));
+const backgroundDateRange = {
+  inRange: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return theme.colors.brand[200];
+  }, _ref3 => {
+    let {
+      theme
+    } = _ref3;
+    return theme.colors.brand[200];
+  }),
+  startRange: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme.colors.brand[200];
+  }, _ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return theme.colors.brand[200];
+  }),
+  endRange: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 0 50% 50% 0;\n  "])), _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.colors.brand[200];
+  })
+};
+const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-18gg4kd-0"
+})(["color:", ";width:26px;height:26px;"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.brand['600'];
+});
+const StyledShadowWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-18gg4kd-1"
+})(["", ""], _ref8 => {
+  let {
+    isControllerOnly
+  } = _ref8;
+  return isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);';
+});
+const StyledCalendarWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-18gg4kd-2"
+})(["display:grid;width:260px;background-color:", ";grid-template-rows:auto auto;"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral['000'];
+});
+const StyledHeader = /*#__PURE__*/styled.section.withConfig({
+  componentId: "sc-18gg4kd-3"
+})(["*{margin:0;padding:0;box-sizing:border-box;}display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.space.xxxs;
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.neutral['050'];
+});
+const StyledHeaderButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-18gg4kd-4"
+})(["position:relative;width:28px;height:28px;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.brand[700];
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.brand[200];
+});
+const StyledBody = /*#__PURE__*/styled.section.withConfig({
+  componentId: "sc-18gg4kd-5"
+})(["padding:", ";"], _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space.xxxs;
+});
+const StyledDayBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-18gg4kd-6"
+})(["height:32px;width:32px;border-radius:50%;position:relative;border-width:2px;border-style:solid;border-color:transparent;line-height:1;color:", ";&:hover{cursor:pointer;color:", ";background-color:", ";}&:focus{", "}"], _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.neutral[800];
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.brand[700];
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[200];
+}, focusBorder);
+const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-18gg4kd-7"
+})(["font-size:", ";text-align:center;", ";", ";.dayWrapper.selectedDay,.dayWrapper.startRangeDay,.dayWrapper.endRangeDay{", "{color:", ";font-weight:", ";}&:not(.disabledDay),&:not(.outOfRangeDay){", "{background-color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}}&.focusedDay{", "{color:", ";border-color:", ";}}&.outOfRangeDay.focusedDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.disabledDay,.dayWrapper.outOfRangeDay{", "{color:", ";", " &:before{background-color:", ";}}&.focusedDay{", "{&:after{border:2px solid ", ";}}}}.dayWrapper.focusedDay{", "{", " color:", ";&:after{border:2px solid ", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.notCurrentMonth{", "{color:", ";}&.focusedDay{", "{color:", ";}&.disabledDay,&.outOfRangeDay{", "{color:", ";}&.inRangeDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}}&.selectedDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}.dayWrapper.inRangeDay{", " &.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}&.focusedDay{", "{border-color:", ";}}}}.dayWrapper.startRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay.startRangeDay{background-color:transparent;box-shadow:none;}"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.fontSizes.label[400];
+}, _ref19 => {
+  let {
+    isHeader,
+    theme
+  } = _ref19;
+  return isHeader ? "background: ".concat(theme.colors.neutral['050']) : '';
+}, _ref20 => {
+  let {
+    isHeader
+  } = _ref20;
+  return isHeader ? 'text-transform: capitalize' : '';
+}, StyledDayBtn, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.neutral['000'];
+}, _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.fontWeights.semibold;
+}, StyledDayBtn, _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.colors.brand[700];
+}, StyledDayBtn, _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.colors.neutral['000'];
+}, _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.colors.danger[900];
+}, _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.colors.neutral['000'];
+}, _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.colors.neutral['000'];
+}, _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.colors.neutral[500];
+}, diagonalLine, _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.colors.neutral[500];
+}, StyledDayBtn, _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.colors.danger[900];
+}, StyledDayBtn, focusBorder, _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.colors.brand[600];
+}, _ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.colors.brand[700];
+}, StyledDayBtn, _ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.colors.danger[900];
+}, _ref37 => {
+  let {
+    theme
+  } = _ref37;
+  return theme.colors.danger[900];
+}, StyledDayBtn, _ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.colors.neutral[500];
+}, StyledDayBtn, _ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.colors.brand[600];
+}, StyledDayBtn, _ref40 => {
+  let {
+    theme
+  } = _ref40;
+  return theme.colors.danger[900];
+}, StyledDayBtn, _ref41 => {
+  let {
+    theme
+  } = _ref41;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref42 => {
+  let {
+    theme
+  } = _ref42;
+  return theme.colors.neutral['000'];
+}, backgroundDateRange.inRange, StyledDayBtn, _ref43 => {
+  let {
+    theme
+  } = _ref43;
+  return theme.colors.neutral['000'];
+}, _ref44 => {
+  let {
+    theme
+  } = _ref44;
+  return theme.colors.danger[900];
+}, _ref45 => {
+  let {
+    theme
+  } = _ref45;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref46 => {
+  let {
+    theme
+  } = _ref46;
+  return theme.colors.neutral['000'];
+}, backgroundDateRange.startRange, StyledDayBtn, _ref47 => {
+  let {
+    theme
+  } = _ref47;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref48 => {
+  let {
+    theme
+  } = _ref48;
+  return theme.colors.neutral['000'];
+}, _ref49 => {
+  let {
+    theme
+  } = _ref49;
+  return theme.colors.neutral['000'];
+}, backgroundDateRange.endRange, StyledDayBtn, _ref50 => {
+  let {
+    theme
+  } = _ref50;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref51 => {
+  let {
+    theme
+  } = _ref51;
+  return theme.colors.neutral['000'];
+}, _ref52 => {
+  let {
+    theme
+  } = _ref52;
+  return theme.colors.neutral['000'];
+});
+const StyledWeekDaysHeaderItem = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-18gg4kd-8"
+})(["width:", ";min-width:", ";"], _ref53 => {
+  let {
+    theme
+  } = _ref53;
+  return theme.space.s;
+}, _ref54 => {
+  let {
+    theme
+  } = _ref54;
+  return theme.space.s;
+});
+const CalendarFooterMessage = /*#__PURE__*/styled.footer.withConfig({
+  componentId: "sc-18gg4kd-9"
+})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref55 => {
+  let {
+    theme
+  } = _ref55;
+  return theme.colors.neutral[300];
+}, _ref56 => {
+  let {
+    theme
+  } = _ref56;
+  return theme.space.xxs2;
+}, _ref57 => {
+  let {
+    theme
+  } = _ref57;
+  return theme.space.xxs2;
+}, _ref58 => {
+  let {
+    theme
+  } = _ref58;
+  return theme.colors.danger[900];
+}, _ref59 => {
+  let {
+    theme
+  } = _ref59;
+  return theme.fontWeights.thin;
+}, _ref60 => {
+  let {
+    theme
+  } = _ref60;
+  return theme.fontSizes.microText[200];
+});
+
+export { CalendarFooterMessage, StyledBody, StyledCalendarWrapper, StyledDayBtn, StyledHeader, StyledHeaderButton, StyledIconTriggerButton, StyledShadowWrapper, StyledWeekDaysHeaderItem, StyledWeekDaysListWrapper };