baseui 10.5.0 → 10.7.2

package/datepicker/index.d.ts

@@ -148,6 +148,9 @@ export interface DatepickerOverrides<T> {
   Input?: Override<T>;
   InputWrapper?: Override<T>;
   Popover?: Override<T>;
+  StartDate?: Override<T>;
+  EndDate?: Override<T>;
+  InputLabel?: Override<T>;
 }
 export type DatepickerProps = CalendarProps & {
   'aria-label'?: string;
@@ -166,6 +169,10 @@ export type DatepickerProps = CalendarProps & {
   mask?: string | null;
   mountNode?: HTMLElement;
   onClose?: () => any;
+  onOpen?: () => any;
+  separateRangeInputs?: boolean;
+  startDateLabel?: string;
+  endDateLabel?: string;
 };
 export interface DatepickerState {
   calendarFocused: boolean;
@@ -242,6 +249,7 @@ export type SharedStylePropsT = {
   $isHeader: boolean;
   $isHighlighted: boolean;
   $isHovered: boolean;
+  $month: number;
   $outsideMonth: boolean;
   $pseudoHighlighted: boolean;
   $pseudoSelected: boolean;

package/datepicker/month.js

@@ -19,6 +19,8 @@ var _dateHelpers = _interopRequireDefault(require("./utils/date-helpers.js"));
 
 var _overrides = require("../helpers/overrides.js");
 
+var _constants = require("./constants.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -61,6 +63,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var defaultProps = {
   dateLabel: null,
+  density: _constants.DENSITY.high,
   excludeDates: null,
   filterDate: null,
   highlightDates: null,
@@ -120,6 +123,7 @@ var CalendarMonth = /*#__PURE__*/function (_React$Component) {
           adapter: _this.props.adapter,
           date: currentWeekStart,
           dateLabel: _this.props.dateLabel,
+          density: _this.props.density,
           excludeDates: _this.props.excludeDates,
           filterDate: _this.props.filterDate,
           highlightedDate: _this.props.highlightedDate,

package/datepicker/month.js.flow

@@ -12,9 +12,11 @@ import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import {getOverrides} from '../helpers/overrides.js';
 import type {MonthPropsT} from './types.js';
+import {DENSITY} from './constants.js';
 
 const defaultProps = {
   dateLabel: null,
+  density: DENSITY.high,
   excludeDates: null,
   filterDate: null,
   highlightDates: null,
@@ -81,6 +83,7 @@ export default class CalendarMonth<T = Date> extends React.Component<
           adapter={this.props.adapter}
           date={currentWeekStart}
           dateLabel={this.props.dateLabel}
+          density={this.props.density}
           excludeDates={this.props.excludeDates}
           filterDate={this.props.filterDate}
           highlightedDate={this.props.highlightedDate}

package/datepicker/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledWeekdayHeader = exports.StyledDayLabel = exports.StyledDay = exports.StyledWeek = exports.StyledMonth = exports.StyledNextButton = exports.StyledPrevButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledCalendarHeader = exports.StyledSelectorContainer = exports.StyledCalendarContainer = exports.StyledMonthContainer = exports.StyledRoot = exports.StyledInputWrapper = void 0;
+exports.StyledWeekdayHeader = exports.StyledDayLabel = exports.StyledDay = exports.StyledWeek = exports.StyledMonth = exports.StyledNextButton = exports.StyledPrevButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledCalendarHeader = exports.StyledSelectorContainer = exports.StyledCalendarContainer = exports.StyledMonthContainer = exports.StyledRoot = exports.StyledEndDate = exports.StyledStartDate = exports.StyledInputLabel = exports.StyledInputWrapper = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -22,7 +22,36 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 /**
  * Main component container element
  */
-var StyledInputWrapper = (0, _index.styled)('div', function () {
+var StyledInputWrapper = (0, _index.styled)('div', function (props) {
+  var $separateRangeInputs = props.$separateRangeInputs;
+  return _objectSpread({
+    width: '100%'
+  }, $separateRangeInputs ? {
+    display: 'flex',
+    justifyContent: 'center'
+  } : {});
+});
+exports.StyledInputWrapper = StyledInputWrapper;
+StyledInputWrapper.displayName = "StyledInputWrapper";
+var StyledInputLabel = (0, _index.styled)('div', function (_ref) {
+  var $theme = _ref.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
+    marginBottom: $theme.sizing.scale300
+  });
+});
+exports.StyledInputLabel = StyledInputLabel;
+StyledInputLabel.displayName = "StyledInputLabel";
+var StyledStartDate = (0, _index.styled)('div', function (_ref2) {
+  var $theme = _ref2.$theme;
+  return {
+    width: '100%',
+    marginRight: $theme.sizing.scale300
+  };
+});
+exports.StyledStartDate = StyledStartDate;
+StyledStartDate.displayName = "StyledStartDate";
+var StyledEndDate = (0, _index.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme;
   return {
     width: '100%'
   };
@@ -31,8 +60,8 @@ var StyledInputWrapper = (0, _index.styled)('div', function () {
  * Main component container element
  */
 
-exports.StyledInputWrapper = StyledInputWrapper;
-StyledInputWrapper.displayName = "StyledInputWrapper";
+exports.StyledEndDate = StyledEndDate;
+StyledEndDate.displayName = "StyledEndDate";
 var StyledRoot = (0, _index.styled)('div', function (props) {
   var _props$$theme = props.$theme,
       typography = _props$$theme.typography,
@@ -61,18 +90,19 @@ var StyledMonthContainer = (0, _index.styled)('div', function (props) {
 exports.StyledMonthContainer = StyledMonthContainer;
 StyledMonthContainer.displayName = "StyledMonthContainer";
 var StyledCalendarContainer = (0, _index.styled)('div', function (props) {
-  var sizing = props.$theme.sizing;
+  var sizing = props.$theme.sizing,
+      $density = props.$density;
   return {
-    paddingTop: sizing.scale400,
-    paddingBottom: sizing.scale500,
-    paddingLeft: sizing.scale600,
-    paddingRight: sizing.scale600
+    paddingTop: sizing.scale300,
+    paddingBottom: $density === _constants.DENSITY.high ? sizing.scale400 : sizing.scale300,
+    paddingLeft: sizing.scale500,
+    paddingRight: sizing.scale500
   };
 });
 exports.StyledCalendarContainer = StyledCalendarContainer;
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
-var StyledSelectorContainer = (0, _index.styled)('div', function (_ref) {
-  var $theme = _ref.$theme;
+var StyledSelectorContainer = (0, _index.styled)('div', function (_ref4) {
+  var $theme = _ref4.$theme;
   var textAlign = $theme.direction === 'rtl' ? 'right' : 'left';
   return {
     marginBottom: $theme.sizing.scale600,
@@ -85,16 +115,18 @@ exports.StyledSelectorContainer = StyledSelectorContainer;
 StyledSelectorContainer.displayName = "StyledSelectorContainer";
 var StyledCalendarHeader = (0, _index.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;
-  return {
+      sizing = _props$$theme2.sizing,
+      $density = props.$density;
+  return _objectSpread(_objectSpread({}, $density === _constants.DENSITY.high ? typography.LabelMedium : typography.LabelLarge), {}, {
     color: colors.calendarHeaderForeground,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: sizing.scale500,
-    paddingBottom: sizing.scale500,
+    paddingTop: sizing.scale600,
+    paddingBottom: sizing.scale300,
     paddingLeft: sizing.scale600,
     paddingRight: sizing.scale600,
     backgroundColor: colors.calendarHeaderBackground,
@@ -103,8 +135,8 @@ var StyledCalendarHeader = (0, _index.styled)('div', function (props) {
     borderBottomRightRadius: 0,
     borderBottomLeftRadius: 0,
     // account for the left/right arrow heights
-    minHeight: "calc(".concat(sizing.scale800, " + ").concat(sizing.scale0, ")")
-  };
+    minHeight: $density === _constants.DENSITY.high ? "calc(".concat(sizing.scale800, " + ").concat(sizing.scale0, ")") : sizing.scale950
+  });
 });
 exports.StyledCalendarHeader = StyledCalendarHeader;
 StyledCalendarHeader.displayName = "StyledCalendarHeader";
@@ -118,19 +150,24 @@ var StyledMonthHeader = (0, _index.styled)('div', function (props) {
 exports.StyledMonthHeader = StyledMonthHeader;
 StyledMonthHeader.displayName = "StyledMonthHeader";
 var StyledMonthYearSelectButton = (0, _index.styled)('button', function (props) {
-  return _objectSpread(_objectSpread({}, props.$theme.typography.font200), {}, {
+  var _props$$theme3 = props.$theme,
+      typography = _props$$theme3.typography,
+      colors = _props$$theme3.colors,
+      $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: props.$theme.colors.calendarHeaderForeground,
+    color: colors.calendarHeaderForeground,
     cursor: 'pointer',
     display: 'flex',
     outline: 'none',
     ':focus': {
-      boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : 'none'
+      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none'
     }
   });
 });
@@ -146,12 +183,13 @@ var StyledMonthYearSelectIconContainer = (0, _index.styled)('span', function (pr
 exports.StyledMonthYearSelectIconContainer = StyledMonthYearSelectIconContainer;
 StyledMonthYearSelectIconContainer.displayName = "StyledMonthYearSelectIconContainer";
 
-function getArrowBtnStyle(_ref3) {
-  var $theme = _ref3.$theme,
-      $disabled = _ref3.$disabled,
-      $isFocusVisible = _ref3.$isFocusVisible;
+function getArrowBtnStyle(_ref6) {
+  var $theme = _ref6.$theme,
+      $disabled = _ref6.$disabled,
+      $isFocusVisible = _ref6.$isFocusVisible;
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
     cursor: $disabled ? 'default' : 'pointer',
     backgroundColor: 'transparent',
@@ -163,8 +201,6 @@ function getArrowBtnStyle(_ref3) {
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -192,23 +228,23 @@ var StyledWeek = (0, _index.styled)('div', function (props) {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100
+    marginBottom: sizing.scale0
   };
 });
 exports.StyledWeek = StyledWeek;
 StyledWeek.displayName = "StyledWeek";
 
 function generateDayStyles(defaultCode, defaultStyle) {
-  var _ref4;
+  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 _ref4 = {}, _defineProperty(_ref4, defaultCode, defaultStyle), _defineProperty(_ref4, codeForSM, defaultStyle), _defineProperty(_ref4, codeForEM, defaultStyle), _ref4;
+  return _ref7 = {}, _defineProperty(_ref7, defaultCode, defaultStyle), _defineProperty(_ref7, codeForSM, defaultStyle), _defineProperty(_ref7, codeForEM, defaultStyle), _ref7;
 } // eslint-disable-next-line flowtype/no-weak-types
 
 
-function getDayStyles(code, _ref5) {
-  var colors = _ref5.colors;
+function getDayStyles(code, _ref8) {
+  var colors = _ref8.colors;
   var undefinedDayStyle = {
     ':before': {
       content: null
@@ -411,24 +447,43 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       $outsideMonth = props.$outsideMonth,
       $outsideMonthWithinRange = props.$outsideMonthWithinRange,
       $hasDateLabel = props.$hasDateLabel,
-      _props$$theme3 = props.$theme,
-      colors = _props$$theme3.colors,
-      sizing = _props$$theme3.sizing;
+      $density = props.$density,
+      _props$$theme4 = props.$theme,
+      colors = _props$$theme4.colors,
+      typography = _props$$theme4.typography,
+      sizing = _props$$theme4.sizing;
   var code = (0, _dayState.default)(props);
-  return _objectSpread(_objectSpread({
+  var height;
+
+  if ($hasDateLabel) {
+    if ($density === _constants.DENSITY.high) {
+      height = '60px';
+    } else {
+      height = '70px';
+    }
+  } else {
+    if ($density === _constants.DENSITY.high) {
+      height = '40px';
+    } else {
+      height = '48px';
+    }
+  }
+
+  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: sizing.scale1000,
-    height: $hasDateLabel ? '60px' : sizing.scale1000,
-    lineHeight: sizing.scale800,
+    width: $density === _constants.DENSITY.high ? '42px' : '50px',
+    height: height,
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: $density === _constants.DENSITY.high ? sizing.scale700 : sizing.scale900,
     textAlign: 'center',
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
-    paddingLeft: sizing.scale200,
-    paddingRight: sizing.scale200,
+    paddingLeft: sizing.scale300,
+    paddingRight: sizing.scale300,
     marginTop: 0,
     marginBottom: 0,
     marginLeft: 0,
@@ -449,10 +504,10 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       display: 'inline-block',
       boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
-      height: '100%',
+      height: $hasDateLabel ? '100%' : $density === _constants.DENSITY.high ? '42px' : '50px',
       width: '100%',
       position: 'absolute',
-      top: 0,
+      top: $hasDateLabel ? 0 : '-1px',
       left: 0,
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
@@ -468,10 +523,10 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       borderBottomColor: colors.borderSelected,
       borderRightColor: colors.borderSelected,
       borderLeftColor: colors.borderSelected,
-      borderTopLeftRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderTopRightRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderBottomLeftRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderBottomRightRadius: $hasDateLabel ? sizing.scale700 : '100%'
+      borderTopLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderTopRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderBottomLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderBottomRightRadius: $hasDateLabel ? sizing.scale800 : '100%'
     }, getDayStyles(code, props.$theme)[':after'] || {}), $outsideMonthWithinRange ? {
       content: null
     } : {})
@@ -514,9 +569,9 @@ var StyledDay = (0, _index.styled)('div', function (props) {
 exports.StyledDay = StyledDay;
 StyledDay.displayName = "StyledDay";
 var StyledDayLabel = (0, _index.styled)('div', function (props) {
-  var _props$$theme4 = props.$theme,
-      typography = _props$$theme4.typography,
-      colors = _props$$theme4.colors,
+  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
@@ -525,16 +580,22 @@ var StyledDayLabel = (0, _index.styled)('div', function (props) {
 exports.StyledDayLabel = StyledDayLabel;
 StyledDayLabel.displayName = "StyledDayLabel";
 var StyledWeekdayHeader = (0, _index.styled)('div', function (props) {
-  var sizing = props.$theme.sizing;
-  return {
+  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: sizing.scale1000,
-    height: sizing.scale1000,
-    lineHeight: sizing.scale800,
+    width: $density === _constants.DENSITY.high ? '42px' : '50px',
+    height: $density === _constants.DENSITY.high ? '40px' : '48px',
     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,
@@ -543,9 +604,8 @@ var StyledWeekdayHeader = (0, _index.styled)('div', function (props) {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent'
-  };
+  });
 });
 exports.StyledWeekdayHeader = StyledWeekdayHeader;
 StyledWeekdayHeader.displayName = "StyledWeekdayHeader";

package/datepicker/styled-components.js.flow

@@ -8,12 +8,36 @@ LICENSE file in the root directory of this source tree.
 import {styled} from '../styles/index.js';
 import getDayStateCode from './utils/day-state.js';
 import type {SharedStylePropsT, CalendarPropsT} from './types.js';
-import {ORIENTATION} from './constants.js';
+import {ORIENTATION, DENSITY} from './constants.js';
 
 /**
  * Main component container element
  */
-export const StyledInputWrapper = styled<SharedStylePropsT>('div', () => ({
+export const StyledInputWrapper = styled<{
+  ...SharedStylePropsT,
+  $separateRangeInputs: boolean,
+}>('div', props => {
+  const {$separateRangeInputs} = props;
+
+  return {
+    width: '100%',
+    ...($separateRangeInputs
+      ? {display: 'flex', justifyContent: 'center'}
+      : {}),
+  };
+});
+
+export const StyledInputLabel = styled<{}>('div', ({$theme}) => ({
+  ...$theme.typography.LabelMedium,
+  marginBottom: $theme.sizing.scale300,
+}));
+
+export const StyledStartDate = styled<{}>('div', ({$theme}) => ({
+  width: '100%',
+  marginRight: $theme.sizing.scale300,
+}));
+
+export const StyledEndDate = styled<{}>('div', ({$theme}) => ({
   width: '100%',
 }));
 
@@ -52,12 +76,14 @@ export const StyledCalendarContainer = styled<SharedStylePropsT>(
   props => {
     const {
       $theme: {sizing},
+      $density,
     } = props;
     return {
-      paddingTop: sizing.scale400,
-      paddingBottom: sizing.scale500,
-      paddingLeft: sizing.scale600,
-      paddingRight: sizing.scale600,
+      paddingTop: sizing.scale300,
+      paddingBottom:
+        $density === DENSITY.high ? sizing.scale400 : sizing.scale300,
+      paddingLeft: sizing.scale500,
+      paddingRight: sizing.scale500,
     };
   },
 );
@@ -77,15 +103,19 @@ export const StyledSelectorContainer = styled<SharedStylePropsT>(
 
 export const StyledCalendarHeader = styled<SharedStylePropsT>('div', props => {
   const {
-    $theme: {borders, colors, sizing},
+    $theme: {typography, borders, colors, sizing},
+    $density,
   } = props;
   return {
+    ...($density === DENSITY.high
+      ? typography.LabelMedium
+      : typography.LabelLarge),
     color: colors.calendarHeaderForeground,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: sizing.scale500,
-    paddingBottom: sizing.scale500,
+    paddingTop: sizing.scale600,
+    paddingBottom: sizing.scale300,
     paddingLeft: sizing.scale600,
     paddingRight: sizing.scale600,
     backgroundColor: colors.calendarHeaderBackground,
@@ -94,7 +124,10 @@ export const StyledCalendarHeader = styled<SharedStylePropsT>('div', props => {
     borderBottomRightRadius: 0,
     borderBottomLeftRadius: 0,
     // account for the left/right arrow heights
-    minHeight: `calc(${sizing.scale800} + ${sizing.scale0})`,
+    minHeight:
+      $density === DENSITY.high
+        ? `calc(${sizing.scale800} + ${sizing.scale0})`
+        : sizing.scale950,
   };
 });
 
@@ -106,25 +139,30 @@ export const StyledMonthHeader = styled<SharedStylePropsT>('div', props => {
   };
 });
 
-export const StyledMonthYearSelectButton = styled<{$isFocusVisible: boolean}>(
+export const StyledMonthYearSelectButton = styled<SharedStylePropsT>(
   'button',
   props => {
+    const {
+      $theme: {typography, colors},
+      $isFocusVisible,
+      $density,
+    } = props;
     return {
-      ...props.$theme.typography.font200,
+      ...($density === DENSITY.high
+        ? typography.LabelMedium
+        : typography.LabelLarge),
       alignItems: 'center',
       backgroundColor: 'transparent',
       borderLeftWidth: 0,
       borderRightWidth: 0,
       borderTopWidth: 0,
       borderBottomWidth: 0,
-      color: props.$theme.colors.calendarHeaderForeground,
+      color: colors.calendarHeaderForeground,
       cursor: 'pointer',
       display: 'flex',
       outline: 'none',
       ':focus': {
-        boxShadow: props.$isFocusVisible
-          ? `0 0 0 3px ${props.$theme.colors.accent}`
-          : 'none',
+        boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
       },
     };
   },
@@ -143,6 +181,7 @@ export const StyledMonthYearSelectIconContainer = styled<{}>('span', props => {
 function getArrowBtnStyle({$theme, $disabled, $isFocusVisible}) {
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled
       ? $theme.colors.calendarHeaderForegroundDisabled
       : $theme.colors.calendarHeaderForeground,
@@ -156,8 +195,6 @@ function getArrowBtnStyle({$theme, $disabled, $isFocusVisible}) {
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -197,7 +234,7 @@ export const StyledWeek = styled<SharedStylePropsT>('div', props => {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100,
+    marginBottom: sizing.scale0,
   };
 });
 
@@ -402,24 +439,45 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
     $outsideMonth,
     $outsideMonthWithinRange,
     $hasDateLabel,
-    $theme: {colors, sizing},
+    $density,
+    $theme: {colors, typography, sizing},
   } = props;
   const code = getDayStateCode(props);
+
+  let height;
+  if ($hasDateLabel) {
+    if ($density === DENSITY.high) {
+      height = '60px';
+    } else {
+      height = '70px';
+    }
+  } else {
+    if ($density === DENSITY.high) {
+      height = '40px';
+    } else {
+      height = '48px';
+    }
+  }
+
   return ({
+    ...($density === DENSITY.high
+      ? typography.ParagraphSmall
+      : typography.ParagraphMedium),
     boxSizing: 'border-box',
     position: 'relative',
     cursor:
       $disabled || (!$peekNextMonth && $outsideMonth) ? 'default' : 'pointer',
     color: colors.calendarForeground,
     display: 'inline-block',
-    width: sizing.scale1000,
-    height: $hasDateLabel ? '60px' : sizing.scale1000,
-    lineHeight: sizing.scale800,
+    width: $density === DENSITY.high ? '42px' : '50px',
+    height: height,
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: $density === DENSITY.high ? sizing.scale700 : sizing.scale900,
     textAlign: 'center',
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
-    paddingLeft: sizing.scale200,
-    paddingRight: sizing.scale200,
+    paddingLeft: sizing.scale300,
+    paddingRight: sizing.scale300,
     marginTop: 0,
     marginBottom: 0,
     marginLeft: 0,
@@ -444,10 +502,14 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
         : $pseudoSelected && $isHighlighted
         ? colors.calendarDayBackgroundPseudoSelectedHighlighted
         : colors.calendarBackground,
-      height: '100%',
+      height: $hasDateLabel
+        ? '100%'
+        : $density === DENSITY.high
+        ? '42px'
+        : '50px',
       width: '100%',
       position: 'absolute',
-      top: 0,
+      top: $hasDateLabel ? 0 : '-1px',
       left: 0,
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
@@ -463,10 +525,10 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
       borderBottomColor: colors.borderSelected,
       borderRightColor: colors.borderSelected,
       borderLeftColor: colors.borderSelected,
-      borderTopLeftRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderTopRightRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderBottomLeftRadius: $hasDateLabel ? sizing.scale700 : '100%',
-      borderBottomRightRadius: $hasDateLabel ? sizing.scale700 : '100%',
+      borderTopLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderTopRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderBottomLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
+      borderBottomRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
       ...(getDayStyles(code, props.$theme)[':after'] || {}),
       ...($outsideMonthWithinRange ? {content: null} : {}),
     },
@@ -527,17 +589,21 @@ export const StyledDayLabel = styled<SharedStylePropsT>('div', props => {
 
 export const StyledWeekdayHeader = styled<SharedStylePropsT>('div', props => {
   const {
-    $theme: {sizing},
+    $theme: {typography, colors, sizing},
+    $density,
   } = props;
   return ({
+    ...typography.LabelMedium,
+    color: colors.contentTertiary,
     boxSizing: 'border-box',
     position: 'relative',
     cursor: 'default',
     display: 'inline-block',
-    width: sizing.scale1000,
-    height: sizing.scale1000,
-    lineHeight: sizing.scale800,
+    width: $density === DENSITY.high ? '42px' : '50px',
+    height: $density === DENSITY.high ? '40px' : '48px',
     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,
@@ -546,7 +612,6 @@ export const StyledWeekdayHeader = styled<SharedStylePropsT>('div', props => {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent',
   }: {});
 });