@atlaskit/calendar 12.4.5 → 13.0.0

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

@@ -0,0 +1,60 @@
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button/standard-button';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
+import Heading from '@atlaskit/heading';
+import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
+import { N70 } from '@atlaskit/theme/colors';
+const Header = /*#__PURE__*/memo(function Header({
+  monthLongTitle,
+  year,
+  previousMonthLabel = 'Last month',
+  nextMonthLabel = 'Next month',
+  handleClickPrev,
+  handleClickNext,
+  testId
+}) {
+  return jsx(Box, {
+    display: "block",
+    paddingInline: "scale.100",
+    "aria-hidden": "true"
+  }, jsx(Inline, {
+    gap: "scale.0",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, jsx(Button, {
+    appearance: "subtle",
+    spacing: "none",
+    tabIndex: -1,
+    onClick: handleClickPrev,
+    testId: testId && `${testId}--previous-month`,
+    iconBefore: jsx(ArrowleftIcon, {
+      label: previousMonthLabel,
+      size: "medium",
+      primaryColor: `var(--ds-text-subtlest, ${N70})`,
+      testId: testId && `${testId}--previous-month-icon`
+    })
+  }), jsx(Heading, {
+    level: "h400",
+    as: "div",
+    testId: testId && `${testId}--current-month-year`
+  }, `${monthLongTitle} ${year}`), jsx(Button, {
+    appearance: "subtle",
+    spacing: "none",
+    tabIndex: -1,
+    onClick: handleClickNext,
+    testId: testId && `${testId}--next-month`,
+    iconBefore: jsx(ArrowrightIcon, {
+      label: nextMonthLabel,
+      size: "medium",
+      primaryColor: `var(--ds-text-subtlest, ${N70})`,
+      testId: testId && `${testId}--next-month-icon`
+    })
+  })));
+});
+Header.displayName = 'Header'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
+export default Header;

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+const gridStyles = css({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(7, minmax(max-content, 1fr))'
+});
+
+/**
+ * __Week day grid__
+ *
+ * A week day grid aligns elements in a 7 wide grid layout.
+ *
+ */
+const WeekDayGrid = ({
+  testId,
+  children
+}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+jsx("div", {
+  "data-testid": testId,
+  css: gridStyles
+}, children);
+
+export default WeekDayGrid;

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

@@ -1,27 +1,19 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import DateComponent from './date';
-const daysGridStyles = css({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(7, 1fr)',
-  border: 0
-});
+import WeekdayGrid from './week-day-grid';
 const WeekDays = /*#__PURE__*/memo(function WeekDays({
   weeks,
   handleClickDay,
   mode,
   testId
 }) {
-  return jsx("div", {
+  return jsx(WeekdayGrid, {
     role: "grid",
-    "data-testid": testId && `${testId}--month`
-  }, weeks.map(week => jsx("div", {
-    role: "row",
-    key: week.id,
-    css: daysGridStyles
-  }, week.values.map(weekDay => jsx(DateComponent, {
-    key: weekDay.id,
+    testId: testId && `${testId}--month`
+  }, weeks.map(week => week.values.map(weekDay => jsx(DateComponent, {
+    key: `${week.id}-${weekDay.id}`,
     isDisabled: weekDay.isDisabled,
     isFocused: weekDay.isFocused,
     isToday: weekDay.isToday,
@@ -33,7 +25,7 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
     year: weekDay.year,
     mode: mode,
     testId: testId
-  }, weekDay.day)))));
+  }, weekDay.day))));
 });
 WeekDays.displayName = 'WeekDays'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

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

@@ -1,33 +1,33 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
+import Text from '@atlaskit/ds-explorations/text';
 import { N200 } from '@atlaskit/theme/colors';
-const dayNameGridStyles = css({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(7, 1fr)',
-  border: 0
-});
-const dayNameCellStyles = css({
-  boxSizing: 'border-box',
-  minWidth: 40,
-  padding: `${"var(--ds-scale-100, 8px)"} ${"var(--ds-scale-100, 8px)"}`,
-  border: 0,
-  color: `var(--ds-text-subtle, ${N200})`,
-  fontSize: 11,
-  fontWeight: 700,
-  textAlign: 'center',
-  textTransform: 'uppercase',
-  whiteSpace: 'nowrap'
-});
+import WeekDayGrid from './week-day-grid';
 const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
   daysShort
 }) {
-  return jsx("div", {
-    css: dayNameGridStyles
-  }, daysShort.map(shortDay => jsx("span", {
-    css: dayNameCellStyles,
+  return jsx(WeekDayGrid, null, daysShort.map(shortDay => jsx(Box, {
+    padding: "scale.100",
+    display: "block",
+    UNSAFE_style: {
+      minWidth: 40,
+      // Account for languages with short week day names
+      whiteSpace: 'nowrap',
+      // Account for languages with long week day names
+      textAlign: 'center',
+      lineHeight: '16px',
+      color: `var(--ds-text-subtle, ${N200})` // Apply correct fallback to shortDay text
+
+    },
     key: shortDay
-  }, shortDay)));
+  }, jsx(Text, {
+    fontWeight: "700",
+    fontSize: "11px",
+    verticalAlign: "middle",
+    textTransform: "uppercase"
+  }, shortDay))));
 });
 WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/es2019/version.json

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

package/dist/esm/calendar.js

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

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

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

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

@@ -0,0 +1,61 @@
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button/standard-button';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
+import Heading from '@atlaskit/heading';
+import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
+import { N70 } from '@atlaskit/theme/colors';
+var Header = /*#__PURE__*/memo(function Header(_ref) {
+  var monthLongTitle = _ref.monthLongTitle,
+      year = _ref.year,
+      _ref$previousMonthLab = _ref.previousMonthLabel,
+      previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Last month' : _ref$previousMonthLab,
+      _ref$nextMonthLabel = _ref.nextMonthLabel,
+      nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
+      handleClickPrev = _ref.handleClickPrev,
+      handleClickNext = _ref.handleClickNext,
+      testId = _ref.testId;
+  return jsx(Box, {
+    display: "block",
+    paddingInline: "scale.100",
+    "aria-hidden": "true"
+  }, jsx(Inline, {
+    gap: "scale.0",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, jsx(Button, {
+    appearance: "subtle",
+    spacing: "none",
+    tabIndex: -1,
+    onClick: handleClickPrev,
+    testId: testId && "".concat(testId, "--previous-month"),
+    iconBefore: jsx(ArrowleftIcon, {
+      label: previousMonthLabel,
+      size: "medium",
+      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")"),
+      testId: testId && "".concat(testId, "--previous-month-icon")
+    })
+  }), jsx(Heading, {
+    level: "h400",
+    as: "div",
+    testId: testId && "".concat(testId, "--current-month-year")
+  }, "".concat(monthLongTitle, " ").concat(year)), jsx(Button, {
+    appearance: "subtle",
+    spacing: "none",
+    tabIndex: -1,
+    onClick: handleClickNext,
+    testId: testId && "".concat(testId, "--next-month"),
+    iconBefore: jsx(ArrowrightIcon, {
+      label: nextMonthLabel,
+      size: "medium",
+      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")"),
+      testId: testId && "".concat(testId, "--next-month-icon")
+    })
+  })));
+});
+Header.displayName = 'Header'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
+export default Header;

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

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+var gridStyles = css({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(7, minmax(max-content, 1fr))'
+});
+
+/**
+ * __Week day grid__
+ *
+ * A week day grid aligns elements in a 7 wide grid layout.
+ *
+ */
+var WeekDayGrid = function WeekDayGrid(_ref) {
+  var testId = _ref.testId,
+      children = _ref.children;
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", {
+      "data-testid": testId,
+      css: gridStyles
+    }, children)
+  );
+};
+
+export default WeekDayGrid;

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

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

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

@@ -1,33 +1,33 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
+import Text from '@atlaskit/ds-explorations/text';
 import { N200 } from '@atlaskit/theme/colors';
-var dayNameGridStyles = css({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(7, 1fr)',
-  border: 0
-});
-var dayNameCellStyles = css({
-  boxSizing: 'border-box',
-  minWidth: 40,
-  padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 8px)"),
-  border: 0,
-  color: "var(--ds-text-subtle, ".concat(N200, ")"),
-  fontSize: 11,
-  fontWeight: 700,
-  textAlign: 'center',
-  textTransform: 'uppercase',
-  whiteSpace: 'nowrap'
-});
+import WeekDayGrid from './week-day-grid';
 var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort;
-  return jsx("div", {
-    css: dayNameGridStyles
-  }, daysShort.map(function (shortDay) {
-    return jsx("span", {
-      css: dayNameCellStyles,
+  return jsx(WeekDayGrid, null, daysShort.map(function (shortDay) {
+    return jsx(Box, {
+      padding: "scale.100",
+      display: "block",
+      UNSAFE_style: {
+        minWidth: 40,
+        // Account for languages with short week day names
+        whiteSpace: 'nowrap',
+        // Account for languages with long week day names
+        textAlign: 'center',
+        lineHeight: '16px',
+        color: "var(--ds-text-subtle, ".concat(N200, ")") // Apply correct fallback to shortDay text
+
+      },
       key: shortDay
-    }, shortDay);
+    }, jsx(Text, {
+      fontWeight: "700",
+      fontSize: "11px",
+      verticalAlign: "middle",
+      textTransform: "uppercase"
+    }, shortDay));
   }));
 });
 WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/version.json

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

package/dist/types/calendar.d.ts

@@ -9,5 +9,5 @@ import type { CalendarProps } from './types';
  * - [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, "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "style" | "className" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "disabled" | "selected" | "analyticsContext" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "previouslySelected" | "today" | "locale" | "weekStartDay" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "className" | "style" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "disabled" | "selected" | "analyticsContext" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "previouslySelected" | "today" | "locale" | "weekStartDay" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
 export default Calendar;

package/dist/types/internal/components/{heading.d.ts → header.d.ts}

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

package/dist/types/internal/components/week-day-grid.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+interface WeekDayGridProps extends React.HTMLAttributes<HTMLElement> {
+    testId?: string;
+    children: ReactNode;
+}
+/**
+ * __Week day grid__
+ *
+ * A week day grid aligns elements in a 7 wide grid layout.
+ *
+ */
+declare const WeekDayGrid: ({ testId, children }: WeekDayGridProps) => jsx.JSX.Element;
+export default WeekDayGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "12.4.5",
+  "version": "13.0.0",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,9 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.5.0",
+    "@atlaskit/ds-explorations": "^1.7.0",
     "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/heading": "^1.0.2",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/locale": "^2.3.0",
     "@atlaskit/theme": "^12.2.0",
@@ -42,7 +44,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -64,9 +66,14 @@
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
       "design-system": "v1",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
+      "design-tokens": [
+        "spacing"
+      ],
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/calendar"