@automattic/date-range-picker 1.0.1 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 1.0.4
+
+- Declare React 19 compatibility for package consumers (#111721).
+
+## 1.0.3
+
+- Fix: restore `*.scss` in `sideEffects` so Calypso (which consumes the package via `calypso:src`) doesn't tree-shake the `import './style.scss'` and lose all of the picker's styles.
+
+## 1.0.2
+
+- Packaging: pre-compile SCSS to CSS in `dist/{esm,cjs}/style.css` so external consumers no longer need a Sass loader. SCSS variables from `@wordpress/base-styles` are resolved at build time.
+- Packaging: move `@wordpress/components`, `@wordpress/compose`, `@wordpress/date`, `@wordpress/i18n`, and `@wordpress/icons` to `peerDependencies` (with `>=` ranges) to prevent duplicate installs and to accommodate hosts pinned to newer `@wordpress/*` majors.
+- Packaging: stop shipping `src/test/**` and `dist/*.tsbuildinfo` in the published tarball.
+- Packaging: drop unused `tslib` runtime dependency.
+- Styles: add sensible fallbacks (`#fff`, `#1e1e1e`, `#949494`) to the dashboard CSS custom properties so the picker renders correctly outside the Calypso dashboard shell.
+- Docs: add a "Using outside Calypso" section to the README documenting peer-deps, the required `@automattic/ui/style.css` import, and the themable CSS custom properties.
+
 ## 1.0.1
 
 - Fix packaging: include `style.scss` in `dist/esm/` and `dist/cjs/` so the compiled `import './style.scss'` resolves for consumers that don't use the `calypso:src` exports condition.

package/README.md

@@ -11,19 +11,6 @@ site-day handling.
 npm install @automattic/date-range-picker
 ```
 
-Consumers must also load the calendar styles from `@automattic/ui` and import
-the picker's own stylesheet. The package ships SCSS source; compile it via
-your own build pipeline (sass-loader, etc.):
-
-```ts
-import '@automattic/ui/style.css';
-import '@automattic/date-range-picker/src/style.scss';
-```
-
-The SCSS expects `$grid-unit-*`, `$radius-small`, and `$gray-600` from
-`@wordpress/base-styles` to be in scope (either via a global `@import` or via
-sass-loader's `additionalData`).
-
 ## Usage
 
 ```tsx
@@ -44,6 +31,11 @@ function Example() {
 }
 ```
 
+The picker's stylesheet is side-effect imported from the component module, so a
+plain `import { DateRangePicker }` is enough — there's no separate CSS import to
+remember. The package ships pre-compiled CSS in `dist/`, so consumers don't
+need a Sass loader.
+
 ### Props
 
 | Prop                    | Type                                              | Default          | Description                                                                                                                |
@@ -73,6 +65,51 @@ import {
 } from '@automattic/date-range-picker';
 ```
 
+## Using outside Calypso
+
+The package is published to npm and works for any React app — Jetpack, custom
+WordPress plugins, etc. A few things to know:
+
+### Required peer dependencies
+
+The host application must install these alongside the picker:
+
+- `react` and `react-dom` (`^18.3.1`)
+- `@wordpress/components` (`>=33.1.0`)
+- `@wordpress/compose` (`>=7.23.0`)
+- `@wordpress/date` (`>=5.23.0`)
+- `@wordpress/i18n` (`>=5.23.0`)
+- `@wordpress/icons` (`>=10.23.0`)
+
+These are peer dependencies (not bundled) so that the host can control the
+exact version and avoid duplicate copies of WordPress packages — multiple
+copies of `@wordpress/compose` will silently break hooks shared across the
+picker and the host.
+
+### Calendar styles
+
+The picker renders `@automattic/ui`'s `DateRangeCalendar`. Make sure the
+host loads its stylesheet once:
+
+```ts
+import '@automattic/ui/style.css';
+```
+
+### Skinning via CSS custom properties
+
+The picker honours these CSS custom properties on a wrapping element, with
+sensible defaults when they're not set:
+
+| Custom property                         | Default       | Purpose                                |
+| --------------------------------------- | ------------- | -------------------------------------- |
+| `--dashboard-surface__background-color` | `#fff`        | Trigger button background.             |
+| `--dashboard__text-color`               | `#1e1e1e`     | Trigger button text and icon colour.   |
+| `--dashboard-field__border-color`       | `#949494`     | Trigger button border colour.          |
+
+Set them on `:root` (or any ancestor of the picker) to theme it. The Calypso
+dashboard shell sets these globally; outside Calypso, set whichever you'd like
+to override.
+
 ## Translations
 
 The package uses `@wordpress/i18n` directly. Strings are extracted with the

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

@@ -10,7 +10,7 @@ const react_1 = require("react");
 const date_range_content_1 = require("./date-range-content");
 const datetime_1 = require("./datetime");
 const utils_1 = require("./utils");
-require("./style.scss");
+require("./style.css");
 function DateRangePicker({ start, end, onChange, gmtOffset, timezoneString, locale, disableFuture = true, disabledBefore, defaultFallbackPreset = 'last-7-days', hiddenPresets, inputsProps, }) {
     const isSmall = (0, compose_1.useMediaQuery)('(max-width: 600px)');
     // Use a wider breakpoint to decide when two calendars can fit comfortably

package/dist/cjs/style.css

@@ -0,0 +1,110 @@
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/* Popover sizing */
+.daterange-popover .components-popover__content {
+  overflow: visible;
+  width: auto;
+  max-width: calc(100vw - 48px);
+}
+
+/* Body rows */
+.daterange-inputs {
+  margin-bottom: 12px;
+}
+
+.daterange-input__field.components-button {
+  background: var(--dashboard-surface__background-color, #fff);
+  padding: 4px 4px 4px 8px;
+  box-shadow: none;
+  border-radius: 2px;
+  border: 1px solid var(--dashboard-field__border-color, #949494);
+}
+.daterange-input__field svg {
+  color: var(--dashboard__text-color, #1e1e1e);
+  padding: 4px;
+}
+.daterange-input__text {
+  color: var(--dashboard__text-color, #1e1e1e);
+  padding: 0 4px;
+}
+
+/* Mobile */
+@media (max-width: 600px) {
+  .daterange-calendar {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+}
+/* Medium screens: presets and calendar should be centered with no awkward right margin */
+@media (min-width: 601px) and (max-width: 899px) {
+  .daterange-body {
+    justify-content: space-between !important;
+  }
+}
+/* Desktop presets column: ensure a reasonable width to avoid awkward wrapping */
+@media (min-width: 601px) {
+  .daterange-presets {
+    min-width: 240px;
+  }
+}
+/* Preset list items: keep buttons full-width and avoid awkward line wrapping */
+.preset-listbox__item .components-button {
+  width: 100%;
+  justify-content: flex-start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Hide native date picker icons inside our date inputs (visual only) */
+.daterange-inputs input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.daterange-inputs input[type=date]::-webkit-clear-button {
+  display: none;
+}

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

@@ -7,7 +7,7 @@ import { useMemo, useState } from 'react';
 import { DateRangeContent } from './date-range-content';
 import { parseYmdLocal, formatYmd, formatSiteYmd } from './datetime';
 import { formatLabel } from './utils';
-import './style.scss';
+import './style.css';
 export function DateRangePicker({ start, end, onChange, gmtOffset, timezoneString, locale, disableFuture = true, disabledBefore, defaultFallbackPreset = 'last-7-days', hiddenPresets, inputsProps, }) {
     const isSmall = useMediaQuery('(max-width: 600px)');
     // Use a wider breakpoint to decide when two calendars can fit comfortably

package/dist/esm/style.css

@@ -0,0 +1,110 @@
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/* Popover sizing */
+.daterange-popover .components-popover__content {
+  overflow: visible;
+  width: auto;
+  max-width: calc(100vw - 48px);
+}
+
+/* Body rows */
+.daterange-inputs {
+  margin-bottom: 12px;
+}
+
+.daterange-input__field.components-button {
+  background: var(--dashboard-surface__background-color, #fff);
+  padding: 4px 4px 4px 8px;
+  box-shadow: none;
+  border-radius: 2px;
+  border: 1px solid var(--dashboard-field__border-color, #949494);
+}
+.daterange-input__field svg {
+  color: var(--dashboard__text-color, #1e1e1e);
+  padding: 4px;
+}
+.daterange-input__text {
+  color: var(--dashboard__text-color, #1e1e1e);
+  padding: 0 4px;
+}
+
+/* Mobile */
+@media (max-width: 600px) {
+  .daterange-calendar {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+}
+/* Medium screens: presets and calendar should be centered with no awkward right margin */
+@media (min-width: 601px) and (max-width: 899px) {
+  .daterange-body {
+    justify-content: space-between !important;
+  }
+}
+/* Desktop presets column: ensure a reasonable width to avoid awkward wrapping */
+@media (min-width: 601px) {
+  .daterange-presets {
+    min-width: 240px;
+  }
+}
+/* Preset list items: keep buttons full-width and avoid awkward line wrapping */
+.preset-listbox__item .components-button {
+  width: 100%;
+  justify-content: flex-start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Hide native date picker icons inside our date inputs (visual only) */
+.daterange-inputs input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.daterange-inputs input[type=date]::-webkit-clear-button {
+  display: none;
+}

package/dist/types/utils.d.ts

@@ -1,38 +1,38 @@
 export type PresetId = 'today' | 'yesterday' | 'last-7-days' | 'last-30-days' | 'last-90-days' | 'month-to-date' | 'last-12-months' | 'year-to-date' | 'last-3-years' | 'custom';
 export declare const presetDefs: readonly [{
     readonly id: "today";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Today">;
 }, {
     readonly id: "yesterday";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Yesterday">;
 }, {
     readonly id: "last-7-days";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 7 days">;
 }, {
     readonly id: "last-30-days";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 30 days">;
 }, {
     readonly id: "last-90-days";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 90 days">;
 }, {
     readonly id: "month-to-date";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Month to date">;
 }, {
     readonly id: "last-12-months";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 12 months">;
 }, {
     readonly id: "year-to-date";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Year to date">;
 }, {
     readonly id: "last-3-years";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 3 years">;
 }];
 export declare function computePresetRange(preset: PresetId, baseDate: Date): {
     from: Date;
     to: Date;
 } | undefined;
 export declare function getActivePresetId(from?: Date, to?: Date, baseDate?: Date): PresetId | undefined;
-export declare function formatLabel(start: Date, end: Date, locale: string): string;
+export declare function formatLabel(start: Date, end: Date, locale: string): import("@wordpress/i18n").TransformedText<"%1$s to %2$s">;
 export declare function isLast7Days(range: {
     start: Date;
     end: Date;

package/dist/types/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAkCA,MAAM,MAAM,QAAQ,GACjB,OAAO,GACP,WAAW,GACX,aAAa,GACb,cAAc,GACd,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,QAAQ,CAAC;AAEZ,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUmE,CAAC;AAE3F,wBAAgB,kBAAkB,CAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI;;;cA0BnE;AAED,wBAAgB,iBAAiB,CAAE,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,IAAI,GAAI,QAAQ,GAAG,SAAS,CAiEjG;AAGD,wBAAgB,WAAW,CAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,UAOlE;AAGD,wBAAgB,WAAW,CAC1B,KAAK,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,EACjC,cAAc,CAAC,EAAE,MAAM,EACvB,SAAS,CAAC,EAAE,MAAM,GAChB,OAAO,CAKT"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAkCA,MAAM,MAAM,QAAQ,GACjB,OAAO,GACP,WAAW,GACX,aAAa,GACb,cAAc,GACd,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,QAAQ,CAAC;AAEZ,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUmE,CAAC;AAE3F,wBAAgB,kBAAkB,CAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI;;;cA0BnE;AAED,wBAAgB,iBAAiB,CAAE,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,IAAI,GAAI,QAAQ,GAAG,SAAS,CAiEjG;AAGD,wBAAgB,WAAW,CAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,6DAOlE;AAGD,wBAAgB,WAAW,CAC1B,KAAK,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,EACjC,cAAc,CAAC,EAAE,MAAM,EACvB,SAAS,CAAC,EAAE,MAAM,GAChB,OAAO,CAKT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/date-range-picker",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "A date-range picker built on top of @automattic/ui's DateRangeCalendar, with timezone-aware site-day handling, preset shortcuts, and accessible inputs.",
   "homepage": "https://github.com/Automattic/wp-calypso",
   "license": "GPL-2.0-or-later",
@@ -34,41 +34,70 @@
   "bugs": "https://github.com/Automattic/wp-calypso/issues",
   "files": [
     "dist",
-    "src"
+    "src",
+    "!dist/**/*.tsbuildinfo",
+    "!src/test"
   ],
   "types": "dist/types",
   "scripts": {
     "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
-    "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+    "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && node ./bin/build-styles.js",
     "prepack": "yarn run clean && yarn run build"
   },
   "dependencies": {
-    "@automattic/ui": "^1.0.2",
-    "@wordpress/base-styles": "^5.23.0",
-    "@wordpress/components": "^32.1.0",
-    "@wordpress/compose": "7.23.0",
-    "@wordpress/date": "5.23.0",
-    "@wordpress/i18n": "^5.23.0",
-    "@wordpress/icons": "^10.23.0",
-    "date-fns": "^4.1.0",
-    "tslib": "^2.8.1"
+    "@automattic/ui": "^1.0.3",
+    "date-fns": "^4.1.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@wordpress/components": ">=35.0.0",
+    "@wordpress/compose": ">=8.1.0",
+    "@wordpress/date": ">=5.48.0",
+    "@wordpress/i18n": ">=6.21.0",
+    "@wordpress/icons": ">=13.3.0",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@wordpress/components": {
+      "optional": false
+    },
+    "@wordpress/compose": {
+      "optional": false
+    },
+    "@wordpress/date": {
+      "optional": false
+    },
+    "@wordpress/i18n": {
+      "optional": false
+    },
+    "@wordpress/icons": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
   },
   "devDependencies": {
-    "@automattic/calypso-build": "^11.0.0",
     "@automattic/calypso-typescript-config": "^1.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.18",
+    "@wordpress/base-styles": "^9.1.0",
+    "@wordpress/components": "^35.0.0",
+    "@wordpress/compose": "patch:@wordpress/compose@npm%3A8.1.0#~/.yarn/patches/@wordpress-compose-npm-8.1.0-ea108e3129.patch",
+    "@wordpress/date": "5.48.0",
+    "@wordpress/i18n": "^6.21.0",
+    "@wordpress/icons": "^13.3.0",
     "jest": "^29.7.0",
     "mockdate": "^2.0.5",
     "postcss": "^8.5.3",
-    "typescript": "^5.8.3",
+    "sass": "1.77.8",
+    "typescript": "^6.0.3",
     "webpack": "^5.99.8"
   }
 }

package/src/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as colors;
+@use "@wordpress/base-styles/variables" as v;
+
 /* Popover sizing */
 .daterange-popover .components-popover__content {
 	overflow: visible;
@@ -14,20 +17,20 @@
 	&__field {
 		// The extra class is to make sure it overrides the default button styles
 		&.components-button {
-			background: var( --dashboard-surface__background-color );
-			padding: $grid-unit-05 $grid-unit-05 $grid-unit-05 $grid-unit-10;
+			background: var(--dashboard-surface__background-color, #fff);
+			padding: v.$grid-unit-05 v.$grid-unit-05 v.$grid-unit-05 v.$grid-unit-10;
 			box-shadow: none;
-			border-radius: $radius-small;
-			border: 1px solid var(--dashboard-field__border-color, $gray-600);
+			border-radius: v.$radius-small;
+			border: 1px solid var(--dashboard-field__border-color, #{colors.$gray-600});
 		}
 		svg {
-			color: var(--dashboard__text-color);
-			padding: $grid-unit-05;
+			color: var(--dashboard__text-color, #{colors.$gray-900});
+			padding: v.$grid-unit-05;
 		}
 	}
 	&__text {
-		color: var(--dashboard__text-color);
-		padding: 0 $grid-unit-05;
+		color: var(--dashboard__text-color, #{colors.$gray-900});
+		padding: 0 v.$grid-unit-05;
 	}
 }
 

package/src/types.d.ts

@@ -1 +1,2 @@
 declare module '*.scss';
+declare module '*.css';

package/dist/cjs/style.scss

@@ -1,72 +0,0 @@
-/* Popover sizing */
-.daterange-popover .components-popover__content {
-	overflow: visible;
-	width: auto;
-	max-width: calc( 100vw - 48px );
-}
-
-/* Body rows */
-.daterange-inputs {
-	margin-bottom: 12px;
-}
-
-.daterange-input {
-	&__field {
-		// The extra class is to make sure it overrides the default button styles
-		&.components-button {
-			background: var( --dashboard-surface__background-color );
-			padding: $grid-unit-05 $grid-unit-05 $grid-unit-05 $grid-unit-10;
-			box-shadow: none;
-			border-radius: $radius-small;
-			border: 1px solid var(--dashboard-field__border-color, $gray-600);
-		}
-		svg {
-			color: var(--dashboard__text-color);
-			padding: $grid-unit-05;
-		}
-	}
-	&__text {
-		color: var(--dashboard__text-color);
-		padding: 0 $grid-unit-05;
-	}
-}
-
-/* Mobile */
-@media ( max-width: 600px ) {
-	.daterange-calendar {
-		display: flex;
-		justify-content: center;
-		width: 100%;
-	}
-}
-
-/* Medium screens: presets and calendar should be centered with no awkward right margin */
-@media ( min-width: 601px ) and ( max-width: 899px ) {
-	.daterange-body {
-		justify-content: space-between !important;
-	}
-}
-
-/* Desktop presets column: ensure a reasonable width to avoid awkward wrapping */
-@media ( min-width: 601px ) {
-	.daterange-presets {
-		min-width: 240px;
-	}
-}
-
-/* Preset list items: keep buttons full-width and avoid awkward line wrapping */
-.preset-listbox__item .components-button {
-	width: 100%;
-	justify-content: flex-start;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-/* Hide native date picker icons inside our date inputs (visual only) */
-.daterange-inputs input[type='date']::-webkit-calendar-picker-indicator {
-	display: none;
-}
-.daterange-inputs input[type='date']::-webkit-clear-button {
-	display: none;
-}

package/dist/esm/style.scss

@@ -1,72 +0,0 @@
-/* Popover sizing */
-.daterange-popover .components-popover__content {
-	overflow: visible;
-	width: auto;
-	max-width: calc( 100vw - 48px );
-}
-
-/* Body rows */
-.daterange-inputs {
-	margin-bottom: 12px;
-}
-
-.daterange-input {
-	&__field {
-		// The extra class is to make sure it overrides the default button styles
-		&.components-button {
-			background: var( --dashboard-surface__background-color );
-			padding: $grid-unit-05 $grid-unit-05 $grid-unit-05 $grid-unit-10;
-			box-shadow: none;
-			border-radius: $radius-small;
-			border: 1px solid var(--dashboard-field__border-color, $gray-600);
-		}
-		svg {
-			color: var(--dashboard__text-color);
-			padding: $grid-unit-05;
-		}
-	}
-	&__text {
-		color: var(--dashboard__text-color);
-		padding: 0 $grid-unit-05;
-	}
-}
-
-/* Mobile */
-@media ( max-width: 600px ) {
-	.daterange-calendar {
-		display: flex;
-		justify-content: center;
-		width: 100%;
-	}
-}
-
-/* Medium screens: presets and calendar should be centered with no awkward right margin */
-@media ( min-width: 601px ) and ( max-width: 899px ) {
-	.daterange-body {
-		justify-content: space-between !important;
-	}
-}
-
-/* Desktop presets column: ensure a reasonable width to avoid awkward wrapping */
-@media ( min-width: 601px ) {
-	.daterange-presets {
-		min-width: 240px;
-	}
-}
-
-/* Preset list items: keep buttons full-width and avoid awkward line wrapping */
-.preset-listbox__item .components-button {
-	width: 100%;
-	justify-content: flex-start;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-/* Hide native date picker icons inside our date inputs (visual only) */
-.daterange-inputs input[type='date']::-webkit-calendar-picker-indicator {
-	display: none;
-}
-.daterange-inputs input[type='date']::-webkit-clear-button {
-	display: none;
-}