@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/es2019/ui/common/modal/site-selector/site-selector-old.js

@@ -0,0 +1,77 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { Box, xcss } from '@atlaskit/primitives';
+import Select from '@atlaskit/select';
+import { siteSelectorIndex } from '../../../../common/zindex';
+import { siteSelectorMessages } from './messages';
+const dropdownContainerStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.100',
+  minHeight: '40px' // to prevent vertical shifting when site selector pops in
+});
+const selectStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: siteSelectorIndex
+});
+export const SiteSelectorOld = props => {
+  const {
+    availableSites,
+    onSiteSelection,
+    selectedSite,
+    label,
+    testId
+  } = props;
+  const {
+    formatMessage
+  } = useIntl();
+  const onChange = newValue => {
+    const selectedSite = availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(site => site.cloudId === (newValue === null || newValue === void 0 ? void 0 : newValue.value));
+    if (selectedSite) {
+      onSiteSelection(selectedSite);
+    }
+  };
+  const availableSitesOptions = useMemo(() => availableSites === null || availableSites === void 0 ? void 0 : availableSites.map(site => ({
+    label: site.displayName,
+    value: site.cloudId
+  })), [availableSites]);
+  const selectedSiteOption = selectedSite && {
+    label: selectedSite.displayName,
+    value: selectedSite.cloudId
+  };
+  return jsx(Box, {
+    xcss: dropdownContainerStyles
+  }, formatMessage(label), availableSites && availableSites.length > 1 && jsx("span", {
+    "data-testid": `${testId}--trigger`
+  }, jsx(Select, {
+    css: selectStyles,
+    classNamePrefix: testId,
+    isLoading: !availableSites,
+    onChange: onChange,
+    options: availableSitesOptions,
+    placeholder: formatMessage(siteSelectorMessages.chooseSite),
+    styles: {
+      // prevents the popup menu with available sites from being too narrow
+      // if the selected site is much shorter than the other options
+      menu: ({
+        width,
+        ...css
+      }) => ({
+        ...css,
+        minWidth: '100%',
+        width: 'max-content'
+      })
+    },
+    testId: testId,
+    value: selectedSiteOption
+  })));
+};

package/dist/es2019/ui/confluence-search-modal/basic-filters/basic-filters-old.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Flex, xcss } from '@atlaskit/primitives';
+import { DateRangePicker } from './filters/date-range-picker';
+import EditedOrCreatedByFilter from './filters/edited-or-created-by';
+import { CLOLBasicFilters } from './types';
+const basicFilterContainerStyles = xcss({
+  paddingLeft: 'space.100'
+});
+const BasicFilterContainer = ({
+  cloudId,
+  onChange,
+  selections = {},
+  isHydrating
+}) => {
+  const {
+    lastModified,
+    editedOrCreatedBy
+  } = selections;
+  const [lastModifiedValue] = lastModified || [];
+  const lastModifiedSelection = (lastModifiedValue === null || lastModifiedValue === void 0 ? void 0 : lastModifiedValue.optionType) === 'dateRange' ? lastModifiedValue : undefined;
+  const onDateRangePickerChange = updatedOption => {
+    onChange(CLOLBasicFilters.lastModified, {
+      optionType: 'dateRange',
+      label: updatedOption.value,
+      ...updatedOption
+    });
+  };
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "clol-basic-filter-container"
+  }, /*#__PURE__*/React.createElement(EditedOrCreatedByFilter, {
+    cloudId: cloudId,
+    onSelectionChange: onChange,
+    selection: editedOrCreatedBy || [],
+    isHydrating: isHydrating
+  }), /*#__PURE__*/React.createElement(DateRangePicker, {
+    selection: lastModifiedSelection,
+    onSelectionChange: onDateRangePickerChange,
+    filterName: `clol-basic-filter-${CLOLBasicFilters.lastModified}`
+  }));
+};
+export default BasicFilterContainer;

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/PopupComponent.compiled.css

@@ -0,0 +1,13 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._16jlkb7n{flex-grow:1}
+._16qs1sus{box-shadow:var(--ds-shadow-overlay,0 0 1px 0 rgba(9,30,66,.31),0 3px 5px 0 rgba(9,30,66,.2))}
+._18m9ewfl{overflow-y:visible}
+._1e0c1ule{display:block}
+._1o9zkb7n{flex-shrink:1}
+._1reoewfl{overflow-x:visible}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._i0dl1wug{flex-basis:auto}
+._vchhusvi{box-sizing:border-box}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/PopupComponent.js

@@ -1,7 +1,43 @@
+/* PopupComponent.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./PopupComponent.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
-import { PopupComponentContainer } from './styled';
-export const PopupComponent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(PopupComponentContainer, _extends({}, props, {
+import { fg } from "@atlaskit/platform-feature-flags";
+import { N0 } from "@atlaskit/theme/colors";
+import { PopupComponentContainerOld } from './styled-old';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const PopupComponentContainer = /*#__PURE__*/forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1reoewfl _18m9ewfl _2rkoiti9 _vchhusvi _1e0c1ule _bfhk1j9a _16qs1sus _nt751r31 _49pcglyw _1hvw1o36", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  PopupComponentContainer.displayName = 'PopupComponentContainer';
+}
+export const PopupComponentNew = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(PopupComponentContainer, _extends({}, props, {
   "data-testId": 'confluence-search-datasource-popup-container',
   ref: ref
-})));
+})));
+export const PopupComponentOld = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(PopupComponentContainerOld, _extends({}, props, {
+  "data-testId": 'confluence-search-datasource-popup-container',
+  ref: ref
+})));
+export const PopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(PopupComponentNew, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(PopupComponentOld, _extends({}, props, {
+      ref: ref
+    }));
+  }
+});

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.compiled.css

@@ -0,0 +1,27 @@
+._11c81kw7{font:inherit}
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19itglyw{border:none}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._zulpv77o{gap:var(--ds-space-025,2px)}
+._16qs1sus{box-shadow:var(--ds-shadow-overlay,0 0 1px 0 rgba(9,30,66,.31),0 3px 5px 0 rgba(9,30,66,.2))}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._19pk57x3{margin-top:var(--ds-space-050,2px)}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1bsb5x59{width:340px}
+._1bsbymf6{width:70px}
+._1e0c1txw{display:flex}
+._1pby16oo{z-index:510}
+._4cvr1h6o{align-items:center}
+._4t3i1ylp{height:40px}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhk1y9p{background-color:var(--ds-background-accent-gray-subtler,#f4f5f7)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._syaz1ick{color:var(--ds-text-danger,#de350b)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._vchhusvi{box-sizing:border-box}
+._d0altlke:hover{cursor:pointer}
+._irr3134c:hover{background-color:var(--ds-background-accent-gray-subtler,#ebecf0)}

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -1,17 +1,103 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { DatePicker } from '@atlaskit/datetime-picker';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
-import { R400 } from '@atlaskit/theme/colors';
+import { N0, N20, N30, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
 import { dateRangeMessages } from './messages';
 import { PopupComponent } from './PopupComponent';
-import { CustomDateWrapper, CustomDropdown, CustomDropdownItem, DatePickersWrapper, DateRangeErrorMessage, SelectDateRangeButton } from './styled';
+import { CustomDropdownItem } from "./styled";
+import { CustomDateWrapperOld, CustomDropdownItemOld, CustomDropdownOld, DatePickersWrapperOld, DateRangeErrorMessageOld, SelectDateRangeButtonOld } from './styled-old';
 import { PopupTrigger } from './trigger';
 import { getCurrentOptionLabel, getDropdownLabel, useInvalidDateRange } from './utils';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const DateRangeErrorMessage = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_zulpv77o _11c8qk37 _1e0c1txw _19pk57x3 _bozgv77o _syaz1ick _4cvr1h6o", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  DateRangeErrorMessage.displayName = 'DateRangeErrorMessage';
+}
+const CustomDropdown = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_2rkoiti9 _1bsb5x59 _bfhk1j9a _16qs1sus _1pby16oo", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  CustomDropdown.displayName = 'CustomDropdown';
+}
+const SelectDateRangeButton = forwardRef(({
+  as: C = "button",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_19itglyw _11c81kw7 _2rkoiti9 _bfhk1y9p _1bsbymf6 _4t3i1ylp _19pkutpp _irr3134c _d0altlke", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  SelectDateRangeButton.displayName = 'SelectDateRangeButton';
+}
+const CustomDateWrapper = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _vchhusvi", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  CustomDateWrapper.displayName = 'CustomDateWrapper';
+}
+const DatePickersWrapper = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _1bah1yb4 _4cvr1h6o _1bsb1osq", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  DatePickersWrapper.displayName = 'DatePickersWrapper';
+}
 const dateRangeValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days', 'pastYear', 'custom'];
 const defaultOptionValue = 'anyTime';
 export const DateRangePicker = ({
@@ -79,14 +165,8 @@ export const DateRangePicker = ({
       fireEvent('ui.dropdown.closed.basicSearchDropdown', analyticsPayload);
     }
   }, [analyticsPayload, fireEvent, isPickerOpen]);
-  return /*#__PURE__*/React.createElement(Popup, {
-    isOpen: !!isPickerOpen,
-    onClose: handlePickerToggle
-    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
-    popupComponent: PopupComponent,
-    zIndex: layers.modal(),
-    content: () => {
+  const popupContent = () => {
+    if (fg('bandicoots-compiled-migration-link-datasource')) {
       return /*#__PURE__*/React.createElement(CustomDropdown, null, dateRangeValues.map(option => /*#__PURE__*/React.createElement(CustomDropdownItem, {
         key: option
         // want to show Anytime as selected if none of the other options are selected
@@ -147,7 +227,76 @@ export const DateRangePicker = ({
         disabled: Boolean(invalidDateRange),
         onClick: handleClickUpdateDateRange
       }, formatMessage(dateRangeMessages.dateRangeUpdateButton))));
-    },
+    }
+    return /*#__PURE__*/React.createElement(CustomDropdownOld, null, dateRangeValues.map(option => /*#__PURE__*/React.createElement(CustomDropdownItemOld, {
+      key: option
+      // want to show Anytime as selected if none of the other options are selected
+      ,
+      isSelected: selectedValue ? option === selectedValue : option === defaultOptionValue,
+      onClick: () => handleClickFilterOption(option)
+    }, getDropdownLabel(option, formatMessage))), isPickerOpen && isCustomSelected && /*#__PURE__*/React.createElement(CustomDateWrapperOld, null, /*#__PURE__*/React.createElement(DatePickersWrapperOld, null, /*#__PURE__*/React.createElement(DatePicker, {
+      maxDate: todayDate,
+      innerProps: {
+        style: {
+          width: 140
+        }
+      },
+      testId: "date-from-picker",
+      dateFormat: "D MMM YYYY",
+      onChange: setCustomFromDate,
+      defaultValue: fromDate,
+      placeholder: formatMessage(dateRangeMessages.dateRangeFrom),
+      isInvalid: Boolean(invalidDateRange),
+      locale: locale,
+      selectProps: {
+        styles: {
+          placeholder: base => ({
+            ...base,
+            width: 'max-content'
+          })
+        }
+      }
+    }), /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeToLabel), /*#__PURE__*/React.createElement(DatePicker, {
+      maxDate: todayDate,
+      innerProps: {
+        style: {
+          width: 140
+        }
+      },
+      testId: "date-to-picker",
+      dateFormat: "D MMM YYYY",
+      onChange: setCustomToDate,
+      defaultValue: toDate,
+      placeholder: formatMessage(dateRangeMessages.dateRangeTo),
+      isInvalid: Boolean(invalidDateRange),
+      locale: locale,
+      selectProps: {
+        styles: {
+          placeholder: base => ({
+            ...base,
+            width: 'max-content'
+          })
+        }
+      }
+    })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessageOld, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+      LEGACY_size: "small",
+      color: `var(--ds-icon-danger, ${R400})`,
+      label: "Date range error",
+      LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`
+    }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButtonOld, {
+      "data-testId": "custom-date-range-update-button",
+      disabled: Boolean(invalidDateRange),
+      onClick: handleClickUpdateDateRange
+    }, formatMessage(dateRangeMessages.dateRangeUpdateButton))));
+  };
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: !!isPickerOpen,
+    onClose: handlePickerToggle
+    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+    ,
+    popupComponent: PopupComponent,
+    zIndex: layers.modal(),
+    content: popupContent,
     placement: "bottom-start",
     trigger: triggerProps => {
       const labelText = getCurrentOptionLabel(formatDate, formatMessage, selectedValue, toDate, fromDate);

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled-old.js

@@ -0,0 +1,90 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const PopupComponentContainerOld = styled.div({
+  boxSizing: 'border-box',
+  display: 'block',
+  flex: '1 1 auto',
+  overflow: 'visible',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  background: `var(--ds-background-input, ${N0})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':focus': {
+    outline: 'none'
+  },
+  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const CustomDropdownOld = styled.div({
+  width: '340px',
+  background: `var(--ds-background-input, ${N0})`,
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
+  zIndex: layers.modal()
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const CustomDropdownItemOld = styled.div(props => ({
+  height: '36px',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  paddingLeft: props.isSelected ? '15px' : '16px',
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  color: props.isSelected ? `var(--ds-text-selected, ${B400})` : 'inherit',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : 'transparent',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderLeft: props.isSelected ? `2px solid ${`var(--ds-text-selected, ${B400})`}` : 'none',
+  '&:hover': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : `var(--ds-background-input-hovered, ${N20})`,
+    cursor: 'default'
+  }
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const CustomDateWrapperOld = styled.div({
+  padding: "var(--ds-space-150, 12px)",
+  boxSizing: 'border-box'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const DatePickersWrapperOld = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SelectDateRangeButtonOld = styled.button({
+  background: `var(--ds-background-accent-gray-subtler, ${N20})`,
+  border: 'none',
+  font: 'inherit',
+  width: '70px',
+  height: '40px',
+  marginTop: "var(--ds-space-150, 12px)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  '&:hover': {
+    background: `var(--ds-background-accent-gray-subtler, ${N30})`,
+    cursor: 'pointer'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const DateRangeErrorMessageOld = styled.div({
+  display: 'flex',
+  marginTop: "var(--ds-space-050, 2px)",
+  gap: "var(--ds-space-025, 2px)",
+  paddingInlineStart: "var(--ds-space-025, 2px)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  color: `var(--ds-text-danger, ${R400})`,
+  alignItems: 'center'
+});

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.compiled.css

@@ -0,0 +1,17 @@
+
+._1kl71ys0{border-left:2px solid var(--ds-text-selected,#0052cc)}
+._1kl7glyw{border-left:none}._19bvo7ao{padding-left:15px}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bah1y6m{justify-content:flex-start}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i14no{height:36px}
+._bfhk18uv{background-color:initial}
+._bfhk1hdx{background-color:var(--ds-background-accent-blue-subtlest,#deebff)}
+._syaz1kw7{color:inherit}
+._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
+._vchhusvi{box-sizing:border-box}
+._d0al73ad:hover{cursor:default}
+._irr31hdx:hover{background-color:var(--ds-background-accent-blue-subtlest,#deebff)}
+._irr31qz1:hover{background-color:var(--ds-background-input-hovered,#f4f5f7)}

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -1,90 +1,12 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const PopupComponentContainer = styled.div({
-  boxSizing: 'border-box',
-  display: 'block',
-  flex: '1 1 auto',
-  overflow: 'visible',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  background: `var(--ds-background-input, ${N0})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':focus': {
-    outline: 'none'
-  },
-  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CustomDropdown = styled.div({
-  width: '340px',
-  background: `var(--ds-background-input, ${N0})`,
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
-  zIndex: layers.modal()
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export const CustomDropdownItem = styled.div(props => ({
-  height: '36px',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingLeft: props.isSelected ? '15px' : '16px',
-  boxSizing: 'border-box',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  color: props.isSelected ? `var(--ds-text-selected, ${B400})` : 'inherit',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : 'transparent',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderLeft: props.isSelected ? `2px solid ${`var(--ds-text-selected, ${B400})`}` : 'none',
-  '&:hover': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : `var(--ds-background-input-hovered, ${N20})`,
-    cursor: 'default'
-  }
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CustomDateWrapper = styled.div({
-  padding: "var(--ds-space-150, 12px)",
-  boxSizing: 'border-box'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const DatePickersWrapper = styled.div({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const SelectDateRangeButton = styled.button({
-  background: `var(--ds-background-accent-gray-subtler, ${N20})`,
-  border: 'none',
-  font: 'inherit',
-  width: '70px',
-  height: '40px',
-  marginTop: "var(--ds-space-150, 12px)",
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  '&:hover': {
-    background: `var(--ds-background-accent-gray-subtler, ${N30})`,
-    cursor: 'pointer'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const DateRangeErrorMessage = styled.div({
-  display: 'flex',
-  marginTop: "var(--ds-space-050, 2px)",
-  gap: "var(--ds-space-025, 2px)",
-  paddingInlineStart: "var(--ds-space-025, 2px)",
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  color: `var(--ds-text-danger, ${R400})`,
-  alignItems: 'center'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { B400, B50, N20 } from "@atlaskit/theme/colors";
+const customDropdownItemBaseStyles = null;
+const customDropdownItemSelectedStyles = null;
+const customDropdownItemNotSelectedStyles = null;
+export const CustomDropdownItem = props => /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  className: ax(["_4t3i14no _1bsb1osq _1e0c1txw _1bah1y6m _4cvr1h6o _vchhusvi _d0al73ad", props.isSelected ? "_1kl71ys0 _19bvo7ao _syaz1ldt _bfhk1hdx _irr31hdx" : "_1kl7glyw _19bvpxbi _syaz1kw7 _bfhk18uv _irr31qz1"])
+}), props.children);

package/dist/es2019/ui/confluence-search-modal/basic-filters/index.compiled.css

@@ -0,0 +1 @@
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}