@atlaskit/calendar 15.1.3 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/calendar
 
+## 16.0.0
+
+### Major Changes
+
+- [#177508](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/177508)
+  [`a58e08c43671b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a58e08c43671b) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/calendar`, you will need to ensure that
+  your bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in
+  support for `.css` imports, so you may not need to do anything. If you are using a different
+  bundler, please refer to the documentation for that bundler to understand how to handle `.css`
+  imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 15.1.3
 
 ### Patch Changes

package/dist/cjs/calendar.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1o8l{display:inline-block}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/cjs/calendar.js

@@ -1,19 +1,23 @@
+/* calendar.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./calendar.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _header = _interopRequireDefault(require("./internal/components/header"));
 var _weekDays = _interopRequireDefault(require("./internal/components/week-days"));
 var _weekHeader = _interopRequireDefault(require("./internal/components/week-header"));
@@ -24,19 +28,17 @@ var _useGetWeeks = _interopRequireDefault(require("./internal/hooks/use-get-week
 var _useHandleDateChange2 = _interopRequireDefault(require("./internal/hooks/use-handle-date-change"));
 var _useHandleDateSelect2 = _interopRequireDefault(require("./internal/hooks/use-handle-date-select"));
 var _useLocale2 = _interopRequireDefault(require("./internal/hooks/use-locale"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var boxStyles = (0, _primitives.xcss)({
-  display: 'inline-block',
-  userSelect: 'none'
-});
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var styles = {
+  box: "_1e0c1o8l _uiztglyw"
+};
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "15.1.3"
+  packageVersion: "16.0.0"
 };
 var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -189,8 +191,9 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
   };
   var headerId = (0, _useId.useId)();
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("div", {
+    React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -200,14 +203,14 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
       onFocus: handleContainerFocus,
       "data-testid": testId && "".concat(testId, "--container"),
       ref: ref
-    }, (0, _react2.jsx)(_primitives.Box, {
-      xcss: boxStyles,
+    }, /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.box,
       padding: "space.200",
       "aria-label": "calendar",
       testId: testId && "".concat(testId, "--calendar")
-    }, (0, _react2.jsx)(_primitives.Stack, {
+    }, /*#__PURE__*/React.createElement(_compiled.Stack, {
       space: "space.150"
-    }, (0, _react2.jsx)(_header.default
+    }, /*#__PURE__*/React.createElement(_header.default
     // The month number needs to be translated to index in the month
     // name array e.g. 1 (January) -> 0
     , {
@@ -222,15 +225,15 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
       headerId: headerId,
       tabIndex: tabIndex,
       testId: testId
-    }), (0, _react2.jsx)(_primitives.Box, {
+    }), /*#__PURE__*/React.createElement(_compiled.Box, {
       role: "grid",
       onKeyDown: handleContainerKeyDown,
       "aria-labelledby": headerId,
       testId: testId && "".concat(testId, "--calendar-dates")
-    }, (0, _react2.jsx)(_weekHeader.default, {
+    }, /*#__PURE__*/React.createElement(_weekHeader.default, {
       daysShort: daysShort,
       testId: testId
-    }), (0, _react2.jsx)(_weekDays.default, {
+    }), /*#__PURE__*/React.createElement(_weekDays.default, {
       weeks: weeks,
       handleClickDay: handleClickDay,
       monthsLong: monthsLong,
@@ -251,7 +254,7 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
 var Calendar = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Calendar(props, ref) {
-  return (0, _react2.jsx)(InnerCalendar, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement(InnerCalendar, (0, _extends2.default)({}, props, {
     ref: ref
   }));
 }));

package/dist/cjs/internal/components/date.compiled.css

@@ -0,0 +1,44 @@
+
+._kkk2n7od{all:unset}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt432tv{padding:var(--_1arop38)}
+._2rko1l7b{border-radius:3px}
+._189eyh40{border-width:2px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._16jlkb7n{flex-grow:1}
+._18postnw:after{position:absolute}
+._1czdv77o:after{inset-inline-end:var(--ds-space-025,2px)}
+._1e0c1ule{display:block}
+._1gufv77o:after{inset-block-end:var(--ds-space-025,2px)}
+._1hfk1r31:after{background-color:currentColor}
+._1qdgyh40:after{height:2px}
+._1ywu1ule:after{display:block}
+._80om13gf{cursor:not-allowed}
+._80omtlke{cursor:pointer}
+._aetrb3bt:after{content:""}
+._bfhk18uv{background-color:initial}
+._bfhk1kxl{background-color:var(--_rryx0a)}
+._bfhky9dz{background-color:var(--_7nwbia)}
+._g0nfv77o:after{inset-inline-start:var(--ds-space-025,2px)}
+._k48p1igg{font-weight:var(--ds-font-weight-bold,bold)}
+._kqswh2mm{position:relative}
+._syaz11g7{color:var(--_y28k9g)}
+._syaz1a5u{color:var(--_1oh641w)}
+._syazf50w{color:var(--_118fb4h)}
+._syazln51{color:var(--_1hfkvbo)}
+._syazovqm{color:var(--_5xk3r4)}
+._syazpsu8{color:var(--_vrm7dk)}
+._y3gn1h6o{text-align:center}._10knnqa1:focus-visible{border-style:solid}
+._1wysyh40:focus-visible{border-width:2px}
+._pojj3zdg:focus-visible{border-color:var(--_xjqa3d)}
+._30l31a5u:hover{color:var(--_1oh641w)}
+._30l3dgff:hover{color:var(--_f9evi3)}
+._30l3f50w:hover{color:var(--_118fb4h)}
+._30l3ovqm:hover{color:var(--_5xk3r4)}
+._30l3psu8:hover{color:var(--_vrm7dk)}
+._irr318uv:hover{background-color:initial}
+._irr32tgk:hover{background-color:var(--_1y60f1n)}
+._irr3j4m7:hover{background-color:var(--_1wu4xsl)}
+._1di618xb:active{background-color:var(--_18th9fi)}
+._9h8hovqm:active{color:var(--_5xk3r4)}

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

@@ -1,22 +1,27 @@
+/* date.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+require("./date.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _primitives = require("@atlaskit/primitives");
-var _date = require("../styles/date");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _colors = require("@atlaskit/theme/colors");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var dateCellSiblingStyle = null;
+var dateCellTodayStyle = null;
+var dateCellPrevSelectedStyle = null;
+var dateCellSelectedStyle = null;
+var dateCellDisabledStyle = null;
+var dateCellStyles = null;
 var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Date(_ref2, _ref) {
   var day = _ref2.children,
     _ref2$isDisabled = _ref2.isDisabled,
@@ -74,15 +79,10 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
       });
     }
   }, [onClick]);
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var dateCellStyles = (0, _react2.css)((0, _date.dateCellStyles)());
-  return (0, _react2.jsx)(_primitives.Grid, {
+  return /*#__PURE__*/React.createElement(_primitives.Grid, {
     role: "gridcell",
     alignItems: "center"
-  }, (0, _react2.jsx)("button", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: dateCellStyles,
+  }, /*#__PURE__*/React.createElement("button", {
     "aria-current": isToday ? 'date' : undefined,
     "aria-disabled": isDisabled || undefined,
     "aria-label": "".concat(day, ", ").concat(dayLong, " ").concat(monthLong, " ").concat(year),
@@ -97,7 +97,24 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     "data-selected": isSelected || undefined,
     "data-sibling": isSibling || undefined,
     "data-today": isToday || undefined,
-    "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
+    "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day")),
+    className: (0, _runtime.ax)(["_1e0c1ule _1yt432tv _kqswh2mm _16jlkb7n _kkk2n7od _bfhk18uv _1h6d1j28 _2rko1l7b _1dqonqa1 _189eyh40 _syazovqm _80omtlke _11c81oud _y3gn1h6o _pojj3zdg _10knnqa1 _1wysyh40 _irr32tgk _30l3ovqm _1di618xb _9h8hovqm", isSibling && "_syazpsu8 _30l3psu8", isToday && "_syazln51 _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk1kxl _syaz1a5u _30l31a5u", isSelected && "_bfhky9dz _syaz11g7 _irr3j4m7 _30l3dgff", isDisabled && "_syazf50w _80om13gf _irr318uv _30l3f50w"]),
+    style: {
+      "--_1arop38": (0, _runtime.ix)("var(--ds-space-050, 4px)".concat(" 9px")),
+      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
+      "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")")),
+      "--_1y60f1n": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")),
+      "--_18th9fi": (0, _runtime.ix)("var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")),
+      "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+      "--_1hfkvbo": (0, _runtime.ix)("var(--ds-text-selected, ".concat(_colors.B400, ")")),
+      "--_rryx0a": (0, _runtime.ix)("var(--ds-background-selected, ".concat(_colors.B50, ")")),
+      "--_1oh641w": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N600, ")")),
+      "--_7nwbia": (0, _runtime.ix)("var(--ds-background-selected, ".concat(_colors.N500, ")")),
+      "--_y28k9g": (0, _runtime.ix)("var(--ds-text-selected, ".concat(_colors.N0, ")")),
+      "--_1wu4xsl": (0, _runtime.ix)("var(--ds-background-selected-hovered, ".concat(_colors.B50, ")")),
+      "--_f9evi3": (0, _runtime.ix)("var(--ds-text-selected, ".concat(_colors.N600, ")")),
+      "--_118fb4h": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N40, ")"))
+    }
   }, day));
 }));
 Date.displayName = 'Date';

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

@@ -1,26 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
 var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
 var _primitives = require("@atlaskit/primitives");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
     year = _ref.year,
@@ -60,13 +55,13 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
     }
     handleClickNext(e);
   };
-  return (0, _react2.jsx)(_primitives.Box, {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     paddingInline: "space.100"
-  }, (0, _react2.jsx)(_primitives.Inline, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.0",
     alignBlock: "center",
     spread: "space-between"
-  }, (0, _react2.jsx)(_new.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
     appearance: "subtle",
     spacing: "compact",
     tabIndex: tabIndex,
@@ -74,16 +69,16 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
     testId: testId && "".concat(testId, "--previous-month"),
     icon: _chevronLeftChevronLeftLarge.default,
     label: "".concat(previousMonthLabel, ", ").concat(previousHeading)
-  }), (0, _react2.jsx)(_primitives.Box, {
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
-  }, (0, _react2.jsx)(_heading.default, {
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "xsmall",
     as: "h2",
     id: headerId,
     testId: testId && "".concat(testId, "--current-month-year")
-  }, "".concat(monthLongTitle, " ").concat(year))), (0, _react2.jsx)(_new.IconButton, {
+  }, "".concat(monthLongTitle, " ").concat(year))), /*#__PURE__*/_react.default.createElement(_new.IconButton, {
     appearance: "subtle",
     spacing: "compact",
     tabIndex: tabIndex,

package/dist/cjs/internal/components/week-day-grid.compiled.css

@@ -0,0 +1 @@
+._yv0eloeq{grid-template-columns:repeat(7,minmax(max-content,1fr))}

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

@@ -1,17 +1,18 @@
+/* week-day-grid.tsx generated by @compiled/babel-plugin v0.32.2 */
 "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 _primitives = require("@atlaskit/primitives");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+require("./week-day-grid.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  templateColumns: "_yv0eloeq"
+};
 
 /**
  * __Week day grid__
@@ -23,12 +24,12 @@ var WeekDayGrid = function WeekDayGrid(_ref) {
   var testId = _ref.testId,
     children = _ref.children,
     isHidden = _ref.isHidden;
-  var row = (0, _react.jsx)(_primitives.Grid, {
+  var row = /*#__PURE__*/_react.default.createElement(_compiled.Grid, {
     testId: testId,
-    templateColumns: "repeat(7, minmax(max-content, 1fr))",
+    xcss: styles.templateColumns,
     role: "row"
   }, children);
-  return isHidden ? (0, _react.jsx)("div", {
+  return isHidden ? /*#__PURE__*/_react.default.createElement("div", {
     "aria-hidden": "true"
   }, row) : row;
 };

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

@@ -1,22 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _box = _interopRequireDefault(require("@atlaskit/primitives/box"));
 var _date = _interopRequireDefault(require("./date"));
 var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
   var weeks = _ref.weeks,
     handleClickDay = _ref.handleClickDay,
@@ -24,15 +19,15 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
     shouldSetFocus = _ref.shouldSetFocus,
     tabIndex = _ref.tabIndex,
     testId = _ref.testId;
-  return (0, _react2.jsx)(_box.default, {
+  return /*#__PURE__*/_react.default.createElement(_box.default, {
     role: "rowgroup",
     testId: testId && "".concat(testId, "--month")
   }, weeks.map(function (week, i) {
-    return (0, _react2.jsx)(_weekDayGrid.default, {
+    return /*#__PURE__*/_react.default.createElement(_weekDayGrid.default, {
       key: i,
       testId: testId && "".concat(testId, "--week")
     }, week.values.map(function (weekDay) {
-      return (0, _react2.jsx)(_date.default, {
+      return /*#__PURE__*/_react.default.createElement(_date.default, {
         key: "".concat(week.id, "-").concat(weekDay.id),
         isDisabled: weekDay.isDisabled,
         isFocused: weekDay.isFocused,

package/dist/cjs/internal/components/week-header.compiled.css

@@ -0,0 +1,4 @@
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1ul98pqr{min-width:2.5rem}
+._o5721q9c{white-space:nowrap}

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

@@ -1,43 +1,38 @@
+/* week-header.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+require("./week-header.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-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
-  display: 'flex',
-  justifyContent: 'center'
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  columnHeader: "_1ul98pqr _o5721q9c _1e0c1txw _1bah1h6o"
+};
 var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort,
     testId = _ref.testId;
-  return (0, _react2.jsx)(_weekDayGrid.default, {
+  return /*#__PURE__*/React.createElement(_weekDayGrid.default, {
     isHidden: true,
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
-    return (0, _react2.jsx)(_primitives.Box, {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
       padding: "space.100",
-      xcss: columnHeaderStyles,
+      xcss: styles.columnHeader,
       key: shortDay,
       role: "columnheader",
       testId: testId && "".concat(testId, "--column-header")
-    }, (0, _react2.jsx)(_primitives.Text, {
+    }, /*#__PURE__*/React.createElement(_primitives.Text, {
       weight: "bold",
       size: "UNSAFE_small",
       align: "center",

package/dist/es2019/calendar.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1o8l{display:inline-block}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/es2019/calendar.js

@@ -1,16 +1,13 @@
+/* calendar.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./calendar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
-import { Box, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 import Header from './internal/components/header';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -21,14 +18,13 @@ import useGetWeeks from './internal/hooks/use-get-weeks';
 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';
-const boxStyles = xcss({
-  display: 'inline-block',
-  userSelect: 'none'
-});
+const styles = {
+  box: "_1e0c1o8l _uiztglyw"
+};
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "15.1.3"
+  packageVersion: "16.0.0"
 };
 const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -162,8 +158,9 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
   };
   const headerId = useId();
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("div", {
+    React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -173,14 +170,14 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
       onFocus: handleContainerFocus,
       "data-testid": testId && `${testId}--container`,
       ref: ref
-    }, jsx(Box, {
-      xcss: boxStyles,
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.box,
       padding: "space.200",
       "aria-label": "calendar",
       testId: testId && `${testId}--calendar`
-    }, jsx(Stack, {
+    }, /*#__PURE__*/React.createElement(Stack, {
       space: "space.150"
-    }, jsx(Header
+    }, /*#__PURE__*/React.createElement(Header
     // The month number needs to be translated to index in the month
     // name array e.g. 1 (January) -> 0
     , {
@@ -195,15 +192,15 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
       headerId: headerId,
       tabIndex: tabIndex,
       testId: testId
-    }), jsx(Box, {
+    }), /*#__PURE__*/React.createElement(Box, {
       role: "grid",
       onKeyDown: handleContainerKeyDown,
       "aria-labelledby": headerId,
       testId: testId && `${testId}--calendar-dates`
-    }, jsx(WeekHeaderComponent, {
+    }, /*#__PURE__*/React.createElement(WeekHeaderComponent, {
       daysShort: daysShort,
       testId: testId
-    }), jsx(WeekDaysComponent, {
+    }), /*#__PURE__*/React.createElement(WeekDaysComponent, {
       weeks: weeks,
       handleClickDay: handleClickDay,
       monthsLong: monthsLong,
@@ -224,7 +221,7 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
-  return jsx(InnerCalendar, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(InnerCalendar, _extends({}, props, {
     ref: ref
   }));
 }));