"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledWeekdayHeader = exports.StyledWeek = exports.StyledStartDate = exports.StyledSelectorContainer = exports.StyledRoot = exports.StyledPrevButton = exports.StyledNextButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledMonthContainer = exports.StyledMonth = exports.StyledInputWrapper = exports.StyledInputLabel = exports.StyledEndDate = exports.StyledDayLabel = exports.StyledDay = exports.StyledCalendarHeader = exports.StyledCalendarContainer = void 0;

var _styles = require("../styles");

var _dayState = _interopRequireDefault(require("./utils/day-state"));

var _constants = require("./constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

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; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * Main component container element
 */
var StyledInputWrapper = (0, _styles.styled)('div', function (props) {
  var $separateRangeInputs = props.$separateRangeInputs;
  return _objectSpread({
    width: '100%'
  }, $separateRangeInputs ? {
    display: 'flex',
    justifyContent: 'center'
  } : {});
});
exports.StyledInputWrapper = StyledInputWrapper;
StyledInputWrapper.displayName = "StyledInputWrapper";
StyledInputWrapper.displayName = 'StyledInputWrapper';
var StyledInputLabel = (0, _styles.styled)('div', function (_ref) {
  var $theme = _ref.$theme;
  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
    marginBottom: $theme.sizing.scale300
  });
});
exports.StyledInputLabel = StyledInputLabel;
StyledInputLabel.displayName = "StyledInputLabel";
StyledInputLabel.displayName = 'StyledInputLabel';
var StyledStartDate = (0, _styles.styled)('div', function (_ref2) {
  var $theme = _ref2.$theme;
  return {
    width: '100%',
    marginRight: $theme.sizing.scale300
  };
});
exports.StyledStartDate = StyledStartDate;
StyledStartDate.displayName = "StyledStartDate";
StyledStartDate.displayName = 'StyledStartDate'; // eslint-disable-next-line @typescript-eslint/no-unused-vars

var StyledEndDate = (0, _styles.styled)('div', function (_ref3) {
  var $theme = _ref3.$theme;
  return {
    width: '100%'
  };
});
exports.StyledEndDate = StyledEndDate;
StyledEndDate.displayName = "StyledEndDate";
StyledEndDate.displayName = 'StyledEndDate';
/**
 * Main component container element
 */

var StyledRoot = (0, _styles.styled)('div', function (props) {
  var _props$$theme = props.$theme,
      typography = _props$$theme.typography,
      colors = _props$$theme.colors,
      borders = _props$$theme.borders,
      sizing = _props$$theme.sizing;
  return _objectSpread(_objectSpread({}, typography.font200), {}, {
    color: colors.calendarForeground,
    backgroundColor: colors.calendarBackground,
    textAlign: 'center',
    borderTopLeftRadius: borders.surfaceBorderRadius,
    borderTopRightRadius: borders.surfaceBorderRadius,
    borderBottomRightRadius: borders.surfaceBorderRadius,
    borderBottomLeftRadius: borders.surfaceBorderRadius,
    display: 'inline-block',
    paddingTop: sizing.scale500,
    paddingBottom: sizing.scale500,
    paddingLeft: sizing.scale500,
    paddingRight: sizing.scale500
  });
});
exports.StyledRoot = StyledRoot;
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
var StyledMonthContainer = (0, _styles.styled)('div', function (props) {
  var $orientation = props.$orientation;
  return {
    display: 'flex',
    flexDirection: $orientation === _constants.ORIENTATION.vertical ? 'column' : 'row',
    gap: '16px'
  };
});
exports.StyledMonthContainer = StyledMonthContainer;
StyledMonthContainer.displayName = "StyledMonthContainer";
StyledMonthContainer.displayName = 'StyledMonthContainer';
var StyledCalendarContainer = (0, _styles.styled)('div', {});
exports.StyledCalendarContainer = StyledCalendarContainer;
StyledCalendarContainer.displayName = "StyledCalendarContainer";
StyledCalendarContainer.displayName = 'StyledCalendarContainer';
var StyledSelectorContainer = (0, _styles.styled)('div', function (_ref4) {
  var $theme = _ref4.$theme;
  var textAlign = $theme.direction === 'rtl' ? 'right' : 'left';
  return {
    marginBottom: $theme.sizing.scale600,
    paddingLeft: $theme.sizing.scale600,
    paddingRight: $theme.sizing.scale600,
    textAlign: textAlign
  };
});
exports.StyledSelectorContainer = StyledSelectorContainer;
StyledSelectorContainer.displayName = "StyledSelectorContainer";
StyledSelectorContainer.displayName = 'StyledSelectorContainer';
var StyledCalendarHeader = (0, _styles.styled)('div', function (props) {
  var _props$$theme2 = props.$theme,
      typography = _props$$theme2.typography,
      borders = _props$$theme2.borders,
      colors = _props$$theme2.colors,
      sizing = _props$$theme2.sizing,
      $density = props.$density;
  return _objectSpread(_objectSpread({}, $density === _constants.DENSITY.high ? typography.LabelMedium : typography.LabelLarge), {}, {
    boxSizing: 'border-box',
    color: colors.calendarHeaderForeground,
    display: 'grid',
    gridTemplateColumns: '1fr auto auto 1fr',
    alignItems: 'center',
    backgroundColor: colors.calendarHeaderBackground,
    borderTopLeftRadius: borders.surfaceBorderRadius,
    borderTopRightRadius: borders.surfaceBorderRadius,
    borderBottomRightRadius: 0,
    borderBottomLeftRadius: 0,
    // account for the left/right arrow heights
    minHeight: $density === _constants.DENSITY.high ? "calc(".concat(sizing.scale800, " + ").concat(sizing.scale0, ")") : sizing.scale950,
    width: $density === _constants.DENSITY.high ? '100%' : '392px'
  });
});
exports.StyledCalendarHeader = StyledCalendarHeader;
StyledCalendarHeader.displayName = "StyledCalendarHeader";
StyledCalendarHeader.displayName = 'StyledCalendarHeader';
var StyledMonthHeader = (0, _styles.styled)('div', function (props) {
  return {
    display: 'flex',
    justifyContent: 'space-around',
    color: props.$theme.colors.calendarHeaderForeground,
    backgroundColor: props.$theme.colors.calendarHeaderBackground,
    whiteSpace: 'nowrap',
    width: '100%'
  };
});
exports.StyledMonthHeader = StyledMonthHeader;
StyledMonthHeader.displayName = "StyledMonthHeader";
StyledMonthHeader.displayName = 'StyledMonthHeader';
var StyledMonthYearSelectButton = (0, _styles.styled)('button', function (props) {
  var _props$$theme3 = props.$theme,
      typography = _props$$theme3.typography,
      colors = _props$$theme3.colors,
      sizing = _props$$theme3.sizing,
      $isFocusVisible = props.$isFocusVisible,
      $density = props.$density;
  return _objectSpread(_objectSpread({}, $density === _constants.DENSITY.high ? typography.LabelMedium : typography.LabelLarge), {}, {
    alignItems: 'center',
    backgroundColor: 'transparent',
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderTopWidth: 0,
    borderBottomWidth: 0,
    color: colors.calendarHeaderForeground,
    cursor: 'pointer',
    display: 'flex',
    height: $density === _constants.DENSITY.high ? '48px' : '56px',
    paddingTop: $density === _constants.DENSITY.high ? sizing.scale400 : sizing.scale550,
    paddingBottom: $density === _constants.DENSITY.high ? sizing.scale400 : sizing.scale550,
    paddingLeft: $density === _constants.DENSITY.high ? sizing.scale500 : sizing.scale600,
    paddingRight: $density === _constants.DENSITY.high ? sizing.scale500 : sizing.scale600,
    outline: 'none',
    ':focus': {
      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.borderAccent) : 'none'
    }
  });
});
exports.StyledMonthYearSelectButton = StyledMonthYearSelectButton;
StyledMonthYearSelectButton.displayName = "StyledMonthYearSelectButton";
StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
var StyledMonthYearSelectIconContainer = (0, _styles.styled)('span', function (props) {
  var marginDirection = props.$theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
  return _defineProperty({
    alignItems: 'center',
    display: 'flex'
  }, marginDirection, props.$theme.sizing.scale500);
});
exports.StyledMonthYearSelectIconContainer = StyledMonthYearSelectIconContainer;
StyledMonthYearSelectIconContainer.displayName = "StyledMonthYearSelectIconContainer";
StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer'; // @ts-ignore

function getArrowBtnStyle(_ref6) {
  var $theme = _ref6.$theme,
      $disabled = _ref6.$disabled,
      $isFocusVisible = _ref6.$isFocusVisible,
      $density = _ref6.$density,
      $isTrailing = _ref6.$isTrailing;
  return {
    alignItems: 'center',
    boxSizing: 'border-box',
    display: 'flex',
    color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
    cursor: $disabled ? 'default' : 'pointer',
    backgroundColor: 'transparent',
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderTopWidth: 0,
    borderBottomWidth: 0,
    height: '48px',
    justifyContent: 'center',
    justifySelf: $isTrailing ? 'end' : 'start',
    paddingTop: $density === _constants.DENSITY.high ? '6px' : 0,
    paddingBottom: $density === _constants.DENSITY.high ? '6px' : 0,
    paddingLeft: $density === _constants.DENSITY.high ? '6px' : 0,
    paddingRight: $density === _constants.DENSITY.high ? '6px' : 0,
    marginBottom: 0,
    marginTop: 0,
    outline: 'none',
    ':focus': $disabled ? {} : {
      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat($theme.colors.borderAccent) : 'none'
    },
    width: '48px'
  };
}

var StyledPrevButton = (0, _styles.styled)('button', getArrowBtnStyle);
exports.StyledPrevButton = StyledPrevButton;
StyledPrevButton.displayName = "StyledPrevButton";
StyledPrevButton.displayName = 'StyledPrevButton';
var StyledNextButton = (0, _styles.styled)('button', getArrowBtnStyle);
exports.StyledNextButton = StyledNextButton;
StyledNextButton.displayName = "StyledNextButton";
StyledNextButton.displayName = 'StyledNextButton'; // eslint-disable-next-line @typescript-eslint/no-unused-vars

var StyledMonth = (0, _styles.styled)('div', function (props) {
  return {
    display: 'inline-block',
    width: '100%'
  };
});
exports.StyledMonth = StyledMonth;
StyledMonth.displayName = "StyledMonth";
StyledMonth.displayName = 'StyledMonth';
var StyledWeek = (0, _styles.styled)('div', function (props) {
  var sizing = props.$theme.sizing;
  return {
    whiteSpace: 'nowrap',
    display: 'flex',
    marginBottom: sizing.scale0,
    justifyContent: 'space-around',
    width: '100%'
  };
});
exports.StyledWeek = StyledWeek;
StyledWeek.displayName = "StyledWeek";
StyledWeek.displayName = 'StyledWeek'; // @ts-ignore

function generateDayStyles(defaultCode, defaultStyle) {
  var _ref7;

  var codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
  var codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
  return _ref7 = {}, _defineProperty(_ref7, defaultCode, defaultStyle), _defineProperty(_ref7, codeForSM, defaultStyle), _defineProperty(_ref7, codeForEM, defaultStyle), _ref7;
} // eslint-disable-next-line @typescript-eslint/no-explicit-any


function getDayStyles(code, _ref8) {
  var colors = _ref8.colors;
  var undefinedDayStyle = {
    // @ts-ignore
    ':before': {
      content: null
    },
    // @ts-ignore
    ':after': {
      content: null
    }
  };
  var defaultDayStyle = undefinedDayStyle;
  var disabledDateStyle = {
    color: colors.calendarForegroundDisabled,
    // @ts-ignore
    ':before': {
      content: null
    },
    // @ts-ignore
    ':after': {
      content: null
    }
  };
  var outsideMonthDateStyle = {
    color: colors.calendarForegroundDisabled,
    ':before': {
      borderTopStyle: 'none',
      borderBottomStyle: 'none',
      borderLeftStyle: 'none',
      borderRightStyle: 'none',
      backgroundColor: 'transparent'
    },
    ':after': {
      borderTopLeftRadius: '0%',
      borderTopRightRadius: '0%',
      borderBottomLeftRadius: '0%',
      borderBottomRightRadius: '0%',
      borderTopColor: 'transparent',
      borderBottomColor: 'transparent',
      borderRightColor: 'transparent',
      borderLeftColor: 'transparent'
    }
  };
  var highlightedStyle = {
    // @ts-ignore
    ':before': {
      content: null
    }
  };
  var CODE_DISABLED_INDEX = 1;

  if (code && code[CODE_DISABLED_INDEX] === '1') {
    defaultDayStyle = disabledDateStyle;
  } // See the ./utils/day-state.js file for the description of all available states
  // rdhsrSsDeDpSrHpHrRrLsMeMoM
  // '000000000000000'


  var dayStateStyle = Object.assign({}, // highlighted date
  generateDayStyles('001000000000000', {
    color: colors.calendarDayForegroundPseudoSelected
  }), // selected date
  generateDayStyles('000100000000000', {
    color: colors.calendarDayForegroundSelected
  }), // selected highlighted date
  generateDayStyles('001100000000000', {
    color: colors.calendarDayForegroundSelectedHighlighted
  }), // disabled date
  {
    '010000000000000': {
      color: colors.calendarForegroundDisabled,
      ':after': {
        content: null
      }
    }
  }, // disabled highlighted date
  {
    '011000000000000': {
      color: colors.calendarForegroundDisabled,
      ':after': {
        content: null
      }
    }
  }, // date outside of the currently displayed month (when peekNextMonth is true)
  generateDayStyles('000000000000001', outsideMonthDateStyle), // Range Datepicker
  // range: highlighted date outside of a selected range
  generateDayStyles('101000000000000', highlightedStyle), generateDayStyles('101010000000000', highlightedStyle), // range: selected date
  generateDayStyles('100100000000000', {
    color: colors.calendarDayForegroundSelected
  }), // range: selected highlighted date
  // when single date selected in a range
  generateDayStyles('101100000000000', {
    color: colors.calendarDayForegroundSelectedHighlighted,
    ':before': {
      content: null
    }
  }), // range: selected start and end dates are the same
  generateDayStyles('100111100000000', {
    color: colors.calendarDayForegroundSelected,
    ':before': {
      content: null
    }
  }), generateDayStyles('101111100000000', {
    color: colors.calendarDayForegroundSelectedHighlighted,
    ':before': {
      content: null
    }
  }), // range: selected start date
  generateDayStyles('100111000000000', {
    color: colors.calendarDayForegroundSelected
  }), // range: selected end date
  generateDayStyles('100110100000000', {
    color: colors.calendarDayForegroundSelected,
    ':before': {
      left: null,
      right: '50%'
    }
  }), // range: first selected date while a range is highlighted but no second date selected yet
  // highlighted range on the right from the selected
  generateDayStyles('100100001010000', {
    color: colors.calendarDayForegroundSelected
  }), // highlighted range on the left from the selected
  generateDayStyles('100100001001000', {
    color: colors.calendarDayForegroundSelected,
    ':before': {
      left: null,
      right: '50%'
    }
  }), // range: second date in a range that is highlighted but not selected
  generateDayStyles('101000001010000', {
    ':before': {
      left: null,
      right: '50%'
    }
  }), {
    '101000001001000': {}
  }, {
    '101000001001100': {}
  }, {
    '101000001001010': {}
  }, // range: pseudo-selected date
  generateDayStyles('100010010000000', {
    color: colors.calendarDayForegroundPseudoSelected,
    ':before': {
      left: '0',
      width: '100%'
    },
    ':after': {
      content: null
    }
  }), // range: pseudo-highlighted date (in a range where only one date is
  // selected and second date is highlighted)
  {
    '101000001100000': {
      color: colors.calendarDayForegroundPseudoSelected,
      ':before': {
        left: '0',
        width: '100%'
      },
      ':after': {
        content: null
      }
    }
  }, generateDayStyles('100000001100000', {
    color: colors.calendarDayForegroundPseudoSelected,
    ':before': {
      left: '0',
      width: '100%'
    },
    ':after': {
      content: null
    }
  }), // highlighted start date in a range
  generateDayStyles('101111000000000', {
    color: colors.calendarDayForegroundSelectedHighlighted
  }), // highlighted end date in a range
  generateDayStyles('101110100000000', {
    color: colors.calendarDayForegroundSelectedHighlighted,
    ':before': {
      left: null,
      right: '50%'
    }
  }), // range: pseudo-selected date
  generateDayStyles('101010010000000', {
    color: colors.calendarDayForegroundPseudoSelectedHighlighted,
    ':before': {
      left: '0',
      width: '100%'
    }
  }), // Range is true Date outside current month (when peekNextMonth is true)
  generateDayStyles('100000000000001', outsideMonthDateStyle), // peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on right
  generateDayStyles('100000001010001', outsideMonthDateStyle), // peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on left
  generateDayStyles('100000001001001', outsideMonthDateStyle), // peekNextMonth is true, date is outside month, range is selected
  generateDayStyles('100010000000001', outsideMonthDateStyle));
  return dayStateStyle[code] || defaultDayStyle;
}

var StyledDay = (0, _styles.styled)('div', function (props) {
  var $disabled = props.$disabled,
      $isFocusVisible = props.$isFocusVisible,
      $isHighlighted = props.$isHighlighted,
      $peekNextMonth = props.$peekNextMonth,
      $pseudoSelected = props.$pseudoSelected,
      $range = props.$range,
      $selected = props.$selected,
      $outsideMonth = props.$outsideMonth,
      $outsideMonthWithinRange = props.$outsideMonthWithinRange,
      $hasDateLabel = props.$hasDateLabel,
      $density = props.$density,
      $hasLockedBehavior = props.$hasLockedBehavior,
      $selectedInput = props.$selectedInput,
      $value = props.$value,
      _props$$theme4 = props.$theme,
      colors = _props$$theme4.colors,
      typography = _props$$theme4.typography,
      sizing = _props$$theme4.sizing;
  var code = (0, _dayState.default)(props);
  var height;

  if ($hasDateLabel) {
    if ($density === _constants.DENSITY.high) {
      height = '64px';
    } else {
      height = '72px';
    }
  } else {
    if ($density === _constants.DENSITY.high) {
      height = '44px';
    } else {
      height = '52px';
    }
  }

  var circleHeight;

  if ($hasDateLabel) {
    if ($density === _constants.DENSITY.high) {
      circleHeight = '60px';
    } else {
      circleHeight = '70px';
    }
  } else {
    if ($density === _constants.DENSITY.high) {
      circleHeight = '40px';
    } else {
      circleHeight = '48px';
    }
  }

  var _ref9 = Array.isArray($value) ? $value : [$value, null],
      _ref10 = _slicedToArray(_ref9, 2),
      startDate = _ref10[0],
      endDate = _ref10[1];

  var oppositeInputIsPopulated = $selectedInput === _constants.INPUT_ROLE.startDate ? endDate !== null && typeof endDate !== 'undefined' : startDate !== null && typeof startDate !== 'undefined';
  var shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
  return _objectSpread(_objectSpread(_objectSpread({}, $density === _constants.DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium), {}, {
    boxSizing: 'border-box',
    position: 'relative',
    cursor: $disabled || !$peekNextMonth && $outsideMonth ? 'default' : 'pointer',
    color: colors.calendarForeground,
    display: 'inline-block',
    width: $density === _constants.DENSITY.high ? '52px' : '56px',
    height: height,
    // setting lineHeight equal to the contents height to vertically center the text
    lineHeight: $density === _constants.DENSITY.high ? sizing.scale850 : sizing.scale950,
    textAlign: 'center',
    paddingTop: sizing.scale300,
    paddingBottom: sizing.scale300,
    paddingLeft: sizing.scale300,
    paddingRight: sizing.scale300,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    outline: 'none',
    backgroundColor: 'transparent',
    // `transform` creates a stacking context so
    // a z-index used on its' children doesn't
    // interfere with anything outside the component
    transform: 'scale(1)'
  }, getDayStyles(code, props.$theme)), {}, {
    // :after pseudo element defines the selected
    // or highlighted day's circle styles
    ':after': _objectSpread(_objectSpread({
      zIndex: -1,
      content: '""',
      boxSizing: 'border-box',
      display: 'inline-block',
      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.borderAccent) : 'none',
      backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
      height: circleHeight,
      width: $density === _constants.DENSITY.high ? '40px' : '48px',
      position: 'absolute',
      top: '2px',
      left: $density === _constants.DENSITY.high ? '6px' : '4px',
      paddingTop: sizing.scale200,
      paddingBottom: sizing.scale200,
      borderLeftWidth: '2px',
      borderRightWidth: '2px',
      borderTopWidth: '2px',
      borderBottomWidth: '2px',
      borderLeftStyle: 'solid',
      borderRightStyle: 'solid',
      borderTopStyle: 'solid',
      borderBottomStyle: 'solid',
      borderTopColor: colors.borderSelected,
      borderBottomColor: colors.borderSelected,
      borderRightColor: colors.borderSelected,
      borderLeftColor: colors.borderSelected,
      borderTopLeftRadius: $hasDateLabel ? sizing.scale850 : '100%',
      borderTopRightRadius: $hasDateLabel ? sizing.scale850 : '100%',
      borderBottomLeftRadius: $hasDateLabel ? sizing.scale850 : '100%',
      borderBottomRightRadius: $hasDateLabel ? sizing.scale850 : '100%'
    }, getDayStyles(code, props.$theme)[':after'] || {}), $outsideMonthWithinRange ? {
      content: null
    } : {})
  }, shouldHighlightRange ? {
    // :before pseudo element defines a grey background style that extends
    // the selected/highlighted day's circle and spans through a range
    ':before': _objectSpread(_objectSpread({
      zIndex: -1,
      content: '""',
      boxSizing: 'border-box',
      display: 'inline-block',
      backgroundColor: colors.backgroundTertiary,
      position: 'absolute',
      height: circleHeight,
      width: '50%',
      top: '2px',
      left: '50%',
      borderTopWidth: '2px',
      borderBottomWidth: '2px',
      borderLeftWidth: '0',
      borderRightWidth: '0',
      borderTopStyle: 'solid',
      borderBottomStyle: 'solid',
      borderLeftStyle: 'solid',
      borderRightStyle: 'solid',
      borderTopColor: 'transparent',
      borderBottomColor: 'transparent',
      borderLeftColor: 'transparent',
      borderRightColor: 'transparent'
    }, getDayStyles(code, props.$theme)[':before'] || {}), $outsideMonthWithinRange ? {
      backgroundColor: colors.backgroundTertiary,
      left: '0',
      width: '100%',
      content: '""'
    } : {})
  } : // a hack to make flow happy, otherwise it complains about complexity
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  {});
});
exports.StyledDay = StyledDay;
StyledDay.displayName = "StyledDay";
StyledDay.displayName = 'StyledDay';
var StyledDayLabel = (0, _styles.styled)('div', function (props) {
  var _props$$theme5 = props.$theme,
      typography = _props$$theme5.typography,
      colors = _props$$theme5.colors,
      $selected = props.$selected;
  return _objectSpread(_objectSpread({}, typography.ParagraphXSmall), {}, {
    color: $selected ? colors.contentInverseTertiary : colors.contentTertiary
  });
});
exports.StyledDayLabel = StyledDayLabel;
StyledDayLabel.displayName = "StyledDayLabel";
StyledDayLabel.displayName = 'StyledDayLabel';
var StyledWeekdayHeader = (0, _styles.styled)('div', function (props) {
  var _props$$theme6 = props.$theme,
      typography = _props$$theme6.typography,
      colors = _props$$theme6.colors,
      sizing = _props$$theme6.sizing,
      $density = props.$density;
  return _objectSpread(_objectSpread({}, typography.LabelMedium), {}, {
    color: colors.contentTertiary,
    boxSizing: 'border-box',
    position: 'relative',
    cursor: 'default',
    display: 'inline-block',
    width: $density === _constants.DENSITY.high ? '44px' : '52px',
    height: $density === _constants.DENSITY.high ? '44px' : '52px',
    textAlign: 'center',
    // setting lineHeight equal to the contents height to vertically center the text
    lineHeight: sizing.scale900,
    paddingTop: sizing.scale300,
    paddingBottom: sizing.scale300,
    paddingLeft: sizing.scale200,
    paddingRight: sizing.scale200,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    backgroundColor: 'transparent'
  });
});
exports.StyledWeekdayHeader = StyledWeekdayHeader;
StyledWeekdayHeader.displayName = "StyledWeekdayHeader";
StyledWeekdayHeader.displayName = 'StyledWeekdayHeader';