baseui 0.0.0-next-7202ef9 → 0.0.0-next-42ee3cb

package/combobox/combobox.js

@@ -306,7 +306,11 @@ function Combobox(props) {
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+  // Select Component does the same thing
+  , _extends({
+    autoFocus: false,
     isOpen: isOpen,
     overrides: popoverOverrides,
     placement: _index2.PLACEMENT.bottomLeft,

package/combobox/combobox.js.flow

@@ -258,6 +258,10 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
       {...rootProps}
     >
       <OverriddenPopover
+        // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+        // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+        // Select Component does the same thing
+        autoFocus={false}
         isOpen={isOpen}
         overrides={popoverOverrides}
         placement={PLACEMENT.bottomLeft}

package/datepicker/calendar-header.js

@@ -292,8 +292,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var date = _this.getDateProp();
 
-      var _this$props$overrides = _this.props.overrides,
-          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
+      var _this$props3 = _this.props,
+          _this$props3$override = _this$props3.overrides,
+          overrides = _this$props3$override === void 0 ? {} : _this$props3$override,
+          density = _this$props3.density;
 
       var allPrevDaysDisabled = _this.dateHelpers.monthDisabledBefore(date, _this.props);
 
@@ -343,7 +345,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $disabled: isDisabled,
         $order: _this.props.order
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
-        size: 36,
+        size: density === _constants.DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -358,8 +360,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var date = _this.getDateProp();
 
-      var _this$props$overrides2 = _this.props.overrides,
-          overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
+      var _this$props4 = _this.props,
+          _this$props4$override = _this$props4.overrides,
+          overrides = _this$props4$override === void 0 ? {} : _this$props4$override,
+          density = _this$props4.density;
 
       var allNextDaysDisabled = _this.dateHelpers.monthDisabledAfter(date, _this.props);
 
@@ -413,7 +417,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: _this.state.isFocusVisible,
         $order: _this.props.order
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
-        size: 36,
+        size: density === _constants.DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -439,10 +443,11 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var year = _this.dateHelpers.getYear(date);
 
-      var _this$props3 = _this.props,
-          locale = _this$props3.locale,
-          _this$props3$override = _this$props3.overrides,
-          overrides = _this$props3$override === void 0 ? {} : _this$props3$override;
+      var _this$props5 = _this.props,
+          locale = _this$props5.locale,
+          _this$props5$override = _this$props5.overrides,
+          overrides = _this$props5$override === void 0 ? {} : _this$props5$override,
+          density = _this$props5.density;
 
       var _getOverrides9 = (0, _overrides.getOverrides)(overrides.MonthYearSelectButton, _styledComponents.StyledMonthYearSelectButton),
           _getOverrides10 = _slicedToArray(_getOverrides9, 2),
@@ -540,6 +545,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
+        $density: density,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
@@ -568,7 +574,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             }
           }
         },
-        size: 24
+        size: density === _constants.DENSITY.high ? 16 : 24
       })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         focusLock: true,
@@ -622,6 +628,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
+        $density: density,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
@@ -650,7 +657,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             }
           }
         },
-        size: 24
+        size: density === _constants.DENSITY.high ? 16 : 24
       })))));
     });
 
@@ -687,8 +694,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props$overrides3 = this.props.overrides,
-          overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
+      var _this$props6 = this.props,
+          _this$props6$override = _this$props6.overrides,
+          overrides = _this$props6$override === void 0 ? {} : _this$props6$override,
+          density = _this$props6.density;
 
       var _getOverrides17 = (0, _overrides.getOverrides)(overrides.CalendarHeader, _styledComponents.StyledCalendarHeader),
           _getOverrides18 = _slicedToArray(_getOverrides17, 2),
@@ -709,6 +718,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
         return /*#__PURE__*/React.createElement(_index3.LocaleContext.Consumer, null, function (locale) {
           return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CalendarHeader, _extends({}, calendarHeaderProps, {
+            $density: _this2.props.density,
             onFocus: (0, _focusVisible.forkFocus)(calendarHeaderProps, _this2.handleFocus),
             onBlur: (0, _focusVisible.forkBlur)(calendarHeaderProps, _this2.handleBlur)
           }), _this2.renderPreviousMonthButton({
@@ -725,7 +735,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(WeekdayHeader, _extends({
               key: offset,
               alt: _this2.dateHelpers.getWeekdayInLocale(day, _this2.props.locale)
-            }, weekdayHeaderProps), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
+            }, weekdayHeaderProps, {
+              $density: density
+            }), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
           })));
         });
       });

package/datepicker/calendar-header.js.flow

@@ -25,7 +25,7 @@ import {
   StyledMonthYearSelectButton,
   StyledMonthYearSelectIconContainer,
 } from './styled-components.js';
-import {ORIENTATION, WEEKDAYS} from './constants.js';
+import {ORIENTATION, WEEKDAYS, DENSITY} from './constants.js';
 import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
 import type {HeaderPropsT} from './types.js';
 import type {LocaleT} from '../locale/types.js';
@@ -266,7 +266,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
     theme: ThemeT,
   }) => {
     const date = this.getDateProp();
-    const {overrides = {}} = this.props;
+    const {overrides = {}, density} = this.props;
     const allPrevDaysDisabled = this.dateHelpers.monthDisabledBefore(
       date,
       this.props,
@@ -315,7 +315,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
       >
         {isHidden ? null : (
           <PrevButtonIcon
-            size={36}
+            size={density === DENSITY.high ? 24 : 36}
             overrides={{Svg: {style: navBtnStyle}}}
             {...prevButtonIconProps}
           />
@@ -332,7 +332,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
     theme: ThemeT,
   }) => {
     const date = this.getDateProp();
-    const {overrides = {}} = this.props;
+    const {overrides = {}, density} = this.props;
     const allNextDaysDisabled = this.dateHelpers.monthDisabledAfter(
       date,
       this.props,
@@ -388,7 +388,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
       >
         {isHidden ? null : (
           <NextButtonIcon
-            size={36}
+            size={density === DENSITY.high ? 24 : 36}
             overrides={{Svg: {style: navBtnStyle}}}
             {...nextButtonIconProps}
           />
@@ -411,7 +411,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
     const month = this.dateHelpers.getMonth(date);
     const year = this.dateHelpers.getYear(date);
 
-    const {locale, overrides = {}} = this.props;
+    const {locale, overrides = {}, density} = this.props;
     const [MonthYearSelectButton, monthYearSelectButtonProps] = getOverrides(
       overrides.MonthYearSelectButton,
       StyledMonthYearSelectButton,
@@ -496,6 +496,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
             aria-live="polite"
             type="button"
             $isFocusVisible={this.state.isFocusVisible}
+            $density={density}
             onKeyUp={event => {
               if (this.canArrowsOpenDropdown(event)) {
                 this.setState({isMonthDropdownOpen: true});
@@ -520,7 +521,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
               <ChevronDown
                 title=""
                 overrides={{Svg: {props: {role: 'presentation'}}}}
-                size={24}
+                size={density === DENSITY.high ? 16 : 24}
               />
             </MonthYearSelectIconContainer>
           </MonthYearSelectButton>
@@ -565,6 +566,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
             aria-live="polite"
             type="button"
             $isFocusVisible={this.state.isFocusVisible}
+            $density={density}
             onKeyUp={event => {
               if (this.canArrowsOpenDropdown(event)) {
                 this.setState({isYearDropdownOpen: true});
@@ -589,7 +591,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
               <ChevronDown
                 title=""
                 overrides={{Svg: {props: {role: 'presentation'}}}}
-                size={24}
+                size={density === DENSITY.high ? 16 : 24}
               />
             </MonthYearSelectIconContainer>
           </MonthYearSelectButton>
@@ -599,7 +601,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const {overrides = {}, density} = this.props;
     const [CalendarHeader, calendarHeaderProps] = getOverrides(
       overrides.CalendarHeader,
       StyledCalendarHeader,
@@ -625,6 +627,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
               <>
                 <CalendarHeader
                   {...calendarHeaderProps}
+                  $density={this.props.density}
                   onFocus={forkFocus(calendarHeaderProps, this.handleFocus)}
                   onBlur={forkBlur(calendarHeaderProps, this.handleBlur)}
                 >
@@ -646,6 +649,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
                           this.props.locale,
                         )}
                         {...weekdayHeaderProps}
+                        $density={density}
                       >
                         {this.dateHelpers.getWeekdayMinInLocale(
                           day,

package/datepicker/calendar.js

@@ -426,10 +426,13 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           "aria-roledescription": translations.ariaRoleDescCalMonth,
           "aria-multiselectable": _this.props.range || null,
           onKeyDown: _this.onKeyDown
-        }, calendarContainerProps), /*#__PURE__*/React.createElement(_month.default, {
+        }, calendarContainerProps, {
+          $density: _this.props.density
+        }), /*#__PURE__*/React.createElement(_month.default, {
           adapter: _this.props.adapter,
           date: monthDate,
           dateLabel: _this.props.dateLabel,
+          density: _this.props.density,
           excludeDates: _this.props.excludeDates,
           filterDate: _this.props.filterDate,
           highlightedDate: _this.state.highlightedDate,
@@ -711,6 +714,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement(_index2.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(Root, _extends({
+          $density: _this2.props.density,
           "data-baseweb": "calendar",
           role: "application",
           "aria-roledescription": "datepicker",
@@ -742,6 +746,7 @@ exports.default = Calendar;
 _defineProperty(Calendar, "defaultProps", {
   autoFocusCalendar: false,
   dateLabel: null,
+  density: _constants.DENSITY.default,
   excludeDates: null,
   filterDate: null,
   highlightedDate: null,

package/datepicker/calendar.js.flow

@@ -23,7 +23,7 @@ import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
 import type {CalendarPropsT, CalendarInternalState} from './types.js';
-import {ORIENTATION} from './constants.js';
+import {DENSITY, ORIENTATION} from './constants.js';
 
 export default class Calendar<T = Date> extends React.Component<
   CalendarPropsT<T>,
@@ -32,6 +32,7 @@ export default class Calendar<T = Date> extends React.Component<
   static defaultProps: {adapter: DateIOAdapter<Date>} = {
     autoFocusCalendar: false,
     dateLabel: null,
+    density: DENSITY.default,
     excludeDates: null,
     filterDate: null,
     highlightedDate: null,
@@ -442,11 +443,13 @@ export default class Calendar<T = Date> extends React.Component<
           aria-multiselectable={this.props.range || null}
           onKeyDown={this.onKeyDown}
           {...calendarContainerProps}
+          $density={this.props.density}
         >
           <Month
             adapter={this.props.adapter}
             date={monthDate}
             dateLabel={this.props.dateLabel}
+            density={this.props.density}
             excludeDates={this.props.excludeDates}
             filterDate={this.props.filterDate}
             highlightedDate={this.state.highlightedDate}
@@ -643,6 +646,7 @@ export default class Calendar<T = Date> extends React.Component<
       <LocaleContext.Consumer>
         {locale => (
           <Root
+            $density={this.props.density}
             data-baseweb="calendar"
             role="application"
             aria-roledescription="datepicker"

package/datepicker/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_MONTHS = exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
+exports.DENSITY = exports.DEFAULT_MONTHS = exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -35,4 +35,9 @@ exports.STATE_CHANGE_TYPE = STATE_CHANGE_TYPE;
 var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
 exports.WEEKDAYS = WEEKDAYS;
 var DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-exports.DEFAULT_MONTHS = DEFAULT_MONTHS;
+exports.DEFAULT_MONTHS = DEFAULT_MONTHS;
+var DENSITY = {
+  high: 'high',
+  default: 'default'
+};
+exports.DENSITY = DENSITY;

package/datepicker/constants.js.flow

@@ -28,6 +28,11 @@ export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
 
 export const DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
+export const DENSITY = {
+  high: 'high',
+  default: 'default',
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/datepicker/day.js

@@ -345,6 +345,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
       var $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !this.props.peekNextMonth && this.isOutsideOfMonthButWithinRange());
       return {
         $date: date,
+        $density: this.props.density,
         $disabled: this.props.disabled,
         $endDate: Array.isArray(value) && this.props.range && $selected && this.dateHelpers.isSameDay(date, value[1]) || false,
         $hasDateLabel: !!this.props.dateLabel,

package/datepicker/day.js.flow

@@ -291,6 +291,7 @@ export default class Day<T = Date> extends React.Component<
     );
     return {
       $date: date,
+      $density: this.props.density,
       $disabled: this.props.disabled,
       $endDate:
         (Array.isArray(value) &&

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

@@ -90,10 +90,11 @@ 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.scale300,
-    paddingBottom: sizing.scale300,
+    paddingBottom: $density === _constants.DENSITY.high ? sizing.scale400 : sizing.scale300,
     paddingLeft: sizing.scale500,
     paddingRight: sizing.scale500
   };
@@ -114,10 +115,12 @@ 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',
@@ -132,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";
@@ -147,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.LabelLarge), {}, {
+  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'
     }
   });
 });
@@ -439,21 +447,38 @@ 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,
-      typography = _props$$theme3.typography,
-      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(_objectSpread({}, typography.ParagraphMedium), {}, {
+  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: '50px',
-    height: $hasDateLabel ? '70px' : sizing.scale1200,
+    width: $density === _constants.DENSITY.high ? '42px' : '50px',
+    height: height,
     // setting lineHeight equal to the contents height to vertically center the text
-    lineHeight: sizing.scale900,
+    lineHeight: $density === _constants.DENSITY.high ? sizing.scale700 : sizing.scale900,
     textAlign: 'center',
     paddingTop: sizing.scale300,
     paddingBottom: sizing.scale300,
@@ -479,7 +504,7 @@ 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: $hasDateLabel ? '100%' : '50px',
+      height: $hasDateLabel ? '100%' : $density === _constants.DENSITY.high ? '42px' : '50px',
       width: '100%',
       position: 'absolute',
       top: $hasDateLabel ? 0 : '-1px',
@@ -544,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
@@ -555,18 +580,19 @@ var StyledDayLabel = (0, _index.styled)('div', function (props) {
 exports.StyledDayLabel = StyledDayLabel;
 StyledDayLabel.displayName = "StyledDayLabel";
 var StyledWeekdayHeader = (0, _index.styled)('div', function (props) {
-  var _props$$theme5 = props.$theme,
-      typography = _props$$theme5.typography,
-      colors = _props$$theme5.colors,
-      sizing = _props$$theme5.sizing;
+  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: '50px',
-    height: sizing.scale1200,
+    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,