@sproutsocial/seeds-react-datepicker 1.0.52 → 1.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/datepicker.css dist/datepicker.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     15.14 KB
-CJS dist/index.js.map 22.85 KB
-CJS ⚡️ Build success in 18ms
-ESM dist/esm/index.js     12.23 KB
-ESM dist/esm/index.js.map 22.71 KB
-ESM ⚡️ Build success in 18ms
+CJS dist/index.js     11.97 KB
+CJS dist/index.js.map 20.36 KB
+CJS ⚡️ Build success in 21ms
+ESM dist/esm/index.js     9.30 KB
+ESM dist/esm/index.js.map 20.24 KB
+ESM ⚡️ Build success in 22ms
 DTS Build start
-DTS ⚡️ Build success in 1648ms
+DTS ⚡️ Build success in 1656ms
 DTS dist/index.d.ts  3.01 KB
 DTS dist/index.d.mts 3.01 KB
-Done in 2.36s.
+Done in 2.38s.

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @sproutsocial/seeds-react-datepicker
 
+## 1.1.0
+
+### Minor Changes
+
+- 899c48b: Add a Tailwind static-CSS rendering path to `SingleDatePicker` and
+  `DateRangePicker`, and fix the weekday header layout.
+
+  The day cell now renders semantic `seeds-datepicker-day*` classes and the
+  react-dates overrides that were previously injected at runtime by
+  `createGlobalStyle` now ship as `datepicker.css`, so mounting a picker emits no
+  runtime CSS-in-JS. Public exports, types, prop-spread order, and rendered
+  structure and semantics are preserved.
+
+  **Rendering fix:** the weekday header no longer wraps `Sa` onto a second line,
+  and its underline now aligns with the month instead of cutting through the first
+  row of dates. The header had a hardcoded `width: 230px` that only worked while
+  it was `content-box`; once Tailwind's preflight made everything `border-box`,
+  react-dates' own horizontal padding started subtracting from that width, leaving
+  less room than the seven day columns need. The width and the two rules that
+  compensated for it are gone, so the header shrink-wraps to the month and tracks
+  `daySize` rather than a magic number. This was already broken on `main` from the
+  moment the Tailwind preflight landed — it is not a regression introduced by the
+  hybrid.
+
+  Consuming apps must import `@sproutsocial/racine/css/components` (alongside
+  `@sproutsocial/seeds-react-theme/css/theme-all`) for the pickers to be styled.
+  The react-dates override rules are emitted **unlayered** and qualified with the
+  `.DayPicker` ancestor, so they outrank `react-dates/lib/css/_datepicker.css`
+  regardless of cascade layer, and for every state except `:active`, regardless of
+  stylesheet order. react-dates' `:active` rules tie on specificity, so import
+  `@sproutsocial/racine/css/components` **after** react-dates' CSS to win those
+  too. These rules now load for every consumer of the aggregated component CSS
+  rather than only while a picker is mounted.
+
+### Patch Changes
+
+- Updated dependencies [db4415c]
+  - @sproutsocial/seeds-react-theme@4.7.0
+  - @sproutsocial/seeds-react-box@1.1.34
+  - @sproutsocial/seeds-react-icon@2.5.4
+  - @sproutsocial/seeds-react-mixins@4.3.18
+  - @sproutsocial/seeds-react-visually-hidden@1.0.35
+
 ## 1.0.52
 
 ### Patch Changes

package/dist/datepicker.css

@@ -0,0 +1,262 @@
+/**
+ * Seeds Datepicker component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * This file has two halves, and they are deliberately in different cascade
+ * positions.
+ *
+ *
+ * 1. react-dates overrides — UNLAYERED (approved exception)
+ * ---------------------------------------------------------------------------
+ * The block below restyles react-dates' own DOM. It is the static port of the
+ * `ReactDatesCssOverrides` createGlobalStyle in styles.ts, which used to be
+ * injected at runtime whenever a picker mounted.
+ *
+ * It is emitted OUTSIDE `@layer components`, which is an explicit, approved
+ * exception to the repository's Tailwind delivery convention. react-dates ships
+ * `react-dates/lib/css/_datepicker.css` with zero cascade layers, and an
+ * unlayered declaration beats every layered one no matter how specific. A
+ * layered port would silently lose the .DayPicker__horizontal box-shadow reset,
+ * the .CalendarDay__default color and hover reset, and the .CalendarMonth_caption
+ * padding — only the one !important rule would survive.
+ *
+ * Two unlayered rules of equal specificity fall back to source order, and a
+ * consuming bundler decides whether this file lands before or after
+ * _datepicker.css. So every override that contests a react-dates declaration is
+ * qualified with the .DayPicker ancestor (or, for the root element itself, with
+ * its own base class), which outranks react-dates' plain single-class rules
+ * whatever the stylesheet order.
+ *
+ * react-dates ALSO ships pseudo-class rules — .CalendarDay__default:hover and
+ * .CalendarDay__selected:hover among them — and a pseudo-class counts toward the
+ * same specificity component as a class, so those sit at (0,2,0) and tie with a
+ * plain .DayPicker-qualified override. That is why the two CalendarDay :hover
+ * variants below are written out at (0,3,0). They are load-bearing, NOT redundant
+ * copies of their base rules: delete them and the hover background and border
+ * resets become stylesheet-order-dependent again.
+ *
+ * The nav-button :hover rule is different. It is simply the hover state carried
+ * over from the styled implementation. react-dates ships no rule for
+ * .DayPickerNavigation_button__horizontal at all, only __horizontalDefault at
+ * (0,1,0), and its .DayPickerNavigation_button__default rules never apply here
+ * because Seeds always supplies navPrev and navNext, so react-dates marks the
+ * buttons non-default. Nothing contests it.
+ *
+ * NOT covered: react-dates' :active variants — .CalendarDay__selected:active and
+ * its blocked, hovered_span and highlighted_calendar siblings — also sit at
+ * (0,2,0) and therefore TIE with the overrides below, leaving the winner to
+ * stylesheet order in the consuming bundle. The styled implementation's
+ * unqualified single-class rules lost those contests outright, so this is
+ * same-or-better everywhere and never a regression, but a pressed day may still
+ * flash react-dates' own palette. Closing it means adding
+ * .DayPicker .CalendarDay:active to the transparent-background group and
+ * .DayPicker .CalendarDay__default:active to the border-reset group, which is a
+ * deliberate visual change and was not authorized for Phase A.
+ *
+ * The magic numbers are carried over verbatim from the styled implementation.
+ * They are tuned against react-dates' own layout — do not "normalize" them to
+ * theme tokens. In particular `line-height: 21.333px` is NOT --line-height-200,
+ * and `top: 26px` on the week header is still a magic number aligning it with
+ * .CalendarMonth_caption.
+ *
+ * One magic number was deliberately NOT carried over: `width: 230px` on the week
+ * header, along with the two rules that compensated for it. It assumed
+ * content-box and broke once Tailwind's preflight made everything border-box.
+ * The header now shrink-wraps to the month. See the comment on that rule.
+ *
+ *
+ * 2. Day cell — LAYERED, as usual
+ * ---------------------------------------------------------------------------
+ * `.seeds-datepicker-day*` styles a node this package renders itself, so it
+ * follows the normal convention and lives in `@layer components`, letting
+ * consumer Tailwind utilities override it.
+ *
+ * Usage (applied by CalendarDayTailwind.tsx):
+ *   <div class="seeds-datepicker-day seeds-datepicker-day-selected
+ *               seeds-datepicker-day-pill-left">17</div>
+ */
+
+/* ========================================================================== */
+/* react-dates overrides (unlayered — see note 1 above)                       */
+/* ========================================================================== */
+
+/* The one override left unqualified, at (0,1,0). It therefore ties with
+   react-dates' own `.DayPicker` rule and the winner is load order — where the
+   styled version, injected last at runtime, always won. Harmless today because
+   the two declaration sets are disjoint (this rule sets box-sizing, font-weight
+   and font-family; react-dates sets background, position and text-align), so
+   there is nothing to contest. Qualify it as `.DayPicker.DayPicker` if react-dates
+   ever adds one of these properties. */
+.DayPicker {
+  box-sizing: content-box;
+  font-weight: var(--font-weight-normal);
+  font-family: var(--font-family);
+}
+
+/* Override react-dates' height to better reflect how tall the component
+   actually is. Adding margin/padding is truer to the Seeds system, because the
+   calendar height adds an extra row of padding if we do not override it.
+   !important is required because react-dates sets height on the element. */
+.DayPicker .DayPicker_transitionContainer {
+  height: 228px !important;
+}
+
+/* No `width` here on purpose. The styled implementation pinned `width: 230px`
+   to stretch the underline the full month width, which only held while the
+   element was content-box. Tailwind's preflight sets `* { box-sizing:
+   border-box }`, so react-dates' own inline `padding: 0 13px` started
+   subtracting from that 230px: 230 - 26 - 10 = 194px of content against the
+   7 x 30px = 210px the day columns need, which wrapped Saturday onto a second
+   line and dropped the border-bottom through the first row of dates. Letting
+   the header shrink-wrap to the month makes it track `daySize` instead of a
+   magic number, and gives the same result under either box-sizing.
+   Deleting the width also means react-dates' own `.DayPicker_weekHeaders__horizontal`
+   margin-left and `.DayPicker_weekHeader_ul` padding-left must be left alone —
+   the styled version overrode both to compensate for the pinned width. */
+.DayPicker .DayPicker_weekHeader {
+  color: var(--color-text-headline);
+  border-bottom: 1px solid var(--color-container-border-base);
+
+  /* Magic number to match position of .CalendarMonth_caption */
+  top: 26px;
+}
+
+.DayPicker .DayPicker_weekHeader_li {
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  color: var(--color-text-subtext);
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
+}
+
+.DayPicker.DayPicker__horizontal {
+  box-shadow: none;
+  background: var(--color-container-bg-base);
+}
+
+.DayPicker .CalendarDay {
+  background-color: transparent;
+}
+
+.DayPicker .CalendarDay__selected,
+.DayPicker .CalendarDay__selected_span,
+.DayPicker .CalendarDay:hover {
+  background-color: transparent;
+}
+
+.DayPicker .CalendarDay__default,
+.DayPicker .CalendarDay__default:hover {
+  border: none;
+  color: var(--color-text-body);
+}
+
+.DayPicker .CalendarMonth {
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  background: var(--color-container-bg-base);
+
+  /* spacing between visible months and months off canvas */
+  padding: 0 15px;
+}
+
+.DayPicker .CalendarMonth_caption {
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  color: var(--color-text-headline);
+  padding-top: 0;
+  background: var(--color-container-bg-base);
+}
+
+.DayPicker .CalendarMonth_caption strong {
+  font-weight: var(--font-weight-semibold);
+}
+
+.DayPicker .CalendarMonth_table {
+  line-height: 21.333px;
+}
+
+.DayPicker .CalendarMonth_table tr {
+  vertical-align: middle;
+}
+
+.DayPicker .CalendarMonth_table td {
+  padding: 0;
+  border-bottom: none;
+}
+
+.DayPicker .CalendarMonthGrid {
+  background: var(--color-container-bg-base);
+}
+
+/* Left and Right Arrow Buttons to navigate months */
+.DayPicker .DayPickerNavigation_button__horizontal {
+  color: var(--color-button-pill-text-base);
+  top: -4px;
+  padding: 7px 8px;
+  position: absolute;
+  line-height: 0.78;
+  border-radius: 9999px;
+  border: none;
+  background: var(--color-button-pill-bg-base);
+}
+
+.DayPicker .DayPickerNavigation_button__horizontal:nth-child(1) {
+  left: 22px;
+}
+
+.DayPicker .DayPickerNavigation_button__horizontal:nth-child(2) {
+  right: 22px;
+}
+
+.DayPicker .DayPickerNavigation_button__horizontal:hover {
+  background: var(--color-button-pill-bg-hover);
+}
+
+/* ========================================================================== */
+/* Day cell (layered — see note 2 above)                                      */
+/* ========================================================================== */
+
+@layer components {
+  /* Baseline inherited from Box, which the legacy day cell extended. Box ships
+     no CSS of its own, so the static cell has to reproduce it here. */
+  .seeds-datepicker-day {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
+
+  .seeds-datepicker-day-selected {
+    background-color: var(--color-container-bg-selected);
+    color: var(--color-text-inverse);
+  }
+
+  /* The pill edges are separate classes on purpose. The legacy implementation
+     interpolated `margin-left: ${condition && space}`, which emits NO
+     declaration when the condition is false — writing a `0` fallback here would
+     square off the ends of every selected range. */
+  .seeds-datepicker-day-pill-left {
+    margin-left: var(--space-200);
+    border-top-left-radius: var(--radius-pill);
+    border-bottom-left-radius: var(--radius-pill);
+  }
+
+  .seeds-datepicker-day-pill-right {
+    margin-right: var(--space-200);
+    border-top-right-radius: var(--radius-pill);
+    border-bottom-right-radius: var(--radius-pill);
+  }
+
+  .seeds-datepicker-day-hovered {
+    margin: 0 var(--space-200);
+    border-radius: var(--radius-pill);
+    border: 1px solid var(--color-container-border-selected);
+  }
+
+  /* Mirrors the `disabled` mixin from seeds-react-mixins. */
+  .seeds-datepicker-day-out-of-range {
+    color: var(--color-text-subtext);
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}

package/dist/esm/index.js

@@ -1,13 +1,37 @@
 // src/SingleDatePicker/SingleDatePicker.tsx
-import React2, { useCallback, useState } from "react";
+import React3, { useCallback, useState } from "react";
 import moment2 from "moment";
 import DayPickerSingleDateController from "react-dates/lib/components/DayPickerSingleDateController";
 
-// src/styles.ts
-import styled, { createGlobalStyle, css } from "styled-components";
+// src/common.tsx
+import "react-dates/initialize";
+import "react-dates/lib/css/_datepicker.css";
+import "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+
+// src/CalendarDayTailwind.tsx
+import * as React from "react";
+
+// src/cn.ts
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+
+// src/dayModifiers.ts
 import moment from "moment";
-import { disabled } from "@sproutsocial/seeds-react-mixins";
-import Box from "@sproutsocial/seeds-react-box";
 var isSelected = (modifiers) => modifiers.has("selected-span") || modifiers.has("selected") || modifiers.has("selected-start") || modifiers.has("selected-end") || modifiers.has("hovered-span") || modifiers.has("after-hovered-start");
 var isOutOfRange = (modifiers) => modifiers.has("blocked-out-of-range");
 var isHoveredAndInRange = (modifiers) => modifiers.has("hovered") && !modifiers.has("blocked-out-of-range");
@@ -29,175 +53,55 @@ var shouldHaveRightPill = (modifiers, day) => {
   }
   return false;
 };
-var CalendarDay = styled(Box)`
-  ${({ modifiers, day, theme }) => {
+
+// src/CalendarDayTailwind.tsx
+import { jsx } from "react/jsx-runtime";
+var dayStateClasses = (modifiers, day) => {
   if (isSelected(modifiers)) {
-    return css`
-        background-color: ${theme.colors.container.background.selected};
-        color: ${theme.colors.text.inverse};
-        margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};
-        margin-right: ${shouldHaveRightPill(modifiers, day) && theme.space[200]};
-        border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) && theme.radii.pill};
-        border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) && theme.radii.pill};
-        border-top-right-radius: ${shouldHaveRightPill(modifiers, day) && theme.radii.pill};
-        border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) && theme.radii.pill};
-      `;
+    return {
+      "seeds-datepicker-day-selected": true,
+      "seeds-datepicker-day-pill-left": shouldHaveLeftPill(modifiers, day),
+      "seeds-datepicker-day-pill-right": shouldHaveRightPill(modifiers, day)
+    };
   }
   if (isHoveredAndInRange(modifiers)) {
-    return css`
-        margin: 0 ${theme.space[200]};
-        border-radius: ${theme.radii.pill};
-        border: 1px solid ${theme.colors.container.border.selected};
-      `;
-  } else if (isOutOfRange(modifiers)) {
-    return css`
-        color: ${theme.colors.text.subtext};
-        ${disabled};
-      `;
+    return { "seeds-datepicker-day-hovered": true };
   }
-}};
-`;
-var ReactDatesCssOverrides = createGlobalStyle`
-	.DayPicker {
-		box-sizing: content-box;
-		font-weight: ${({ theme }) => theme.fontWeights.normal};
-		font-family: ${(props) => props.theme.fontFamily};
-
-		/* override react-dates height to better reflect how tall the component actually is */
-		/* adding margin/padding will be more truer to our seeds system because the height */
-		/* of the calendar adds an extra row of padding if we do not override it */
-		&_transitionContainer {
-			/* need !important because react-dates sets height on the element itself */
-			height: 228px !important;
-		}
-
-		&_weekHeader {
-			color: ${({ theme }) => theme.colors.text.headline};
-			border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
-
- 			/* Magic number to match position of .CalendarMonth_caption */
-			top: 26px;
-
-			/* Magic number to make the bottom border line stretch the full width */
-			width: 230px;
-
-			&_ul {
- 				/* Magic number to line up day name headings over the correct numbers */
-				padding-left: 10px;
-			}
-		}
-
-		&_weekHeaders__horizontal {
-			margin-left: 0
-		}
-
-		&_weekHeader_li {
-			${({ theme }) => theme.typography[200]}
-			color: ${({ theme }) => theme.colors.text.subtext};
-			font-weight: ${({ theme }) => theme.fontWeights.semibold};
-			margin: 0;
-		}
-
-		&__horizontal {
-			box-shadow: none;
-			background: ${({ theme }) => theme.colors.container.background.base};
-		}
-	}
-
-    .CalendarDay {
-		background-color: transparent;
-
-        &__selected, &__selected_span, &:hover {
-            background-color: transparent;
-		}
-
-		&__default {
-			color: ${({ theme }) => theme.colors.text.body};
-		}
-		&__default,
-		&__default:hover {
-			border: none;
-			color: ${({ theme }) => theme.colors.text.body};
-		}
-	}
-
-    .CalendarMonth {
-		${({ theme }) => theme.typography[200]}
-		background: ${({ theme }) => theme.colors.container.background.base};
-
- 		/* spacing between visible months and months off canvas */
-		padding: 0 15px;
-
-		&_caption {
-			${({ theme }) => theme.typography[200]}
-			color: ${({ theme }) => theme.colors.text.headline};
-			padding-top: 0;
-			background: ${({ theme }) => theme.colors.container.background.base};
-
-			strong {
-				font-weight: ${({ theme }) => theme.fontWeights.semibold};
-			}
-
-		}
-		&_table {
-			line-height: 21.333px;
-			tr {
-				vertical-align: middle;
-			}
-			td {
-				padding: 0;
-				border-bottom: none;
-			}
-		}
-	}
-
-	.CalendarMonthGrid {
-		background: ${({ theme }) => theme.colors.container.background.base};
-	}
-
-	/* Left and Right Arrow Buttons to navigate months */
-	.DayPickerNavigation_button__horizontal {
-		color: ${({ theme }) => theme.colors.button.pill.text.base};
-		top: -4px;
-		padding: 7px 8px;
-		position: absolute;
-		line-height: 0.78;
-		border-radius: 9999px;
-		border: none;
-		background: ${({ theme }) => theme.colors.button.pill.background.base};
-
-		&:nth-child(1) {
-			left: 22px;
-		}
-		&:nth-child(2) {
-			right: 22px;
-		}
-
-		&:hover {
-			background: ${({ theme }) => theme.colors.button.pill.background.hover};
-		}
-	}
-`;
+  if (isOutOfRange(modifiers)) {
+    return { "seeds-datepicker-day-out-of-range": true };
+  }
+  return {};
+};
+var CalendarDayTailwind = React.forwardRef(({ modifiers, day, className, children }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "seeds-datepicker-day",
+      dayStateClasses(modifiers, day),
+      className
+    ),
+    children
+  }
+));
+CalendarDayTailwind.displayName = "CalendarDay";
+var CalendarDayTailwind_default = CalendarDayTailwind;
 
 // src/common.tsx
-import "react-dates/initialize";
-import "react-dates/lib/css/_datepicker.css";
-import "react";
-import Icon from "@sproutsocial/seeds-react-icon";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var iconNames = {
   left: "arrow-left-solid",
   right: "arrow-right-solid"
 };
 var CalendarNavButton = ({
   type
-}) => /* @__PURE__ */ jsx(Icon, { size: "mini", name: iconNames[type], "aria-hidden": true });
+}) => /* @__PURE__ */ jsx2(Icon, { size: "mini", name: iconNames[type], "aria-hidden": true });
 var commonDatePickerProps = {
   hideKeyboardShortcutsPanel: true,
   daySize: 30,
-  navPrev: /* @__PURE__ */ jsx(CalendarNavButton, { type: "left" }),
-  navNext: /* @__PURE__ */ jsx(CalendarNavButton, { type: "right" }),
-  renderDayContents: (day, modifiers) => /* @__PURE__ */ jsx(CalendarDay, { day, modifiers, children: day.format("D") }),
+  navPrev: /* @__PURE__ */ jsx2(CalendarNavButton, { type: "left" }),
+  navNext: /* @__PURE__ */ jsx2(CalendarNavButton, { type: "right" }),
+  renderDayContents: (day, modifiers) => /* @__PURE__ */ jsx2(CalendarDayTailwind_default, { day, modifiers, children: day.format("D") }),
   initialVisibleMonth: null
 };
 var formatDateAsCalendarHeader = (date) => date.format("MMMM YYYY");
@@ -212,7 +116,7 @@ var DefaultSetStatusText = (dates) => dates.map(formatDateAsCalendarHeader).join
 
 // src/SingleDatePicker/SingleDatePicker.tsx
 import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var noop = () => {
 };
 var SingleDatePicker = ({
@@ -249,9 +153,8 @@ var SingleDatePicker = ({
     [onBlur, onFocusChange]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(ReactDatesCssOverrides, {}),
-    /* @__PURE__ */ jsx2(VisuallyHidden, { children: /* @__PURE__ */ jsx2("div", { role: "status", children: statusText }) }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(VisuallyHidden, { children: /* @__PURE__ */ jsx3("div", { role: "status", children: statusText }) }),
+    /* @__PURE__ */ jsx3(
       DayPickerSingleDateController,
       {
         ...commonDatePickerProps,
@@ -269,11 +172,11 @@ var SingleDatePicker = ({
     )
   ] });
 };
-var SingleDatePicker_default = React2.memo(SingleDatePicker);
+var SingleDatePicker_default = React3.memo(SingleDatePicker);
 
 // src/SingleDatePicker/StatefulSingleDatePicker.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var StatefulSingleDatePicker = ({
   date,
   onDateChange,
@@ -284,7 +187,7 @@ var StatefulSingleDatePicker = ({
     onDateChange && onDateChange(date2);
     setDate(date2);
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     SingleDatePicker_default,
     {
       date: stateDate,
@@ -299,7 +202,7 @@ import { useCallback as useCallback2, useState as useState3 } from "react";
 import moment3 from "moment";
 import DayPickerRangeController from "react-dates/lib/components/DayPickerRangeController";
 import { VisuallyHidden as VisuallyHidden2 } from "@sproutsocial/seeds-react-visually-hidden";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var DateRangePicker = ({
   startDate = null,
   endDate = null,
@@ -337,9 +240,8 @@ var DateRangePicker = ({
     [onBlur, onFocusChange]
   );
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(ReactDatesCssOverrides, {}),
-    /* @__PURE__ */ jsx4(VisuallyHidden2, { children: /* @__PURE__ */ jsx4("div", { role: "status", children: statusText }) }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(VisuallyHidden2, { children: /* @__PURE__ */ jsx5("div", { role: "status", children: statusText }) }),
+    /* @__PURE__ */ jsx5(
       DayPickerRangeController,
       {
         ...commonDatePickerProps,
@@ -362,9 +264,9 @@ var DateRangePicker = ({
 var DateRangePicker_default = DateRangePicker;
 
 // src/DateRangePicker/StatefulDateRangePicker.tsx
-import React5, { useState as useState4 } from "react";
+import React6, { useState as useState4 } from "react";
 import { START_DATE } from "react-dates/constants";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var StatefulDateRangePicker = ({
   startDate,
   endDate,
@@ -376,7 +278,7 @@ var StatefulDateRangePicker = ({
     startDate,
     endDate
   });
-  const [focusedInput, setFocusedInput] = React5.useState(START_DATE);
+  const [focusedInput, setFocusedInput] = React6.useState(START_DATE);
   const handleDatesChange = (nextDates) => {
     onDatesChange && onDatesChange(nextDates);
     setDate(nextDates);
@@ -390,7 +292,7 @@ var StatefulDateRangePicker = ({
       nextFocusedInput === null ? START_DATE : nextFocusedInput
     );
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DateRangePicker_default,
     {
       startDate: dates.startDate,