baseui 0.0.0-next-92db958 → 0.0.0-next-42b8311

package/card/styled-components.js

@@ -98,7 +98,6 @@ var Title = (0, _index.styled)('h1', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
     color: $theme.colors.contentPrimary,
-    fontWeight: 500,
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,

package/card/styled-components.js.flow

@@ -72,7 +72,6 @@ export const Thumbnail = styled<{}>('img', ({$theme}) => ({
 export const Title = styled<{}>('h1', ({$theme}) => ({
   ...$theme.typography.HeadingSmall,
   color: $theme.colors.contentPrimary,
-  fontWeight: 500,
   marginLeft: 0,
   marginTop: 0,
   marginRight: 0,

package/datepicker/calendar-header.js

@@ -343,7 +343,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $disabled: isDisabled,
         $order: _this.props.order
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
-        size: '24px',
+        size: 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -413,7 +413,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: _this.state.isFocusVisible,
         $order: _this.props.order
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
-        size: '24px',
+        size: 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -567,7 +567,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: 24
       })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         focusLock: true,
@@ -648,7 +649,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: 24
       })))));
     });
 

package/datepicker/calendar-header.js.flow

@@ -315,7 +315,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
       >
         {isHidden ? null : (
           <PrevButtonIcon
-            size={'24px'}
+            size={36}
             overrides={{Svg: {style: navBtnStyle}}}
             {...prevButtonIconProps}
           />
@@ -388,7 +388,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
       >
         {isHidden ? null : (
           <NextButtonIcon
-            size={'24px'}
+            size={36}
             overrides={{Svg: {style: navBtnStyle}}}
             {...nextButtonIconProps}
           />
@@ -520,6 +520,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
               <ChevronDown
                 title=""
                 overrides={{Svg: {props: {role: 'presentation'}}}}
+                size={24}
               />
             </MonthYearSelectIconContainer>
           </MonthYearSelectButton>
@@ -588,6 +589,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
               <ChevronDown
                 title=""
                 overrides={{Svg: {props: {role: 'presentation'}}}}
+                size={24}
               />
             </MonthYearSelectIconContainer>
           </MonthYearSelectButton>

package/datepicker/styled-components.js

@@ -92,10 +92,10 @@ StyledMonthContainer.displayName = "StyledMonthContainer";
 var StyledCalendarContainer = (0, _index.styled)('div', function (props) {
   var sizing = props.$theme.sizing;
   return {
-    paddingTop: sizing.scale400,
-    paddingBottom: sizing.scale500,
-    paddingLeft: sizing.scale600,
-    paddingRight: sizing.scale600
+    paddingTop: sizing.scale300,
+    paddingBottom: sizing.scale300,
+    paddingLeft: sizing.scale500,
+    paddingRight: sizing.scale500
   };
 });
 exports.StyledCalendarContainer = StyledCalendarContainer;
@@ -122,8 +122,8 @@ var StyledCalendarHeader = (0, _index.styled)('div', function (props) {
     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,
@@ -147,7 +147,7 @@ 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), {}, {
+  return _objectSpread(_objectSpread({}, props.$theme.typography.LabelLarge), {}, {
     alignItems: 'center',
     backgroundColor: 'transparent',
     borderLeftWidth: 0,
@@ -181,6 +181,7 @@ function getArrowBtnStyle(_ref6) {
       $isFocusVisible = _ref6.$isFocusVisible;
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
     cursor: $disabled ? 'default' : 'pointer',
     backgroundColor: 'transparent',
@@ -192,8 +193,6 @@ function getArrowBtnStyle(_ref6) {
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -221,7 +220,7 @@ var StyledWeek = (0, _index.styled)('div', function (props) {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100
+    marginBottom: sizing.scale0
   };
 });
 exports.StyledWeek = StyledWeek;
@@ -442,22 +441,24 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       $hasDateLabel = props.$hasDateLabel,
       _props$$theme3 = props.$theme,
       colors = _props$$theme3.colors,
+      typography = _props$$theme3.typography,
       sizing = _props$$theme3.sizing;
   var code = (0, _dayState.default)(props);
-  return _objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread({}, 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: '50px',
+    height: $hasDateLabel ? '70px' : sizing.scale1200,
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: 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,
@@ -478,10 +479,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%' : '50px',
       width: '100%',
       position: 'absolute',
-      top: 0,
+      top: $hasDateLabel ? 0 : '-1px',
       left: 0,
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
@@ -497,10 +498,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
     } : {})
@@ -554,16 +555,21 @@ 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$$theme5 = props.$theme,
+      typography = _props$$theme5.typography,
+      colors = _props$$theme5.colors,
+      sizing = _props$$theme5.sizing;
+  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: '50px',
+    height: sizing.scale1200,
     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,
@@ -572,9 +578,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

@@ -78,10 +78,10 @@ export const StyledCalendarContainer = styled<SharedStylePropsT>(
       $theme: {sizing},
     } = props;
     return {
-      paddingTop: sizing.scale400,
-      paddingBottom: sizing.scale500,
-      paddingLeft: sizing.scale600,
-      paddingRight: sizing.scale600,
+      paddingTop: sizing.scale300,
+      paddingBottom: sizing.scale300,
+      paddingLeft: sizing.scale500,
+      paddingRight: sizing.scale500,
     };
   },
 );
@@ -108,8 +108,8 @@ export const StyledCalendarHeader = styled<SharedStylePropsT>('div', props => {
     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,
@@ -134,7 +134,7 @@ export const StyledMonthYearSelectButton = styled<{$isFocusVisible: boolean}>(
   'button',
   props => {
     return {
-      ...props.$theme.typography.font200,
+      ...props.$theme.typography.LabelLarge,
       alignItems: 'center',
       backgroundColor: 'transparent',
       borderLeftWidth: 0,
@@ -167,6 +167,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,
@@ -180,8 +181,6 @@ function getArrowBtnStyle({$theme, $disabled, $isFocusVisible}) {
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -221,7 +220,7 @@ export const StyledWeek = styled<SharedStylePropsT>('div', props => {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100,
+    marginBottom: sizing.scale0,
   };
 });
 
@@ -426,24 +425,26 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
     $outsideMonth,
     $outsideMonthWithinRange,
     $hasDateLabel,
-    $theme: {colors, sizing},
+    $theme: {colors, typography, sizing},
   } = props;
   const code = getDayStateCode(props);
   return ({
+    ...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: '50px',
+    height: $hasDateLabel ? '70px' : sizing.scale1200,
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: 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,
@@ -468,10 +469,10 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
         : $pseudoSelected && $isHighlighted
         ? colors.calendarDayBackgroundPseudoSelectedHighlighted
         : colors.calendarBackground,
-      height: '100%',
+      height: $hasDateLabel ? '100%' : '50px',
       width: '100%',
       position: 'absolute',
-      top: 0,
+      top: $hasDateLabel ? 0 : '-1px',
       left: 0,
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
@@ -487,10 +488,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} : {}),
     },
@@ -551,17 +552,20 @@ export const StyledDayLabel = styled<SharedStylePropsT>('div', props => {
 
 export const StyledWeekdayHeader = styled<SharedStylePropsT>('div', props => {
   const {
-    $theme: {sizing},
+    $theme: {typography, colors, sizing},
   } = 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: '50px',
+    height: sizing.scale1200,
     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,
@@ -570,7 +574,6 @@ export const StyledWeekdayHeader = styled<SharedStylePropsT>('div', props => {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent',
   }: {});
 });

package/datepicker/utils/date-helpers.js

@@ -51,7 +51,7 @@ var DateHelpers = function DateHelpers(_adapter) {
           monthNumber: 'M',
           dayOfMonthNumber: 'd',
           weekday: 'EEEE',
-          weekdaymin: 'EEEEE',
+          weekdaymin: 'EEEEEE',
           slashDate: 'yyyy/MM/dd',
           fullOrdinalWeek: 'EEEE, MMMM do yyyy',
           quarter: 'QQQ'

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

@@ -40,7 +40,7 @@ class DateHelpers<T> {
           monthNumber: 'M',
           dayOfMonthNumber: 'd',
           weekday: 'EEEE',
-          weekdaymin: 'EEEEE',
+          weekdaymin: 'EEEEEE',
           slashDate: 'yyyy/MM/dd',
           fullOrdinalWeek: 'EEEE, MMMM do yyyy',
           quarter: 'QQQ',

package/es/card/styled-components.js

@@ -80,7 +80,6 @@ export const Title = styled('h1', ({
   $theme
 }) => ({ ...$theme.typography.HeadingSmall,
   color: $theme.colors.contentPrimary,
-  fontWeight: 500,
   marginLeft: 0,
   marginTop: 0,
   marginRight: 0,

package/es/datepicker/calendar-header.js

@@ -245,7 +245,7 @@ export default class CalendarHeader extends React.Component {
         $disabled: isDisabled,
         $order: this.props.order
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
-        size: '24px',
+        size: 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -304,7 +304,7 @@ export default class CalendarHeader extends React.Component {
         $isFocusVisible: this.state.isFocusVisible,
         $order: this.props.order
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
-        size: '24px',
+        size: 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -421,7 +421,8 @@ export default class CalendarHeader extends React.Component {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: 24
       })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         focusLock: true,
@@ -492,7 +493,8 @@ export default class CalendarHeader extends React.Component {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: 24
       })))));
     });
 

package/es/datepicker/styled-components.js

@@ -84,10 +84,10 @@ export const StyledCalendarContainer = styled('div', props => {
     }
   } = props;
   return {
-    paddingTop: sizing.scale400,
-    paddingBottom: sizing.scale500,
-    paddingLeft: sizing.scale600,
-    paddingRight: sizing.scale600
+    paddingTop: sizing.scale300,
+    paddingBottom: sizing.scale300,
+    paddingLeft: sizing.scale500,
+    paddingRight: sizing.scale500
   };
 });
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
@@ -116,8 +116,8 @@ export const StyledCalendarHeader = styled('div', props => {
     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,
@@ -139,7 +139,7 @@ export const StyledMonthHeader = styled('div', props => {
 });
 StyledMonthHeader.displayName = "StyledMonthHeader";
 export const StyledMonthYearSelectButton = styled('button', props => {
-  return { ...props.$theme.typography.font200,
+  return { ...props.$theme.typography.LabelLarge,
     alignItems: 'center',
     backgroundColor: 'transparent',
     borderLeftWidth: 0,
@@ -173,6 +173,7 @@ function getArrowBtnStyle({
 }) {
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
     cursor: $disabled ? 'default' : 'pointer',
     backgroundColor: 'transparent',
@@ -184,8 +185,6 @@ function getArrowBtnStyle({
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -214,7 +213,7 @@ export const StyledWeek = styled('div', props => {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100
+    marginBottom: sizing.scale0
   };
 });
 StyledWeek.displayName = "StyledWeek";
@@ -438,24 +437,26 @@ export const StyledDay = styled('div', props => {
     $hasDateLabel,
     $theme: {
       colors,
+      typography,
       sizing
     }
   } = props;
   const code = getDayStateCode(props);
-  return {
+  return { ...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: '50px',
+    height: $hasDateLabel ? '70px' : sizing.scale1200,
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: 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,
@@ -476,10 +477,10 @@ export const StyledDay = styled('div', props => {
       display: 'inline-block',
       boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
-      height: '100%',
+      height: $hasDateLabel ? '100%' : '50px',
       width: '100%',
       position: 'absolute',
-      top: 0,
+      top: $hasDateLabel ? 0 : '-1px',
       left: 0,
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
@@ -495,10 +496,10 @@ export const StyledDay = styled('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
@@ -560,18 +561,22 @@ StyledDayLabel.displayName = "StyledDayLabel";
 export const StyledWeekdayHeader = styled('div', props => {
   const {
     $theme: {
+      typography,
+      colors,
       sizing
     }
   } = props;
-  return {
+  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: '50px',
+    height: sizing.scale1200,
     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,
@@ -580,7 +585,6 @@ export const StyledWeekdayHeader = styled('div', props => {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent'
   };
 });

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

@@ -35,7 +35,7 @@ class DateHelpers {
             monthNumber: 'M',
             dayOfMonthNumber: 'd',
             weekday: 'EEEE',
-            weekdaymin: 'EEEEE',
+            weekdaymin: 'EEEEEE',
             slashDate: 'yyyy/MM/dd',
             fullOrdinalWeek: 'EEEE, MMMM do yyyy',
             quarter: 'QQQ'

package/esm/card/styled-components.js

@@ -90,7 +90,6 @@ export var Title = styled('h1', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
     color: $theme.colors.contentPrimary,
-    fontWeight: 500,
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,

package/esm/datepicker/calendar-header.js

@@ -322,7 +322,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $disabled: isDisabled,
         $order: _this.props.order
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
-        size: '24px',
+        size: 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -392,7 +392,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: _this.state.isFocusVisible,
         $order: _this.props.order
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
-        size: '24px',
+        size: 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -546,7 +546,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: 24
       })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         focusLock: true,
@@ -627,7 +628,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: 24
       })))));
     });
 

package/esm/datepicker/styled-components.js

@@ -81,10 +81,10 @@ StyledMonthContainer.displayName = "StyledMonthContainer";
 export var StyledCalendarContainer = styled('div', function (props) {
   var sizing = props.$theme.sizing;
   return {
-    paddingTop: sizing.scale400,
-    paddingBottom: sizing.scale500,
-    paddingLeft: sizing.scale600,
-    paddingRight: sizing.scale600
+    paddingTop: sizing.scale300,
+    paddingBottom: sizing.scale300,
+    paddingLeft: sizing.scale500,
+    paddingRight: sizing.scale500
   };
 });
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
@@ -109,8 +109,8 @@ export var StyledCalendarHeader = styled('div', function (props) {
     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,
@@ -132,7 +132,7 @@ export var StyledMonthHeader = styled('div', function (props) {
 });
 StyledMonthHeader.displayName = "StyledMonthHeader";
 export var StyledMonthYearSelectButton = styled('button', function (props) {
-  return _objectSpread(_objectSpread({}, props.$theme.typography.font200), {}, {
+  return _objectSpread(_objectSpread({}, props.$theme.typography.LabelLarge), {}, {
     alignItems: 'center',
     backgroundColor: 'transparent',
     borderLeftWidth: 0,
@@ -164,6 +164,7 @@ function getArrowBtnStyle(_ref6) {
       $isFocusVisible = _ref6.$isFocusVisible;
   return {
     boxSizing: 'border-box',
+    display: 'flex',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
     cursor: $disabled ? 'default' : 'pointer',
     backgroundColor: 'transparent',
@@ -175,8 +176,6 @@ function getArrowBtnStyle(_ref6) {
     paddingBottom: '0',
     paddingLeft: '0',
     paddingRight: '0',
-    marginLeft: '6px',
-    marginRight: '6px',
     marginBottom: 0,
     marginTop: 0,
     outline: 'none',
@@ -201,7 +200,7 @@ export var StyledWeek = styled('div', function (props) {
   return {
     whiteSpace: 'nowrap',
     display: 'flex',
-    marginBottom: sizing.scale100
+    marginBottom: sizing.scale0
   };
 });
 StyledWeek.displayName = "StyledWeek";
@@ -421,22 +420,24 @@ export var StyledDay = styled('div', function (props) {
       $hasDateLabel = props.$hasDateLabel,
       _props$$theme3 = props.$theme,
       colors = _props$$theme3.colors,
+      typography = _props$$theme3.typography,
       sizing = _props$$theme3.sizing;
   var code = getDayStateCode(props);
-  return _objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread({}, 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: '50px',
+    height: $hasDateLabel ? '70px' : sizing.scale1200,
+    // setting lineHeight equal to the contents height to vertically center the text
+    lineHeight: 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,
@@ -457,10 +458,10 @@ export var StyledDay = 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%' : '50px',
       width: '100%',
       position: 'absolute',
-      top: 0,
+      top: $hasDateLabel ? 0 : '-1px',
       left: 0,
       paddingTop: sizing.scale200,
       paddingBottom: sizing.scale200,
@@ -476,10 +477,10 @@ export var StyledDay = 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
     } : {})
@@ -531,16 +532,21 @@ export var StyledDayLabel = styled('div', function (props) {
 });
 StyledDayLabel.displayName = "StyledDayLabel";
 export var StyledWeekdayHeader = styled('div', function (props) {
-  var sizing = props.$theme.sizing;
-  return {
+  var _props$$theme5 = props.$theme,
+      typography = _props$$theme5.typography,
+      colors = _props$$theme5.colors,
+      sizing = _props$$theme5.sizing;
+  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: '50px',
+    height: sizing.scale1200,
     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,
@@ -549,8 +555,7 @@ export var StyledWeekdayHeader = styled('div', function (props) {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    color: 'inherit',
     backgroundColor: 'transparent'
-  };
+  });
 });
 StyledWeekdayHeader.displayName = "StyledWeekdayHeader";

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

@@ -44,7 +44,7 @@ var DateHelpers = function DateHelpers(_adapter) {
           monthNumber: 'M',
           dayOfMonthNumber: 'd',
           weekday: 'EEEE',
-          weekdaymin: 'EEEEE',
+          weekdaymin: 'EEEEEE',
           slashDate: 'yyyy/MM/dd',
           fullOrdinalWeek: 'EEEE, MMMM do yyyy',
           quarter: 'QQQ'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-92db958",
+  "version": "0.0.0-next-42b8311",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",