baseui 12.1.3 → 13.0.0

package/datepicker/styled-components.js

@@ -83,7 +83,8 @@ 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;
+      borders = _props$$theme.borders,
+      sizing = _props$$theme.sizing;
   return _objectSpread(_objectSpread({}, typography.font200), {}, {
     color: colors.calendarForeground,
     backgroundColor: colors.calendarBackground,
@@ -92,7 +93,11 @@ var StyledRoot = (0, _styles.styled)('div', function (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
   });
 });
 exports.StyledRoot = StyledRoot;
@@ -102,22 +107,14 @@ var StyledMonthContainer = (0, _styles.styled)('div', function (props) {
   var $orientation = props.$orientation;
   return {
     display: 'flex',
-    flexDirection: $orientation === _constants.ORIENTATION.vertical ? 'column' : 'row'
+    flexDirection: $orientation === _constants.ORIENTATION.vertical ? 'column' : 'row',
+    gap: '16px'
   };
 });
 exports.StyledMonthContainer = StyledMonthContainer;
 StyledMonthContainer.displayName = "StyledMonthContainer";
 StyledMonthContainer.displayName = 'StyledMonthContainer';
-var StyledCalendarContainer = (0, _styles.styled)('div', function (props) {
-  var sizing = props.$theme.sizing,
-      $density = props.$density;
-  return {
-    paddingTop: sizing.scale300,
-    paddingBottom: $density === _constants.DENSITY.high ? sizing.scale400 : sizing.scale300,
-    paddingLeft: sizing.scale500,
-    paddingRight: sizing.scale500
-  };
-});
+var StyledCalendarContainer = (0, _styles.styled)('div', {});
 exports.StyledCalendarContainer = StyledCalendarContainer;
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
 StyledCalendarContainer.displayName = 'StyledCalendarContainer';
@@ -142,21 +139,19 @@ var StyledCalendarHeader = (0, _styles.styled)('div', function (props) {
       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: '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 === _constants.DENSITY.high ? "calc(".concat(sizing.scale800, " + ").concat(sizing.scale0, ")") : sizing.scale950
+    minHeight: $density === _constants.DENSITY.high ? "calc(".concat(sizing.scale800, " + ").concat(sizing.scale0, ")") : sizing.scale950,
+    width: $density === _constants.DENSITY.high ? '100%' : '392px'
   });
 });
 exports.StyledCalendarHeader = StyledCalendarHeader;
@@ -164,9 +159,12 @@ 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'
+    whiteSpace: 'nowrap',
+    width: '100%'
   };
 });
 exports.StyledMonthHeader = StyledMonthHeader;
@@ -176,6 +174,7 @@ 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), {}, {
@@ -188,6 +187,11 @@ var StyledMonthYearSelectButton = (0, _styles.styled)('button', function (props)
     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.accent) : 'none'
@@ -206,13 +210,16 @@ var StyledMonthYearSelectIconContainer = (0, _styles.styled)('span', function (p
 });
 exports.StyledMonthYearSelectIconContainer = StyledMonthYearSelectIconContainer;
 StyledMonthYearSelectIconContainer.displayName = "StyledMonthYearSelectIconContainer";
-StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
+StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer'; // @ts-ignore
 
 function getArrowBtnStyle(_ref6) {
   var $theme = _ref6.$theme,
       $disabled = _ref6.$disabled,
-      $isFocusVisible = _ref6.$isFocusVisible;
+      $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,
@@ -222,16 +229,20 @@ function getArrowBtnStyle(_ref6) {
     borderRightWidth: 0,
     borderTopWidth: 0,
     borderBottomWidth: 0,
-    paddingTop: '0',
-    paddingBottom: '0',
-    paddingLeft: '0',
-    paddingRight: '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.accent) : 'none'
-    }
+    },
+    width: '48px'
   };
 }
 
@@ -246,7 +257,8 @@ StyledNextButton.displayName = 'StyledNextButton'; // eslint-disable-next-line @
 
 var StyledMonth = (0, _styles.styled)('div', function (props) {
   return {
-    display: 'inline-block'
+    display: 'inline-block',
+    width: '100%'
   };
 });
 exports.StyledMonth = StyledMonth;
@@ -257,12 +269,14 @@ var StyledWeek = (0, _styles.styled)('div', function (props) {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale0
+    marginBottom: sizing.scale0,
+    justifyContent: 'space-around',
+    width: '100%'
   };
 });
 exports.StyledWeek = StyledWeek;
 StyledWeek.displayName = "StyledWeek";
-StyledWeek.displayName = 'StyledWeek';
+StyledWeek.displayName = 'StyledWeek'; // @ts-ignore
 
 function generateDayStyles(defaultCode, defaultStyle) {
   var _ref7;
@@ -276,9 +290,11 @@ function generateDayStyles(defaultCode, defaultStyle) {
 function getDayStyles(code, _ref8) {
   var colors = _ref8.colors;
   var undefinedDayStyle = {
+    // @ts-ignore
     ':before': {
       content: null
     },
+    // @ts-ignore
     ':after': {
       content: null
     }
@@ -286,9 +302,11 @@ function getDayStyles(code, _ref8) {
   var defaultDayStyle = undefinedDayStyle;
   var disabledDateStyle = {
     color: colors.calendarForegroundDisabled,
+    // @ts-ignore
     ':before': {
       content: null
     },
+    // @ts-ignore
     ':after': {
       content: null
     }
@@ -314,6 +332,7 @@ function getDayStyles(code, _ref8) {
     }
   };
   var highlightedStyle = {
+    // @ts-ignore
     ':before': {
       content: null
     }
@@ -490,15 +509,31 @@ var StyledDay = (0, _styles.styled)('div', function (props) {
 
   if ($hasDateLabel) {
     if ($density === _constants.DENSITY.high) {
-      height = '60px';
+      height = '64px';
     } else {
-      height = '70px';
+      height = '72px';
     }
   } else {
     if ($density === _constants.DENSITY.high) {
-      height = '40px';
+      height = '44px';
     } else {
-      height = '48px';
+      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';
     }
   }
 
@@ -515,10 +550,10 @@ var StyledDay = (0, _styles.styled)('div', function (props) {
     cursor: $disabled || !$peekNextMonth && $outsideMonth ? 'default' : 'pointer',
     color: colors.calendarForeground,
     display: 'inline-block',
-    width: $density === _constants.DENSITY.high ? '42px' : '50px',
+    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.scale700 : sizing.scale900,
+    lineHeight: $density === _constants.DENSITY.high ? sizing.scale850 : sizing.scale950,
     textAlign: 'center',
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
@@ -544,11 +579,11 @@ var StyledDay = (0, _styles.styled)('div', function (props) {
       display: 'inline-block',
       boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
-      height: $hasDateLabel ? '100%' : $density === _constants.DENSITY.high ? '42px' : '50px',
-      width: '100%',
+      height: circleHeight,
+      width: $density === _constants.DENSITY.high ? '40px' : '48px',
       position: 'absolute',
-      top: $hasDateLabel ? 0 : '-1px',
-      left: 0,
+      top: '2px',
+      left: $density === _constants.DENSITY.high ? '6px' : '4px',
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
       borderLeftWidth: '2px',
@@ -563,10 +598,10 @@ var StyledDay = (0, _styles.styled)('div', function (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
     } : {})
@@ -580,9 +615,9 @@ var StyledDay = (0, _styles.styled)('div', function (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',
@@ -633,8 +668,8 @@ var StyledWeekdayHeader = (0, _styles.styled)('div', function (props) {
     position: 'relative',
     cursor: 'default',
     display: 'inline-block',
-    width: $density === _constants.DENSITY.high ? '42px' : '50px',
-    height: $density === _constants.DENSITY.high ? '40px' : '48px',
+    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,

package/datepicker/types.d.ts

@@ -3,9 +3,9 @@ import type { Override } from '../helpers/overrides';
 import type { Size } from '../input';
 import type { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants';
 import type { DateIOAdapter } from './utils/types';
-declare type Locale = any;
-export declare type Density = keyof typeof DENSITY;
-export declare type DatepickerOverrides = {
+type Locale = any;
+export type Density = keyof typeof DENSITY;
+export type DatepickerOverrides = {
     Root?: Override;
     /** Override for reused Select component. QuickSelect is **not a styled  element** but a react component that can be replaced */
     QuickSelect?: Override;
@@ -42,8 +42,11 @@ export declare type DatepickerOverrides = {
     StartDate?: Override;
     EndDate?: Override;
     InputLabel?: Override;
+    ButtonDock?: Override;
+    PrimaryButton?: Override;
+    SecondaryButton?: Override;
 };
-export declare type DayProps<T = Date> = {
+export type DayProps<T = Date> = {
     disabled: boolean;
     date: T;
     dateLabel: ((day: T) => React.ReactNode) | undefined | null;
@@ -88,11 +91,11 @@ export declare type DayProps<T = Date> = {
     peekNextMonth: boolean;
     value: T | undefined | null | Array<T | undefined | null>;
 };
-export declare type DayState = {
+export type DayState = {
     isHovered: boolean;
     isFocusVisible: boolean;
 };
-export declare type WeekProps<T = Date> = {
+export type WeekProps<T = Date> = {
     date: T;
     dateLabel: ((date: T) => React.ReactNode) | undefined | null;
     density: Density;
@@ -136,10 +139,10 @@ export declare type WeekProps<T = Date> = {
     hasLockedBehavior: boolean;
     selectedInput?: InputRole;
 };
-export declare type MonthProps<T = Date> = {
+export type MonthProps<T = Date> = {
     fixedHeight?: boolean;
 } & WeekProps<T>;
-export declare type CalendarInternalState<T = Date> = {
+export type CalendarInternalState<T = Date> = {
     highlightedDate: T;
     focused: boolean;
     date: T;
@@ -147,7 +150,7 @@ export declare type CalendarInternalState<T = Date> = {
     rootElement: HTMLElement | undefined | null;
     time: Array<T | undefined | null>;
 };
-export declare type CalendarProps<T = Date> = {
+export type CalendarProps<T = Date> = {
     /** Defines if the calendar is set to be focused on an initial render. */
     autoFocusCalendar?: boolean;
     /** Determines the density of the calendar */
@@ -214,7 +217,7 @@ export declare type CalendarProps<T = Date> = {
     /** Event handler that is called when a selection is made using the quick select menu. */
     onQuickSelectChange?: (option?: QuickSelectOption<T>) => unknown;
     /** Sets the orientation of the calendar when multiple months are displayed */
-    orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
+    orientation?: (typeof ORIENTATION)[keyof typeof ORIENTATION];
     overrides?: DatepickerOverrides;
     /** Defines if dates outside of the range of the current month are displayed. */
     peekNextMonth?: boolean;
@@ -229,17 +232,27 @@ export declare type CalendarProps<T = Date> = {
     fixedHeight?: boolean;
     /** Determines whether user clicked startDate or endDate input to trigger calendar open */
     selectedInput?: InputRole;
+    /** Primary button on the action dock */
+    primaryButton?: {
+        label: React.ReactNode;
+        onClick: () => unknown;
+    };
+    /** Secondary button on the action dock */
+    secondaryButton?: {
+        label: React.ReactNode;
+        onClick: () => unknown;
+    };
 };
-export declare type HeaderProps<T = Date> = CalendarProps<T> & {
+export type HeaderProps<T = Date> = CalendarProps<T> & {
     date: T;
     order: number;
 };
-export declare type QuickSelectOption<T> = {
+export type QuickSelectOption<T> = {
     id: string;
     beginDate: T;
     endDate?: T;
 };
-export declare type DatepickerProps<T = Date> = {
+export type DatepickerProps<T = Date> = {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string | null;
@@ -277,7 +290,7 @@ export declare type DatepickerProps<T = Date> = {
     endDateLabel?: string;
     value?: T | undefined | null | Array<T | undefined | null>;
 } & CalendarProps<T>;
-export declare type SharedStyleProps = {
+export type SharedStyleProps = {
     $date: any;
     $disabled: boolean | undefined | null;
     $density: Density;
@@ -305,19 +318,19 @@ export declare type SharedStyleProps = {
     $order: number | undefined | null;
     $hasDateLabel: boolean | undefined | null;
 };
-export declare type StateChangeType = typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE] | undefined | null;
-export declare type ContainerState<T = Date> = {
+export type StateChangeType = (typeof STATE_CHANGE_TYPE)[keyof typeof STATE_CHANGE_TYPE] | undefined | null;
+export type ContainerState<T = Date> = {
     /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
     value?: T | undefined | null | Array<T | undefined | null>;
     highlightedDate?: T | null;
 };
-export declare type NavigationContainerState<T = Date> = {
+export type NavigationContainerState<T = Date> = {
     highlightedDate?: T | null;
     isActive?: boolean;
     lastHighlightedDate?: T;
 };
-export declare type StateReducer<T = Date> = (stateType: StateChangeType, nextState: ContainerState<T>, currentState: ContainerState<T>) => ContainerState<T>;
-export declare type StatefulContainerProps<Props, T = Date> = {
+export type StateReducer<T = Date> = (stateType: StateChangeType, nextState: ContainerState<T>, currentState: ContainerState<T>) => ContainerState<T>;
+export type StatefulContainerProps<Props, T = Date> = {
     children: (a: Props) => React.ReactNode;
     /** Initial state of an uncontrolled datepicker component. */
     initialState?: ContainerState<T>;
@@ -335,7 +348,7 @@ export declare type StatefulContainerProps<Props, T = Date> = {
     /** Should the date value be stored as an array or single value. */
     range?: boolean;
 };
-export declare type StatefulDatepickerProps<Props, T = Date> = Omit<StatefulContainerProps<Props, T>, 'children'>;
-export declare type InputRole = typeof INPUT_ROLE[keyof typeof INPUT_ROLE] | undefined | null;
-export declare type RangedCalendarBehavior = typeof RANGED_CALENDAR_BEHAVIOR[keyof typeof RANGED_CALENDAR_BEHAVIOR] | undefined | null;
+export type StatefulDatepickerProps<Props, T = Date> = Omit<StatefulContainerProps<Props, T>, 'children'>;
+export type InputRole = (typeof INPUT_ROLE)[keyof typeof INPUT_ROLE] | undefined | null;
+export type RangedCalendarBehavior = (typeof RANGED_CALENDAR_BEHAVIOR)[keyof typeof RANGED_CALENDAR_BEHAVIOR] | undefined | null;
 export {};

package/datepicker/types.js.flow

@@ -66,6 +66,9 @@ export type DatepickerOverridesT = {
   StartDate?: OverrideT,
   EndDate?: OverrideT,
   InputLabel?: OverrideT,
+  ButtonDock?: OverrideT,
+  PrimaryButton?: OverrideT,
+  SecondaryButton?: OverrideT,
 };
 
 export type DayPropsT<T = Date> = {
@@ -209,6 +212,16 @@ export type CalendarPropsT<T = Date> = {
   fixedHeight?: boolean,
   /** Determines whether user clicked startDate or endDate input to trigger calendar open */
   selectedInput?: InputRoleT,
+  /** Primary button on the action dock */
+  primaryButton?: {
+    label: React.Node,
+    onClick: () => mixed,
+  },
+  /** Secondary button on the action dock */
+  secondaryButton?: {
+    label: React.Node,
+    onClick: () => mixed,
+  },
 };
 
 export type HeaderPropsT<T = Date> = CalendarPropsT<T> & {

package/datepicker/utils/calendar-header-helpers.d.ts

@@ -1,9 +1,9 @@
-export declare type Option = {
+export type Option = {
     id: string;
     label: string;
     disabled?: boolean;
 };
-declare type GetMonthItemsArgs = {
+type GetMonthItemsArgs = {
     filterMonthsList: number[] | null;
     formatMonthLabel: (a: number) => string;
 };

package/datepicker/utils/date-helpers.js

@@ -84,7 +84,7 @@ var DateHelpers = /*#__PURE__*/_createClass(function DateHelpers(_adapter) {
           quarter: 'Qq'
         }
       }
-    };
+    }; // @ts-ignore
 
     var defaultGetOptions = function defaultGetOptions(instance) {
       return {
@@ -106,7 +106,8 @@ var DateHelpers = /*#__PURE__*/_createClass(function DateHelpers(_adapter) {
     // in e2e tests down the road, we're going to have
     // to figure that out
 
-    var _ref = adapterMap[className] || adapterMap.DateFnsUtils,
+    var _ref = // @ts-ignore
+    adapterMap[className] || adapterMap.DateFnsUtils,
         _ref$getOptions = _ref.getOptions,
         getOptions = _ref$getOptions === void 0 ? defaultGetOptions : _ref$getOptions,
         formats = _ref.formats;

package/datepicker/utils/day-state.js

@@ -62,6 +62,10 @@ function getDayStateCode(props) {
       _props$$endOfMonth = props.$endOfMonth,
       $endOfMonth = _props$$endOfMonth === void 0 ? false : _props$$endOfMonth,
       _props$$outsideMonth = props.$outsideMonth,
-      $outsideMonth = _props$$outsideMonth === void 0 ? false : _props$$outsideMonth;
-  return "".concat(+$range).concat(+$disabled).concat(+($isHighlighted || $isHovered)).concat(+$selected).concat(+$hasRangeSelected).concat(+$startDate).concat(+$endDate).concat(+$pseudoSelected).concat(+$hasRangeHighlighted).concat(+$pseudoHighlighted).concat(+($hasRangeHighlighted && !$pseudoHighlighted && $hasRangeOnRight)).concat(+($hasRangeHighlighted && !$pseudoHighlighted && !$hasRangeOnRight)).concat(+$startOfMonth).concat(+$endOfMonth).concat(+$outsideMonth);
+      $outsideMonth = _props$$outsideMonth === void 0 ? false : _props$$outsideMonth; // @ts-ignore
+
+  return "".concat(+$range).concat(+$disabled).concat(+($isHighlighted || $isHovered // @ts-ignore
+  )).concat(+$selected).concat(+$hasRangeSelected).concat(+$startDate).concat(+$endDate).concat(+$pseudoSelected).concat(+$hasRangeHighlighted).concat(+$pseudoHighlighted).concat(+($hasRangeHighlighted && !$pseudoHighlighted && $hasRangeOnRight // @ts-ignore
+  )).concat(+($hasRangeHighlighted && !$pseudoHighlighted && !$hasRangeOnRight // @ts-ignore
+  )).concat(+$startOfMonth).concat(+$endOfMonth).concat(+$outsideMonth);
 }

package/datepicker/utils/index.d.ts

@@ -1,4 +1,4 @@
-declare type DirtyDate = Date | number;
+type DirtyDate = Date | number;
 export declare const formatDate: (c: Date, b: string, a?: any) => string;
 export declare const getStartOfWeek: (b: Date, a?: any) => Date;
 export declare const getEndOfWeek: (a: Date) => Date;

package/datepicker/utils/types.d.ts

@@ -1,16 +1,16 @@
-declare type DateValues<T> = T | string | number;
-export declare type DateInput<T> = DateValues<T>;
-declare type Comparison<T> = (value: T, comparing: T) => boolean;
-declare type DateInDateOut<T> = (value: T) => T;
-declare type DateFunc<T> = (a: DateInput<T> | void) => T;
-export declare type AdapterOptions = {
+type DateValues<T> = T | string | number;
+export type DateInput<T> = DateValues<T>;
+type Comparison<T> = (value: T, comparing: T) => boolean;
+type DateInDateOut<T> = (value: T) => T;
+type DateFunc<T> = (a: DateInput<T> | void) => T;
+export type AdapterOptions = {
     locale?: unknown;
     formats?: {
         [key: string]: string;
     };
     instance?: unknown;
 };
-export declare type DateIOAdapter<T> = {
+export type DateIOAdapter<T> = {
     locale?: unknown;
     formats: {
         [key: string]: string;

package/datepicker/week.js

@@ -78,10 +78,13 @@ var Week = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "renderDays", function () {
-      var startOfWeek = _this.dateHelpers.getStartOfWeek(_this.props.date || _this.dateHelpers.date(), _this.props.locale);
+      var startOfWeek = _this.dateHelpers.getStartOfWeek(_this.props.date || _this.dateHelpers.date(), _this.props.locale); // @ts-ignore
 
-      var days = [];
-      return days.concat(_constants.WEEKDAYS.map(function (offset) {
+
+      var days = []; // @ts-ignore
+
+      return days.concat( // @ts-ignore
+      _constants.WEEKDAYS.map(function (offset) {
         var day = _this.dateHelpers.addDays(startOfWeek, offset);
 
         return (
@@ -150,6 +153,7 @@ exports.default = Week;
 
 _defineProperty(Week, "defaultProps", {
   adapter: _dateFnsAdapter.default,
+  // @ts-ignore
   highlightedDate: null,
   onDayClick: function onDayClick() {},
   onDayFocus: function onDayFocus() {},

package/divider/types.d.ts

@@ -1,4 +1,4 @@
 import type { SIZE } from './constants';
-export declare type DividerProps = {
+export type DividerProps = {
     $size?: keyof typeof SIZE;
 };

package/dnd-list/index.d.ts

@@ -8,4 +8,4 @@ export { STATE_CHANGE_TYPE } from './constants';
 export { Root as StyledRoot, List as StyledList, Item as StyledItem, DragHandle as StyledDragHandle, CloseHandle as StyledCloseHandle, Label as StyledLabel, } from './styled-components';
 export * from './types';
 /** @deprecated use SharedStylePropsArg instead. To be removed in future versions.*/
-export declare type SharedStylePropsArgT = SharedStylePropsArg;
+export type SharedStylePropsArgT = SharedStylePropsArg;

package/dnd-list/list.js

@@ -204,6 +204,7 @@ var StatelessList = /*#__PURE__*/function (_React$Component) {
             $isFocusVisible: _this2.state.isFocusVisible,
             $isOutOfBounds: isOutOfBounds,
             $value: value,
+            // @ts-ignore
             $index: index
           };
           return /*#__PURE__*/React.createElement(ItemLayer, {
@@ -222,6 +223,7 @@ var StatelessList = /*#__PURE__*/function (_React$Component) {
           }), /*#__PURE__*/React.createElement(DragHandle, _extends({}, sharedProps, dragHandleProps), /*#__PURE__*/React.createElement(_grab.default, {
             size: 24
           })), /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), value), removable && /*#__PURE__*/React.createElement(CloseHandle, _extends({}, sharedProps, {
+            // @ts-ignore
             onClick: function onClick(evt) {
               evt.preventDefault();
               onChange && onChange({

package/dnd-list/stateful-list-container.js

@@ -75,7 +75,7 @@ var StatefulListContainer = /*#__PURE__*/function (_React$Component) {
       var oldIndex = _ref.oldIndex,
           newIndex = _ref.newIndex,
           targetRect = _ref.targetRect;
-      var newItemsState = newIndex === -1 ? (0, _reactMovable.arrayRemove)(_this.state.items, oldIndex) : (0, _reactMovable.arrayMove)(_this.state.items, oldIndex, newIndex);
+      var newItemsState = newIndex === -1 ? (0, _reactMovable.arrayRemove)(_this.state.items, oldIndex) : (0, _reactMovable.arrayMove)(_this.state.items, oldIndex, newIndex); // @ts-ignore
 
       _this.props.onChange({
         newState: newItemsState,
@@ -95,7 +95,8 @@ var StatefulListContainer = /*#__PURE__*/function (_React$Component) {
   _createClass(StatefulListContainer, [{
     key: "internalSetState",
     value: function internalSetState(type, changes) {
-      var stateReducer = this.props.stateReducer;
+      var stateReducer = this.props.stateReducer; // @ts-ignore
+
       this.setState(function (prevState) {
         return stateReducer(type, changes, prevState);
       });
@@ -112,6 +113,7 @@ var StatefulListContainer = /*#__PURE__*/function (_React$Component) {
 
       return this.props.children(_objectSpread(_objectSpread({}, restProps), {}, {
         items: this.state.items,
+        // @ts-ignore
         onChange: this.onChange
       }));
     }