@atlaskit/datetime-picker 13.0.3 → 13.0.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/datetime-picker
 
+## 13.0.5
+
+### Patch Changes
+
+- [#61141](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61141) [`57a79a328287`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57a79a328287) - Revert the solution with the hidden span in the Label which was merged in scope of DST-11061.
+
+## 13.0.4
+
+### Patch Changes
+
+- [#60029](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60029) [`b9826ea49c47`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9826ea49c47) - Update dependencies that were impacted by HOT-106483 to latest.
+
 ## 13.0.3
 
 ### Patch Changes

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

@@ -29,7 +29,6 @@ var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
-var _clearIndicator = _interopRequireDefault(require("../internal/clear-indicator"));
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 var _singleValue = require("../internal/single-value");
 var _utils = require("./utils");
@@ -40,7 +39,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.3";
+var packageVersion = "13.0.5";
 function getValidDate(iso) {
   var date = (0, _dateFns.parseISO)(iso);
   return (0, _dateFns.isValid)(date) ? {
@@ -440,9 +439,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         DropdownIndicator: dropDownIcon,
         Menu: Menu,
         SingleValue: SingleValue
-      }, showClearIndicator ? {
-        ClearIndicator: _clearIndicator.default
-      } : {
+      }, !showClearIndicator && {
         ClearIndicator: _internal.EmptyComponent
       });
       var _selectProps$styles = selectProps.styles,

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

@@ -18,11 +18,11 @@ var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/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 _clearButton = _interopRequireDefault(require("../internal/clear-button"));
 var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _timePicker = _interopRequireDefault(require("./time-picker"));
 var _utils = require("./utils");
@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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; } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.3";
+var packageVersion = "13.0.5";
 var isInvalidBorderStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
 });
@@ -305,11 +305,9 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
       // Don't use Date or TimePicker's because they can't be customised
       var isClearable = Boolean(dateValue || timeValue);
       var notFocusedOrIsDisabled = !(isFocused || isDisabled);
-      var ariaLabelledbyId = id && "label--".concat(id);
       return (0, _react2.jsx)("div", (0, _extends2.default)({
         css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
       }, innerProps, {
-        "aria-labelledby": innerProps['aria-labelledby'] || ariaLabelledbyId,
         "data-testid": testId
       }), (0, _react2.jsx)("input", {
         name: name,
@@ -340,13 +338,17 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
         timeFormat: timeFormat,
         locale: locale,
         testId: testId && "".concat(testId, "--timepicker")
-      }, timePickerProps))), isClearable && !isDisabled ? (0, _react2.jsx)(_clearButton.default, {
-        inputId: id,
-        buttonStyles: iconContainerStyles,
+      }, timePickerProps))), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
+        css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container"),
-        primaryColor: "inherit"
-      }) : null);
+        tabIndex: -1,
+        type: "button"
+      }, (0, _react2.jsx)(_selectClear.default, {
+        size: "small",
+        primaryColor: "inherit",
+        label: "clear"
+      })) : null);
     }
   }]);
   return DateTimePicker;

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

@@ -23,7 +23,6 @@ var _locale = require("@atlaskit/locale");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
-var _clearIndicator = _interopRequireDefault(require("../internal/clear-indicator"));
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
 var _singleValue = require("../internal/single-value");
@@ -38,7 +37,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.3";
+var packageVersion = "13.0.5";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -280,10 +279,8 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         DropdownIndicator: _internal.EmptyComponent,
         Menu: FixedLayerMenu,
         SingleValue: SingleValue
-      }, hideIcon ? {
+      }, hideIcon && {
         ClearIndicator: _internal.EmptyComponent
-      } : {
-        ClearIndicator: _clearIndicator.default
       });
       var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = (0, _select.mergeStyles)(selectStyles, {

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

@@ -15,12 +15,11 @@ import Select, { mergeStyles } from '@atlaskit/select';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
-import ClearIndicator from '../internal/clear-indicator';
 import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.3";
+const packageVersion = "13.0.5";
 function getValidDate(iso) {
   const date = parseISO(iso);
   return isValid(date) ? {
@@ -438,9 +437,7 @@ class DatePicker extends Component {
       DropdownIndicator: dropDownIcon,
       Menu,
       SingleValue,
-      ...(showClearIndicator ? {
-        ClearIndicator: ClearIndicator
-      } : {
+      ...(!showClearIndicator && {
         ClearIndicator: EmptyComponent
       })
     };

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

@@ -6,16 +6,16 @@ import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
 import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
-import ClearButton from '../internal/clear-button';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.3";
+const packageVersion = "13.0.5";
 const isInvalidBorderStyles = css({
   borderColor: `var(--ds-border-danger, ${R400})`
 });
@@ -291,11 +291,9 @@ class DateTimePicker extends React.Component {
     // Don't use Date or TimePicker's because they can't be customised
     const isClearable = Boolean(dateValue || timeValue);
     const notFocusedOrIsDisabled = !(isFocused || isDisabled);
-    const ariaLabelledbyId = id && `label--${id}`;
     return jsx("div", _extends({
       css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
     }, innerProps, {
-      "aria-labelledby": innerProps['aria-labelledby'] || ariaLabelledbyId,
       "data-testid": testId
     }), jsx("input", {
       name: name,
@@ -326,13 +324,17 @@ class DateTimePicker extends React.Component {
       timeFormat: timeFormat,
       locale: locale,
       testId: testId && `${testId}--timepicker`
-    }, timePickerProps))), isClearable && !isDisabled ? jsx(ClearButton, {
-      inputId: id,
-      buttonStyles: iconContainerStyles,
+    }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
+      css: iconContainerStyles,
       onClick: this.onClear,
       "data-testid": testId && `${testId}--icon--container`,
-      primaryColor: "inherit"
-    }) : null);
+      tabIndex: -1,
+      type: "button"
+    }, jsx(SelectClearIcon, {
+      size: "small",
+      primaryColor: "inherit",
+      label: "clear"
+    })) : null);
   }
 }
 _defineProperty(DateTimePicker, "defaultProps", dateTimePickerDefaultProps);

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

@@ -11,13 +11,12 @@ import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/sele
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
-import ClearIndicator from '../internal/clear-indicator';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.3";
+const packageVersion = "13.0.5";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -255,10 +254,8 @@ class TimePicker extends React.Component {
       DropdownIndicator: EmptyComponent,
       Menu: FixedLayerMenu,
       SingleValue,
-      ...(hideIcon ? {
+      ...(hideIcon && {
         ClearIndicator: EmptyComponent
-      } : {
-        ClearIndicator: ClearIndicator
       })
     };
     const renderIconContainer = Boolean(!hideIcon && value);

package/dist/esm/components/date-picker.js

@@ -26,12 +26,11 @@ import Select, { mergeStyles } from '@atlaskit/select';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
-import ClearIndicator from '../internal/clear-indicator';
 import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.3";
+var packageVersion = "13.0.5";
 function getValidDate(iso) {
   var date = parseISO(iso);
   return isValid(date) ? {
@@ -431,9 +430,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         DropdownIndicator: dropDownIcon,
         Menu: Menu,
         SingleValue: SingleValue
-      }, showClearIndicator ? {
-        ClearIndicator: ClearIndicator
-      } : {
+      }, !showClearIndicator && {
         ClearIndicator: EmptyComponent
       });
       var _selectProps$styles = selectProps.styles,

package/dist/esm/components/date-time-picker.js

@@ -16,16 +16,16 @@ import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
 import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
-import ClearButton from '../internal/clear-button';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.3";
+var packageVersion = "13.0.5";
 var isInvalidBorderStyles = css({
   borderColor: "var(--ds-border-danger, ".concat(R400, ")")
 });
@@ -299,11 +299,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       // Don't use Date or TimePicker's because they can't be customised
       var isClearable = Boolean(dateValue || timeValue);
       var notFocusedOrIsDisabled = !(isFocused || isDisabled);
-      var ariaLabelledbyId = id && "label--".concat(id);
       return jsx("div", _extends({
         css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
       }, innerProps, {
-        "aria-labelledby": innerProps['aria-labelledby'] || ariaLabelledbyId,
         "data-testid": testId
       }), jsx("input", {
         name: name,
@@ -334,13 +332,17 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         timeFormat: timeFormat,
         locale: locale,
         testId: testId && "".concat(testId, "--timepicker")
-      }, timePickerProps))), isClearable && !isDisabled ? jsx(ClearButton, {
-        inputId: id,
-        buttonStyles: iconContainerStyles,
+      }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
+        css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container"),
-        primaryColor: "inherit"
-      }) : null);
+        tabIndex: -1,
+        type: "button"
+      }, jsx(SelectClearIcon, {
+        size: "small",
+        primaryColor: "inherit",
+        label: "clear"
+      })) : null);
     }
   }]);
   return DateTimePicker;

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

@@ -24,13 +24,12 @@ import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/sele
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
-import ClearIndicator from '../internal/clear-indicator';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.3";
+var packageVersion = "13.0.5";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -272,10 +271,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         DropdownIndicator: EmptyComponent,
         Menu: FixedLayerMenu,
         SingleValue: SingleValue
-      }, hideIcon ? {
+      }, hideIcon && {
         ClearIndicator: EmptyComponent
-      } : {
-        ClearIndicator: ClearIndicator
       });
       var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = mergeStyles(selectStyles, {

package/dist/types/components/date-picker.d.ts

@@ -267,7 +267,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "value" | "placeholder" | "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "autoFocus" | "disabled" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "icon" | "defaultIsOpen" | "disabledDateFilter" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -287,5 +287,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "autoFocus" | "disabled" | "name" | "value" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "icon" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "name" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/components/date-time-picker.d.ts

@@ -193,7 +193,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): jsx.JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "value" | "testId" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "autoFocus" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "isDisabled" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -213,5 +213,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "key" | "autoFocus" | "name" | "value" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "isDisabled" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/time-picker.d.ts

@@ -189,7 +189,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "value" | "placeholder" | "testId" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "autoFocus" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "defaultIsOpen" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -209,5 +209,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "key" | "autoFocus" | "name" | "value" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/date-picker.d.ts

@@ -267,7 +267,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "value" | "placeholder" | "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "autoFocus" | "disabled" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "icon" | "defaultIsOpen" | "disabledDateFilter" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -287,5 +287,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "autoFocus" | "disabled" | "name" | "value" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "icon" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "name" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/date-time-picker.d.ts

@@ -193,7 +193,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): jsx.JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "value" | "testId" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "autoFocus" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "isDisabled" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -213,5 +213,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "key" | "autoFocus" | "name" | "value" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "isDisabled" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/time-picker.d.ts

@@ -189,7 +189,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "value" | "placeholder" | "testId" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "autoFocus" | "name" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "defaultIsOpen" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -209,5 +209,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "key" | "autoFocus" | "name" | "value" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "testId" | "appearance" | "innerProps" | "selectProps" | "isDisabled" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "13.0.3",
+  "version": "13.0.5",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,16 +33,16 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/calendar": "^14.0.0",
+    "@atlaskit/calendar": "^14.0.3",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/layering": "^0.2.0",
     "@atlaskit/locale": "^2.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/select": "^17.0.0",
+    "@atlaskit/select": "^17.0.3",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -55,9 +55,9 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^17.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/form": "^9.0.0",
+    "@atlaskit/form": "^9.0.3",
     "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/popup": "^1.11.0",
     "@atlaskit/range": "^7.1.0",

package/dist/cjs/internal/clear-button.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("@emotion/react");
-var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
-/** @jsx jsx */
-
-/**
- * __Clear button__
- */
-var ClearButton = function ClearButton(_ref) {
-  var inputId = _ref.inputId,
-    _ref$iconSize = _ref.iconSize,
-    iconSize = _ref$iconSize === void 0 ? 'small' : _ref$iconSize,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Clear' : _ref$label,
-    primaryColor = _ref.primaryColor,
-    buttonStyles = _ref.buttonStyles,
-    dataTestId = _ref.dataTestId,
-    onClick = _ref.onClick;
-  var labelId = inputId && "label--".concat(inputId);
-  var clearButtonId = inputId && "clear-btn--".concat(inputId);
-  return (0, _react.jsx)("button", {
-    "aria-labelledby": inputId ? "".concat(clearButtonId, " ").concat(labelId) : "".concat(clearButtonId),
-    css: buttonStyles,
-    type: "button",
-    tabIndex: -1,
-    "data-testid": "".concat(dataTestId, "--clear--btn"),
-    onClick: onClick
-  }, (0, _react.jsx)("span", {
-    hidden: true,
-    id: clearButtonId
-  }, "Clear"), (0, _react.jsx)("span", {
-    style: {
-      display: 'flex'
-    }
-  }, (0, _react.jsx)(_selectClear.default, {
-    size: iconSize,
-    label: inputId ? '' : label,
-    primaryColor: primaryColor
-  })));
-};
-var _default = exports.default = ClearButton;

package/dist/cjs/internal/clear-indicator.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
-var _select = require("@atlaskit/select");
-var _clearButton = _interopRequireDefault(require("./clear-button"));
-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; } /** @jsx jsx */
-var buttonStyles = (0, _react.css)({
-  display: 'flex',
-  alignItems: 'center',
-  all: 'unset',
-  outline: 'revert'
-});
-
-/**
- * __Clear indicator__
- * Overwrites the default `ClearIndicator` button with custom styles and attributes
- *
- */
-var ClearIndicator = function ClearIndicator(props) {
-  return (0, _react.jsx)(_select.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
-    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
-      'aria-hidden': 'false'
-    })
-  }), (0, _react.jsx)(_clearButton.default, {
-    buttonStyles: buttonStyles,
-    inputId: props.selectProps.inputId,
-    dataTestId: props.selectProps.testId
-  }));
-};
-var _default = exports.default = ClearIndicator;

package/dist/es2019/internal/clear-button.js

@@ -1,38 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
-/**
- * __Clear button__
- */
-const ClearButton = ({
-  inputId,
-  iconSize = 'small',
-  label = 'Clear',
-  primaryColor,
-  buttonStyles,
-  dataTestId,
-  onClick
-}) => {
-  const labelId = inputId && `label--${inputId}`;
-  const clearButtonId = inputId && `clear-btn--${inputId}`;
-  return jsx("button", {
-    "aria-labelledby": inputId ? `${clearButtonId} ${labelId}` : `${clearButtonId}`,
-    css: buttonStyles,
-    type: "button",
-    tabIndex: -1,
-    "data-testid": `${dataTestId}--clear--btn`,
-    onClick: onClick
-  }, jsx("span", {
-    hidden: true,
-    id: clearButtonId
-  }, "Clear"), jsx("span", {
-    style: {
-      display: 'flex'
-    }
-  }, jsx(SelectClearIcon, {
-    size: iconSize,
-    label: inputId ? '' : label,
-    primaryColor: primaryColor
-  })));
-};
-export default ClearButton;

package/dist/es2019/internal/clear-indicator.js

@@ -1,31 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
-import { components } from '@atlaskit/select';
-import ClearButton from './clear-button';
-const buttonStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  all: 'unset',
-  outline: 'revert'
-});
-
-/**
- * __Clear indicator__
- * Overwrites the default `ClearIndicator` button with custom styles and attributes
- *
- */
-const ClearIndicator = props => {
-  return jsx(components.ClearIndicator, _extends({}, props, {
-    innerProps: {
-      ...props.innerProps,
-      'aria-hidden': 'false'
-    }
-  }), jsx(ClearButton, {
-    buttonStyles: buttonStyles,
-    inputId: props.selectProps.inputId,
-    dataTestId: props.selectProps.testId
-  }));
-};
-export default ClearIndicator;

package/dist/esm/internal/clear-button.js

@@ -1,39 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
-/**
- * __Clear button__
- */
-var ClearButton = function ClearButton(_ref) {
-  var inputId = _ref.inputId,
-    _ref$iconSize = _ref.iconSize,
-    iconSize = _ref$iconSize === void 0 ? 'small' : _ref$iconSize,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Clear' : _ref$label,
-    primaryColor = _ref.primaryColor,
-    buttonStyles = _ref.buttonStyles,
-    dataTestId = _ref.dataTestId,
-    onClick = _ref.onClick;
-  var labelId = inputId && "label--".concat(inputId);
-  var clearButtonId = inputId && "clear-btn--".concat(inputId);
-  return jsx("button", {
-    "aria-labelledby": inputId ? "".concat(clearButtonId, " ").concat(labelId) : "".concat(clearButtonId),
-    css: buttonStyles,
-    type: "button",
-    tabIndex: -1,
-    "data-testid": "".concat(dataTestId, "--clear--btn"),
-    onClick: onClick
-  }, jsx("span", {
-    hidden: true,
-    id: clearButtonId
-  }, "Clear"), jsx("span", {
-    style: {
-      display: 'flex'
-    }
-  }, jsx(SelectClearIcon, {
-    size: iconSize,
-    label: inputId ? '' : label,
-    primaryColor: primaryColor
-  })));
-};
-export default ClearButton;

package/dist/esm/internal/clear-indicator.js

@@ -1,32 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(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; }
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
-import { components } from '@atlaskit/select';
-import ClearButton from './clear-button';
-var buttonStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  all: 'unset',
-  outline: 'revert'
-});
-
-/**
- * __Clear indicator__
- * Overwrites the default `ClearIndicator` button with custom styles and attributes
- *
- */
-var ClearIndicator = function ClearIndicator(props) {
-  return jsx(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
-    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
-      'aria-hidden': 'false'
-    })
-  }), jsx(ClearButton, {
-    buttonStyles: buttonStyles,
-    inputId: props.selectProps.inputId,
-    dataTestId: props.selectProps.testId
-  }));
-};
-export default ClearIndicator;

package/dist/types/internal/clear-button.d.ts

@@ -1,17 +0,0 @@
-/** @jsx jsx */
-import { jsx, SerializedStyles } from '@emotion/react';
-import { Size } from '@atlaskit/icon';
-interface ClearButtonProps {
-    inputId?: string;
-    iconSize?: Size;
-    primaryColor?: string;
-    label?: string;
-    buttonStyles?: SerializedStyles;
-    dataTestId?: string;
-    onClick?: () => void;
-}
-/**
- * __Clear button__
- */
-declare const ClearButton: ({ inputId, iconSize, label, primaryColor, buttonStyles, dataTestId, onClick, }: ClearButtonProps) => jsx.JSX.Element;
-export default ClearButton;

package/dist/types/internal/clear-indicator.d.ts

@@ -1,10 +0,0 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import { ClearIndicatorProps } from '@atlaskit/select';
-/**
- * __Clear indicator__
- * Overwrites the default `ClearIndicator` button with custom styles and attributes
- *
- */
-declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
-export default ClearIndicator;

package/dist/types-ts4.5/internal/clear-button.d.ts

@@ -1,17 +0,0 @@
-/** @jsx jsx */
-import { jsx, SerializedStyles } from '@emotion/react';
-import { Size } from '@atlaskit/icon';
-interface ClearButtonProps {
-    inputId?: string;
-    iconSize?: Size;
-    primaryColor?: string;
-    label?: string;
-    buttonStyles?: SerializedStyles;
-    dataTestId?: string;
-    onClick?: () => void;
-}
-/**
- * __Clear button__
- */
-declare const ClearButton: ({ inputId, iconSize, label, primaryColor, buttonStyles, dataTestId, onClick, }: ClearButtonProps) => jsx.JSX.Element;
-export default ClearButton;

package/dist/types-ts4.5/internal/clear-indicator.d.ts

@@ -1,10 +0,0 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import { ClearIndicatorProps } from '@atlaskit/select';
-/**
- * __Clear indicator__
- * Overwrites the default `ClearIndicator` button with custom styles and attributes
- *
- */
-declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
-export default ClearIndicator;