baseui 12.1.3 → 13.0.0

package/es/datepicker/datepicker.js

@@ -20,7 +20,7 @@ import DateHelpers from './utils/date-helpers';
 import dateFnsAdapter from './utils/date-fns-adapter';
 import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants';
 export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
-const INPUT_DELIMITER = '–';
+const INPUT_DELIMITER = '–'; // @ts-ignore
 
 const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', inputRole) => {
   let inputValue = newInputValue;
@@ -39,7 +39,7 @@ const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', inpu
 
 export default class Datepicker extends React.Component {
   constructor(props) {
-    super(props);
+    super(props); // @ts-ignore
 
     _defineProperty(this, "calendar", void 0);
 
@@ -86,7 +86,8 @@ export default class Datepicker extends React.Component {
       if (Array.isArray(nextDate) && this.props.range) {
         if (!nextDate[0] || !nextDate[1]) {
           isOpen = true;
-          isPseudoFocused = true;
+          isPseudoFocused = true; // @ts-ignore
+
           calendarFocused = null;
         } else if (nextDate[0] && nextDate[1]) {
           const [start, end] = nextDate;
@@ -135,6 +136,12 @@ export default class Datepicker extends React.Component {
         if (onlyTimeChanged(prevValue, nextDate)) {
           isOpen = true;
         }
+      } // If nextDate is an array but the datepicker is not ranged, we assign
+      // nextDate directly to the Date value to avoid formatting issues
+
+
+      if (Array.isArray(nextDate) && !this.props.range) {
+        nextDate = nextDate[0];
       }
 
       this.setState({
@@ -153,7 +160,8 @@ export default class Datepicker extends React.Component {
         displayValueAtRangeIndex,
         formatDisplayValue,
         range
-      } = this.props;
+      } = this.props; // @ts-ignore
+
       const formatString = this.normalizeDashes(this.props.formatString);
 
       if (typeof displayValueAtRangeIndex === 'number') {
@@ -243,7 +251,8 @@ export default class Datepicker extends React.Component {
 
     _defineProperty(this, "handleInputChange", (event, inputRole) => {
       const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, inputRole) : event.currentTarget.value;
-      const mask = this.getMask();
+      const mask = this.getMask(); // @ts-ignore
+
       const formatString = this.normalizeDashes(this.props.formatString);
 
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
@@ -256,7 +265,7 @@ export default class Datepicker extends React.Component {
 
       this.setState({
         inputValue
-      });
+      }); // @ts-ignore
 
       const parseDateString = dateString => {
         if (formatString === DEFAULT_DATE_FORMAT) {
@@ -288,8 +297,10 @@ export default class Datepicker extends React.Component {
         let date = this.dateHelpers.date(dateString);
         const formatString = this.props.formatString; // Prevent early parsing of value.
         // Eg 25.12.2 will be transformed to 25.12.0002 formatted from date to string
+        // @ts-ignore
 
         if (dateString.replace(/(\s)*/g, '').length < formatString.replace(/(\s)*/g, '').length) {
+          // @ts-ignore
           date = null;
         } else {
           date = parseDateString(dateString);
@@ -346,7 +357,7 @@ export default class Datepicker extends React.Component {
     _defineProperty(this, "handleKeyDown", event => {
       if (!this.state.isOpen && event.keyCode === 40) {
         this.open();
-      } else if (this.state.isOpen && event.key === 'ArrowDown') {
+      } else if (this.state.isOpen && (event.key === 'ArrowDown' || event.key === 'Enter')) {
         // next line prevents the page jump on the initial arrowDown
         event.preventDefault();
         this.focusCalendar();
@@ -374,6 +385,8 @@ export default class Datepicker extends React.Component {
       return this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked && this.props.range && this.props.separateRangeInputs;
     });
 
+    _defineProperty(this, "getPlaceholder", () => this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD` : 'YYYY/MM/DD');
+
     this.dateHelpers = new DateHelpers(props.adapter);
     this.state = {
       calendarFocused: false,
@@ -426,12 +439,12 @@ export default class Datepicker extends React.Component {
       overrides = {}
     } = this.props;
     const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
-    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD` : 'YYYY/MM/DD';
+    const inputLabel = this.props['aria-label'] || `${this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel}`;
     const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(` ${INPUT_DELIMITER} `);
     const value = inputRole === INPUT_ROLE.startDate ? startDate : inputRole === INPUT_ROLE.endDate ? endDate : this.state.inputValue;
     return /*#__PURE__*/React.createElement(InputComponent, _extends({
       "aria-disabled": this.props.disabled,
-      "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
+      "aria-label": inputLabel,
       error: this.props.error,
       positive: this.props.positive,
       "aria-describedby": this.props['aria-describedby'],
@@ -442,9 +455,10 @@ export default class Datepicker extends React.Component {
       value: value,
       onFocus: () => this.open(inputRole),
       onBlur: this.handleInputBlur,
-      onKeyDown: this.handleKeyDown,
+      onKeyDown: this.handleKeyDown // @ts-ignore
+      ,
       onChange: event => this.handleInputChange(event, inputRole),
-      placeholder: placeholder,
+      placeholder: this.getPlaceholder(),
       mask: this.getMask(),
       required: this.props.required,
       clearable: this.props.clearable
@@ -462,6 +476,8 @@ export default class Datepicker extends React.Component {
     const [StartDate, startDateProps] = getOverrides(overrides.StartDate, StyledStartDate);
     const [EndDate, endDateProps] = getOverrides(overrides.EndDate, StyledEndDate);
     const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);
+    const singleDateFormatString = this.props.formatString || DEFAULT_DATE_FORMAT;
+    const formatString = this.props.range && !this.props.separateRangeInputs ? `${singleDateFormatString} ${INPUT_DELIMITER} ${singleDateFormatString}` : singleDateFormatString;
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
       accessibilityType: ACCESSIBILITY_TYPE.none,
       focusLock: false,
@@ -484,6 +500,7 @@ export default class Datepicker extends React.Component {
     }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
       $separateRangeInputs: this.props.range && this.props.separateRangeInputs
     }), this.props.range && this.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), this.renderInputComponent(locale, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), this.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
+      // @ts-ignore
       id: this.props['aria-describedby'],
       style: {
         position: 'fixed',
@@ -498,7 +515,9 @@ export default class Datepicker extends React.Component {
         clip: 'rect(0, 0, 0, 0)',
         clipPath: 'inset(100%)'
       }
-    }, locale.datepicker.screenReaderMessageInput), /*#__PURE__*/React.createElement("p", {
+    }, getInterpolatedString(locale.datepicker.screenReaderMessageInput, {
+      formatString: formatString
+    })), /*#__PURE__*/React.createElement("p", {
       "aria-live": "assertive",
       style: {
         position: 'fixed',
@@ -531,6 +550,7 @@ export default class Datepicker extends React.Component {
 
 _defineProperty(Datepicker, "defaultProps", {
   'aria-describedby': 'datepicker--screenreader--message--input',
+  // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,
   adapter: dateFnsAdapter

package/es/datepicker/day.js

@@ -17,6 +17,7 @@ import { LocaleContext } from '../locale';
 import { isFocusVisible } from '../utils/focusVisible';
 import { INPUT_ROLE } from './constants';
 export default class Day extends React.Component {
+  // @ts-ignore
   constructor(props) {
     super(props);
 
@@ -50,10 +51,14 @@ export default class Day extends React.Component {
         let nextEndDate = null;
 
         if (this.props.selectedInput === INPUT_ROLE.startDate) {
-          nextStartDate = selectedDate;
+          // @ts-ignore
+          nextStartDate = selectedDate; // @ts-ignore
+
           nextEndDate = Array.isArray(currentDate) && currentDate[1] ? currentDate[1] : null;
         } else if (this.props.selectedInput === INPUT_ROLE.endDate) {
-          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null;
+          // @ts-ignore
+          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null; // @ts-ignore
+
           nextEndDate = selectedDate;
         }
 
@@ -373,7 +378,8 @@ export default class Day extends React.Component {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Day, _extends({
-      "aria-label": this.getAriaLabel(sharedProps, locale),
+      "aria-label": this.getAriaLabel(sharedProps, locale) // @ts-ignore
+      ,
       ref: dayElm => {
         this.dayElm = dayElm;
       },
@@ -409,5 +415,6 @@ _defineProperty(Day, "defaultProps", {
   onMouseLeave: () => {},
   overrides: {},
   peekNextMonth: true,
+  // @ts-ignore
   value: null
 });

package/es/datepicker/locale.js

@@ -17,7 +17,7 @@ const locale = {
   pastSixMonths: 'Past 6 Months',
   pastYear: 'Past Year',
   pastTwoYears: 'Past 2 Years',
-  screenReaderMessageInput: 'Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.',
+  screenReaderMessageInput: 'Date format is ${formatString}. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.',
   selectedDate: 'Selected date is ${date}.',
   selectedDateRange: 'Selected date range is from ${startDate} to ${endDate}.',
   selectSecondDatePrompt: 'Select the second date.',

package/es/datepicker/month.js

@@ -14,15 +14,24 @@ import DateHelpers from './utils/date-helpers';
 import { getOverrides } from '../helpers/overrides';
 import { DENSITY } from './constants';
 const defaultProps = {
+  // @ts-ignore
   dateLabel: null,
   density: DENSITY.high,
+  // @ts-ignore
   excludeDates: null,
+  // @ts-ignore
   filterDate: null,
+  // @ts-ignore
   highlightDates: null,
+  // @ts-ignore
   includeDates: null,
+  // @ts-ignore
   locale: null,
+  // @ts-ignore
   maxDate: null,
+  // @ts-ignore
   minDate: null,
+  // @ts-ignore
   month: null,
   adapter: dateFnsAdapter,
   onDayClick: () => {},
@@ -32,6 +41,7 @@ const defaultProps = {
   onDayMouseLeave: () => {},
   overrides: {},
   peekNextMonth: false,
+  // @ts-ignore
   value: null
 };
 const CALENDAR_MAX_ROWS = 6;
@@ -58,7 +68,10 @@ export default class CalendarMonth extends React.Component {
       let isWithinMonth = true;
 
       while (isWithinMonth || this.props.fixedHeight && this.props.peekNextMonth && i < CALENDAR_MAX_ROWS) {
-        weeks.push( /*#__PURE__*/React.createElement(Week, {
+        weeks.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(Week, {
           adapter: this.props.adapter,
           date: currentWeekStart,
           dateLabel: this.props.dateLabel,

package/es/datepicker/stateful-container.js

@@ -11,7 +11,7 @@ import { STATE_CHANGE_TYPE } from './constants';
 
 class StatefulContainer extends React.Component {
   constructor(props) {
-    super(props);
+    super(props); // @ts-ignore
 
     _defineProperty(this, "onChange", data => {
       const {
@@ -56,7 +56,8 @@ class StatefulContainer extends React.Component {
   internalSetState(type, changes) {
     const {
       stateReducer
-    } = this.props;
+    } = this.props; // @ts-ignore
+
     this.setState(prevState => stateReducer(type, changes, prevState));
   }
 

package/es/datepicker/styled-components.js

@@ -57,7 +57,8 @@ export const StyledRoot = styled('div', props => {
     $theme: {
       typography,
       colors,
-      borders
+      borders,
+      sizing
     }
   } = props;
   return { ...typography.font200,
@@ -68,7 +69,11 @@ export const StyledRoot = styled('div', props => {
     borderTopRightRadius: borders.surfaceBorderRadius,
     borderBottomRightRadius: borders.surfaceBorderRadius,
     borderBottomLeftRadius: borders.surfaceBorderRadius,
-    display: 'inline-block'
+    display: 'inline-block',
+    paddingTop: sizing.scale500,
+    paddingBottom: sizing.scale500,
+    paddingLeft: sizing.scale500,
+    paddingRight: sizing.scale500
   };
 });
 StyledRoot.displayName = "StyledRoot";
@@ -79,25 +84,13 @@ export const StyledMonthContainer = styled('div', props => {
   } = props;
   return {
     display: 'flex',
-    flexDirection: $orientation === ORIENTATION.vertical ? 'column' : 'row'
+    flexDirection: $orientation === ORIENTATION.vertical ? 'column' : 'row',
+    gap: '16px'
   };
 });
 StyledMonthContainer.displayName = "StyledMonthContainer";
 StyledMonthContainer.displayName = 'StyledMonthContainer';
-export const StyledCalendarContainer = styled('div', props => {
-  const {
-    $theme: {
-      sizing
-    },
-    $density
-  } = props;
-  return {
-    paddingTop: sizing.scale300,
-    paddingBottom: $density === DENSITY.high ? sizing.scale400 : sizing.scale300,
-    paddingLeft: sizing.scale500,
-    paddingRight: sizing.scale500
-  };
-});
+export const StyledCalendarContainer = styled('div', {});
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
 StyledCalendarContainer.displayName = 'StyledCalendarContainer';
 export const StyledSelectorContainer = styled('div', ({
@@ -124,30 +117,31 @@ export const StyledCalendarHeader = styled('div', props => {
     $density
   } = props;
   return { ...($density === DENSITY.high ? typography.LabelMedium : typography.LabelLarge),
+    boxSizing: 'border-box',
     color: colors.calendarHeaderForeground,
-    display: 'flex',
-    justifyContent: 'space-between',
+    display: 'grid',
+    gridTemplateColumns: '1fr auto auto 1fr',
     alignItems: 'center',
-    paddingTop: sizing.scale600,
-    paddingBottom: sizing.scale300,
-    paddingLeft: sizing.scale600,
-    paddingRight: sizing.scale600,
     backgroundColor: colors.calendarHeaderBackground,
     borderTopLeftRadius: borders.surfaceBorderRadius,
     borderTopRightRadius: borders.surfaceBorderRadius,
     borderBottomRightRadius: 0,
     borderBottomLeftRadius: 0,
     // account for the left/right arrow heights
-    minHeight: $density === DENSITY.high ? `calc(${sizing.scale800} + ${sizing.scale0})` : sizing.scale950
+    minHeight: $density === DENSITY.high ? `calc(${sizing.scale800} + ${sizing.scale0})` : sizing.scale950,
+    width: $density === DENSITY.high ? '100%' : '392px'
   };
 });
 StyledCalendarHeader.displayName = "StyledCalendarHeader";
 StyledCalendarHeader.displayName = 'StyledCalendarHeader';
 export const StyledMonthHeader = styled('div', props => {
   return {
+    display: 'flex',
+    justifyContent: 'space-around',
     color: props.$theme.colors.calendarHeaderForeground,
     backgroundColor: props.$theme.colors.calendarHeaderBackground,
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    width: '100%'
   };
 });
 StyledMonthHeader.displayName = "StyledMonthHeader";
@@ -156,7 +150,8 @@ export const StyledMonthYearSelectButton = styled('button', props => {
   const {
     $theme: {
       typography,
-      colors
+      colors,
+      sizing
     },
     $isFocusVisible,
     $density
@@ -171,6 +166,11 @@ export const StyledMonthYearSelectButton = styled('button', props => {
     color: colors.calendarHeaderForeground,
     cursor: 'pointer',
     display: 'flex',
+    height: $density === DENSITY.high ? '48px' : '56px',
+    paddingTop: $density === DENSITY.high ? sizing.scale400 : sizing.scale550,
+    paddingBottom: $density === DENSITY.high ? sizing.scale400 : sizing.scale550,
+    paddingLeft: $density === DENSITY.high ? sizing.scale500 : sizing.scale600,
+    paddingRight: $density === DENSITY.high ? sizing.scale500 : sizing.scale600,
     outline: 'none',
     ':focus': {
       boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none'
@@ -188,14 +188,17 @@ export const StyledMonthYearSelectIconContainer = styled('span', props => {
   };
 });
 StyledMonthYearSelectIconContainer.displayName = "StyledMonthYearSelectIconContainer";
-StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
+StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer'; // @ts-ignore
 
 function getArrowBtnStyle({
   $theme,
   $disabled,
-  $isFocusVisible
+  $isFocusVisible,
+  $density,
+  $isTrailing
 }) {
   return {
+    alignItems: 'center',
     boxSizing: 'border-box',
     display: 'flex',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
@@ -205,16 +208,20 @@ function getArrowBtnStyle({
     borderRightWidth: 0,
     borderTopWidth: 0,
     borderBottomWidth: 0,
-    paddingTop: '0',
-    paddingBottom: '0',
-    paddingLeft: '0',
-    paddingRight: '0',
+    height: '48px',
+    justifyContent: 'center',
+    justifySelf: $isTrailing ? 'end' : 'start',
+    paddingTop: $density === DENSITY.high ? '6px' : 0,
+    paddingBottom: $density === DENSITY.high ? '6px' : 0,
+    paddingLeft: $density === DENSITY.high ? '6px' : 0,
+    paddingRight: $density === DENSITY.high ? '6px' : 0,
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
     ':focus': $disabled ? {} : {
       boxShadow: $isFocusVisible ? `0 0 0 3px ${$theme.colors.accent}` : 'none'
-    }
+    },
+    width: '48px'
   };
 }
 
@@ -227,7 +234,8 @@ StyledNextButton.displayName = 'StyledNextButton'; // eslint-disable-next-line @
 
 export const StyledMonth = styled('div', props => {
   return {
-    display: 'inline-block'
+    display: 'inline-block',
+    width: '100%'
   };
 });
 StyledMonth.displayName = "StyledMonth";
@@ -241,11 +249,13 @@ export const StyledWeek = styled('div', props => {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale0
+    marginBottom: sizing.scale0,
+    justifyContent: 'space-around',
+    width: '100%'
   };
 });
 StyledWeek.displayName = "StyledWeek";
-StyledWeek.displayName = 'StyledWeek';
+StyledWeek.displayName = 'StyledWeek'; // @ts-ignore
 
 function generateDayStyles(defaultCode, defaultStyle) {
   const codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
@@ -262,9 +272,11 @@ function getDayStyles(code, {
   colors
 }) {
   const undefinedDayStyle = {
+    // @ts-ignore
     ':before': {
       content: null
     },
+    // @ts-ignore
     ':after': {
       content: null
     }
@@ -272,9 +284,11 @@ function getDayStyles(code, {
   let defaultDayStyle = undefinedDayStyle;
   const disabledDateStyle = {
     color: colors.calendarForegroundDisabled,
+    // @ts-ignore
     ':before': {
       content: null
     },
+    // @ts-ignore
     ':after': {
       content: null
     }
@@ -300,6 +314,7 @@ function getDayStyles(code, {
     }
   };
   const highlightedStyle = {
+    // @ts-ignore
     ':before': {
       content: null
     }
@@ -479,15 +494,31 @@ export const StyledDay = styled('div', props => {
 
   if ($hasDateLabel) {
     if ($density === DENSITY.high) {
-      height = '60px';
+      height = '64px';
+    } else {
+      height = '72px';
+    }
+  } else {
+    if ($density === DENSITY.high) {
+      height = '44px';
+    } else {
+      height = '52px';
+    }
+  }
+
+  let circleHeight;
+
+  if ($hasDateLabel) {
+    if ($density === DENSITY.high) {
+      circleHeight = '60px';
     } else {
-      height = '70px';
+      circleHeight = '70px';
     }
   } else {
     if ($density === DENSITY.high) {
-      height = '40px';
+      circleHeight = '40px';
     } else {
-      height = '48px';
+      circleHeight = '48px';
     }
   }
 
@@ -500,10 +531,10 @@ export const StyledDay = styled('div', props => {
     cursor: $disabled || !$peekNextMonth && $outsideMonth ? 'default' : 'pointer',
     color: colors.calendarForeground,
     display: 'inline-block',
-    width: $density === DENSITY.high ? '42px' : '50px',
+    width: $density === DENSITY.high ? '52px' : '56px',
     height: height,
     // setting lineHeight equal to the contents height to vertically center the text
-    lineHeight: $density === DENSITY.high ? sizing.scale700 : sizing.scale900,
+    lineHeight: $density === DENSITY.high ? sizing.scale850 : sizing.scale950,
     textAlign: 'center',
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
@@ -529,11 +560,11 @@ export const StyledDay = styled('div', props => {
       display: 'inline-block',
       boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? `0 0 0 3px ${colors.accent}` : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
-      height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
-      width: '100%',
+      height: circleHeight,
+      width: $density === DENSITY.high ? '40px' : '48px',
       position: 'absolute',
-      top: $hasDateLabel ? 0 : '-1px',
-      left: 0,
+      top: '2px',
+      left: $density === DENSITY.high ? '6px' : '4px',
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
       borderLeftWidth: '2px',
@@ -548,10 +579,10 @@ export const StyledDay = styled('div', props => {
       borderBottomColor: colors.borderSelected,
       borderRightColor: colors.borderSelected,
       borderLeftColor: colors.borderSelected,
-      borderTopLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
-      borderTopRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
-      borderBottomLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
-      borderBottomRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      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
@@ -567,9 +598,9 @@ export const StyledDay = styled('div', props => {
         display: 'inline-block',
         backgroundColor: colors.mono300,
         position: 'absolute',
-        height: '100%',
+        height: circleHeight,
         width: '50%',
-        top: 0,
+        top: '2px',
         left: '50%',
         borderTopWidth: '2px',
         borderBottomWidth: '2px',
@@ -627,8 +658,8 @@ export const StyledWeekdayHeader = styled('div', props => {
     position: 'relative',
     cursor: 'default',
     display: 'inline-block',
-    width: $density === DENSITY.high ? '42px' : '50px',
-    height: $density === DENSITY.high ? '40px' : '48px',
+    width: $density === DENSITY.high ? '44px' : '52px',
+    height: $density === DENSITY.high ? '44px' : '52px',
     textAlign: 'center',
     // setting lineHeight equal to the contents height to vertically center the text
     lineHeight: sizing.scale900,

package/es/datepicker/utils/date-helpers.js

@@ -52,7 +52,7 @@ class DateHelpers {
             quarter: 'Qq'
           }
         }
-      };
+      }; // @ts-ignore
 
       const defaultGetOptions = instance => ({
         formats: instance.formats,
@@ -75,7 +75,8 @@ class DateHelpers {
       const {
         getOptions = defaultGetOptions,
         formats
-      } = adapterMap[className] || adapterMap.DateFnsUtils;
+      } = // @ts-ignore
+      adapterMap[className] || adapterMap.DateFnsUtils;
       const options = getOptions(adapter);
       return new UtilsClass(Object.assign({}, updateOptions(Object.assign({}, options, {
         formats: Object.assign({}, options.formats, formats)

package/es/datepicker/utils/day-state.js

@@ -42,6 +42,10 @@ export default function getDayStateCode(props) {
     $startOfMonth = false,
     $endOfMonth = false,
     $outsideMonth = false
-  } = props;
-  return `${+$range}${+$disabled}${+($isHighlighted || $isHovered)}${+$selected}${+$hasRangeSelected}${+$startDate}${+$endDate}${+$pseudoSelected}${+$hasRangeHighlighted}${+$pseudoHighlighted}${+($hasRangeHighlighted && !$pseudoHighlighted && $hasRangeOnRight)}${+($hasRangeHighlighted && !$pseudoHighlighted && !$hasRangeOnRight)}${+$startOfMonth}${+$endOfMonth}${+$outsideMonth}`;
+  } = props; // @ts-ignore
+
+  return `${+$range}${+$disabled}${+($isHighlighted || $isHovered // @ts-ignore
+  )}${+$selected}${+$hasRangeSelected}${+$startDate}${+$endDate}${+$pseudoSelected}${+$hasRangeHighlighted}${+$pseudoHighlighted}${+($hasRangeHighlighted && !$pseudoHighlighted && $hasRangeOnRight // @ts-ignore
+  )}${+($hasRangeHighlighted && !$pseudoHighlighted && !$hasRangeOnRight // @ts-ignore
+  )}${+$startOfMonth}${+$endOfMonth}${+$outsideMonth}`;
 }

package/es/datepicker/week.js

@@ -22,9 +22,12 @@ export default class Week extends React.Component {
     _defineProperty(this, "dateHelpers", void 0);
 
     _defineProperty(this, "renderDays", () => {
-      const startOfWeek = this.dateHelpers.getStartOfWeek(this.props.date || this.dateHelpers.date(), this.props.locale);
-      const days = [];
-      return days.concat(WEEKDAYS.map(offset => {
+      const startOfWeek = this.dateHelpers.getStartOfWeek(this.props.date || this.dateHelpers.date(), this.props.locale); // @ts-ignore
+
+      const days = []; // @ts-ignore
+
+      return days.concat( // @ts-ignore
+      WEEKDAYS.map(offset => {
         const day = this.dateHelpers.addDays(startOfWeek, offset);
         return (
           /*#__PURE__*/
@@ -81,6 +84,7 @@ export default class Week extends React.Component {
 
 _defineProperty(Week, "defaultProps", {
   adapter: dateFnsAdapter,
+  // @ts-ignore
   highlightedDate: null,
   onDayClick: () => {},
   onDayFocus: () => {},

package/es/dnd-list/list.js

@@ -111,6 +111,7 @@ class StatelessList extends React.Component {
           $isFocusVisible: this.state.isFocusVisible,
           $isOutOfBounds: isOutOfBounds,
           $value: value,
+          // @ts-ignore
           $index: index
         };
         return /*#__PURE__*/React.createElement(ItemLayer, {
@@ -129,6 +130,7 @@ class StatelessList extends React.Component {
         }), /*#__PURE__*/React.createElement(DragHandle, _extends({}, sharedProps, dragHandleProps), /*#__PURE__*/React.createElement(Grab, {
           size: 24
         })), /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), value), removable && /*#__PURE__*/React.createElement(CloseHandle, _extends({}, sharedProps, {
+          // @ts-ignore
           onClick: evt => {
             evt.preventDefault();
             onChange && onChange({