@atlaskit/calendar 12.4.5 → 13.0.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/calendar
 
+## 13.0.1
+
+### Patch Changes
+
+- [`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0f6dd0bc35) - Updated to use typography tokens. There is no expected behaviour or visual change.
+
+## 13.0.0
+
+### Major Changes
+
+- [`642298a54dc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/642298a54dc) - Major changes:
+
+  - Removing support for legacy dark mode.
+
+  Minor changes:
+
+  - Removal of row containers in day of month grid.
+  - Vertically center heading inside the calendar.
+  - Minor changes to visual layout to conform to design system tokens.
+  - Composition change of DOM elements in day of week header.
+  - Remove hardcoded `width: 289px`. Calendar now fills natural width of content.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.4.5
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -19,15 +19,17 @@ var _react2 = require("@emotion/react");
 
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 
-var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
+var _stack = _interopRequireDefault(require("@atlaskit/ds-explorations/stack"));
 
-var _colors = require("@atlaskit/theme/colors");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 
-var _heading = _interopRequireDefault(require("./internal/components/heading"));
+var _header = _interopRequireDefault(require("./internal/components/header"));
 
 var _weekDays = _interopRequireDefault(require("./internal/components/week-days"));
 
@@ -55,38 +57,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var lightWrapperStyles = (0, _react2.css)({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  // TODO Delete this comment after verifying spacing token -> previous value `16`
-  padding: "var(--ds-scale-200, 16px)",
-  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N0, ")"),
-  color: "var(--ds-text, ".concat(_colors.N900, ")"),
-  outline: 'none',
-  userSelect: 'none'
-});
-var darkWrapperStyles = (0, _react2.css)({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  // TODO Delete this comment after verifying spacing token -> previous value `16`
-  padding: "var(--ds-scale-200, 16px)",
-  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N700, ")"),
-  color: "var(--ds-text, ".concat(_colors.DN600, ")"),
-  outline: 'none',
-  userSelect: 'none'
-});
-var gridsContainerStyles = (0, _react2.css)({
-  display: 'inline-block',
-  width: 289,
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  margin: "var(--ds-scale-0, 0px)",
-  marginBottom: 5,
-  textAlign: 'center'
-});
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.4.5"
+  packageVersion: "13.0.1"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -126,7 +100,8 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       weekStartDay = _ref$weekStartDay === void 0 ? 0 : _ref$weekStartDay,
       testId = _ref.testId,
       calendarRef = _ref.calendarRef,
-      mode = _ref.mode,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'light' : _ref$mode,
       className = _ref.className,
       style = _ref.style,
       _ref$tabIndex = _ref.tabIndex,
@@ -232,26 +207,33 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       monthsLong = _useLocale.monthsLong,
       daysShort = _useLocale.daysShort;
 
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_box.default, {
     className: className,
-    style: style,
+    UNSAFE_style: style,
+    backgroundColor: "elevation.surface",
     onBlur: handleContainerBlur,
     onFocus: handleContainerFocus,
     onKeyDown: handleContainerKeyDown,
     role: "presentation",
-    "data-testid": testId && "".concat(testId, "--container"),
+    testId: testId && "".concat(testId, "--container"),
     ref: ref
   }, (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate)), (0, _react2.jsx)("div", {
-    css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
+  }, announcerDate)), (0, _react2.jsx)(_box.default, {
+    display: "inlineBlock",
+    padding: "scale.200",
+    UNSAFE_style: {
+      userSelect: 'none'
+    },
     "aria-describedby": announceId,
     "aria-label": "calendar",
     role: "grid",
     tabIndex: tabIndex
-  }, (0, _react2.jsx)(_heading.default // The month number needs to be translated to index in the month
+  }, (0, _react2.jsx)(_stack.default, {
+    gap: "scale.150"
+  }, (0, _react2.jsx)(_header.default // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
     monthLongTitle: monthsLong[monthValue - 1],
@@ -262,8 +244,8 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     handleClickPrev: handleClickPrev,
     mode: mode,
     testId: testId
-  }), (0, _react2.jsx)("div", {
-    css: gridsContainerStyles,
+  }), (0, _react2.jsx)(_box.default, {
+    display: "block",
     role: "presentation"
   }, (0, _react2.jsx)(_weekHeader.default, {
     daysShort: daysShort,
@@ -273,7 +255,7 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     handleClickDay: handleClickDay,
     mode: mode,
     testId: testId
-  }))));
+  })))));
 });
 /**
  * __Calendar__

package/dist/cjs/internal/components/date.js

@@ -68,23 +68,25 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
   var dateCellStyles = (0, _react.useMemo)(function () {
     return (0, _react2.css)((0, _date.dateCellStyles)(mode));
   }, [mode]);
-  return (0, _react2.jsx)("button", {
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: dateCellStyles,
-    "aria-selected": isSelected ? 'true' : 'false',
-    tabIndex: isSelected ? 0 : -1,
-    type: "button",
-    role: "gridcell",
-    onClick: handleClick,
-    ref: ref,
-    "data-disabled": isDisabled || undefined,
-    "data-focused": isFocused || undefined,
-    "data-prev-selected": isPreviouslySelected || undefined,
-    "data-selected": isSelected || undefined,
-    "data-sibling": isSibling || undefined,
-    "data-today": isToday || undefined,
-    "data-testid": testId && isSelected ? "".concat(testId, "--selected-day") : undefined
-  }, day);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react2.jsx)("button", {
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      css: dateCellStyles,
+      "aria-selected": isSelected ? 'true' : 'false',
+      tabIndex: isSelected ? 0 : -1,
+      type: "button",
+      role: "gridcell",
+      onClick: handleClick,
+      ref: ref,
+      "data-disabled": isDisabled || undefined,
+      "data-focused": isFocused || undefined,
+      "data-prev-selected": isPreviouslySelected || undefined,
+      "data-selected": isSelected || undefined,
+      "data-sibling": isSibling || undefined,
+      "data-today": isToday || undefined,
+      "data-testid": testId && isSelected ? "".concat(testId, "--selected-day") : undefined
+    }, day)
+  );
 }));
 Date.displayName = 'Date'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/cjs/internal/components/{heading.js → header.js}

@@ -13,6 +13,12 @@ var _react2 = require("@emotion/react");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
+var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
+
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
 
 var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
@@ -20,36 +26,7 @@ var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/ch
 var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
-var headingColor = {
-  light: "var(--ds-text, ".concat(_colors.N800, ")"),
-  dark: "var(--ds-text, ".concat(_colors.DN800, ")")
-};
-var headingStyles = (0, _react2.css)({
-  display: 'flex',
-  // TODO Delete this comment after verifying spacing tokens
-  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-0, 0px)", " 13px ", "var(--ds-scale-0, 0px)"),
-  color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  fontWeight: 'bold'
-});
-
-var getMonthAndYearStyles = function getMonthAndYearStyles() {
-  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  return (0, _react2.css)({
-    flexBasis: '100%',
-    color: headingColor[mode],
-    textAlign: 'center'
-  });
-};
-
-var arrowLeftStyles = (0, _react2.css)({
-  // TODO Delete this comment after verifying spacing token -> previous value `8`
-  marginLeft: "var(--ds-scale-100, 8px)"
-});
-var arrowRightStyles = (0, _react2.css)({
-  // TODO Delete this comment after verifying spacing token -> previous value `8`
-  marginRight: "var(--ds-scale-100, 8px)"
-});
-var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
+var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
       year = _ref.year,
       _ref$previousMonthLab = _ref.previousMonthLabel,
@@ -58,16 +35,16 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
       nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
       handleClickPrev = _ref.handleClickPrev,
       handleClickNext = _ref.handleClickNext,
-      mode = _ref.mode,
       testId = _ref.testId;
-  var monthAndYearStyles = (0, _react.useMemo)(function () {
-    return getMonthAndYearStyles(mode);
-  }, [mode]);
-  return (0, _react2.jsx)("div", {
-    css: headingStyles,
+  return (0, _react2.jsx)(_box.default, {
+    display: "block",
+    paddingInline: "scale.100",
     "aria-hidden": "true"
+  }, (0, _react2.jsx)(_inline.default, {
+    gap: "scale.0",
+    alignItems: "center",
+    justifyContent: "space-between"
   }, (0, _react2.jsx)(_standardButton.default, {
-    css: arrowLeftStyles,
     appearance: "subtle",
     spacing: "none",
     tabIndex: -1,
@@ -79,12 +56,11 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
       primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
       testId: testId && "".concat(testId, "--previous-month-icon")
     })
-  }), (0, _react2.jsx)("div", {
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: monthAndYearStyles,
-    "data-testid": testId && "".concat(testId, "--current-month-year")
+  }), (0, _react2.jsx)(_heading.default, {
+    level: "h400",
+    as: "div",
+    testId: testId && "".concat(testId, "--current-month-year")
   }, "".concat(monthLongTitle, " ").concat(year)), (0, _react2.jsx)(_standardButton.default, {
-    css: arrowRightStyles,
     appearance: "subtle",
     spacing: "none",
     tabIndex: -1,
@@ -96,9 +72,9 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
       primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
       testId: testId && "".concat(testId, "--next-month-icon")
     })
-  }));
+  })));
 });
-Heading.displayName = 'Heading'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+Header.displayName = 'Header'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 
-var _default = Heading;
+var _default = Header;
 exports.default = _default;

package/dist/cjs/internal/components/week-day-grid.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@emotion/react");
+
+/** @jsx jsx */
+var gridStyles = (0, _react.css)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(7, minmax(max-content, 1fr))'
+});
+
+/**
+ * __Week day grid__
+ *
+ * A week day grid aligns elements in a 7 wide grid layout.
+ *
+ */
+var WeekDayGrid = function WeekDayGrid(_ref) {
+  var testId = _ref.testId,
+      children = _ref.children;
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react.jsx)("div", {
+      "data-testid": testId,
+      css: gridStyles
+    }, children)
+  );
+};
+
+var _default = WeekDayGrid;
+exports.default = _default;

package/dist/cjs/internal/components/week-days.js

@@ -13,28 +13,21 @@ var _react2 = require("@emotion/react");
 
 var _date = _interopRequireDefault(require("./date"));
 
+var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
+
 /** @jsx jsx */
-var daysGridStyles = (0, _react2.css)({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(7, 1fr)',
-  border: 0
-});
 var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
   var weeks = _ref.weeks,
       handleClickDay = _ref.handleClickDay,
       mode = _ref.mode,
       testId = _ref.testId;
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_weekDayGrid.default, {
     role: "grid",
-    "data-testid": testId && "".concat(testId, "--month")
+    testId: testId && "".concat(testId, "--month")
   }, weeks.map(function (week) {
-    return (0, _react2.jsx)("div", {
-      role: "row",
-      key: week.id,
-      css: daysGridStyles
-    }, week.values.map(function (weekDay) {
+    return week.values.map(function (weekDay) {
       return (0, _react2.jsx)(_date.default, {
-        key: weekDay.id,
+        key: "".concat(week.id, "-").concat(weekDay.id),
         isDisabled: weekDay.isDisabled,
         isFocused: weekDay.isFocused,
         isToday: weekDay.isToday,
@@ -47,7 +40,7 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
         mode: mode,
         testId: testId
       }, weekDay.day);
-    }));
+    });
   }));
 });
 WeekDays.displayName = 'WeekDays'; // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/internal/components/week-header.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,35 +11,38 @@ var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
+var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
+
 var _colors = require("@atlaskit/theme/colors");
 
+var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
+
 /** @jsx jsx */
-var dayNameGridStyles = (0, _react2.css)({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(7, 1fr)',
-  border: 0
-});
-var dayNameCellStyles = (0, _react2.css)({
-  boxSizing: 'border-box',
-  minWidth: 40,
-  padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 8px)"),
-  border: 0,
-  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
-  fontSize: 11,
-  fontWeight: 700,
-  textAlign: 'center',
-  textTransform: 'uppercase',
-  whiteSpace: 'nowrap'
-});
 var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort;
-  return (0, _react2.jsx)("div", {
-    css: dayNameGridStyles
-  }, daysShort.map(function (shortDay) {
-    return (0, _react2.jsx)("span", {
-      css: dayNameCellStyles,
+  return (0, _react2.jsx)(_weekDayGrid.default, null, daysShort.map(function (shortDay) {
+    return (0, _react2.jsx)(_box.default, {
+      padding: "scale.100",
+      display: "block",
+      UNSAFE_style: {
+        minWidth: 40,
+        // Account for languages with short week day names
+        whiteSpace: 'nowrap',
+        // Account for languages with long week day names
+        textAlign: 'center',
+        lineHeight: '16px',
+        color: "var(--ds-text-subtle, ".concat(_colors.N200, ")") // Apply correct fallback to shortDay text
+
+      },
       key: shortDay
-    }, shortDay);
+    }, (0, _react2.jsx)(_text.default, {
+      fontWeight: "700",
+      fontSize: "11px",
+      verticalAlign: "middle",
+      textTransform: "uppercase"
+    }, shortDay));
   }));
 });
 WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/internal/styles/date.js

@@ -45,14 +45,14 @@ var dateCellStyles = function dateCellStyles() {
     borderRadius: 3,
     color: textColor[mode],
     cursor: 'pointer',
-    fontSize: 14,
+    fontSize: "var(--ds-font-size-100, 14px)",
     textAlign: 'center',
     '&[data-sibling]': {
       color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
     },
     '&[data-today]': {
       color: todayColor[mode],
-      fontWeight: 'bold',
+      fontWeight: "var(--ds-font-weight-bold, bold)",
       '&::after': {
         display: 'block',
         height: 2,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/calendar",
-	"version": "12.4.5",
+	"version": "13.0.1",
 	"sideEffects": false
 }

package/dist/es2019/calendar.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, memo, useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import Box from '@atlaskit/ds-explorations/box';
+import Stack from '@atlaskit/ds-explorations/stack';
 import noop from '@atlaskit/ds-lib/noop';
-import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import HeadingComponent from './internal/components/heading';
+import Header from './internal/components/header';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
 import { blankStringArray } from './internal/constants';
@@ -20,38 +21,10 @@ import useHandleDateChange from './internal/hooks/use-handle-date-change';
 import useHandleDateSelect from './internal/hooks/use-handle-date-select';
 import useLocale from './internal/hooks/use-locale';
 import useUniqueId from './internal/hooks/use-unique-id';
-const lightWrapperStyles = css({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  // TODO Delete this comment after verifying spacing token -> previous value `16`
-  padding: "var(--ds-scale-200, 16px)",
-  backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N0})`,
-  color: `var(--ds-text, ${N900})`,
-  outline: 'none',
-  userSelect: 'none'
-});
-const darkWrapperStyles = css({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  // TODO Delete this comment after verifying spacing token -> previous value `16`
-  padding: "var(--ds-scale-200, 16px)",
-  backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N700})`,
-  color: `var(--ds-text, ${DN600})`,
-  outline: 'none',
-  userSelect: 'none'
-});
-const gridsContainerStyles = css({
-  display: 'inline-block',
-  width: 289,
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  margin: "var(--ds-scale-0, 0px)",
-  marginBottom: 5,
-  textAlign: 'center'
-});
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.4.5"
+  packageVersion: "13.0.1"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -80,7 +53,7 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   weekStartDay = 0,
   testId,
   calendarRef,
-  mode,
+  mode = 'light',
   className,
   style,
   tabIndex = 0
@@ -171,26 +144,33 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     locale,
     weekStartDay
   });
-  return jsx("div", {
+  return jsx(Box, {
     className: className,
-    style: style,
+    UNSAFE_style: style,
+    backgroundColor: "elevation.surface",
     onBlur: handleContainerBlur,
     onFocus: handleContainerFocus,
     onKeyDown: handleContainerKeyDown,
     role: "presentation",
-    "data-testid": testId && `${testId}--container`,
+    testId: testId && `${testId}--container`,
     ref: ref
   }, jsx(VisuallyHidden, null, jsx("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate)), jsx("div", {
-    css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
+  }, announcerDate)), jsx(Box, {
+    display: "inlineBlock",
+    padding: "scale.200",
+    UNSAFE_style: {
+      userSelect: 'none'
+    },
     "aria-describedby": announceId,
     "aria-label": "calendar",
     role: "grid",
     tabIndex: tabIndex
-  }, jsx(HeadingComponent // The month number needs to be translated to index in the month
+  }, jsx(Stack, {
+    gap: "scale.150"
+  }, jsx(Header // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
     monthLongTitle: monthsLong[monthValue - 1],
@@ -201,8 +181,8 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     handleClickPrev: handleClickPrev,
     mode: mode,
     testId: testId
-  }), jsx("div", {
-    css: gridsContainerStyles,
+  }), jsx(Box, {
+    display: "block",
     role: "presentation"
   }, jsx(WeekHeaderComponent, {
     daysShort: daysShort,
@@ -212,7 +192,7 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     handleClickDay: handleClickDay,
     mode: mode,
     testId: testId
-  }))));
+  })))));
 });
 /**
  * __Calendar__

package/dist/es2019/internal/components/date.js

@@ -48,23 +48,25 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     }
   }, [onClick]);
   const dateCellStyles = useMemo(() => css(getDateCellStyles(mode)), [mode]);
-  return jsx("button", {
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: dateCellStyles,
-    "aria-selected": isSelected ? 'true' : 'false',
-    tabIndex: isSelected ? 0 : -1,
-    type: "button",
-    role: "gridcell",
-    onClick: handleClick,
-    ref: ref,
-    "data-disabled": isDisabled || undefined,
-    "data-focused": isFocused || undefined,
-    "data-prev-selected": isPreviouslySelected || undefined,
-    "data-selected": isSelected || undefined,
-    "data-sibling": isSibling || undefined,
-    "data-today": isToday || undefined,
-    "data-testid": testId && isSelected ? `${testId}--selected-day` : undefined
-  }, day);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("button", {
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      css: dateCellStyles,
+      "aria-selected": isSelected ? 'true' : 'false',
+      tabIndex: isSelected ? 0 : -1,
+      type: "button",
+      role: "gridcell",
+      onClick: handleClick,
+      ref: ref,
+      "data-disabled": isDisabled || undefined,
+      "data-focused": isFocused || undefined,
+      "data-prev-selected": isPreviouslySelected || undefined,
+      "data-selected": isSelected || undefined,
+      "data-sibling": isSibling || undefined,
+      "data-today": isToday || undefined,
+      "data-testid": testId && isSelected ? `${testId}--selected-day` : undefined
+    }, day)
+  );
 }));
 Date.displayName = 'Date'; // eslint-disable-next-line @repo/internal/react/require-jsdoc