@atlaskit/calendar 13.1.5 → 13.1.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/calendar
 
+## 13.1.7
+
+### Patch Changes
+
+- [`b8b41649492`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8b41649492) - Update how certain background colors are referenced by name. Internal changes only.
+- Updated dependencies
+
+## 13.1.6
+
+### Patch Changes
+
+- [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.
+
 ## 13.1.5
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -11,8 +11,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _primitives = require("@atlaskit/primitives");
+var _box = _interopRequireDefault(require("@atlaskit/primitives/box"));
 var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
 var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
@@ -30,10 +31,14 @@ var _useLocale2 = _interopRequireDefault(require("./internal/hooks/use-locale"))
 var _useUniqueId = _interopRequireDefault(require("./internal/hooks/use-unique-id"));
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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; } /** @jsx jsx */
+var boxStyles = (0, _primitives.xcss)({
+  display: 'inlineBlock',
+  userSelect: 'none'
+});
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.5"
+  packageVersion: "13.1.7"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -171,55 +176,54 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     }),
     monthsLong = _useLocale.monthsLong,
     daysShort = _useLocale.daysShort;
-  return (0, _react2.jsx)(_box.default, {
-    className: className,
-    UNSAFE_style: style,
-    onBlur: handleContainerBlur,
-    onFocus: handleContainerFocus,
-    onKeyDown: handleContainerKeyDown,
-    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)(_box.default, {
-    display: "inlineBlock",
-    padding: "space.200",
-    UNSAFE_style: {
-      userSelect: 'none'
-    },
-    "aria-describedby": announceId,
-    "aria-label": "calendar",
-    tabIndex: tabIndex,
-    testId: testId && "".concat(testId, "--calendar")
-  }, (0, _react2.jsx)(_stack.default, {
-    space: "space.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],
-    year: yearValue,
-    nextMonthLabel: nextMonthLabel,
-    previousMonthLabel: previousMonthLabel,
-    handleClickNext: handleClickNext,
-    handleClickPrev: handleClickPrev,
-    mode: mode,
-    testId: testId
-  }), (0, _react2.jsx)(_box.default, {
-    display: "block",
-    role: "grid"
-  }, (0, _react2.jsx)(_weekHeader.default, {
-    daysShort: daysShort,
-    mode: mode,
-    testId: testId
-  }), (0, _react2.jsx)(_weekDays.default, {
-    weeks: weeks,
-    handleClickDay: handleClickDay,
-    mode: mode,
-    testId: testId
-  })))));
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("div", {
+      className: className,
+      style: style,
+      onBlur: handleContainerBlur,
+      onFocus: handleContainerFocus,
+      onKeyDown: handleContainerKeyDown,
+      "data-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)(_box.default, {
+      xcss: boxStyles,
+      padding: "space.200",
+      "aria-describedby": announceId,
+      "aria-label": "calendar",
+      tabIndex: tabIndex,
+      testId: testId && "".concat(testId, "--calendar")
+    }, (0, _react2.jsx)(_stack.default, {
+      space: "space.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],
+      year: yearValue,
+      nextMonthLabel: nextMonthLabel,
+      previousMonthLabel: previousMonthLabel,
+      handleClickNext: handleClickNext,
+      handleClickPrev: handleClickPrev,
+      mode: mode,
+      testId: testId
+    }), (0, _react2.jsx)(_box.default, {
+      role: "grid"
+    }, (0, _react2.jsx)(_weekHeader.default, {
+      daysShort: daysShort,
+      mode: mode,
+      testId: testId
+    }), (0, _react2.jsx)(_weekDays.default, {
+      weeks: weeks,
+      handleClickDay: handleClickDay,
+      mode: mode,
+      testId: testId
+    })))))
+  );
 });
 
 /**

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

@@ -8,11 +8,10 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 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"));
-var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
@@ -26,11 +25,10 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
     handleClickPrev = _ref.handleClickPrev,
     handleClickNext = _ref.handleClickNext,
     testId = _ref.testId;
-  return (0, _react2.jsx)(_box.default, {
-    display: "block",
+  return (0, _react2.jsx)(_primitives.Box, {
     paddingInline: "space.100",
     "aria-hidden": "true"
-  }, (0, _react2.jsx)(_inline.default, {
+  }, (0, _react2.jsx)(_primitives.Inline, {
     space: "space.0",
     alignBlock: "center",
     spread: "space-between"

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

@@ -1,15 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _primitives = require("@atlaskit/primitives");
 /** @jsx jsx */
 
-var gridStyles = (0, _react.css)({
+var gridStyles = (0, _primitives.xcss)({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, minmax(max-content, 1fr))'
 });
@@ -22,9 +21,9 @@ var gridStyles = (0, _react.css)({
 var WeekDayGrid = function WeekDayGrid(_ref) {
   var testId = _ref.testId,
     children = _ref.children;
-  return (0, _react.jsx)(_box.default, {
+  return (0, _react.jsx)(_primitives.Box, {
     testId: testId,
-    css: gridStyles,
+    xcss: gridStyles,
     role: "row"
   }, children);
 };

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _box = _interopRequireDefault(require("@atlaskit/primitives/box"));
 var _date = _interopRequireDefault(require("./date"));
 var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
 /** @jsx jsx */
@@ -18,7 +18,6 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
     mode = _ref.mode,
     testId = _ref.testId;
   return (0, _react2.jsx)(_box.default, {
-    display: "block",
     role: "rowgroup",
     testId: testId && "".concat(testId, "--month")
   }, weeks.map(function (week, i) {

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

@@ -7,31 +7,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 _primitives = require("@atlaskit/primitives");
 var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
 /** @jsx jsx */
 
+var columnHeaderStyles = (0, _primitives.xcss)({
+  minWidth: 'size.400',
+  // Account for languages with short week day names
+  whiteSpace: 'nowrap',
+  // Account for languages with long week day names
+  textAlign: 'center',
+  lineHeight: '16px',
+  color: 'color.text.subtle' // Apply correct fallback to shortDay text
+});
+
 var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort,
     testId = _ref.testId;
   return (0, _react2.jsx)(_weekDayGrid.default, {
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
-    return (0, _react2.jsx)(_box.default, {
+    return (0, _react2.jsx)(_primitives.Box, {
       padding: "space.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
-      },
-
+      xcss: columnHeaderStyles,
       key: shortDay,
       role: "columnheader"
     }, (0, _react2.jsx)(_text.default, {

package/dist/cjs/version.json

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

package/dist/es2019/calendar.js

@@ -3,8 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, memo, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import Box from '@atlaskit/ds-explorations/box';
 import noop from '@atlaskit/ds-lib/noop';
+import { xcss } from '@atlaskit/primitives';
+import Box from '@atlaskit/primitives/box';
 import Stack from '@atlaskit/primitives/stack';
 import GlobalTheme from '@atlaskit/theme/components';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -20,10 +21,14 @@ 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 boxStyles = xcss({
+  display: 'inlineBlock',
+  userSelect: 'none'
+});
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.5"
+  packageVersion: "13.1.7"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -143,55 +148,54 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     locale,
     weekStartDay
   });
-  return jsx(Box, {
-    className: className,
-    UNSAFE_style: style,
-    onBlur: handleContainerBlur,
-    onFocus: handleContainerFocus,
-    onKeyDown: handleContainerKeyDown,
-    testId: testId && `${testId}--container`,
-    ref: ref
-  }, jsx(VisuallyHidden, null, jsx("span", {
-    id: announceId,
-    "aria-live": "assertive",
-    "aria-relevant": "text"
-  }, announcerDate)), jsx(Box, {
-    display: "inlineBlock",
-    padding: "space.200",
-    UNSAFE_style: {
-      userSelect: 'none'
-    },
-    "aria-describedby": announceId,
-    "aria-label": "calendar",
-    tabIndex: tabIndex,
-    testId: testId && `${testId}--calendar`
-  }, jsx(Stack, {
-    space: "space.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],
-    year: yearValue,
-    nextMonthLabel: nextMonthLabel,
-    previousMonthLabel: previousMonthLabel,
-    handleClickNext: handleClickNext,
-    handleClickPrev: handleClickPrev,
-    mode: mode,
-    testId: testId
-  }), jsx(Box, {
-    display: "block",
-    role: "grid"
-  }, jsx(WeekHeaderComponent, {
-    daysShort: daysShort,
-    mode: mode,
-    testId: testId
-  }), jsx(WeekDaysComponent, {
-    weeks: weeks,
-    handleClickDay: handleClickDay,
-    mode: mode,
-    testId: testId
-  })))));
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions
+    jsx("div", {
+      className: className,
+      style: style,
+      onBlur: handleContainerBlur,
+      onFocus: handleContainerFocus,
+      onKeyDown: handleContainerKeyDown,
+      "data-testid": testId && `${testId}--container`,
+      ref: ref
+    }, jsx(VisuallyHidden, null, jsx("span", {
+      id: announceId,
+      "aria-live": "assertive",
+      "aria-relevant": "text"
+    }, announcerDate)), jsx(Box, {
+      xcss: boxStyles,
+      padding: "space.200",
+      "aria-describedby": announceId,
+      "aria-label": "calendar",
+      tabIndex: tabIndex,
+      testId: testId && `${testId}--calendar`
+    }, jsx(Stack, {
+      space: "space.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],
+      year: yearValue,
+      nextMonthLabel: nextMonthLabel,
+      previousMonthLabel: previousMonthLabel,
+      handleClickNext: handleClickNext,
+      handleClickPrev: handleClickPrev,
+      mode: mode,
+      testId: testId
+    }), jsx(Box, {
+      role: "grid"
+    }, jsx(WeekHeaderComponent, {
+      daysShort: daysShort,
+      mode: mode,
+      testId: testId
+    }), jsx(WeekDaysComponent, {
+      weeks: weeks,
+      handleClickDay: handleClickDay,
+      mode: mode,
+      testId: testId
+    })))))
+  );
 });
 
 /**

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

@@ -2,11 +2,10 @@
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
-import Box from '@atlaskit/ds-explorations/box';
 import Heading from '@atlaskit/heading';
 import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
-import Inline from '@atlaskit/primitives/inline';
+import { Box, Inline } from '@atlaskit/primitives';
 import { N700 } from '@atlaskit/theme/colors';
 const Header = /*#__PURE__*/memo(function Header({
   monthLongTitle,
@@ -18,7 +17,6 @@ const Header = /*#__PURE__*/memo(function Header({
   testId
 }) {
   return jsx(Box, {
-    display: "block",
     paddingInline: "space.100",
     "aria-hidden": "true"
   }, jsx(Inline, {

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
-const gridStyles = css({
+import { jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+const gridStyles = xcss({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, minmax(max-content, 1fr))'
 });
@@ -17,7 +17,7 @@ const WeekDayGrid = ({
   children
 }) => jsx(Box, {
   testId: testId,
-  css: gridStyles,
+  xcss: gridStyles,
   role: "row"
 }, children);
 export default WeekDayGrid;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
+import Box from '@atlaskit/primitives/box';
 import DateComponent from './date';
 import WeekdayGrid from './week-day-grid';
 const WeekDays = /*#__PURE__*/memo(function WeekDays({
@@ -11,7 +11,6 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
   testId
 }) {
   return jsx(Box, {
-    display: "block",
     role: "rowgroup",
     testId: testId && `${testId}--month`
   }, weeks.map((week, i) => jsx(WeekdayGrid, {

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

@@ -1,10 +1,19 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
-import { N200 } from '@atlaskit/theme/colors';
+import { Box, xcss } from '@atlaskit/primitives';
 import WeekDayGrid from './week-day-grid';
+const columnHeaderStyles = xcss({
+  minWidth: 'size.400',
+  // Account for languages with short week day names
+  whiteSpace: 'nowrap',
+  // Account for languages with long week day names
+  textAlign: 'center',
+  lineHeight: '16px',
+  color: 'color.text.subtle' // Apply correct fallback to shortDay text
+});
+
 const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
   daysShort,
   testId
@@ -13,17 +22,7 @@ const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
     testId: testId && `${testId}--column-headers`
   }, daysShort.map(shortDay => jsx(Box, {
     padding: "space.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, ${N200})` // Apply correct fallback to shortDay text
-    },
-
+    xcss: columnHeaderStyles,
     key: shortDay,
     role: "columnheader"
   }, jsx(Text, {

package/dist/es2019/version.json

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

package/dist/esm/calendar.js

@@ -7,8 +7,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { forwardRef, memo, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import Box from '@atlaskit/ds-explorations/box';
 import noop from '@atlaskit/ds-lib/noop';
+import { xcss } from '@atlaskit/primitives';
+import Box from '@atlaskit/primitives/box';
 import Stack from '@atlaskit/primitives/stack';
 import GlobalTheme from '@atlaskit/theme/components';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -24,10 +25,14 @@ 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';
+var boxStyles = xcss({
+  display: 'inlineBlock',
+  userSelect: 'none'
+});
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.5"
+  packageVersion: "13.1.7"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -165,55 +170,54 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     }),
     monthsLong = _useLocale.monthsLong,
     daysShort = _useLocale.daysShort;
-  return jsx(Box, {
-    className: className,
-    UNSAFE_style: style,
-    onBlur: handleContainerBlur,
-    onFocus: handleContainerFocus,
-    onKeyDown: handleContainerKeyDown,
-    testId: testId && "".concat(testId, "--container"),
-    ref: ref
-  }, jsx(VisuallyHidden, null, jsx("span", {
-    id: announceId,
-    "aria-live": "assertive",
-    "aria-relevant": "text"
-  }, announcerDate)), jsx(Box, {
-    display: "inlineBlock",
-    padding: "space.200",
-    UNSAFE_style: {
-      userSelect: 'none'
-    },
-    "aria-describedby": announceId,
-    "aria-label": "calendar",
-    tabIndex: tabIndex,
-    testId: testId && "".concat(testId, "--calendar")
-  }, jsx(Stack, {
-    space: "space.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],
-    year: yearValue,
-    nextMonthLabel: nextMonthLabel,
-    previousMonthLabel: previousMonthLabel,
-    handleClickNext: handleClickNext,
-    handleClickPrev: handleClickPrev,
-    mode: mode,
-    testId: testId
-  }), jsx(Box, {
-    display: "block",
-    role: "grid"
-  }, jsx(WeekHeaderComponent, {
-    daysShort: daysShort,
-    mode: mode,
-    testId: testId
-  }), jsx(WeekDaysComponent, {
-    weeks: weeks,
-    handleClickDay: handleClickDay,
-    mode: mode,
-    testId: testId
-  })))));
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions
+    jsx("div", {
+      className: className,
+      style: style,
+      onBlur: handleContainerBlur,
+      onFocus: handleContainerFocus,
+      onKeyDown: handleContainerKeyDown,
+      "data-testid": testId && "".concat(testId, "--container"),
+      ref: ref
+    }, jsx(VisuallyHidden, null, jsx("span", {
+      id: announceId,
+      "aria-live": "assertive",
+      "aria-relevant": "text"
+    }, announcerDate)), jsx(Box, {
+      xcss: boxStyles,
+      padding: "space.200",
+      "aria-describedby": announceId,
+      "aria-label": "calendar",
+      tabIndex: tabIndex,
+      testId: testId && "".concat(testId, "--calendar")
+    }, jsx(Stack, {
+      space: "space.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],
+      year: yearValue,
+      nextMonthLabel: nextMonthLabel,
+      previousMonthLabel: previousMonthLabel,
+      handleClickNext: handleClickNext,
+      handleClickPrev: handleClickPrev,
+      mode: mode,
+      testId: testId
+    }), jsx(Box, {
+      role: "grid"
+    }, jsx(WeekHeaderComponent, {
+      daysShort: daysShort,
+      mode: mode,
+      testId: testId
+    }), jsx(WeekDaysComponent, {
+      weeks: weeks,
+      handleClickDay: handleClickDay,
+      mode: mode,
+      testId: testId
+    })))))
+  );
 });
 
 /**

package/dist/esm/internal/components/header.js

@@ -2,11 +2,10 @@
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
-import Box from '@atlaskit/ds-explorations/box';
 import Heading from '@atlaskit/heading';
 import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
-import Inline from '@atlaskit/primitives/inline';
+import { Box, Inline } from '@atlaskit/primitives';
 import { N700 } from '@atlaskit/theme/colors';
 var Header = /*#__PURE__*/memo(function Header(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
@@ -19,7 +18,6 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
     handleClickNext = _ref.handleClickNext,
     testId = _ref.testId;
   return jsx(Box, {
-    display: "block",
     paddingInline: "space.100",
     "aria-hidden": "true"
   }, jsx(Inline, {

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
-var gridStyles = css({
+import { jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+var gridStyles = xcss({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, minmax(max-content, 1fr))'
 });
@@ -17,7 +17,7 @@ var WeekDayGrid = function WeekDayGrid(_ref) {
     children = _ref.children;
   return jsx(Box, {
     testId: testId,
-    css: gridStyles,
+    xcss: gridStyles,
     role: "row"
   }, children);
 };

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
+import Box from '@atlaskit/primitives/box';
 import DateComponent from './date';
 import WeekdayGrid from './week-day-grid';
 var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
@@ -10,7 +10,6 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
     mode = _ref.mode,
     testId = _ref.testId;
   return jsx(Box, {
-    display: "block",
     role: "rowgroup",
     testId: testId && "".concat(testId, "--month")
   }, weeks.map(function (week, i) {

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

@@ -1,10 +1,19 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
-import { N200 } from '@atlaskit/theme/colors';
+import { Box, xcss } from '@atlaskit/primitives';
 import WeekDayGrid from './week-day-grid';
+var columnHeaderStyles = xcss({
+  minWidth: 'size.400',
+  // Account for languages with short week day names
+  whiteSpace: 'nowrap',
+  // Account for languages with long week day names
+  textAlign: 'center',
+  lineHeight: '16px',
+  color: 'color.text.subtle' // Apply correct fallback to shortDay text
+});
+
 var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort,
     testId = _ref.testId;
@@ -13,17 +22,7 @@ var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
   }, daysShort.map(function (shortDay) {
     return jsx(Box, {
       padding: "space.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(N200, ")") // Apply correct fallback to shortDay text
-      },
-
+      xcss: columnHeaderStyles,
       key: shortDay,
       role: "columnheader"
     }, jsx(Text, {

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "13.1.5",
+  "version": "13.1.7",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/locale": "^2.5.0",
-    "@atlaskit/primitives": "^0.10.0",
+    "@atlaskit/primitives": "*",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.5.0",
     "@atlaskit/visually-hidden": "^1.2.0",