@atlaskit/datetime-picker 16.2.2 → 17.0.0

package/dist/es2019/components/date-time-picker-class.compiled.css

@@ -0,0 +1,19 @@
+
+._19itglyw{border:none}
+._v564vrg3{transition:color .15s}._12l2e4h9{margin-inline-end:var(--ds-border-width,1px)}
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1pfhe4h9{margin-block-start:var(--ds-border-width,1px)}
+._1q5112x7{padding-block-start:var(--ds-space-075,6px)}
+._4cvr1h6o{align-items:center}
+._6rthe4h9{margin-block-end:var(--ds-border-width,1px)}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
+._ahbqe4h9{margin-inline-start:var(--ds-border-width,1px)}
+._bfhk1kw7{background-color:inherit}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._i0dl1kw7{flex-basis:inherit}
+._i0dl1ssb{flex-basis:50%}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}

package/dist/es2019/components/date-time-picker-class.js

@@ -1,18 +1,13 @@
+/* date-time-picker-class.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./date-time-picker-class.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
-import { N500, N70 } from '@atlaskit/theme/colors';
 import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
 import { componentWithCondition } from '../internal/ff-component';
@@ -22,35 +17,12 @@ import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
 const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.2.2";
-// Make DatePicker 50% the width of DateTimePicker
-// If rendering an icon container, shrink the TimePicker
-const datePickerContainerStyles = css({
-  flexBasis: '50%',
-  flexGrow: 1,
-  flexShrink: 0
-});
-const timePickerContainerStyles = css({
-  flexBasis: '50%',
-  flexGrow: 1
-});
-const iconContainerStyles = css({
-  display: 'flex',
-  margin: "var(--ds-border-width, 1px)",
-  alignItems: 'center',
-  flexBasis: 'inherit',
-  backgroundColor: 'inherit',
-  border: 'none',
-  color: `var(--ds-text-subtlest, ${N70})`,
-  paddingBlockEnd: "var(--ds-space-075, 6px)",
-  paddingBlockStart: "var(--ds-space-075, 6px)",
-  paddingInlineEnd: "var(--ds-space-100, 8px)",
-  paddingInlineStart: "var(--ds-space-050, 4px)",
-  transition: `color 150ms`,
-  '&:hover': {
-    color: `var(--ds-text-subtle, ${N500})`
-  }
-});
+const packageVersion = "17.0.0";
+const compiledStyles = {
+  datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
+  timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
+  iconContainerStyles: "_19itglyw _v564vrg3 _1e0c1txw _4cvr1h6o _i0dl1kw7 _bfhk1kw7 _syaz131l _6rthe4h9 _1pfhe4h9 _12l2e4h9 _ahbqe4h9 _85i512x7 _1q5112x7 _y4tiu2gc _bozg1b66 _30l31gjq"
+};
 
 // react-select overrides (via @atlaskit/select).
 const styles = {
@@ -79,6 +51,8 @@ const dateTimePickerDefaultProps = {
 };
 export const datePickerDefaultAriaLabel = 'Date';
 export const timePickerDefaultAriaLabel = 'Time';
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
 class DateTimePickerComponent extends React.Component {
   constructor(...args) {
     var _this$props$datePicke, _this$props$timePicke;
@@ -276,21 +250,21 @@ class DateTimePickerComponent extends React.Component {
     // Render DateTimePicker's IconContainer when a value has been filled
     // Don't use Date or TimePicker's because they can't be customised
     const isClearable = Boolean(dateValue || timeValue);
-    return jsx(DateTimePickerContainer, {
+    return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
       appearance: appearance,
       isDisabled: isDisabled,
       isFocused: isFocused,
       isInvalid: isInvalid,
       testId: testId,
       innerProps: innerProps
-    }, jsx("input", {
+    }, /*#__PURE__*/React.createElement("input", {
       name: name,
       type: "hidden",
       value: value,
       "data-testid": testId && `${testId}--input`
-    }), jsx("div", {
-      css: datePickerContainerStyles
-    }, jsx(DatePicker, {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ax([compiledStyles.datePickerContainerStyles])
+    }, /*#__PURE__*/React.createElement(DatePicker, {
       appearance: appearance,
       "aria-describedby": datePickerAriaDescribedBy,
       autoFocus: datePickerProps.autoFocus || autoFocus,
@@ -326,9 +300,9 @@ class DateTimePickerComponent extends React.Component {
       testId: testId && `${testId}--datepicker` || datePickerProps.testId,
       value: dateValue,
       weekStartDay: datePickerProps.weekStartDay
-    })), jsx("div", {
-      css: timePickerContainerStyles
-    }, jsx(TimePicker, {
+    })), /*#__PURE__*/React.createElement("div", {
+      className: ax([compiledStyles.timePickerContainerStyles])
+    }, /*#__PURE__*/React.createElement(TimePicker, {
       appearance: timePickerProps.appearance || appearance,
       "aria-describedby": timePickerAriaDescribedBy,
       autoFocus: timePickerProps.autoFocus,
@@ -357,13 +331,13 @@ class DateTimePickerComponent extends React.Component {
       timeIsEditable: timePickerProps.timeIsEditable,
       times: timePickerProps.times,
       value: timeValue
-    })), isClearable && !isDisabled ? jsx("button", {
-      css: iconContainerStyles,
+    })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement("button", {
       onClick: this.onClear,
       "data-testid": testId && `${testId}--icon--container`,
       tabIndex: -1,
-      type: "button"
-    }, jsx(SelectClearIcon, {
+      type: "button",
+      className: ax([compiledStyles.iconContainerStyles])
+    }, /*#__PURE__*/React.createElement(SelectClearIcon, {
       LEGACY_size: "small",
       color: "currentColor",
       label: clearControlLabel

package/dist/es2019/components/date-time-picker-fc.compiled.css

@@ -0,0 +1,6 @@
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._4cvr1h6o{align-items:center}
+._i0dl1kw7{flex-basis:inherit}
+._i0dl1ssb{flex-basis:50%}

package/dist/es2019/components/date-time-picker-fc.js

@@ -1,11 +1,14 @@
+/* date-time-picker-fc.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./date-time-picker-fc.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { IconButton } from '@atlaskit/button/new';
 import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { mergeStyles } from '@atlaskit/select';
 import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
@@ -18,29 +21,17 @@ const DatePicker = componentWithCondition(
 // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
 () => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.2.2";
+const packageVersion = "17.0.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
   packageVersion
 };
-
-// Make DatePicker 50% the width of DateTimePicker
-// If rendering an icon container, shrink the TimePicker
-const datePickerContainerStyles = xcss({
-  flexBasis: '50%',
-  flexGrow: 1,
-  flexShrink: 0
-});
-const timePickerContainerStyles = xcss({
-  flexBasis: '50%',
-  flexGrow: 1
-});
-const iconContainerStyles = xcss({
-  display: 'flex',
-  alignItems: 'center',
-  flexBasis: 'inherit'
-});
+const compiledStyles = {
+  datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
+  timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
+  iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
+};
 
 // react-select overrides (via @atlaskit/select).
 const styles = {
@@ -266,10 +257,12 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     value: value,
     "data-testid": testId && `${testId}--input`
   }), /*#__PURE__*/React.createElement(Box, {
-    xcss: datePickerContainerStyles
+    xcss: compiledStyles.datePickerContainerStyles
   }, /*#__PURE__*/React.createElement(DatePicker, {
     appearance: appearance,
-    "aria-describedby": datePickerAriaDescribedBy,
+    "aria-describedby": datePickerAriaDescribedBy
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
     autoFocus: datePickerProps.autoFocus || autoFocus,
     dateFormat: datePickerProps.dateFormat,
     defaultIsOpen: datePickerProps.defaultIsOpen,
@@ -307,10 +300,12 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     value: dateValue,
     weekStartDay: datePickerProps.weekStartDay
   })), /*#__PURE__*/React.createElement(Box, {
-    xcss: timePickerContainerStyles
+    xcss: compiledStyles.timePickerContainerStyles
   }, /*#__PURE__*/React.createElement(TimePicker, {
     appearance: timePickerProps.appearance || appearance,
-    "aria-describedby": timePickerAriaDescribedBy,
+    "aria-describedby": timePickerAriaDescribedBy
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
     autoFocus: timePickerProps.autoFocus,
     defaultIsOpen: timePickerProps.defaultIsOpen,
     defaultValue: timePickerProps.defaultValue,
@@ -338,7 +333,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     times: timePickerProps.times,
     value: timeValue
   })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
-    xcss: iconContainerStyles
+    xcss: compiledStyles.iconContainerStyles
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: clearControlLabel,

package/dist/es2019/components/time-picker.js

@@ -11,7 +11,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.2.2";
+const packageVersion = "17.0.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/date-time-picker-container.compiled.css

@@ -0,0 +1,21 @@
+
+._19it1k9g{border:var(--ds-border-width,1px) solid var(--ds-border-input,#8590a2)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
+._1h6d13gt{border-color:var(--ds-border-disabled,#091e420f)}
+._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
+._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._16qsq049{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
+._1e0c1txw{display:flex}
+._bfhk1j28{background-color:transparent}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhk1y3p{background-color:var(--ds-background-input-pressed,transparent)}
+._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
+._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
+._4cvx1j28:hover{border-color:transparent}
+._d0al73ad:hover{cursor:default}
+._d0altlke:hover{cursor:pointer}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr31j28:hover{background-color:transparent}

package/dist/es2019/internal/date-time-picker-container.js

@@ -1,70 +1,20 @@
+/* date-time-picker-container.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import "./date-time-picker-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';
-const isInvalidBorderStyles = css({
-  borderColor: `var(--ds-border-danger, ${R400})`
-});
-const isFocusedBorderStyles = css({
-  borderColor: `var(--ds-border-focused, ${B100})`,
-  boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B100})`}`
-});
-const isFocusedStyles = css({
-  backgroundColor: `var(--ds-background-input-pressed, ${N0})`
-});
-const subtleBgStyles = css({
-  backgroundColor: 'transparent',
-  borderColor: 'transparent'
-});
-const subtleFocusedBgStyles = css({
-  backgroundColor: "var(--ds-background-input-pressed, transparent)",
-  borderColor: 'transparent'
-});
-const noBgStyles = css({
-  backgroundColor: 'transparent',
-  borderColor: 'transparent',
-  '&:hover': {
-    backgroundColor: 'transparent',
-    borderColor: 'transparent'
-  }
-});
-const hoverStyles = css({
-  '&:hover': {
-    backgroundColor: `var(--ds-background-input-hovered, ${N30})`,
-    borderColor: `var(--ds-border-input, ${N100})`
-  }
-});
-const isInvalidHoverStyles = css({
-  '&:hover': {
-    backgroundColor: `var(--ds-background-input-hovered, ${N0})`,
-    borderColor: `var(--ds-border-danger, ${R400})`
-  }
-});
-const isDisabledStyles = css({
-  backgroundColor: "var(--ds-background-disabled, #091E4208)",
-  borderColor: "var(--ds-border-disabled, #091E420F)",
-  '&:hover': {
-    cursor: 'default'
-  }
-});
-const newBorderStyles = css({
-  border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border-input, ${N100})`}`
-});
-const baseContainerStyles = css({
-  display: 'flex',
-  backgroundColor: `var(--ds-background-input, ${N20})`,
-  border: `2px solid ${`var(--ds-border-input, ${N20})`}`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
-  '&:hover': {
-    cursor: 'pointer'
-  }
-});
+const isInvalidBorderStyles = null;
+const isFocusedBorderStyles = null;
+const isFocusedStyles = null;
+const subtleBgStyles = null;
+const subtleFocusedBgStyles = null;
+const noBgStyles = null;
+const hoverStyles = null;
+const isInvalidHoverStyles = null;
+const isDisabledStyles = null;
+const newBorderStyles = null;
+const baseContainerStyles = null;
 /**
  * This is the container for the datetime picker component.
  */
@@ -80,10 +30,9 @@ export const DateTimePickerContainer = /*#__PURE__*/forwardRef(({
   const notFocusedOrIsDisabled = !(isFocused || isDisabled);
 
   // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
-  return jsx("div", _extends({
-    css: [baseContainerStyles, newBorderStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (isInvalid ? isInvalidHoverStyles : hoverStyles), appearance === 'none' && noBgStyles]
-  }, innerProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId,
-    ref: ref
+    ref: ref,
+    className: ax(["_2rkoglpi _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", "_19it1k9g", isDisabled && "_1h6d13gt _bfhksyzs _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhk1y3p", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1p6i _16qsq049", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr31d5g", notFocusedOrIsDisabled && !isInvalid && "_4cvx1elr _irr31d5g", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

package/dist/es2019/internal/fixed-layer-menu.js

@@ -1,10 +1,7 @@
+/* fixed-layer-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import FixedLayer from '../internal/fixed-layer';
 
@@ -35,12 +32,12 @@ export const FixedLayerMenu = ({
   setValue,
   children,
   ...rest
-}) => jsx(FixedLayer, {
+}) => /*#__PURE__*/React.createElement(FixedLayer, {
   inputValue: selectProps.inputValue
   //@ts-ignore react-select unsupported props
   ,
   containerRef: selectProps.fixedLayerRef,
-  content: jsx(components.Menu, _extends({}, rest, {
+  content: /*#__PURE__*/React.createElement(components.Menu, _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
     className: className,
     clearValue: clearValue,

package/dist/es2019/internal/fixed-layer.compiled.css

@@ -0,0 +1,4 @@
+._154ize3t{top:var(--ds-space-0,0)}
+._1pbyowjs{z-index:300}
+._bfhk1j28{background-color:transparent}
+._kqswstnw{position:absolute}

package/dist/es2019/internal/fixed-layer.js

@@ -1,15 +1,21 @@
+/* fixed-layer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./fixed-layer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { sizes } from '@atlaskit/icon';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize, layers } from '@atlaskit/theme/constants';
+const styles = {
+  root: "_bfhk1j28 _kqswstnw _154ize3t",
+  popperStyles: "_1pbyowjs"
+};
 /**
  * This component renders layered content with fixed positioning.
  * Scroll is locked outside the layer to prevent the layered content from detaching from the
  * container ref.
  */
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export default class FixedLayer extends React.Component {
   constructor(...args) {
     super(...args);
@@ -32,12 +38,9 @@ export default class FixedLayer extends React.Component {
       return /*#__PURE__*/React.createElement("div", null);
     }
     const divStyles = {
-      background: 'transparent',
-      position: 'absolute',
-      top: 0,
       height: containerRef.getBoundingClientRect().height,
       // Don't block the clear button
-      width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - gridSize()
+      width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - 8
     };
     return (
       /*#__PURE__*/
@@ -49,7 +52,8 @@ export default class FixedLayer extends React.Component {
       }) => /*#__PURE__*/React.createElement("div", {
         ref: ref,
         "data-layer-child": true,
-        style: divStyles
+        style: divStyles,
+        className: ax([styles.root])
       })), /*#__PURE__*/React.createElement(Popper, null, ({
         ref,
         style,
@@ -60,11 +64,9 @@ export default class FixedLayer extends React.Component {
           ref: ref
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,
-          style: {
-            ...style,
-            zIndex: layers.dialog()
-          },
-          "data-testid": testId && `${testId}--popper--container`
+          style: style,
+          "data-testid": testId && `${testId}--popper--container`,
+          className: ax([styles.popperStyles])
         }, content);
       }))
     );

package/dist/es2019/internal/indicators-container.compiled.css

@@ -0,0 +1,2 @@
+._ahbq1ejb{margin-inline-start:var(--ds-space-300,24px)}
+._ahbqxy5q{margin-inline-start:var(--ds-space-400,2pc)}

package/dist/es2019/internal/indicators-container.js

@@ -1,22 +1,17 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* indicators-container.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./indicators-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
-const calendarButtonInclusionStyles = css({
-  marginInlineStart: "var(--ds-space-400, 32px)"
-});
-const calendarButtonOnlyInclusionStyles = css({
-  marginInlineStart: "var(--ds-space-300, 24px)"
-});
+const styles = {
+  calendarButtonInclusionStyles: "_ahbqxy5q",
+  calendarButtonOnlyInclusionStyles: "_ahbq1ejb"
+};
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const IndicatorsContainer = ({
   showClearIndicator,
   ...rest
-}) => jsx("div", {
-  css: showClearIndicator ? calendarButtonInclusionStyles : calendarButtonOnlyInclusionStyles
-}, jsx(components.IndicatorsContainer, rest));
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax([showClearIndicator ? styles.calendarButtonInclusionStyles : styles.calendarButtonOnlyInclusionStyles])
+}, /*#__PURE__*/React.createElement(components.IndicatorsContainer, rest));

package/dist/es2019/internal/menu.compiled.css

@@ -0,0 +1,6 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m915vq{overflow-y:hidden}
+._1pbyowjs{z-index:300}
+._1reo15vq{overflow-x:hidden}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

package/dist/es2019/internal/menu.js

@@ -1,16 +1,12 @@
+/* menu.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import "./menu.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
-import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
 import { Layering } from '@atlaskit/layering';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
 
 /**
@@ -27,13 +23,7 @@ function getValidDate(isos) {
     } : acc;
   }, {});
 }
-const menuStyles = css({
-  zIndex: layers.dialog(),
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-  overflow: 'hidden'
-});
+const menuStyles = null;
 
 /**
  * This is the menu used in the select of the date picker.
@@ -60,24 +50,15 @@ export const Menu = ({
     event.preventDefault();
   };
   const Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
-  return jsx(Layering, {
+  return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, jsx(FixedLayer, {
+  }, /*#__PURE__*/React.createElement(FixedLayer, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content:
-    // The mousedown event is required for a date selection to work when
-    // the menu is opened via the calendar button. The reason why is
-    // because there is a mousedown event on the menu inside of
-    // `react-select` that will stop the calendar select event from
-    // firing. This is passed in via the `innerProps`. Therefore, we must
-    // pass it in *after* the `innerProps` spread.
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("div", _extends({
-      css: menuStyles
-    }, innerProps, {
-      onMouseDown: onMenuMouseDown
-    }), jsx(Wrapper, null, jsx(Calendar, {
+    content: /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+      onMouseDown: onMenuMouseDown,
+      className: ax(["_2rkoglpi _1reo15vq _18m915vq _1pbyowjs _bfhk1bhr _16qs1cd0"])
+    }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
       day: day,
       month: month,
       year: year,

package/dist/esm/components/date-picker-class.compiled.css

@@ -0,0 +1,16 @@
+
+._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tke1k8s{min-height:1.5rem}
+._1ul91k8s{min-width:1.5rem}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._i0dl1kw7{flex-basis:inherit}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}