@atlaskit/datetime-picker 16.2.2 → 17.0.0

package/dist/cjs/components/date-picker-fc.js

@@ -1,3 +1,4 @@
+/* date-picker-fc.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,20 +7,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./date-picker-fc.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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _new = require("@atlaskit/button/new");
+var _css = require("@atlaskit/css");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
 var _locale = require("@atlaskit/locale");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _internal = require("../internal");
 var _datePickerMigration = require("../internal/date-picker-migration");
@@ -28,52 +32,24 @@ var _menu = require("../internal/menu");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
 var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
-/**
- * @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; }
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.2.2";
+var packageVersion = "17.0.0";
+var styles = {
+  pickerContainerStyle: "_kqswh2mm",
+  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
+  iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz131l _152tze3t _rjxpze3t _30l31gjq",
+  iconSpacingWithClearButtonStyles: "_12l2xy5q",
+  iconSpacingWithoutClearButtonStyles: "_12l21b66"
+};
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
   packageVersion: packageVersion
 };
-var pickerContainerStyles = (0, _react2.css)({
-  position: 'relative'
-});
-var dropdownIndicatorStyles = (0, _primitives.xcss)({
-  minWidth: "var(--ds-space-300, 24px)",
-  minHeight: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-var iconContainerStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  height: '100%',
-  position: 'absolute',
-  alignItems: 'center',
-  flexBasis: 'inherit',
-  color: 'color.text.subtlest',
-  insetBlockStart: 'space.0',
-  insetInlineEnd: 'space.0',
-  transition: "color 150ms",
-  ':hover': {
-    color: 'color.text.subtle'
-  }
-});
-var iconSpacingWithClearButtonStyles = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.400'
-});
-var iconSpacingWithoutClearButtonStyles = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.050'
-});
 
 /**
  * __Date picker__
@@ -467,9 +443,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
   if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
     clearIndicator = function clearIndicator(props) {
-      return (0, _react2.jsx)(_primitives.Box, {
-        xcss: dropdownIndicatorStyles
-      }, (0, _react2.jsx)(Icon, props));
+      return /*#__PURE__*/React.createElement(_compiled.Box, {
+        xcss: styles.dropdownIndicatorStyles
+      }, /*#__PURE__*/React.createElement(Icon, props));
     };
   }
   var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
@@ -480,7 +456,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
     DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
   }, shouldShowCalendarButton ? {
     IndicatorsContainer: function IndicatorsContainer(props) {
-      return (0, _react2.jsx)(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
+      return /*#__PURE__*/React.createElement(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
         showClearIndicator: showClearIndicator
       }));
     }
@@ -542,104 +518,101 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
   // `label` takes precedence of the `inputLabel`
   var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
   var openCalendarLabelId = "open-calendar-label--".concat((0, _useId.useId)());
-  return (
-    // These event handlers must be on this element because the events come
-    // from different child elements.
-    // Until innerProps is removed, it must remain a div rather than a primitive component.
-    (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
-      css: pickerContainerStyles,
-      "data-testid": testId && "".concat(testId, "--container"),
-      onBlur: onContainerBlur,
-      onFocus: onContainerFocus,
-      onClick: onInputClick,
-      onInput: onTextInput,
-      onKeyDown: onInputKeyDown,
-      ref: getContainerRef
-      // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
-      ,
-      role: "presentation"
-    }), (0, _react2.jsx)("input", {
-      name: name,
-      type: "hidden",
-      value: getterValue,
-      "data-testid": testId && "".concat(testId, "--input")
-    }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
-      appearance: appearance,
-      "aria-describedby": ariaDescribedBy,
-      label: label || undefined,
-      autoFocus: autoFocus,
-      clearControlLabel: clearControlLabel,
-      closeMenuOnSelect: true
-      // For some reason, this and the below `styles` type error _only_ show
-      // up when you alter some of the properties in the `selectComponents`
-      // object. These errors are still present, and I suspect have always
-      // been present, without changing the unrelated code. Ignoring as the
-      // component still works as expected despite this error. And also
-      // because the select refresh team may solve it later.
-      ,
-      components: selectComponents,
-      enableAnimation: false,
-      inputId: id,
-      inputValue: actualSelectInputValue,
-      isDisabled: isDisabled,
-      isRequired: isRequired,
-      menuIsOpen: menuIsOpen,
-      onBlur: onSelectBlur,
-      onChange: onSelectChange,
-      onFocus: onSelectFocus,
-      onInputChange: handleSelectInputChange,
-      placeholder: (0, _datePickerMigration.getPlaceholder)({
-        placeholder: placeholder,
-        l10n: l10n
-      })
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
-      ,
-      styles: mergedStyles,
-      value: initialValue
-    }, selectProps, {
-      // These are below the spread because I don't know what is in
-      // selectProps or not and what wil be overwritten
-      isClearable: true,
-      isInvalid: isInvalid,
-      spacing: spacing,
-      testId: testId
-      // These aren't part of `Select`'s API, but we're using them here.
-      // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
-      ,
-      calendarContainerRef: calendarProps.calendarContainerRef,
-      calendarDisabled: calendarProps.calendarDisabled,
-      calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
-      calendarLocale: calendarProps.calendarLocale,
-      calendarMaxDate: calendarProps.calendarMaxDate,
-      calendarMinDate: calendarProps.calendarMinDate,
-      calendarRef: calendarProps.calendarRef,
-      calendarValue: calendarProps.calendarValue,
-      calendarView: calendarProps.calendarView,
-      calendarWeekStartDay: calendarProps.calendarWeekStartDay,
-      nextMonthLabel: nextMonthLabel,
-      onCalendarChange: calendarProps.onCalendarChange,
-      onCalendarSelect: calendarProps.onCalendarSelect,
-      previousMonthLabel: previousMonthLabel,
-      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
-      menuInnerWrapper: calendarProps.menuInnerWrapper
-    })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_primitives.Box, {
-      xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
-    }, (0, _react2.jsx)(_new.IconButton, {
-      appearance: "subtle",
-      label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
-      "aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
-      id: openCalendarLabelId,
-      icon: function icon(iconProps) {
-        return (0, _react2.jsx)(_calendar.default, (0, _extends2.default)({}, iconProps, {
-          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-          color: "var(--ds-icon, #44546F)"
-        }));
-      },
-      onClick: onCalendarButtonClick,
-      onKeyDown: onCalendarButtonKeyDown,
-      ref: calendarButtonRef,
-      testId: testId && "".concat(testId, "--open-calendar-button")
-    })) : null)
-  );
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
+    "data-testid": testId && "".concat(testId, "--container"),
+    onBlur: onContainerBlur,
+    onFocus: onContainerFocus,
+    onClick: onInputClick,
+    onInput: onTextInput,
+    onKeyDown: onInputKeyDown,
+    ref: getContainerRef
+    // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
+    ,
+    role: "presentation",
+    className: (0, _runtime.ax)([styles.pickerContainerStyle])
+  }), /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: getterValue,
+    "data-testid": testId && "".concat(testId, "--input")
+  }), /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
+    appearance: appearance,
+    "aria-describedby": ariaDescribedBy,
+    label: label || undefined
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
+    autoFocus: autoFocus,
+    clearControlLabel: clearControlLabel,
+    closeMenuOnSelect: true
+    // For some reason, this and the below `styles` type error _only_ show
+    // up when you alter some of the properties in the `selectComponents`
+    // object. These errors are still present, and I suspect have always
+    // been present, without changing the unrelated code. Ignoring as the
+    // component still works as expected despite this error. And also
+    // because the select refresh team may solve it later.
+    ,
+    components: selectComponents,
+    enableAnimation: false,
+    inputId: id,
+    inputValue: actualSelectInputValue,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    menuIsOpen: menuIsOpen,
+    onBlur: onSelectBlur,
+    onChange: onSelectChange,
+    onFocus: onSelectFocus,
+    onInputChange: handleSelectInputChange,
+    placeholder: (0, _datePickerMigration.getPlaceholder)({
+      placeholder: placeholder,
+      l10n: l10n
+    })
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    styles: mergedStyles,
+    value: initialValue
+  }, selectProps, {
+    // These are below the spread because I don't know what is in
+    // selectProps or not and what wil be overwritten
+    isClearable: true,
+    isInvalid: isInvalid,
+    spacing: spacing,
+    testId: testId
+    // These aren't part of `Select`'s API, but we're using them here.
+    // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
+    ,
+    calendarContainerRef: calendarProps.calendarContainerRef,
+    calendarDisabled: calendarProps.calendarDisabled,
+    calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+    calendarLocale: calendarProps.calendarLocale,
+    calendarMaxDate: calendarProps.calendarMaxDate,
+    calendarMinDate: calendarProps.calendarMinDate,
+    calendarRef: calendarProps.calendarRef,
+    calendarValue: calendarProps.calendarValue,
+    calendarView: calendarProps.calendarView,
+    calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+    nextMonthLabel: nextMonthLabel,
+    onCalendarChange: calendarProps.onCalendarChange,
+    onCalendarSelect: calendarProps.onCalendarSelect,
+    previousMonthLabel: previousMonthLabel,
+    shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+    menuInnerWrapper: calendarProps.menuInnerWrapper
+  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.iconContainerStyles, value && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
+  }, /*#__PURE__*/React.createElement(_new.IconButton, {
+    appearance: "subtle",
+    label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
+    "aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
+    id: openCalendarLabelId,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(_calendar.default, (0, _extends2.default)({}, iconProps, {
+        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+        color: "var(--ds-icon, #44546F)"
+      }));
+    },
+    onClick: onCalendarButtonClick,
+    onKeyDown: onCalendarButtonKeyDown,
+    ref: calendarButtonRef,
+    testId: testId && "".concat(testId, "--open-calendar-button")
+  })) : null);
 });
 var _default = exports.default = DatePicker;

package/dist/cjs/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/cjs/components/date-time-picker-class.js

@@ -1,3 +1,4 @@
+/* date-time-picker-class.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = exports.DateTimePickerWithoutAnalytics = void 0;
+require("./date-time-picker-class.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -12,13 +15,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
-var _colors = require("@atlaskit/theme/colors");
 var _internal = require("../internal");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
 var _ffComponent = require("../internal/ff-component");
@@ -29,43 +30,17 @@ var _timePicker = _interopRequireDefault(require("./time-picker"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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
+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 DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.2.2";
-// Make DatePicker 50% the width of DateTimePicker
-// If rendering an icon container, shrink the TimePicker
-var datePickerContainerStyles = (0, _react2.css)({
-  flexBasis: '50%',
-  flexGrow: 1,
-  flexShrink: 0
-});
-var timePickerContainerStyles = (0, _react2.css)({
-  flexBasis: '50%',
-  flexGrow: 1
-});
-var iconContainerStyles = (0, _react2.css)({
-  display: 'flex',
-  margin: "var(--ds-border-width, 1px)",
-  alignItems: 'center',
-  flexBasis: 'inherit',
-  backgroundColor: 'inherit',
-  border: 'none',
-  color: "var(--ds-text-subtlest, ".concat(_colors.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, ".concat(_colors.N500, ")")
-  }
-});
+var packageVersion = "17.0.0";
+var 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).
 var styles = {
@@ -95,6 +70,8 @@ var dateTimePickerDefaultProps = {
 };
 var datePickerDefaultAriaLabel = exports.datePickerDefaultAriaLabel = 'Date';
 var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   function DateTimePickerComponent() {
     var _this$props$datePicke, _this$props$timePicke;
@@ -313,21 +290,21 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
       // Render DateTimePicker's IconContainer when a value has been filled
       // Don't use Date or TimePicker's because they can't be customised
       var isClearable = Boolean(dateValue || timeValue);
-      return (0, _react2.jsx)(_dateTimePickerContainer.DateTimePickerContainer, {
+      return /*#__PURE__*/_react.default.createElement(_dateTimePickerContainer.DateTimePickerContainer, {
         appearance: appearance,
         isDisabled: isDisabled,
         isFocused: isFocused,
         isInvalid: isInvalid,
         testId: testId,
         innerProps: innerProps
-      }, (0, _react2.jsx)("input", {
+      }, /*#__PURE__*/_react.default.createElement("input", {
         name: name,
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), (0, _react2.jsx)("div", {
-        css: datePickerContainerStyles
-      }, (0, _react2.jsx)(DatePicker, {
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _runtime.ax)([compiledStyles.datePickerContainerStyles])
+      }, /*#__PURE__*/_react.default.createElement(DatePicker, {
         appearance: appearance,
         "aria-describedby": datePickerAriaDescribedBy,
         autoFocus: datePickerProps.autoFocus || autoFocus,
@@ -363,9 +340,9 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
         value: dateValue,
         weekStartDay: datePickerProps.weekStartDay
-      })), (0, _react2.jsx)("div", {
-        css: timePickerContainerStyles
-      }, (0, _react2.jsx)(_timePicker.default, {
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _runtime.ax)([compiledStyles.timePickerContainerStyles])
+      }, /*#__PURE__*/_react.default.createElement(_timePicker.default, {
         appearance: timePickerProps.appearance || appearance,
         "aria-describedby": timePickerAriaDescribedBy,
         autoFocus: timePickerProps.autoFocus,
@@ -394,13 +371,13 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         timeIsEditable: timePickerProps.timeIsEditable,
         times: timePickerProps.times,
         value: timeValue
-      })), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
-        css: iconContainerStyles,
+      })), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement("button", {
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container"),
         tabIndex: -1,
-        type: "button"
-      }, (0, _react2.jsx)(_crossCircleSelectClear.default, {
+        type: "button",
+        className: (0, _runtime.ax)([compiledStyles.iconContainerStyles])
+      }, /*#__PURE__*/_react.default.createElement(_crossCircleSelectClear.default, {
         LEGACY_size: "small",
         color: "currentColor",
         label: clearControlLabel

package/dist/cjs/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/cjs/components/date-time-picker-fc.js

@@ -1,3 +1,4 @@
+/* date-time-picker-fc.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = void 0;
+require("./date-time-picker-fc.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -16,7 +19,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _new = require("@atlaskit/button/new");
 var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
 var _internal = require("../internal");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
@@ -37,29 +40,17 @@ function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.2.2";
+var packageVersion = "17.0.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
   packageVersion: packageVersion
 };
-
-// Make DatePicker 50% the width of DateTimePicker
-// If rendering an icon container, shrink the TimePicker
-var datePickerContainerStyles = (0, _primitives.xcss)({
-  flexBasis: '50%',
-  flexGrow: 1,
-  flexShrink: 0
-});
-var timePickerContainerStyles = (0, _primitives.xcss)({
-  flexBasis: '50%',
-  flexGrow: 1
-});
-var iconContainerStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  alignItems: 'center',
-  flexBasis: 'inherit'
-});
+var compiledStyles = {
+  datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
+  timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
+  iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
+};
 
 // react-select overrides (via @atlaskit/select).
 var styles = {
@@ -303,11 +294,13 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     type: "hidden",
     value: value,
     "data-testid": testId && "".concat(testId, "--input")
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: datePickerContainerStyles
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: compiledStyles.datePickerContainerStyles
   }, /*#__PURE__*/_react.default.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,
@@ -344,11 +337,13 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
     value: dateValue,
     weekStartDay: datePickerProps.weekStartDay
-  })), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: timePickerContainerStyles
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: compiledStyles.timePickerContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_timePicker.default, {
     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,
@@ -375,8 +370,8 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     timeIsEditable: timePickerProps.timeIsEditable,
     times: timePickerProps.times,
     value: timeValue
-  })), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
-    xcss: iconContainerStyles
+  })), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    xcss: compiledStyles.iconContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
     appearance: "subtle",
     label: clearControlLabel,

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.2.2";
+var packageVersion = "17.0.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -0,0 +1,21 @@
+
+._19itp69y{border:var(--_1p9iyo2)}
+._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)}._16qsic8z{box-shadow:var(--_1p9nqfm)}
+._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}