@atlaskit/calendar 12.1.2 → 12.1.6

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/calendar
 
+## 12.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.5
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 12.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.3
+
+### Patch Changes
+
+- [`192d35cfdbd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/192d35cfdbd) - Defaults native button usage to type="button" to prevent unintended submittig of forms.
+- [`f7d71a9ba09`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7d71a9ba09) - Replaces visually hidden styles in component to instead use '@atlaskit/visually-hidden'.
+
 ## 12.1.2
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -25,7 +25,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 
-var _tokens = require("@atlaskit/tokens");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 
 var _heading = _interopRequireDefault(require("./internal/components/heading"));
 
@@ -51,16 +51,16 @@ 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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, _core.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N0),
-  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
+  backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
+  color: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
   outline: 'none',
   userSelect: 'none'
 });
@@ -68,8 +68,8 @@ var darkWrapperStyles = (0, _core.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N700),
-  color: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600),
+  backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N700, ")"),
+  color: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")"),
   outline: 'none',
   userSelect: 'none'
 });
@@ -80,20 +80,10 @@ var gridsContainerStyles = (0, _core.css)({
   marginBottom: 5,
   textAlign: 'center'
 });
-var announcerStyles = (0, _core.css)({
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  position: 'absolute',
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  overflow: 'hidden'
-});
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.2"
+  packageVersion: "12.1.6"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -244,12 +234,11 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     role: "presentation",
     "data-testid": testId && "".concat(testId, "--container"),
     ref: ref
-  }, (0, _core.jsx)("div", {
-    css: announcerStyles,
+  }, (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate), (0, _core.jsx)("div", {
+  }, announcerDate)), (0, _core.jsx)("div", {
     css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
     "aria-describedby": announceId,
     "aria-label": "calendar",

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

@@ -73,6 +73,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     css: dateCellStyles,
     "aria-selected": isSelected ? 'true' : 'false',
     tabIndex: isSelected ? 0 : -1,
+    type: "button",
     role: "gridcell",
     onClick: handleClick,
     ref: ref,

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

@@ -19,17 +19,15 @@ var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/ch
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var headingColor = {
-  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
-  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN800)
+  light: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
+  dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN800, ")")
 };
 var headingStyles = (0, _core.css)({
   display: 'flex',
   padding: '0 0 13px 0',
-  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+  color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
   fontWeight: 'bold'
 });
 
@@ -71,7 +69,7 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
     iconBefore: (0, _core.jsx)(_chevronLeftLarge.default, {
       label: "Last month",
       size: "medium",
-      primaryColor: (0, _tokens.token)('color.text.lowEmphasis', _colors.N70)
+      primaryColor: "var(--ds-text-lowEmphasis, ".concat(_colors.N70, ")")
     })
   }), (0, _core.jsx)("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -87,7 +85,7 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
     iconBefore: (0, _core.jsx)(_chevronRightLarge.default, {
       label: "Next month",
       size: "medium",
-      primaryColor: (0, _tokens.token)('color.text.lowEmphasis', _colors.N70)
+      primaryColor: "var(--ds-text-lowEmphasis, ".concat(_colors.N70, ")")
     })
   }));
 });

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

@@ -11,8 +11,6 @@ var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var dayNameGridStyles = (0, _core.css)({
   display: 'grid',
@@ -24,7 +22,7 @@ var dayNameCellStyles = (0, _core.css)({
   minWidth: 40,
   padding: '8px 8px',
   border: 0,
-  color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N200),
+  color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N200, ")"),
   fontSize: 11,
   fontWeight: 700,
   textAlign: 'center',

package/dist/cjs/internal/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.blankStringArray = exports.monthsPerYear = exports.daysPerWeek = exports.arrowKeys = void 0;
+exports.monthsPerYear = exports.daysPerWeek = exports.blankStringArray = exports.arrowKeys = void 0;
 var arrowKeys = {
   ArrowDown: 'down',
   ArrowLeft: 'left',

package/dist/cjs/internal/hooks/use-get-weeks.js

@@ -21,9 +21,9 @@ var _dateToString = _interopRequireDefault(require("../utils/date-to-string"));
 
 var _getBaseCalendar = _interopRequireDefault(require("../utils/get-base-calendar"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 function useGetCalendarWithSixthWeek(calendar, _ref) {
   var month = _ref.month,

package/dist/cjs/internal/hooks/use-handle-date-change.js

@@ -19,9 +19,9 @@ var _dateToString = _interopRequireDefault(require("../utils/date-to-string"));
 
 var _getDaysInMonth = _interopRequireDefault(require("../utils/get-days-in-month"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 getNextMonth = function getNextMonth(monthValue, yearValue) {
   var month = monthValue;

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

@@ -7,32 +7,30 @@ exports.dateCellStyles = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var textColor = {
-  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
-  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
+  light: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
+  dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
 };
-var textColorMedium = (0, _tokens.token)('color.text.mediumEmphasis', _colors.N600);
+var textColorMedium = "var(--ds-text-mediumEmphasis, ".concat(_colors.N600, ")");
 var todayColor = {
-  light: (0, _tokens.token)('color.text.selected', _colors.B400),
-  dark: (0, _tokens.token)('color.text.selected', _colors.B100)
+  light: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
+  dark: "var(--ds-text-selected, ".concat(_colors.B100, ")")
 };
 var hoverBackground = {
-  light: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30),
-  dark: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N800)
+  light: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N800, ")")
 };
 var textSelected = {
-  light: (0, _tokens.token)('color.text.selected', _colors.N0),
-  dark: (0, _tokens.token)('color.text.selected', _colors.N700)
+  light: "var(--ds-text-selected, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-text-selected, ".concat(_colors.N700, ")")
 };
 var selectedBackground = {
-  light: (0, _tokens.token)('color.background.selected.resting', _colors.N500),
-  dark: (0, _tokens.token)('color.background.selected.resting', _colors.N0)
+  light: "var(--ds-background-selected-resting, ".concat(_colors.N500, ")"),
+  dark: "var(--ds-background-selected-resting, ".concat(_colors.N0, ")")
 };
 var borderColorFocused = {
-  light: (0, _tokens.token)('color.border.focus', _colors.B100),
-  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
+  light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
+  dark: "var(--ds-border-focus, ".concat(_colors.B75, ")")
 };
 
 var dateCellStyles = function dateCellStyles() {
@@ -50,7 +48,7 @@ var dateCellStyles = function dateCellStyles() {
     fontSize: 14,
     textAlign: 'center',
     '&[data-sibling]': {
-      color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+      color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")")
     },
     '&[data-today]': {
       color: todayColor[mode],
@@ -67,15 +65,15 @@ var dateCellStyles = function dateCellStyles() {
       }
     },
     '&[data-prev-selected]': {
-      backgroundColor: (0, _tokens.token)('color.background.subtleBrand.resting', _colors.B50),
-      color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N600)
+      backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(_colors.B50, ")"),
+      color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N600, ")")
     },
     '&[data-selected]': {
       backgroundColor: selectedBackground[mode],
       color: textSelected[mode]
     },
     '&[data-disabled]': {
-      color: (0, _tokens.token)('color.text.disabled', _colors.N40),
+      color: "var(--ds-text-disabled, ".concat(_colors.N40, ")"),
       cursor: 'not-allowed'
     },
     '&[data-focused]': {
@@ -86,22 +84,22 @@ var dateCellStyles = function dateCellStyles() {
       color: textColor[mode]
     },
     '&:active': {
-      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.B50),
+      backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.B50, ")"),
       color: textColor[mode]
     },
     '&[data-selected]:hover': {
       color: textColorMedium
     },
     '&[data-prev-selected]:hover': {
-      backgroundColor: (0, _tokens.token)('color.background.subtleBrand.resting', _colors.B50),
+      backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(_colors.B50, ")"),
       color: textColorMedium
     },
     '&[data-sibling]:hover': {
-      color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+      color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")")
     },
     '&[data-disabled]:hover': {
       backgroundColor: 'transparent',
-      color: (0, _tokens.token)('color.text.disabled', _colors.N40)
+      color: "var(--ds-text-disabled, ".concat(_colors.N40, ")")
     }
   };
 };

package/dist/cjs/version.json

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

package/dist/es2019/calendar.js

@@ -7,7 +7,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import noop from '@atlaskit/ds-lib/noop';
 import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import HeadingComponent from './internal/components/heading';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -24,8 +24,8 @@ const lightWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: token('color.background.overlay', N0),
-  color: token('color.text.highEmphasis', N900),
+  backgroundColor: `var(--ds-background-overlay, ${N0})`,
+  color: `var(--ds-text-highEmphasis, ${N900})`,
   outline: 'none',
   userSelect: 'none'
 });
@@ -33,8 +33,8 @@ const darkWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: token('color.background.overlay', N700),
-  color: token('color.text.highEmphasis', DN600),
+  backgroundColor: `var(--ds-background-overlay, ${N700})`,
+  color: `var(--ds-text-highEmphasis, ${DN600})`,
   outline: 'none',
   userSelect: 'none'
 });
@@ -45,20 +45,10 @@ const gridsContainerStyles = css({
   marginBottom: 5,
   textAlign: 'center'
 });
-const announcerStyles = css({
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  position: 'absolute',
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  overflow: 'hidden'
-});
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.2"
+  packageVersion: "12.1.6"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -184,12 +174,11 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     role: "presentation",
     "data-testid": testId && `${testId}--container`,
     ref: ref
-  }, jsx("div", {
-    css: announcerStyles,
+  }, jsx(VisuallyHidden, null, jsx("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate), jsx("div", {
+  }, announcerDate)), jsx("div", {
     css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
     "aria-describedby": announceId,
     "aria-label": "calendar",

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

@@ -53,6 +53,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     css: dateCellStyles,
     "aria-selected": isSelected ? 'true' : 'false',
     tabIndex: isSelected ? 0 : -1,
+    type: "button",
     role: "gridcell",
     onClick: handleClick,
     ref: ref,

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

@@ -5,15 +5,14 @@ import Button from '@atlaskit/button/standard-button';
 import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
 import { DN800, N70, N800 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const headingColor = {
-  light: token('color.text.highEmphasis', N800),
-  dark: token('color.text.highEmphasis', DN800)
+  light: `var(--ds-text-highEmphasis, ${N800})`,
+  dark: `var(--ds-text-highEmphasis, ${DN800})`
 };
 const headingStyles = css({
   display: 'flex',
   padding: '0 0 13px 0',
-  color: token('color.text.highEmphasis', N800),
+  color: `var(--ds-text-highEmphasis, ${N800})`,
   fontWeight: 'bold'
 });
 
@@ -51,7 +50,7 @@ const Heading = /*#__PURE__*/memo(function Heading({
     iconBefore: jsx(ArrowleftIcon, {
       label: "Last month",
       size: "medium",
-      primaryColor: token('color.text.lowEmphasis', N70)
+      primaryColor: `var(--ds-text-lowEmphasis, ${N70})`
     })
   }), jsx("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -67,7 +66,7 @@ const Heading = /*#__PURE__*/memo(function Heading({
     iconBefore: jsx(ArrowrightIcon, {
       label: "Next month",
       size: "medium",
-      primaryColor: token('color.text.lowEmphasis', N70)
+      primaryColor: `var(--ds-text-lowEmphasis, ${N70})`
     })
   }));
 });

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

@@ -2,7 +2,6 @@
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const dayNameGridStyles = css({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, 1fr)',
@@ -13,7 +12,7 @@ const dayNameCellStyles = css({
   minWidth: 40,
   padding: '8px 8px',
   border: 0,
-  color: token('color.text.mediumEmphasis', N200),
+  color: `var(--ds-text-mediumEmphasis, ${N200})`,
   fontSize: 11,
   fontWeight: 700,
   textAlign: 'center',

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

@@ -1,29 +1,28 @@
 import { B100, B400, B50, B75, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const textColor = {
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: `var(--ds-text-highEmphasis, ${N900})`,
+  dark: `var(--ds-text-highEmphasis, ${DN600})`
 };
-const textColorMedium = token('color.text.mediumEmphasis', N600);
+const textColorMedium = `var(--ds-text-mediumEmphasis, ${N600})`;
 const todayColor = {
-  light: token('color.text.selected', B400),
-  dark: token('color.text.selected', B100)
+  light: `var(--ds-text-selected, ${B400})`,
+  dark: `var(--ds-text-selected, ${B100})`
 };
 const hoverBackground = {
-  light: token('color.background.transparentNeutral.hover', N30),
-  dark: token('color.background.transparentNeutral.hover', N800)
+  light: `var(--ds-background-transparentNeutral-hover, ${N30})`,
+  dark: `var(--ds-background-transparentNeutral-hover, ${N800})`
 };
 const textSelected = {
-  light: token('color.text.selected', N0),
-  dark: token('color.text.selected', N700)
+  light: `var(--ds-text-selected, ${N0})`,
+  dark: `var(--ds-text-selected, ${N700})`
 };
 const selectedBackground = {
-  light: token('color.background.selected.resting', N500),
-  dark: token('color.background.selected.resting', N0)
+  light: `var(--ds-background-selected-resting, ${N500})`,
+  dark: `var(--ds-background-selected-resting, ${N0})`
 };
 const borderColorFocused = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: `var(--ds-border-focus, ${B100})`,
+  dark: `var(--ds-border-focus, ${B75})`
 };
 export const dateCellStyles = (mode = 'light') => ({
   all: 'unset',
@@ -38,7 +37,7 @@ export const dateCellStyles = (mode = 'light') => ({
   fontSize: 14,
   textAlign: 'center',
   '&[data-sibling]': {
-    color: token('color.text.lowEmphasis', N200)
+    color: `var(--ds-text-lowEmphasis, ${N200})`
   },
   '&[data-today]': {
     color: todayColor[mode],
@@ -55,15 +54,15 @@ export const dateCellStyles = (mode = 'light') => ({
     }
   },
   '&[data-prev-selected]': {
-    backgroundColor: token('color.background.subtleBrand.resting', B50),
-    color: token('color.text.mediumEmphasis', N600)
+    backgroundColor: `var(--ds-background-subtleBrand-resting, ${B50})`,
+    color: `var(--ds-text-mediumEmphasis, ${N600})`
   },
   '&[data-selected]': {
     backgroundColor: selectedBackground[mode],
     color: textSelected[mode]
   },
   '&[data-disabled]': {
-    color: token('color.text.disabled', N40),
+    color: `var(--ds-text-disabled, ${N40})`,
     cursor: 'not-allowed'
   },
   '&[data-focused]': {
@@ -74,21 +73,21 @@ export const dateCellStyles = (mode = 'light') => ({
     color: textColor[mode]
   },
   '&:active': {
-    backgroundColor: token('color.background.transparentNeutral.pressed', B50),
+    backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${B50})`,
     color: textColor[mode]
   },
   '&[data-selected]:hover': {
     color: textColorMedium
   },
   '&[data-prev-selected]:hover': {
-    backgroundColor: token('color.background.subtleBrand.resting', B50),
+    backgroundColor: `var(--ds-background-subtleBrand-resting, ${B50})`,
     color: textColorMedium
   },
   '&[data-sibling]:hover': {
-    color: token('color.text.lowEmphasis', N200)
+    color: `var(--ds-text-lowEmphasis, ${N200})`
   },
   '&[data-disabled]:hover': {
     backgroundColor: 'transparent',
-    color: token('color.text.disabled', N40)
+    color: `var(--ds-text-disabled, ${N40})`
   }
 });

package/dist/es2019/version.json

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

package/dist/esm/calendar.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { _defineProperty(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 */
 import { forwardRef, memo, useMemo } from 'react';
@@ -13,7 +13,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import noop from '@atlaskit/ds-lib/noop';
 import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import HeadingComponent from './internal/components/heading';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -30,8 +30,8 @@ var lightWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: token('color.background.overlay', N0),
-  color: token('color.text.highEmphasis', N900),
+  backgroundColor: "var(--ds-background-overlay, ".concat(N0, ")"),
+  color: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
   outline: 'none',
   userSelect: 'none'
 });
@@ -39,8 +39,8 @@ var darkWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: token('color.background.overlay', N700),
-  color: token('color.text.highEmphasis', DN600),
+  backgroundColor: "var(--ds-background-overlay, ".concat(N700, ")"),
+  color: "var(--ds-text-highEmphasis, ".concat(DN600, ")"),
   outline: 'none',
   userSelect: 'none'
 });
@@ -51,20 +51,10 @@ var gridsContainerStyles = css({
   marginBottom: 5,
   textAlign: 'center'
 });
-var announcerStyles = css({
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  position: 'absolute',
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  overflow: 'hidden'
-});
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.2"
+  packageVersion: "12.1.6"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -215,12 +205,11 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     role: "presentation",
     "data-testid": testId && "".concat(testId, "--container"),
     ref: ref
-  }, jsx("div", {
-    css: announcerStyles,
+  }, jsx(VisuallyHidden, null, jsx("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate), jsx("div", {
+  }, announcerDate)), jsx("div", {
     css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
     "aria-describedby": announceId,
     "aria-label": "calendar",

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

@@ -60,6 +60,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
     css: dateCellStyles,
     "aria-selected": isSelected ? 'true' : 'false',
     tabIndex: isSelected ? 0 : -1,
+    type: "button",
     role: "gridcell",
     onClick: handleClick,
     ref: ref,

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

@@ -5,15 +5,14 @@ import Button from '@atlaskit/button/standard-button';
 import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
 import { DN800, N70, N800 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 var headingColor = {
-  light: token('color.text.highEmphasis', N800),
-  dark: token('color.text.highEmphasis', DN800)
+  light: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
+  dark: "var(--ds-text-highEmphasis, ".concat(DN800, ")")
 };
 var headingStyles = css({
   display: 'flex',
   padding: '0 0 13px 0',
-  color: token('color.text.highEmphasis', N800),
+  color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
   fontWeight: 'bold'
 });
 
@@ -55,7 +54,7 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
     iconBefore: jsx(ArrowleftIcon, {
       label: "Last month",
       size: "medium",
-      primaryColor: token('color.text.lowEmphasis', N70)
+      primaryColor: "var(--ds-text-lowEmphasis, ".concat(N70, ")")
     })
   }), jsx("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -71,7 +70,7 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
     iconBefore: jsx(ArrowrightIcon, {
       label: "Next month",
       size: "medium",
-      primaryColor: token('color.text.lowEmphasis', N70)
+      primaryColor: "var(--ds-text-lowEmphasis, ".concat(N70, ")")
     })
   }));
 });

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

@@ -2,7 +2,6 @@
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 var dayNameGridStyles = css({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, 1fr)',
@@ -13,7 +12,7 @@ var dayNameCellStyles = css({
   minWidth: 40,
   padding: '8px 8px',
   border: 0,
-  color: token('color.text.mediumEmphasis', N200),
+  color: "var(--ds-text-mediumEmphasis, ".concat(N200, ")"),
   fontSize: 11,
   fontWeight: 700,
   textAlign: 'center',

package/dist/esm/internal/hooks/use-get-weeks.js

@@ -1,9 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { _defineProperty(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; }
 
 import { useMemo } from 'react'; // eslint-disable-next-line no-restricted-imports
 

package/dist/esm/internal/hooks/use-handle-date-change.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { _defineProperty(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; }
 
 import { useCallback, useEffect, useRef } from 'react';
 import { daysPerWeek, monthsPerYear } from '../constants';

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

@@ -1,29 +1,28 @@
 import { B100, B400, B50, B75, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 var textColor = {
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
+  dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
 };
-var textColorMedium = token('color.text.mediumEmphasis', N600);
+var textColorMedium = "var(--ds-text-mediumEmphasis, ".concat(N600, ")");
 var todayColor = {
-  light: token('color.text.selected', B400),
-  dark: token('color.text.selected', B100)
+  light: "var(--ds-text-selected, ".concat(B400, ")"),
+  dark: "var(--ds-text-selected, ".concat(B100, ")")
 };
 var hoverBackground = {
-  light: token('color.background.transparentNeutral.hover', N30),
-  dark: token('color.background.transparentNeutral.hover', N800)
+  light: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")"),
+  dark: "var(--ds-background-transparentNeutral-hover, ".concat(N800, ")")
 };
 var textSelected = {
-  light: token('color.text.selected', N0),
-  dark: token('color.text.selected', N700)
+  light: "var(--ds-text-selected, ".concat(N0, ")"),
+  dark: "var(--ds-text-selected, ".concat(N700, ")")
 };
 var selectedBackground = {
-  light: token('color.background.selected.resting', N500),
-  dark: token('color.background.selected.resting', N0)
+  light: "var(--ds-background-selected-resting, ".concat(N500, ")"),
+  dark: "var(--ds-background-selected-resting, ".concat(N0, ")")
 };
 var borderColorFocused = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: "var(--ds-border-focus, ".concat(B100, ")"),
+  dark: "var(--ds-border-focus, ".concat(B75, ")")
 };
 export var dateCellStyles = function dateCellStyles() {
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
@@ -40,7 +39,7 @@ export var dateCellStyles = function dateCellStyles() {
     fontSize: 14,
     textAlign: 'center',
     '&[data-sibling]': {
-      color: token('color.text.lowEmphasis', N200)
+      color: "var(--ds-text-lowEmphasis, ".concat(N200, ")")
     },
     '&[data-today]': {
       color: todayColor[mode],
@@ -57,15 +56,15 @@ export var dateCellStyles = function dateCellStyles() {
       }
     },
     '&[data-prev-selected]': {
-      backgroundColor: token('color.background.subtleBrand.resting', B50),
-      color: token('color.text.mediumEmphasis', N600)
+      backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(B50, ")"),
+      color: "var(--ds-text-mediumEmphasis, ".concat(N600, ")")
     },
     '&[data-selected]': {
       backgroundColor: selectedBackground[mode],
       color: textSelected[mode]
     },
     '&[data-disabled]': {
-      color: token('color.text.disabled', N40),
+      color: "var(--ds-text-disabled, ".concat(N40, ")"),
       cursor: 'not-allowed'
     },
     '&[data-focused]': {
@@ -76,22 +75,22 @@ export var dateCellStyles = function dateCellStyles() {
       color: textColor[mode]
     },
     '&:active': {
-      backgroundColor: token('color.background.transparentNeutral.pressed', B50),
+      backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(B50, ")"),
       color: textColor[mode]
     },
     '&[data-selected]:hover': {
       color: textColorMedium
     },
     '&[data-prev-selected]:hover': {
-      backgroundColor: token('color.background.subtleBrand.resting', B50),
+      backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(B50, ")"),
       color: textColorMedium
     },
     '&[data-sibling]:hover': {
-      color: token('color.text.lowEmphasis', N200)
+      color: "var(--ds-text-lowEmphasis, ".concat(N200, ")")
     },
     '&[data-disabled]:hover': {
       backgroundColor: 'transparent',
-      color: token('color.text.disabled', N40)
+      color: "var(--ds-text-disabled, ".concat(N40, ")")
     }
   };
 };

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "12.1.2",
+  "version": "12.1.6",
   "description": "A React component for displaying a calendar.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Calendar"
@@ -26,10 +25,11 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/ds-lib": "^1.3.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/locale": "^2.3.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/visually-hidden": "^0.1.1",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "date-fns": "^2.17.0",
@@ -39,7 +39,6 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/docs": "*",
     "@atlaskit/select": "^15.0.0",
     "@atlaskit/ssr": "*",
@@ -65,7 +64,10 @@
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
-      "styling": "emotion"
+      "styling": [
+        "static",
+        "emotion"
+      ]
     }
   },
   "af:exports": {