@sproutsocial/seeds-react-datepicker 1.0.0

package/dist/index.js

@@ -0,0 +1,451 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DateRangePicker: () => DateRangePicker_default,
+  SingleDatePicker: () => SingleDatePicker_default,
+  StatefulDateRangePicker: () => StatefulDateRangePicker,
+  StatefulSingleDatePicker: () => StatefulSingleDatePicker
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/SingleDatePicker/SingleDatePicker.tsx
+var import_react2 = __toESM(require("react"));
+var import_moment2 = __toESM(require("moment"));
+var import_DayPickerSingleDateController = __toESM(require("react-dates/lib/components/DayPickerSingleDateController"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_moment = __toESM(require("moment"));
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var import_seeds_react_box = __toESM(require("@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");
+var shouldHaveLeftPill = (modifiers, day) => {
+  if (!isSelected(modifiers)) {
+    return false;
+  }
+  if (modifiers.has("selected") || modifiers.has("selected-start") || modifiers.has("first-day-of-week") || day.isSame((0, import_moment.default)(day).startOf("month"), "day")) {
+    return true;
+  }
+  return false;
+};
+var shouldHaveRightPill = (modifiers, day) => {
+  if (!isSelected(modifiers)) {
+    return false;
+  }
+  if (modifiers.has("selected") || modifiers.has("selected-end") || modifiers.has("last-day-of-week") || day.isSame((0, import_moment.default)(day).endOf("month"), "day")) {
+    return true;
+  }
+  return false;
+};
+var CalendarDay = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  ${({ modifiers, day, theme }) => {
+  if (isSelected(modifiers)) {
+    return import_styled_components.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};
+      `;
+  }
+  if (isHoveredAndInRange(modifiers)) {
+    return import_styled_components.css`
+        margin: 0 ${theme.space[200]};
+        border-radius: ${theme.radii.pill};
+        border: 1px solid ${theme.colors.container.border.selected};
+      `;
+  } else if (isOutOfRange(modifiers)) {
+    return import_styled_components.css`
+        color: ${theme.colors.text.subtext};
+        ${import_seeds_react_mixins.disabled};
+      `;
+  }
+}};
+`;
+var ReactDatesCssOverrides = import_styled_components.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};
+		}
+	}
+`;
+
+// src/common.tsx
+var import_initialize = require("react-dates/initialize");
+var import_datepicker = require("react-dates/lib/css/_datepicker.css");
+var import_react = require("react");
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var iconNames = {
+  left: "arrow-left-solid",
+  right: "arrow-right-solid"
+};
+var CalendarNavButton = ({
+  type
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { size: "mini", name: iconNames[type], "aria-hidden": true });
+var commonDatePickerProps = {
+  hideKeyboardShortcutsPanel: true,
+  daySize: 30,
+  navPrev: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarNavButton, { type: "left" }),
+  navNext: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarNavButton, { type: "right" }),
+  renderDayContents: (day, modifiers) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarDay, { day, modifiers, children: day.format("D") }),
+  initialVisibleMonth: null
+};
+var formatDateAsCalendarHeader = (date) => date.format("MMMM YYYY");
+var getVisibleMonths = (initialMonth, numberOfMonths) => {
+  const months = [initialMonth];
+  for (let i = 1; i < numberOfMonths; i++) {
+    months.push(initialMonth.clone().add(i, "month"));
+  }
+  return months;
+};
+var DefaultSetStatusText = (dates) => dates.map(formatDateAsCalendarHeader).join(", ");
+
+// src/SingleDatePicker/SingleDatePicker.tsx
+var import_seeds_react_visually_hidden = require("@sproutsocial/seeds-react-visually-hidden");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var noop = () => {
+};
+var SingleDatePicker = ({
+  onDateChange,
+  setStatusText = DefaultSetStatusText,
+  date = null,
+  focused = false,
+  onFocusChange = noop,
+  initialVisibleMonth,
+  numberOfMonths = 1,
+  onBlur,
+  ...rest
+}) => {
+  const [statusText, updateStatusText] = (0, import_react2.useState)(
+    () => setStatusText(
+      getVisibleMonths(
+        (0, import_moment2.default)(initialVisibleMonth?.() || date || void 0),
+        numberOfMonths
+      )
+    )
+  );
+  const handleMonthClick = (0, import_react2.useCallback)(
+    // @ts-ignore unknown types
+    (date2) => {
+      updateStatusText(setStatusText(getVisibleMonths(date2, numberOfMonths)));
+    },
+    [numberOfMonths, setStatusText]
+  );
+  const wrappedOnBlur = (0, import_react2.useCallback)(
+    (event) => {
+      onFocusChange?.({ focused: false });
+      onBlur?.(event);
+    },
+    [onBlur, onFocusChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReactDatesCssOverrides, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "status", children: statusText }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_DayPickerSingleDateController.default,
+      {
+        ...commonDatePickerProps,
+        date,
+        numberOfMonths,
+        onDateChange,
+        initialVisibleMonth: initialVisibleMonth || null,
+        focused,
+        onBlur: wrappedOnBlur,
+        onFocusChange,
+        onPrevMonthClick: handleMonthClick,
+        onNextMonthClick: handleMonthClick,
+        ...rest
+      }
+    )
+  ] });
+};
+var SingleDatePicker_default = import_react2.default.memo(SingleDatePicker);
+
+// src/SingleDatePicker/StatefulSingleDatePicker.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StatefulSingleDatePicker = ({
+  date,
+  onDateChange,
+  ...rest
+}) => {
+  const [stateDate, setDate] = (0, import_react3.useState)(date);
+  const handleDateChange = (date2) => {
+    onDateChange && onDateChange(date2);
+    setDate(date2);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    SingleDatePicker_default,
+    {
+      date: stateDate,
+      onDateChange: handleDateChange,
+      ...rest
+    }
+  );
+};
+
+// src/DateRangePicker/DateRangePicker.tsx
+var import_react4 = require("react");
+var import_moment3 = __toESM(require("moment"));
+var import_DayPickerRangeController = __toESM(require("react-dates/lib/components/DayPickerRangeController"));
+var import_seeds_react_visually_hidden2 = require("@sproutsocial/seeds-react-visually-hidden");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DateRangePicker = ({
+  startDate = null,
+  endDate = null,
+  onDatesChange,
+  setStatusText = DefaultSetStatusText,
+  initialVisibleMonth,
+  numberOfMonths = 2,
+  onFocusChange,
+  onBlur,
+  focusedInput,
+  ...rest
+}) => {
+  const [statusText, updateStatusText] = (0, import_react4.useState)(
+    () => setStatusText(
+      getVisibleMonths(
+        (0, import_moment3.default)(initialVisibleMonth?.() ?? startDate ?? void 0),
+        numberOfMonths
+      )
+    )
+  );
+  const handleMonthClick = (0, import_react4.useCallback)(
+    (month) => {
+      updateStatusText(setStatusText(getVisibleMonths(month, numberOfMonths)));
+    },
+    [numberOfMonths, setStatusText]
+  );
+  const wrappedOnBlur = (0, import_react4.useCallback)(
+    (event) => {
+      if (!event) {
+        return;
+      }
+      onFocusChange?.(null);
+      onBlur?.(event);
+    },
+    [onBlur, onFocusChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReactDatesCssOverrides, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_visually_hidden2.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { role: "status", children: statusText }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_DayPickerRangeController.default,
+      {
+        ...commonDatePickerProps,
+        startDate,
+        endDate,
+        onDatesChange,
+        numberOfMonths,
+        initialVisibleMonth: initialVisibleMonth || null,
+        focusedInput,
+        isFocused: focusedInput !== null,
+        onBlur: wrappedOnBlur,
+        onFocusChange,
+        onPrevMonthClick: handleMonthClick,
+        onNextMonthClick: handleMonthClick,
+        ...rest
+      }
+    )
+  ] });
+};
+var DateRangePicker_default = DateRangePicker;
+
+// src/DateRangePicker/StatefulDateRangePicker.tsx
+var import_react5 = __toESM(require("react"));
+var import_constants = require("react-dates/constants");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var StatefulDateRangePicker = ({
+  startDate,
+  endDate,
+  onDatesChange,
+  onFocusChange,
+  ...rest
+}) => {
+  const [dates, setDate] = (0, import_react5.useState)({
+    startDate,
+    endDate
+  });
+  const [focusedInput, setFocusedInput] = import_react5.default.useState(import_constants.START_DATE);
+  const handleDatesChange = (nextDates) => {
+    onDatesChange && onDatesChange(nextDates);
+    setDate(nextDates);
+  };
+  const handleFocusChange = (nextFocusedInput) => {
+    onFocusChange && onFocusChange(nextFocusedInput);
+    setFocusedInput(
+      // null means that we've selected an end date. we want to go back to START_DATE
+      // so the user can modify their selection. if focusedInput === null then it won't
+      // respond to click or keyboard events
+      nextFocusedInput === null ? import_constants.START_DATE : nextFocusedInput
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    DateRangePicker_default,
+    {
+      startDate: dates.startDate,
+      endDate: dates.endDate,
+      focusedInput,
+      onDatesChange: handleDatesChange,
+      onFocusChange: handleFocusChange,
+      ...rest
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DateRangePicker,
+  SingleDatePicker,
+  StatefulDateRangePicker,
+  StatefulSingleDatePicker
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/SingleDatePicker/SingleDatePicker.tsx","../src/styles.ts","../src/common.tsx","../src/SingleDatePicker/StatefulSingleDatePicker.tsx","../src/DateRangePicker/DateRangePicker.tsx","../src/DateRangePicker/StatefulDateRangePicker.tsx"],"sourcesContent":["export * from \"./SingleDatePicker\";\nexport * from \"./DateRangePicker\";\n","import React, { useCallback, useState } from \"react\";\nimport moment from \"moment\";\nimport DayPickerSingleDateController from \"react-dates/lib/components/DayPickerSingleDateController\";\nimport { ReactDatesCssOverrides } from \"../styles\";\nimport {\n  commonDatePickerProps,\n  DefaultSetStatusText,\n  getVisibleMonths,\n} from \"../common\";\nimport type { TypeSingleDatePickerProps } from \"./SingleDatePickerTypes\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\n\nconst noop = () => {};\n\nconst SingleDatePicker = ({\n  onDateChange,\n  setStatusText = DefaultSetStatusText,\n  date = null,\n  focused = false,\n  onFocusChange = noop,\n  initialVisibleMonth,\n  numberOfMonths = 1,\n  onBlur,\n  ...rest\n}: TypeSingleDatePickerProps) => {\n  const [statusText, updateStatusText] = useState(() =>\n    setStatusText(\n      getVisibleMonths(\n        moment(initialVisibleMonth?.() || date || undefined),\n        numberOfMonths\n      )\n    )\n  );\n\n  const handleMonthClick = useCallback(\n    // @ts-ignore unknown types\n    (date) => {\n      updateStatusText(setStatusText(getVisibleMonths(date, numberOfMonths)));\n    },\n    [numberOfMonths, setStatusText]\n  );\n  const wrappedOnBlur = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      onFocusChange?.({ focused: false });\n      onBlur?.(event);\n    },\n    [onBlur, onFocusChange]\n  );\n\n  return (\n    <>\n      <ReactDatesCssOverrides />\n      <VisuallyHidden>\n        <div role=\"status\">{statusText}</div>\n      </VisuallyHidden>\n      <DayPickerSingleDateController\n        {...commonDatePickerProps}\n        date={date}\n        numberOfMonths={numberOfMonths}\n        onDateChange={onDateChange}\n        initialVisibleMonth={initialVisibleMonth || null}\n        focused={focused}\n        onBlur={wrappedOnBlur}\n        onFocusChange={onFocusChange}\n        onPrevMonthClick={handleMonthClick}\n        onNextMonthClick={handleMonthClick}\n        {...rest}\n      />\n    </>\n  );\n};\n\nexport default React.memo<TypeSingleDatePickerProps>(SingleDatePicker);\n","import styled, { createGlobalStyle, css } from \"styled-components\";\nimport moment from \"moment\";\nimport type { ModifiersShape } from \"react-dates\";\nimport { disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\n/*\n * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.\n *\n * today, blocked, blocked-calendar, blocked-out-of-range, highlighted-calendar, valid,\n * selected, selected-start, selected-end, blocked-minimum-nights, selected-span, last-in-range,\n * hovered, hovered-span, hovered-offset, after-hovered-start, first-day-of-week, last-day-of-week,\n * hovered-start-first-possible-end, hovered-start-blocked-minimum-nights, before-hovered-end,\n * no-selected-start-before-selected-end, selected-start-in-hovered-span, selected-start-no-selected-end,\n * selected-end-no-selected-start\n *\n */\nconst isSelected = (modifiers: ModifiersShape) =>\n  modifiers.has(\"selected-span\") ||\n  modifiers.has(\"selected\") ||\n  modifiers.has(\"selected-start\") ||\n  modifiers.has(\"selected-end\") ||\n  modifiers.has(\"hovered-span\") ||\n  modifiers.has(\"after-hovered-start\");\n\nconst isOutOfRange = (modifiers: ModifiersShape) =>\n  modifiers.has(\"blocked-out-of-range\");\n\nconst isHoveredAndInRange = (modifiers: ModifiersShape) =>\n  modifiers.has(\"hovered\") && !modifiers.has(\"blocked-out-of-range\");\n\nconst shouldHaveLeftPill = (modifiers: ModifiersShape, day: moment.Moment) => {\n  if (!isSelected(modifiers)) {\n    return false;\n  }\n\n  if (\n    modifiers.has(\"selected\") ||\n    modifiers.has(\"selected-start\") ||\n    modifiers.has(\"first-day-of-week\") ||\n    day.isSame(moment(day).startOf(\"month\"), \"day\")\n  ) {\n    return true;\n  }\n\n  return false;\n};\n\nconst shouldHaveRightPill = (modifiers: ModifiersShape, day: moment.Moment) => {\n  if (!isSelected(modifiers)) {\n    return false;\n  }\n\n  if (\n    modifiers.has(\"selected\") ||\n    modifiers.has(\"selected-end\") ||\n    modifiers.has(\"last-day-of-week\") ||\n    day.isSame(moment(day).endOf(\"month\"), \"day\")\n  ) {\n    return true;\n  }\n\n  return false;\n};\n\nexport const CalendarDay = styled(Box)<{\n  modifiers: ModifiersShape;\n  day: moment.Moment;\n}>`\n  ${({ modifiers, day, theme }) => {\n    if (isSelected(modifiers)) {\n      return css`\n        background-color: ${theme.colors.container.background.selected};\n        color: ${theme.colors.text.inverse};\n        margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};\n        margin-right: ${shouldHaveRightPill(modifiers, day) &&\n        theme.space[200]};\n        border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) &&\n        theme.radii.pill};\n        border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) &&\n        theme.radii.pill};\n        border-top-right-radius: ${shouldHaveRightPill(modifiers, day) &&\n        theme.radii.pill};\n        border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) &&\n        theme.radii.pill};\n      `;\n    }\n\n    if (isHoveredAndInRange(modifiers)) {\n      return css`\n        margin: 0 ${theme.space[200]};\n        border-radius: ${theme.radii.pill};\n        border: 1px solid ${theme.colors.container.border.selected};\n      `;\n    } else if (isOutOfRange(modifiers)) {\n      return css`\n        color: ${theme.colors.text.subtext};\n        ${disabled};\n      `;\n    }\n  }};\n`;\n\nexport const ReactDatesCssOverrides = createGlobalStyle`\n\t.DayPicker {\n\t\tbox-sizing: content-box;\n\t\tfont-weight: ${({ theme }) => theme.fontWeights.normal};\n\t\tfont-family: ${(props) => props.theme.fontFamily};\n\n\t\t/* override react-dates height to better reflect how tall the component actually is */\n\t\t/* adding margin/padding will be more truer to our seeds system because the height */\n\t\t/* of the calendar adds an extra row of padding if we do not override it */\n\t\t&_transitionContainer {\n\t\t\t/* need !important because react-dates sets height on the element itself */\n\t\t\theight: 228px !important;\n\t\t}\n\n\t\t&_weekHeader {\n\t\t\tcolor: ${({ theme }) => theme.colors.text.headline};\n\t\t\tborder-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};\n\n \t\t\t/* Magic number to match position of .CalendarMonth_caption */\n\t\t\ttop: 26px;\n\n\t\t\t/* Magic number to make the bottom border line stretch the full width */\n\t\t\twidth: 230px;\n\n\t\t\t&_ul {\n \t\t\t\t/* Magic number to line up day name headings over the correct numbers */\n\t\t\t\tpadding-left: 10px;\n\t\t\t}\n\t\t}\n\n\t\t&_weekHeaders__horizontal {\n\t\t\tmargin-left: 0\n\t\t}\n\n\t\t&_weekHeader_li {\n\t\t\t${({ theme }) => theme.typography[200]}\n\t\t\tcolor: ${({ theme }) => theme.colors.text.subtext};\n\t\t\tfont-weight: ${({ theme }) => theme.fontWeights.semibold};\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&__horizontal {\n\t\t\tbox-shadow: none;\n\t\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\t\t}\n\t}\n\n    .CalendarDay {\n\t\tbackground-color: transparent;\n\n        &__selected, &__selected_span, &:hover {\n            background-color: transparent;\n\t\t}\n\n\t\t&__default {\n\t\t\tcolor: ${({ theme }) => theme.colors.text.body};\n\t\t}\n\t\t&__default,\n\t\t&__default:hover {\n\t\t\tborder: none;\n\t\t\tcolor: ${({ theme }) => theme.colors.text.body};\n\t\t}\n\t}\n\n    .CalendarMonth {\n\t\t${({ theme }) => theme.typography[200]}\n\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\n \t\t/* spacing between visible months and months off canvas */\n\t\tpadding: 0 15px;\n\n\t\t&_caption {\n\t\t\t${({ theme }) => theme.typography[200]}\n\t\t\tcolor: ${({ theme }) => theme.colors.text.headline};\n\t\t\tpadding-top: 0;\n\t\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\n\t\t\tstrong {\n\t\t\t\tfont-weight: ${({ theme }) => theme.fontWeights.semibold};\n\t\t\t}\n\n\t\t}\n\t\t&_table {\n\t\t\tline-height: 21.333px;\n\t\t\ttr {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t\ttd {\n\t\t\t\tpadding: 0;\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.CalendarMonthGrid {\n\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\t}\n\n\t/* Left and Right Arrow Buttons to navigate months */\n\t.DayPickerNavigation_button__horizontal {\n\t\tcolor: ${({ theme }) => theme.colors.button.pill.text.base};\n\t\ttop: -4px;\n\t\tpadding: 7px 8px;\n\t\tposition: absolute;\n\t\tline-height: 0.78;\n\t\tborder-radius: 9999px;\n\t\tborder: none;\n\t\tbackground: ${({ theme }) => theme.colors.button.pill.background.base};\n\n\t\t&:nth-child(1) {\n\t\t\tleft: 22px;\n\t\t}\n\t\t&:nth-child(2) {\n\t\t\tright: 22px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground: ${({ theme }) => theme.colors.button.pill.background.hover};\n\t\t}\n\t}\n`;\n","import \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport type { Moment } from \"moment\";\nimport React from \"react\";\nimport Icon, { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { CalendarDay } from \"./styles\";\nimport type { TypeCommonDatePickerProps } from \"./types\";\n\ntype TypeCalendarNavButtonType = \"left\" | \"right\";\n\nconst iconNames: { [key in TypeCalendarNavButtonType]: TypeIconName } = {\n  left: \"arrow-left-solid\",\n  right: \"arrow-right-solid\",\n};\n\nexport const CalendarNavButton = ({\n  type,\n}: {\n  type: TypeCalendarNavButtonType;\n}) => <Icon size=\"mini\" name={iconNames[type]} aria-hidden />;\n\nexport const commonDatePickerProps: TypeCommonDatePickerProps = {\n  hideKeyboardShortcutsPanel: true,\n  daySize: 30,\n  navPrev: <CalendarNavButton type=\"left\" />,\n  navNext: <CalendarNavButton type=\"right\" />,\n  renderDayContents: (day, modifiers) => (\n    <CalendarDay day={day} modifiers={modifiers}>\n      {day.format(\"D\")}\n    </CalendarDay>\n  ),\n  initialVisibleMonth: null,\n};\n// Testing utilities\n\nexport const formatDateAsCalendarHeader = (date: Moment): string =>\n  date.format(\"MMMM YYYY\");\n\nexport const formatDateAsCalendarDay = (date: Moment): string =>\n  date.format(\"dddd, MMMM D, YYYY\");\n\nexport const getVisibleMonthWithReactDatesInternalApi = (\n  container: HTMLElement\n): string =>\n  container.querySelector(\"[data-visible=true] strong\")?.textContent ?? \"\";\n\n// Receives a single Moment and returns an array of Moments, one for each currently visible month.\n// @ts-ignore unknown types\nexport const getVisibleMonths = (initialMonth, numberOfMonths) => {\n  const months = [initialMonth];\n  for (let i = 1; i < numberOfMonths; i++) {\n    months.push(initialMonth.clone().add(i, \"month\"));\n  }\n  return months;\n};\n\n// Default setStatusText prop for both SingleDatePicker and DateRangePicker\n// @ts-ignore unknown types\nexport const DefaultSetStatusText = (dates) =>\n  dates.map(formatDateAsCalendarHeader).join(\", \");\n","import React, { useState } from \"react\";\nimport type { TypeStatefulSingleDatePickerProps } from \"./SingleDatePickerTypes\";\nimport SingleDatePicker from \"./SingleDatePicker\";\n\nexport const StatefulSingleDatePicker = ({\n  date,\n  onDateChange,\n  ...rest\n}: TypeStatefulSingleDatePickerProps) => {\n  const [stateDate, setDate] = useState(date);\n\n  // @ts-ignore unknown types\n  const handleDateChange = (date) => {\n    onDateChange && onDateChange(date);\n    setDate(date);\n  };\n\n  return (\n    <SingleDatePicker\n      date={stateDate}\n      onDateChange={handleDateChange}\n      {...rest}\n    />\n  );\n};\n","import React, { useCallback, useState, type KeyboardEvent } from \"react\";\nimport moment from \"moment\";\nimport DayPickerRangeController from \"react-dates/lib/components/DayPickerRangeController\";\nimport { ReactDatesCssOverrides } from \"../styles\";\nimport {\n  commonDatePickerProps,\n  DefaultSetStatusText,\n  getVisibleMonths,\n} from \"../common\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeDateRangePickerProps } from \"./DateRangePickerTypes\";\n\nconst DateRangePicker = ({\n  startDate = null,\n  endDate = null,\n  onDatesChange,\n  setStatusText = DefaultSetStatusText,\n  initialVisibleMonth,\n  numberOfMonths = 2,\n  onFocusChange,\n  onBlur,\n  focusedInput,\n  ...rest\n}: TypeDateRangePickerProps) => {\n  const [statusText, updateStatusText] = useState(() =>\n    setStatusText(\n      getVisibleMonths(\n        moment(initialVisibleMonth?.() ?? startDate ?? undefined),\n        numberOfMonths\n      )\n    )\n  );\n  interface HandleMonthClick {\n    (month: moment.Moment): void;\n  }\n\n  const handleMonthClick: HandleMonthClick = useCallback(\n    (month) => {\n      updateStatusText(setStatusText(getVisibleMonths(month, numberOfMonths)));\n    },\n    [numberOfMonths, setStatusText]\n  );\n  const wrappedOnBlur = useCallback<\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    (event: undefined | KeyboardEvent<HTMLDivElement>) => void\n  >(\n    (event) => {\n      // for some reason onBlur is called with no event on day selection 🤷\n      if (!event) {\n        return;\n      }\n      onFocusChange?.(null);\n      onBlur?.(event);\n    },\n    [onBlur, onFocusChange]\n  );\n\n  return (\n    <>\n      <ReactDatesCssOverrides />\n      <VisuallyHidden>\n        <div role=\"status\">{statusText}</div>\n      </VisuallyHidden>\n      <DayPickerRangeController\n        {...commonDatePickerProps}\n        startDate={startDate}\n        endDate={endDate}\n        onDatesChange={onDatesChange}\n        numberOfMonths={numberOfMonths}\n        initialVisibleMonth={initialVisibleMonth || null}\n        focusedInput={focusedInput}\n        isFocused={focusedInput !== null}\n        onBlur={wrappedOnBlur}\n        onFocusChange={onFocusChange}\n        onPrevMonthClick={handleMonthClick}\n        onNextMonthClick={handleMonthClick}\n        {...rest}\n      />\n    </>\n  );\n};\n\nexport default DateRangePicker;\n","import React, { useState } from \"react\";\n// @ts-ignore unknown types\nimport { START_DATE } from \"react-dates/constants\";\nimport type { TypeStatefulDateRangePickerProps } from \"./DateRangePickerTypes\";\nimport DateRangePicker from \"./DateRangePicker\";\n\nexport const StatefulDateRangePicker = ({\n  startDate,\n  endDate,\n  onDatesChange,\n  onFocusChange,\n  ...rest\n}: TypeStatefulDateRangePickerProps) => {\n  const [dates, setDate] = useState({\n    startDate,\n    endDate,\n  });\n  const [focusedInput, setFocusedInput] = React.useState(START_DATE);\n\n  // @ts-ignore unknown types\n  const handleDatesChange = (nextDates) => {\n    onDatesChange && onDatesChange(nextDates);\n    setDate(nextDates);\n  };\n\n  // @ts-ignore unknown types\n  const handleFocusChange = (nextFocusedInput) => {\n    onFocusChange && onFocusChange(nextFocusedInput);\n    setFocusedInput(\n      // null means that we've selected an end date. we want to go back to START_DATE\n      // so the user can modify their selection. if focusedInput === null then it won't\n      // respond to click or keyboard events\n      nextFocusedInput === null ? START_DATE : nextFocusedInput\n    );\n  };\n\n  return (\n    <DateRangePicker\n      startDate={dates.startDate}\n      endDate={dates.endDate}\n      focusedInput={focusedInput}\n      onDatesChange={handleDatesChange}\n      onFocusChange={handleFocusChange}\n      {...rest}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA6C;AAC7C,IAAAC,iBAAmB;AACnB,2CAA0C;;;ACF1C,+BAA+C;AAC/C,oBAAmB;AAEnB,gCAAyB;AACzB,6BAAgB;AAahB,IAAM,aAAa,CAAC,cAClB,UAAU,IAAI,eAAe,KAC7B,UAAU,IAAI,UAAU,KACxB,UAAU,IAAI,gBAAgB,KAC9B,UAAU,IAAI,cAAc,KAC5B,UAAU,IAAI,cAAc,KAC5B,UAAU,IAAI,qBAAqB;AAErC,IAAM,eAAe,CAAC,cACpB,UAAU,IAAI,sBAAsB;AAEtC,IAAM,sBAAsB,CAAC,cAC3B,UAAU,IAAI,SAAS,KAAK,CAAC,UAAU,IAAI,sBAAsB;AAEnE,IAAM,qBAAqB,CAAC,WAA2B,QAAuB;AAC5E,MAAI,CAAC,WAAW,SAAS,GAAG;AAC1B,WAAO;AAAA,EACT;AAEA,MACE,UAAU,IAAI,UAAU,KACxB,UAAU,IAAI,gBAAgB,KAC9B,UAAU,IAAI,mBAAmB,KACjC,IAAI,WAAO,cAAAC,SAAO,GAAG,EAAE,QAAQ,OAAO,GAAG,KAAK,GAC9C;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,IAAM,sBAAsB,CAAC,WAA2B,QAAuB;AAC7E,MAAI,CAAC,WAAW,SAAS,GAAG;AAC1B,WAAO;AAAA,EACT;AAEA,MACE,UAAU,IAAI,UAAU,KACxB,UAAU,IAAI,cAAc,KAC5B,UAAU,IAAI,kBAAkB,KAChC,IAAI,WAAO,cAAAA,SAAO,GAAG,EAAE,MAAM,OAAO,GAAG,KAAK,GAC5C;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEO,IAAM,kBAAc,yBAAAC,SAAO,uBAAAC,OAAG;AAAA,IAIjC,CAAC,EAAE,WAAW,KAAK,MAAM,MAAM;AAC/B,MAAI,WAAW,SAAS,GAAG;AACzB,WAAO;AAAA,4BACe,MAAM,OAAO,UAAU,WAAW,QAAQ;AAAA,iBACrD,MAAM,OAAO,KAAK,OAAO;AAAA,uBACnB,mBAAmB,WAAW,GAAG,KAAK,MAAM,MAAM,GAAG,CAAC;AAAA,wBACrD,oBAAoB,WAAW,GAAG,KAClD,MAAM,MAAM,GAAG,CAAC;AAAA,kCACU,mBAAmB,WAAW,GAAG,KAC3D,MAAM,MAAM,IAAI;AAAA,qCACa,mBAAmB,WAAW,GAAG,KAC9D,MAAM,MAAM,IAAI;AAAA,mCACW,oBAAoB,WAAW,GAAG,KAC7D,MAAM,MAAM,IAAI;AAAA,sCACc,oBAAoB,WAAW,GAAG,KAChE,MAAM,MAAM,IAAI;AAAA;AAAA,EAEpB;AAEA,MAAI,oBAAoB,SAAS,GAAG;AAClC,WAAO;AAAA,oBACO,MAAM,MAAM,GAAG,CAAC;AAAA,yBACX,MAAM,MAAM,IAAI;AAAA,4BACb,MAAM,OAAO,UAAU,OAAO,QAAQ;AAAA;AAAA,EAE9D,WAAW,aAAa,SAAS,GAAG;AAClC,WAAO;AAAA,iBACI,MAAM,OAAO,KAAK,OAAO;AAAA,UAChC,kCAAQ;AAAA;AAAA,EAEd;AACF,CAAC;AAAA;AAGI,IAAM,yBAAyB;AAAA;AAAA;AAAA,iBAGrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,MAAM;AAAA,iBACvC,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAWtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA,8BACvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAmB1E,CAAC,EAAE,MAAM,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,YAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA,kBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM1C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAY1D,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,YAKrC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAK7C,CAAC,EAAE,MAAM,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,gBACxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMhE,CAAC,EAAE,MAAM,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,YAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA;AAAA,iBAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA;AAAA;AAAA,mBAGnD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAiB5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,WAK1D,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,KAAK,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,KAAK,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUtD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,KAAK,WAAW,KAAK;AAAA;AAAA;AAAA;;;AC5NzE,wBAAO;AACP,wBAAO;AAEP,mBAAkB;AAClB,8BAAwC;AAelC;AATN,IAAM,YAAkE;AAAA,EACtE,MAAM;AAAA,EACN,OAAO;AACT;AAEO,IAAM,oBAAoB,CAAC;AAAA,EAChC;AACF,MAEM,4CAAC,wBAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,UAAU,IAAI,GAAG,eAAW,MAAC;AAEpD,IAAM,wBAAmD;AAAA,EAC9D,4BAA4B;AAAA,EAC5B,SAAS;AAAA,EACT,SAAS,4CAAC,qBAAkB,MAAK,QAAO;AAAA,EACxC,SAAS,4CAAC,qBAAkB,MAAK,SAAQ;AAAA,EACzC,mBAAmB,CAAC,KAAK,cACvB,4CAAC,eAAY,KAAU,WACpB,cAAI,OAAO,GAAG,GACjB;AAAA,EAEF,qBAAqB;AACvB;AAGO,IAAM,6BAA6B,CAAC,SACzC,KAAK,OAAO,WAAW;AAYlB,IAAM,mBAAmB,CAAC,cAAc,mBAAmB;AAChE,QAAM,SAAS,CAAC,YAAY;AAC5B,WAAS,IAAI,GAAG,IAAI,gBAAgB,KAAK;AACvC,WAAO,KAAK,aAAa,MAAM,EAAE,IAAI,GAAG,OAAO,CAAC;AAAA,EAClD;AACA,SAAO;AACT;AAIO,IAAM,uBAAuB,CAAC,UACnC,MAAM,IAAI,0BAA0B,EAAE,KAAK,IAAI;;;AFjDjD,yCAA+B;AAwC3B,IAAAC,sBAAA;AAtCJ,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,CAAC,YAAY,gBAAgB,QAAI;AAAA,IAAS,MAC9C;AAAA,MACE;AAAA,YACE,eAAAC,SAAO,sBAAsB,KAAK,QAAQ,MAAS;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,uBAAmB;AAAA;AAAA,IAEvB,CAACC,UAAS;AACR,uBAAiB,cAAc,iBAAiBA,OAAM,cAAc,CAAC,CAAC;AAAA,IACxE;AAAA,IACA,CAAC,gBAAgB,aAAa;AAAA,EAChC;AACA,QAAM,oBAAgB;AAAA,IACpB,CAAC,UAAU;AACT,sBAAgB,EAAE,SAAS,MAAM,CAAC;AAClC,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,SACE,8EACE;AAAA,iDAAC,0BAAuB;AAAA,IACxB,6CAAC,qDACC,uDAAC,SAAI,MAAK,UAAU,sBAAW,GACjC;AAAA,IACA;AAAA,MAAC,qCAAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,qBAAqB,uBAAuB;AAAA,QAC5C;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AAEA,IAAO,2BAAQ,cAAAC,QAAM,KAAgC,gBAAgB;;;AGxErE,IAAAC,gBAAgC;AAkB5B,IAAAC,sBAAA;AAdG,IAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyC;AACvC,QAAM,CAAC,WAAW,OAAO,QAAI,wBAAS,IAAI;AAG1C,QAAM,mBAAmB,CAACC,UAAS;AACjC,oBAAgB,aAAaA,KAAI;AACjC,YAAQA,KAAI;AAAA,EACd;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACb,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACxBA,IAAAC,gBAAiE;AACjE,IAAAC,iBAAmB;AACnB,sCAAqC;AAOrC,IAAAC,sCAA+B;AAiD3B,IAAAC,sBAAA;AA9CJ,IAAM,kBAAkB,CAAC;AAAA,EACvB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,CAAC,YAAY,gBAAgB,QAAI;AAAA,IAAS,MAC9C;AAAA,MACE;AAAA,YACE,eAAAC,SAAO,sBAAsB,KAAK,aAAa,MAAS;AAAA,QACxD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAKA,QAAM,uBAAqC;AAAA,IACzC,CAAC,UAAU;AACT,uBAAiB,cAAc,iBAAiB,OAAO,cAAc,CAAC,CAAC;AAAA,IACzE;AAAA,IACA,CAAC,gBAAgB,aAAa;AAAA,EAChC;AACA,QAAM,oBAAgB;AAAA,IAIpB,CAAC,UAAU;AAET,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AACA,sBAAgB,IAAI;AACpB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,SACE,8EACE;AAAA,iDAAC,0BAAuB;AAAA,IACxB,6CAAC,sDACC,uDAAC,SAAI,MAAK,UAAU,sBAAW,GACjC;AAAA,IACA;AAAA,MAAC,gCAAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,qBAAqB,uBAAuB;AAAA,QAC5C;AAAA,QACA,WAAW,iBAAiB;AAAA,QAC5B,QAAQ;AAAA,QACR;AAAA,QACA,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AAEA,IAAO,0BAAQ;;;AClFf,IAAAC,gBAAgC;AAEhC,uBAA2B;AAmCvB,IAAAC,sBAAA;AA/BG,IAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwC;AACtC,QAAM,CAAC,OAAO,OAAO,QAAI,wBAAS;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,cAAc,eAAe,IAAI,cAAAC,QAAM,SAAS,2BAAU;AAGjE,QAAM,oBAAoB,CAAC,cAAc;AACvC,qBAAiB,cAAc,SAAS;AACxC,YAAQ,SAAS;AAAA,EACnB;AAGA,QAAM,oBAAoB,CAAC,qBAAqB;AAC9C,qBAAiB,cAAc,gBAAgB;AAC/C;AAAA;AAAA;AAAA;AAAA,MAIE,qBAAqB,OAAO,8BAAa;AAAA,IAC3C;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,SAAS,MAAM;AAAA,MACf;AAAA,MACA,eAAe;AAAA,MACf,eAAe;AAAA,MACd,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["import_react","import_moment","moment","styled","Box","Icon","import_jsx_runtime","moment","date","DayPickerSingleDateController","React","import_react","import_jsx_runtime","date","import_react","import_moment","import_seeds_react_visually_hidden","import_jsx_runtime","moment","DayPickerRangeController","import_react","import_jsx_runtime","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-datepicker",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@sproutsocial/seeds-react-datepicker",
+  "version": "1.0.0",
+  "description": "Seeds React Datepicker",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-visually-hidden": "*",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-mixins": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "react-dates": "^21.8.0",
+    "@types/react-dates": "^21.8.3",
+    "moment": "^2.29.4",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-popout": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3",
+    "react-dates": "^21.8.0",
+    "moment": "^2.29.4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}