@atlaskit/calendar 12.3.0 → 12.4.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/calendar
 
+## 12.4.0
+
+### Minor Changes
+
+- [`764726e020b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/764726e020b) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.3.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 12.3.1
+
+### Patch Changes
+
+- [`124a1b7532b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/124a1b7532b) - Remove calendar's background when design tokens are provided, to allow calendar to match the color of any surface in light or dark mode
+- [`6bf81ead961`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6bf81ead961) - Internal code change turning on new linting rules.
+- Updated dependencies
+
 ## 12.3.0
 
 ### Minor Changes

package/dist/cjs/calendar.js

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 
@@ -55,25 +55,25 @@ 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, _core.css)({
+var lightWrapperStyles = (0, _react2.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N0, ")"),
   color: "var(--ds-text, ".concat(_colors.N900, ")"),
   outline: 'none',
   userSelect: 'none'
 });
-var darkWrapperStyles = (0, _core.css)({
+var darkWrapperStyles = (0, _react2.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N700, ")"),
+  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N700, ")"),
   color: "var(--ds-text, ".concat(_colors.DN600, ")"),
   outline: 'none',
   userSelect: 'none'
 });
-var gridsContainerStyles = (0, _core.css)({
+var gridsContainerStyles = (0, _react2.css)({
   display: 'inline-block',
   width: 289,
   margin: 0,
@@ -83,7 +83,7 @@ var gridsContainerStyles = (0, _core.css)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.3.0"
+  packageVersion: "12.4.0"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -229,7 +229,7 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       monthsLong = _useLocale.monthsLong,
       daysShort = _useLocale.daysShort;
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     className: className,
     style: style,
     onBlur: handleContainerBlur,
@@ -238,17 +238,17 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     role: "presentation",
     "data-testid": testId && "".concat(testId, "--container"),
     ref: ref
-  }, (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
+  }, (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate)), (0, _core.jsx)("div", {
+  }, announcerDate)), (0, _react2.jsx)("div", {
     css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
     "aria-describedby": announceId,
     "aria-label": "calendar",
     role: "grid",
     tabIndex: tabIndex
-  }, (0, _core.jsx)(_heading.default // The month number needs to be translated to index in the month
+  }, (0, _react2.jsx)(_heading.default // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
     monthLongTitle: monthsLong[monthValue - 1],
@@ -259,23 +259,33 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     handleClickPrev: handleClickPrev,
     mode: mode,
     testId: testId
-  }), (0, _core.jsx)("div", {
+  }), (0, _react2.jsx)("div", {
     css: gridsContainerStyles,
     role: "presentation"
-  }, (0, _core.jsx)(_weekHeader.default, {
+  }, (0, _react2.jsx)(_weekHeader.default, {
     daysShort: daysShort,
     mode: mode
-  }), (0, _core.jsx)(_weekDays.default, {
+  }), (0, _react2.jsx)(_weekDays.default, {
     weeks: weeks,
     handleClickDay: handleClickDay,
     mode: mode,
     testId: testId
   }))));
 });
+/**
+ * __Calendar__
+ *
+ * A calendar is used for date selection.
+ *
+ * - [Examples](https://atlassian.design/components/calendar/examples)
+ * - [Code](https://atlassian.design/components/calendar/code)
+ * - [Usage](https://atlassian.design/components/calendar/usage)
+ */
+
 var Calendar = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Calendar(props, ref) {
-  return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
+  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;
-    return (0, _core.jsx)(CalendarWithMode, (0, _extends2.default)({}, props, {
+    return (0, _react2.jsx)(CalendarWithMode, (0, _extends2.default)({}, props, {
       mode: mode,
       ref: ref
     }));

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
@@ -66,9 +66,9 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     }
   }, [onClick]);
   var dateCellStyles = (0, _react.useMemo)(function () {
-    return (0, _date.dateCellStyles)(mode);
+    return (0, _react2.css)((0, _date.dateCellStyles)(mode));
   }, [mode]);
-  return (0, _core.jsx)("button", {
+  return (0, _react2.jsx)("button", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     css: dateCellStyles,
     "aria-selected": isSelected ? 'true' : 'false',
@@ -86,6 +86,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     "data-testid": testId && isSelected ? "".concat(testId, "--selected-day") : undefined
   }, day);
 }));
-Date.displayName = 'Date';
+Date.displayName = 'Date'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = Date;
 exports.default = _default;

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
@@ -24,7 +24,7 @@ var headingColor = {
   light: "var(--ds-text, ".concat(_colors.N800, ")"),
   dark: "var(--ds-text, ".concat(_colors.DN800, ")")
 };
-var headingStyles = (0, _core.css)({
+var headingStyles = (0, _react2.css)({
   display: 'flex',
   padding: '0 0 13px 0',
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
@@ -33,17 +33,17 @@ var headingStyles = (0, _core.css)({
 
 var getMonthAndYearStyles = function getMonthAndYearStyles() {
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  return (0, _core.css)({
+  return (0, _react2.css)({
     flexBasis: '100%',
     color: headingColor[mode],
     textAlign: 'center'
   });
 };
 
-var arrowLeftStyles = (0, _core.css)({
+var arrowLeftStyles = (0, _react2.css)({
   marginLeft: 8
 });
-var arrowRightStyles = (0, _core.css)({
+var arrowRightStyles = (0, _react2.css)({
   marginRight: 8
 });
 var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
@@ -60,34 +60,34 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
   var monthAndYearStyles = (0, _react.useMemo)(function () {
     return getMonthAndYearStyles(mode);
   }, [mode]);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: headingStyles,
     "aria-hidden": "true"
-  }, (0, _core.jsx)(_standardButton.default, {
+  }, (0, _react2.jsx)(_standardButton.default, {
     css: arrowLeftStyles,
     appearance: "subtle",
     spacing: "none",
     tabIndex: -1,
     onClick: handleClickPrev,
     testId: testId && "".concat(testId, "--previous-month"),
-    iconBefore: (0, _core.jsx)(_chevronLeftLarge.default, {
+    iconBefore: (0, _react2.jsx)(_chevronLeftLarge.default, {
       label: previousMonthLabel,
       size: "medium",
       primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
       testId: testId && "".concat(testId, "--previous-month-icon")
     })
-  }), (0, _core.jsx)("div", {
+  }), (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")
-  }, "".concat(monthLongTitle, " ").concat(year)), (0, _core.jsx)(_standardButton.default, {
+  }, "".concat(monthLongTitle, " ").concat(year)), (0, _react2.jsx)(_standardButton.default, {
     css: arrowRightStyles,
     appearance: "subtle",
     spacing: "none",
     tabIndex: -1,
     onClick: handleClickNext,
     testId: testId && "".concat(testId, "--next-month"),
-    iconBefore: (0, _core.jsx)(_chevronRightLarge.default, {
+    iconBefore: (0, _react2.jsx)(_chevronRightLarge.default, {
       label: nextMonthLabel,
       size: "medium",
       primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
@@ -95,6 +95,7 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
     })
   }));
 });
-Heading.displayName = 'Heading';
+Heading.displayName = 'Heading'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = Heading;
 exports.default = _default;

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

@@ -9,12 +9,12 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _date = _interopRequireDefault(require("./date"));
 
 /** @jsx jsx */
-var daysGridStyles = (0, _core.css)({
+var daysGridStyles = (0, _react2.css)({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, 1fr)',
   border: 0
@@ -24,16 +24,16 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
       handleClickDay = _ref.handleClickDay,
       mode = _ref.mode,
       testId = _ref.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     role: "grid",
     "data-testid": testId && "".concat(testId, "--month")
   }, weeks.map(function (week) {
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       role: "row",
       key: week.id,
       css: daysGridStyles
     }, week.values.map(function (weekDay) {
-      return (0, _core.jsx)(_date.default, {
+      return (0, _react2.jsx)(_date.default, {
         key: weekDay.id,
         isDisabled: weekDay.isDisabled,
         isFocused: weekDay.isFocused,
@@ -50,6 +50,7 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
     }));
   }));
 });
-WeekDays.displayName = 'WeekDays';
+WeekDays.displayName = 'WeekDays'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = WeekDays;
 exports.default = _default;

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

@@ -7,17 +7,17 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
-var dayNameGridStyles = (0, _core.css)({
+var dayNameGridStyles = (0, _react2.css)({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, 1fr)',
   border: 0
 });
-var dayNameCellStyles = (0, _core.css)({
+var dayNameCellStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   minWidth: 40,
   padding: '8px 8px',
@@ -31,15 +31,16 @@ var dayNameCellStyles = (0, _core.css)({
 });
 var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: dayNameGridStyles
   }, daysShort.map(function (shortDay) {
-    return (0, _core.jsx)("span", {
+    return (0, _react2.jsx)("span", {
       css: dayNameCellStyles,
       key: shortDay
     }, shortDay);
   }));
 });
-WeekHeader.displayName = 'WeekHeader';
+WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = WeekHeader;
 exports.default = _default;

package/dist/cjs/internal/hooks/use-calendar-ref.js

@@ -7,6 +7,7 @@ exports.default = useCalendarRef;
 
 var _react = require("react");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useCalendarRef(calendarRef, _ref) {
   var navigate = _ref.navigate;
   (0, _react.useImperativeHandle)(calendarRef, function () {

package/dist/cjs/internal/hooks/use-controlled-date-state.js

@@ -15,6 +15,7 @@ var _useLazyRef2 = _interopRequireDefault(require("@atlaskit/ds-lib/use-lazy-ref
 
 var _pad = _interopRequireDefault(require("../utils/pad"));
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useControlledDateState(_ref) {
   var day = _ref.day,
       defaultDay = _ref.defaultDay,

package/dist/cjs/internal/hooks/use-focusing.js

@@ -7,6 +7,7 @@ exports.default = useFocusing;
 
 var _react = require("react");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useFocusing(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus;

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

@@ -47,7 +47,8 @@ function useGetCalendarWithSixthWeek(calendar, _ref) {
       });
     }
   }, [calendarLastValue, month, shouldDisplaySixthWeek, weekStartDay, year]);
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 function useGetWeeks(_ref2) {
   var day = _ref2.day,

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

@@ -55,7 +55,8 @@ var getPrevMonth = function getPrevMonth(monthValue, yearValue) {
     month: month,
     year: year
   };
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 function useHandleDateChange(_ref) {
   var _ref$day = (0, _slicedToArray2.default)(_ref.day, 2),

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

@@ -15,6 +15,7 @@ var _constants = require("../constants");
 
 var _dateToString = _interopRequireDefault(require("../utils/date-to-string"));
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useHandleDateSelect(_ref) {
   var _ref$day = (0, _slicedToArray2.default)(_ref.day, 1),
       dayValue = _ref$day[0],

package/dist/cjs/internal/hooks/use-locale.js

@@ -9,6 +9,7 @@ var _react = require("react");
 
 var _locale = require("@atlaskit/locale");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useLocale(_ref) {
   var locale = _ref.locale,
       weekStartDay = _ref.weekStartDay;

package/dist/cjs/internal/hooks/use-unique-id.js

@@ -7,6 +7,7 @@ exports.default = useUniqueId;
 
 var _reactUid = require("react-uid");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useUniqueId(prefix) {
   var seed = (0, _reactUid.useUIDSeed)();
   return "".concat(prefix, "-").concat(seed(prefix));

package/dist/cjs/version.json

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

package/dist/es2019/calendar.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, memo, useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
@@ -24,7 +24,7 @@ const lightWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N0})`,
   color: `var(--ds-text, ${N900})`,
   outline: 'none',
   userSelect: 'none'
@@ -33,7 +33,7 @@ const darkWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: `var(--ds-surface-overlay, ${N700})`,
+  backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N700})`,
   color: `var(--ds-text, ${DN600})`,
   outline: 'none',
   userSelect: 'none'
@@ -48,7 +48,7 @@ const gridsContainerStyles = css({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.3.0"
+  packageVersion: "12.4.0"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -211,6 +211,16 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     testId: testId
   }))));
 });
+/**
+ * __Calendar__
+ *
+ * A calendar is used for date selection.
+ *
+ * - [Examples](https://atlassian.design/components/calendar/examples)
+ * - [Code](https://atlassian.design/components/calendar/code)
+ * - [Usage](https://atlassian.design/components/calendar/usage)
+ */
+
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
   return jsx(GlobalTheme.Consumer, null, ({
     mode

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { dateCellStyles as getDateCellStyles } from '../styles/date';
 const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
@@ -47,7 +47,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
       });
     }
   }, [onClick]);
-  const dateCellStyles = useMemo(() => getDateCellStyles(mode), [mode]);
+  const dateCellStyles = useMemo(() => css(getDateCellStyles(mode)), [mode]);
   return jsx("button", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     css: dateCellStyles,
@@ -66,5 +66,6 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     "data-testid": testId && isSelected ? `${testId}--selected-day` : undefined
   }, day);
 }));
-Date.displayName = 'Date';
+Date.displayName = 'Date'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Date;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo, useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 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';
@@ -74,5 +74,6 @@ const Heading = /*#__PURE__*/memo(function Heading({
     })
   }));
 });
-Heading.displayName = 'Heading';
+Heading.displayName = 'Heading'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Heading;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import DateComponent from './date';
 const daysGridStyles = css({
   display: 'grid',
@@ -35,5 +35,6 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
     testId: testId
   }, weekDay.day)))));
 });
-WeekDays.displayName = 'WeekDays';
+WeekDays.displayName = 'WeekDays'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default WeekDays;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 const dayNameGridStyles = css({
   display: 'grid',
@@ -29,5 +29,6 @@ const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
     key: shortDay
   }, shortDay)));
 });
-WeekHeader.displayName = 'WeekHeader';
+WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default WeekHeader;

package/dist/es2019/internal/hooks/use-calendar-ref.js

@@ -1,4 +1,5 @@
 import { useImperativeHandle } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useCalendarRef(calendarRef, {
   navigate
 }) {

package/dist/es2019/internal/hooks/use-controlled-date-state.js

@@ -1,6 +1,7 @@
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import useLazyRef from '@atlaskit/ds-lib/use-lazy-ref';
-import pad from '../utils/pad';
+import pad from '../utils/pad'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useControlledDateState({
   day,
   defaultDay,

package/dist/es2019/internal/hooks/use-focusing.js

@@ -1,4 +1,5 @@
-import { useCallback } from 'react';
+import { useCallback } from 'react'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useFocusing({
   onBlur,
   onFocus

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

@@ -26,7 +26,8 @@ function useGetCalendarWithSixthWeek(calendar, {
       }));
     }
   }, [calendarLastValue, month, shouldDisplaySixthWeek, weekStartDay, year]);
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default function useGetWeeks({
   day,

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

@@ -35,7 +35,8 @@ const getPrevMonth = (monthValue, yearValue) => {
     month,
     year
   };
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default function useHandleDateChange({
   day: [dayValue, setDayValue],

package/dist/es2019/internal/hooks/use-handle-date-select.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { arrowKeys } from '../constants';
-import dateToString from '../utils/date-to-string';
+import dateToString from '../utils/date-to-string'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useHandleDateSelect({
   day: [dayValue],
   month: [monthValue],

package/dist/es2019/internal/hooks/use-locale.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { createLocalizationProvider } from '@atlaskit/locale';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useLocale({
   locale,
   weekStartDay

package/dist/es2019/internal/hooks/use-unique-id.js

@@ -1,4 +1,5 @@
-import { useUIDSeed } from 'react-uid';
+import { useUIDSeed } from 'react-uid'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useUniqueId(prefix) {
   const seed = useUIDSeed();
   return `${prefix}-${seed(prefix)}`;

package/dist/es2019/version.json

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

package/dist/esm/calendar.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { forwardRef, memo, useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
@@ -30,7 +30,7 @@ var lightWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(N0, ")"),
   color: "var(--ds-text, ".concat(N900, ")"),
   outline: 'none',
   userSelect: 'none'
@@ -39,7 +39,7 @@ var darkWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N700, ")"),
+  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(N700, ")"),
   color: "var(--ds-text, ".concat(DN600, ")"),
   outline: 'none',
   userSelect: 'none'
@@ -54,7 +54,7 @@ var gridsContainerStyles = css({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.3.0"
+  packageVersion: "12.4.0"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -243,6 +243,16 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     testId: testId
   }))));
 });
+/**
+ * __Calendar__
+ *
+ * A calendar is used for date selection.
+ *
+ * - [Examples](https://atlassian.design/components/calendar/examples)
+ * - [Code](https://atlassian.design/components/calendar/code)
+ * - [Usage](https://atlassian.design/components/calendar/usage)
+ */
+
 var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
   return jsx(GlobalTheme.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { dateCellStyles as getDateCellStyles } from '../styles/date';
 var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
@@ -53,7 +53,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
     }
   }, [onClick]);
   var dateCellStyles = useMemo(function () {
-    return getDateCellStyles(mode);
+    return css(getDateCellStyles(mode));
   }, [mode]);
   return jsx("button", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -73,5 +73,6 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
     "data-testid": testId && isSelected ? "".concat(testId, "--selected-day") : undefined
   }, day);
 }));
-Date.displayName = 'Date';
+Date.displayName = 'Date'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Date;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo, useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 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';
@@ -80,5 +80,6 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
     })
   }));
 });
-Heading.displayName = 'Heading';
+Heading.displayName = 'Heading'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Heading;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import DateComponent from './date';
 var daysGridStyles = css({
   display: 'grid',
@@ -38,5 +38,6 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
     }));
   }));
 });
-WeekDays.displayName = 'WeekDays';
+WeekDays.displayName = 'WeekDays'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default WeekDays;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 var dayNameGridStyles = css({
   display: 'grid',
@@ -30,5 +30,6 @@ var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
     }, shortDay);
   }));
 });
-WeekHeader.displayName = 'WeekHeader';
+WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default WeekHeader;

package/dist/esm/internal/hooks/use-calendar-ref.js

@@ -1,4 +1,5 @@
 import { useImperativeHandle } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useCalendarRef(calendarRef, _ref) {
   var navigate = _ref.navigate;
   useImperativeHandle(calendarRef, function () {

package/dist/esm/internal/hooks/use-controlled-date-state.js

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import useLazyRef from '@atlaskit/ds-lib/use-lazy-ref';
-import pad from '../utils/pad';
+import pad from '../utils/pad'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useControlledDateState(_ref) {
   var day = _ref.day,
       defaultDay = _ref.defaultDay,

package/dist/esm/internal/hooks/use-focusing.js

@@ -1,4 +1,5 @@
-import { useCallback } from 'react';
+import { useCallback } from 'react'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useFocusing(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus;

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

@@ -34,7 +34,8 @@ function useGetCalendarWithSixthWeek(calendar, _ref) {
       });
     }
   }, [calendarLastValue, month, shouldDisplaySixthWeek, weekStartDay, year]);
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default function useGetWeeks(_ref2) {
   var day = _ref2.day,

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

@@ -42,7 +42,8 @@ var getPrevMonth = function getPrevMonth(monthValue, yearValue) {
     month: month,
     year: year
   };
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default function useHandleDateChange(_ref) {
   var _ref$day = _slicedToArray(_ref.day, 2),

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

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useRef } from 'react';
 import { arrowKeys } from '../constants';
-import dateToString from '../utils/date-to-string';
+import dateToString from '../utils/date-to-string'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useHandleDateSelect(_ref) {
   var _ref$day = _slicedToArray(_ref.day, 1),
       dayValue = _ref$day[0],

package/dist/esm/internal/hooks/use-locale.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { createLocalizationProvider } from '@atlaskit/locale';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useLocale(_ref) {
   var locale = _ref.locale,
       weekStartDay = _ref.weekStartDay;

package/dist/esm/internal/hooks/use-unique-id.js

@@ -1,4 +1,5 @@
-import { useUIDSeed } from 'react-uid';
+import { useUIDSeed } from 'react-uid'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useUniqueId(prefix) {
   var seed = useUIDSeed();
   return "".concat(prefix, "-").concat(seed(prefix));

package/dist/esm/version.json

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

package/dist/types/calendar.d.ts

@@ -1,4 +1,13 @@
 /// <reference types="react" />
 import type { CalendarProps } from './types';
-declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "style" | "disabled" | "selected" | "className" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "analyticsContext" | "day" | "month" | "defaultDay" | "defaultMonth" | "defaultYear" | "today" | "defaultSelected" | "previouslySelected" | "defaultPreviouslySelected" | "weekStartDay" | "disabledDateFilter" | "minDate" | "maxDate" | "locale" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
+/**
+ * __Calendar__
+ *
+ * A calendar is used for date selection.
+ *
+ * - [Examples](https://atlassian.design/components/calendar/examples)
+ * - [Code](https://atlassian.design/components/calendar/code)
+ * - [Usage](https://atlassian.design/components/calendar/usage)
+ */
+declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "style" | "disabled" | "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "className" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "selected" | "analyticsContext" | "day" | "month" | "defaultDay" | "defaultMonth" | "defaultYear" | "today" | "defaultSelected" | "previouslySelected" | "defaultPreviouslySelected" | "weekStartDay" | "disabledDateFilter" | "minDate" | "maxDate" | "locale" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
 export default Calendar;

package/dist/types/internal/components/date.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
 import type { DateObj } from '../types';
-interface Props {
+interface DateProps {
     children: number;
     isDisabled?: boolean;
     isFocused?: boolean;
@@ -15,5 +15,5 @@ interface Props {
     mode?: ThemeModes;
     testId?: string;
 }
-declare const Date: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>>;
+declare const Date: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<DateProps & import("react").RefAttributes<HTMLButtonElement>>>;
 export default Date;

package/dist/types/internal/components/heading.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
-interface Props {
+interface HeadingProps {
     monthLongTitle: string;
     year: number;
     previousMonthLabel?: string;
@@ -10,5 +10,5 @@ interface Props {
     mode?: ThemeModes;
     testId?: string;
 }
-declare const Heading: import("react").NamedExoticComponent<Props>;
+declare const Heading: import("react").NamedExoticComponent<HeadingProps>;
 export default Heading;

package/dist/types/internal/components/week-days.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import type { ThemeModes } from '@atlaskit/theme/types';
 import { DateObj, Week } from '../types';
-interface Props {
+interface WeekDaysProps {
     weeks: Week[];
     handleClickDay: (date: DateObj) => void;
     mode?: ThemeModes;
     testId?: string;
 }
-declare const WeekDays: import("react").NamedExoticComponent<Props>;
+declare const WeekDays: import("react").NamedExoticComponent<WeekDaysProps>;
 export default WeekDays;

package/dist/types/internal/components/week-header.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { ThemeModes } from '@atlaskit/theme/types';
-interface Props {
+interface WeekHeaderProps {
     daysShort: string[];
     mode?: ThemeModes;
 }
-declare const WeekHeader: import("react").NamedExoticComponent<Props>;
+declare const WeekHeader: import("react").NamedExoticComponent<WeekHeaderProps>;
 export default WeekHeader;

package/dist/types/internal/styles/date.d.ts

@@ -1,3 +1,3 @@
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { ThemeModes } from '@atlaskit/theme/types';
 export declare const dateCellStyles: (mode?: ThemeModes) => CSSObject;

package/dist/types/types.d.ts

@@ -11,58 +11,104 @@ export declare type SelectEvent = {
     iso: ISODate;
 } & DateObj;
 export interface CalendarProps extends WithAnalyticsEventsProps {
-    /** The number of the day currently focused. Places border around the date. 0 highlights no date. */
+    /**
+     * The number of the day currently focused. Places border around the date. 0 highlights no date.
+     */
     day?: number;
-    /** Default for `day`. */
+    /**
+     * Default for `day`.
+     */
     defaultDay?: number;
-    /** Default for `month`. */
+    /**
+     * Default for `month`.
+     */
     defaultMonth?: number;
-    /** Default for `previouslySelected`. */
+    /**
+     * Default for `previouslySelected`.
+     */
     defaultPreviouslySelected?: Array<string>;
-    /** Default for `selected`. */
+    /**
+     * Default for `selected`.
+     */
     defaultSelected?: Array<string>;
-    /** Default for `year`. */
+    /**
+     * Default for `year`.
+     */
     defaultYear?: number;
-    /** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates provided are greyed out.
-     This does not prevent these dates being selected. */
+    /**
+     * Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates provided are greyed out.
+     * This does not prevent these dates being selected.
+     */
     disabled?: Array<string>;
-    /** A filter function that takes a date string in the format 'YYYY-MM-DD' and returns true if that date should be disabled. */
+    /**
+     * A filter function that takes a date string in the format 'YYYY-MM-DD' and returns true if that date should be disabled.
+     */
     disabledDateFilter?: (date: string) => boolean;
-    /** The latest enabled date */
+    /**
+     * The latest enabled date
+     */
     maxDate?: string;
-    /** The earliest enabled date */
+    /**
+     * The earliest enabled date
+     */
     minDate?: string;
-    /** The number of the month (from 1 to 12) which the calendar should be on. */
+    /**
+     * The number of the month (from 1 to 12) which the calendar should be on.
+     */
     month?: number;
-    /** The aria-label attribute associated with the next-month arrow. */
+    /**
+     * The aria-label attribute associated with the next-month arrow.
+     */
     nextMonthLabel?: string;
-    /** Function which is called when the calendar is no longer focused. */
+    /**
+     * Function which is called when the calendar is no longer focused.
+     */
     onBlur?: React.FocusEventHandler;
-    /** Called when the calendar is navigated. This can be triggered by the keyboard, or by clicking the navigational buttons.
-     The 'interface' property indicates the the direction the calendar was navigated whereas the 'iso' property is a string of the format YYYY-MM-DD. */
+    /**
+     * Called when the calendar is navigated. This can be triggered by the keyboard, or by clicking the navigational buttons.
+     * The 'interface' property indicates the the direction the calendar was navigated whereas the 'iso' property is a string of the format YYYY-MM-DD.
+     */
     onChange?: (event: ChangeEvent, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Called when the calendar receives focus. This could be from a mouse event on the container by tabbing into it. */
+    /**
+     * Called when the calendar receives focus. This could be from a mouse event on the container by tabbing into it.
+     */
     onFocus?: React.FocusEventHandler;
-    /** Function called when a day is clicked on. Calls with an object that has
-    a day, month and year property as numbers, representing the date just clicked.
-    It also has an 'iso' property, which is a string of the selected date in the
-    format YYYY-MM-DD. */
+    /**
+     * Function called when a day is clicked on. Calls with an object that has
+     * a day, month and year property as numbers, representing the date just clicked.
+     * It also has an 'iso' property, which is a string of the selected date in the
+     * format YYYY-MM-DD.
+     */
     onSelect?: (event: SelectEvent, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
-     provided are given a background color. */
+    /**
+     * Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
+     * provided are given a background color.
+     */
     previouslySelected?: Array<string>;
-    /** The aria-label attribute associated with the previous-month arrow. */
+    /**
+     * The aria-label attribute associated with the previous-month arrow.
+     */
     previousMonthLabel?: string;
-    /** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
-     provided are given a background color. */
+    /**
+     * Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
+     * provided are given a background color.
+     */
     selected?: Array<string>;
-    /** Value of current day, as a string in the format 'YYYY-MM-DD'. */
+    /**
+     * Value of current day, as a string in the format 'YYYY-MM-DD'.
+     */
     today?: string;
-    /** Year to display the calendar for. */
+    /**
+     * Year to display the calendar for.
+     */
     year?: number;
-    /** BCP 47 language tag (e.g. ja-JP) that ensures dates are in the official format for the locale. */
+    /**
+     * BCP 47 language tag (e.g. ja-JP) that ensures dates are in the official format for the locale.
+     */
     locale?: string;
-    /** Additional information to be included in the `context` of analytics events. */
+    /**
+     * Additional information to be included in the `context` of analytics events.
+     */
     analyticsContext?: Record<string, any>;
     /**
      * Start day of the week for the calendar.
@@ -84,7 +130,7 @@ export interface CalendarProps extends WithAnalyticsEventsProps {
      * testId--next-month - Button to show previous month
      * testId--current-month-year - Text containing the current month and year
      * testId--selected-day - The currently selected day (may be missing if a date isn’t selected)
-     * */
+     */
     testId?: string;
     /**
      * Class name to apply to the calendar

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "12.3.0",
+  "version": "12.4.0",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,7 +13,7 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
@@ -25,14 +25,14 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/locale": "^2.3.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
-    "@atlaskit/visually-hidden": "^1.0.0",
+    "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
     "react-uid": "^2.2.0"
   },
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -53,7 +53,7 @@
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -62,6 +62,7 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
@@ -73,8 +74,8 @@
     }
   },
   "af:exports": {
-    "./types": "./src/entry-points/types.ts",
-    ".": "./src/index.ts"
+    "./types": "./src/entry-points/types.tsx",
+    ".": "./src/index.tsx"
   },
   "homepage": "https://atlassian.design/components/calendar/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"