@atlaskit/calendar 15.1.3 → 16.1.0

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

@@ -1,35 +1,27 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* week-header.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./week-header.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { Box, Text, xcss } from '@atlaskit/primitives';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import WeekDayGrid from './week-day-grid';
-var columnHeaderStyles = xcss({
-  minWidth: 'size.400',
-  // Account for languages with short week day names
-  whiteSpace: 'nowrap',
-  // Account for languages with long week day names
-  display: 'flex',
-  justifyContent: 'center'
-});
+var styles = {
+  columnHeader: "_1ul98pqr _o5721q9c _1e0c1txw _1bah1h6o"
+};
 var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort,
     testId = _ref.testId;
-  return jsx(WeekDayGrid, {
+  return /*#__PURE__*/React.createElement(WeekDayGrid, {
     isHidden: true,
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
-    return jsx(Box, {
+    return /*#__PURE__*/React.createElement(Box, {
       padding: "space.100",
-      xcss: columnHeaderStyles,
+      xcss: styles.columnHeader,
       key: shortDay,
       role: "columnheader",
       testId: testId && "".concat(testId, "--column-header")
-    }, jsx(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       weight: "bold",
       size: "UNSAFE_small",
       align: "center",

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type TabIndex } from '../../types';
 interface HeaderProps {
     monthLongTitle: string;
@@ -13,5 +13,5 @@ interface HeaderProps {
     tabIndex?: TabIndex;
     testId?: string;
 }
-declare const Header: import("react").NamedExoticComponent<HeaderProps>;
+declare const Header: React.NamedExoticComponent<HeaderProps>;
 export default Header;

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

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { TabIndex } from '../../types';
 import { type DateObj, type Week } from '../types';
 interface WeekDaysProps {
@@ -9,5 +9,5 @@ interface WeekDaysProps {
     tabIndex: TabIndex;
     testId?: string;
 }
-declare const WeekDays: import("react").NamedExoticComponent<WeekDaysProps>;
+declare const WeekDays: React.NamedExoticComponent<WeekDaysProps>;
 export default WeekDays;

package/dist/types-ts4.5/internal/components/header.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type TabIndex } from '../../types';
 interface HeaderProps {
     monthLongTitle: string;
@@ -13,5 +13,5 @@ interface HeaderProps {
     tabIndex?: TabIndex;
     testId?: string;
 }
-declare const Header: import("react").NamedExoticComponent<HeaderProps>;
+declare const Header: React.NamedExoticComponent<HeaderProps>;
 export default Header;

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

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { TabIndex } from '../../types';
 import { type DateObj, type Week } from '../types';
 interface WeekDaysProps {
@@ -9,5 +9,5 @@ interface WeekDaysProps {
     tabIndex: TabIndex;
     testId?: string;
 }
-declare const WeekDays: import("react").NamedExoticComponent<WeekDaysProps>;
+declare const WeekDays: React.NamedExoticComponent<WeekDaysProps>;
 export default WeekDays;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/calendar",
-	"version": "15.1.3",
+	"version": "16.1.0",
 	"description": "An interactive calendar for date selection experiences.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,17 +25,18 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/analytics-next": "^10.2.0",
 		"@atlaskit/button": "^20.3.0",
+		"@atlaskit/css": "^0.7.0",
 		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/heading": "^4.0.0",
-		"@atlaskit/icon": "^23.0.0",
+		"@atlaskit/icon": "^23.1.0",
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tokens": "^2.5.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
+		"@compiled/react": "^0.18.1",
 		"date-fns": "^2.17.0"
 	},
 	"peerDependencies": {

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

@@ -1,79 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dateCellStyles = void 0;
-var _colors = require("@atlaskit/theme/colors");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var dateCellStyles = exports.dateCellStyles = function dateCellStyles() {
-  return {
-    all: 'unset',
-    display: 'block',
-    padding: "var(--ds-space-050, 4px)".concat(" 9px"),
-    position: 'relative',
-    backgroundColor: 'transparent',
-    border: '2px solid transparent',
-    borderRadius: 3,
-    color: "var(--ds-text, ".concat(_colors.N900, ")"),
-    cursor: 'pointer',
-    flexGrow: 1,
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-    textAlign: 'center',
-    '&[data-sibling]': {
-      color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
-    },
-    '&[data-today]': {
-      color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
-      fontWeight: "var(--ds-font-weight-bold, bold)",
-      '&::after': {
-        display: 'block',
-        height: 2,
-        position: 'absolute',
-        right: "var(--ds-space-025, 2px)",
-        bottom: "var(--ds-space-025, 2px)",
-        left: "var(--ds-space-025, 2px)",
-        backgroundColor: 'currentColor',
-        content: '""'
-      }
-    },
-    '&[data-prev-selected]': {
-      backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
-      color: "var(--ds-text-subtle, ".concat(_colors.N600, ")")
-    },
-    '&[data-selected]': {
-      backgroundColor: "var(--ds-background-selected, ".concat(_colors.N500, ")"),
-      color: "var(--ds-text-selected, ".concat(_colors.N0, ")")
-    },
-    '&[data-disabled]': {
-      color: "var(--ds-text-disabled, ".concat(_colors.N40, ")"),
-      cursor: 'not-allowed'
-    },
-    '&:focus-visible': {
-      border: "2px solid ".concat("var(--ds-border-focused, ".concat(_colors.B200, ")"))
-    },
-    '&:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
-      color: "var(--ds-text, ".concat(_colors.N900, ")")
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"),
-      color: "var(--ds-text, ".concat(_colors.N900, ")")
-    },
-    '&[data-selected]:hover': {
-      backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")"),
-      color: "var(--ds-text-selected, ".concat(_colors.N600, ")")
-    },
-    '&[data-prev-selected]:hover': {
-      color: "var(--ds-text-subtle, ".concat(_colors.N600, ")")
-    },
-    '&[data-sibling]:hover': {
-      color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
-    },
-    '&[data-disabled]:hover': {
-      backgroundColor: 'transparent',
-      color: "var(--ds-text-disabled, ".concat(_colors.N40, ")")
-    }
-  };
-};

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

@@ -1,71 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-import { B200, B400, B50, N0, N200, N30, N40, N500, N600, N900 } from '@atlaskit/theme/colors';
-export const dateCellStyles = () => ({
-  all: 'unset',
-  display: 'block',
-  padding: `${"var(--ds-space-050, 4px)"} 9px`,
-  position: 'relative',
-  backgroundColor: 'transparent',
-  border: '2px solid transparent',
-  borderRadius: 3,
-  color: `var(--ds-text, ${N900})`,
-  cursor: 'pointer',
-  flexGrow: 1,
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  textAlign: 'center',
-  '&[data-sibling]': {
-    color: `var(--ds-text-subtlest, ${N200})`
-  },
-  '&[data-today]': {
-    color: `var(--ds-text-selected, ${B400})`,
-    fontWeight: "var(--ds-font-weight-bold, bold)",
-    '&::after': {
-      display: 'block',
-      height: 2,
-      position: 'absolute',
-      right: "var(--ds-space-025, 2px)",
-      bottom: "var(--ds-space-025, 2px)",
-      left: "var(--ds-space-025, 2px)",
-      backgroundColor: 'currentColor',
-      content: '""'
-    }
-  },
-  '&[data-prev-selected]': {
-    backgroundColor: `var(--ds-background-selected, ${B50})`,
-    color: `var(--ds-text-subtle, ${N600})`
-  },
-  '&[data-selected]': {
-    backgroundColor: `var(--ds-background-selected, ${N500})`,
-    color: `var(--ds-text-selected, ${N0})`
-  },
-  '&[data-disabled]': {
-    color: `var(--ds-text-disabled, ${N40})`,
-    cursor: 'not-allowed'
-  },
-  '&:focus-visible': {
-    border: `2px solid ${`var(--ds-border-focused, ${B200})`}`
-  },
-  '&:hover': {
-    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
-    color: `var(--ds-text, ${N900})`
-  },
-  '&:active': {
-    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`,
-    color: `var(--ds-text, ${N900})`
-  },
-  '&[data-selected]:hover': {
-    backgroundColor: `var(--ds-background-selected-hovered, ${B50})`,
-    color: `var(--ds-text-selected, ${N600})`
-  },
-  '&[data-prev-selected]:hover': {
-    color: `var(--ds-text-subtle, ${N600})`
-  },
-  '&[data-sibling]:hover': {
-    color: `var(--ds-text-subtlest, ${N200})`
-  },
-  '&[data-disabled]:hover': {
-    backgroundColor: 'transparent',
-    color: `var(--ds-text-disabled, ${N40})`
-  }
-});

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

@@ -1,73 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-import { B200, B400, B50, N0, N200, N30, N40, N500, N600, N900 } from '@atlaskit/theme/colors';
-export var dateCellStyles = function dateCellStyles() {
-  return {
-    all: 'unset',
-    display: 'block',
-    padding: "var(--ds-space-050, 4px)".concat(" 9px"),
-    position: 'relative',
-    backgroundColor: 'transparent',
-    border: '2px solid transparent',
-    borderRadius: 3,
-    color: "var(--ds-text, ".concat(N900, ")"),
-    cursor: 'pointer',
-    flexGrow: 1,
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-    textAlign: 'center',
-    '&[data-sibling]': {
-      color: "var(--ds-text-subtlest, ".concat(N200, ")")
-    },
-    '&[data-today]': {
-      color: "var(--ds-text-selected, ".concat(B400, ")"),
-      fontWeight: "var(--ds-font-weight-bold, bold)",
-      '&::after': {
-        display: 'block',
-        height: 2,
-        position: 'absolute',
-        right: "var(--ds-space-025, 2px)",
-        bottom: "var(--ds-space-025, 2px)",
-        left: "var(--ds-space-025, 2px)",
-        backgroundColor: 'currentColor',
-        content: '""'
-      }
-    },
-    '&[data-prev-selected]': {
-      backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
-      color: "var(--ds-text-subtle, ".concat(N600, ")")
-    },
-    '&[data-selected]': {
-      backgroundColor: "var(--ds-background-selected, ".concat(N500, ")"),
-      color: "var(--ds-text-selected, ".concat(N0, ")")
-    },
-    '&[data-disabled]': {
-      color: "var(--ds-text-disabled, ".concat(N40, ")"),
-      cursor: 'not-allowed'
-    },
-    '&:focus-visible': {
-      border: "2px solid ".concat("var(--ds-border-focused, ".concat(B200, ")"))
-    },
-    '&:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
-      color: "var(--ds-text, ".concat(N900, ")")
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
-      color: "var(--ds-text, ".concat(N900, ")")
-    },
-    '&[data-selected]:hover': {
-      backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
-      color: "var(--ds-text-selected, ".concat(N600, ")")
-    },
-    '&[data-prev-selected]:hover': {
-      color: "var(--ds-text-subtle, ".concat(N600, ")")
-    },
-    '&[data-sibling]:hover': {
-      color: "var(--ds-text-subtlest, ".concat(N200, ")")
-    },
-    '&[data-disabled]:hover': {
-      backgroundColor: 'transparent',
-      color: "var(--ds-text-disabled, ".concat(N40, ")")
-    }
-  };
-};

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

@@ -1,2 +0,0 @@
-import { type CSSObject } from '@emotion/react';
-export declare const dateCellStyles: () => CSSObject;

package/dist/types-ts4.5/internal/styles/date.d.ts

@@ -1,2 +0,0 @@
-import { type CSSObject } from '@emotion/react';
-export declare const dateCellStyles: () => CSSObject;