@spaced-out/ui-design-system 0.1.92 → 0.1.93-beta.0

package/.cspell/custom-words.txt

@@ -70,3 +70,44 @@ VishalBarnawal
 xmark
 yourcomponentname
 yxxx
+Pago
+Rica
+Cuiaba
+Branco
+Manaus
+Velho
+Santo
+Araguaina
+Paulo
+Rothera
+Noronha
+Scoresbysund
+Aaiun
+Danmarkshavn
+Syowa
+Mahe
+Aqtau
+Aqtobe
+Hovd
+Minh
+Choibalsan
+Kuala
+Lumpur
+Tongatapu
+Kiritimati
+Fakaofo
+Enderbury
+Kamchatskiy
+Pohnpei
+Kosrae
+Efate
+Moresby
+Chuuk
+Sakhalin
+Ulaanbaatar
+Dumont
+Dili
+Urville
+D'Urville
+Magadan
+Yuzhno

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.93-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.92...v0.1.93-beta.0) (2024-04-29)
+
+
+### Features
+
+* [GDS-367] Date Range Picker ([#195](https://github.com/spaced-out/ui-design-system/issues/195)) ([19626ca](https://github.com/spaced-out/ui-design-system/commit/19626ca27c6f2129a2a414bb7018c7e6127ae22e))
+
+
+### Bug Fixes
+
+* **SpiderChart.js:** added categories in the chart ([#196](https://github.com/spaced-out/ui-design-system/issues/196)) ([7cf85d6](https://github.com/spaced-out/ui-design-system/commit/7cf85d6984b4830ad4751598218a522e68446309))
+
 ### [0.1.92](https://github.com/spaced-out/ui-design-system/compare/v0.1.91...v0.1.92) (2024-04-28)
 
 

package/lib/components/DateRangePicker/Calendar.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Calendar = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _Text = require("../Text");
+var _Day = require("./Day");
+var _utils = require("./utils");
+var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// $FlowFixMe[untyped-import]
+
+const getFormattedDate = (marker, dateRange) => {
+  const {
+    startDate,
+    endDate
+  } = dateRange;
+  switch (marker) {
+    case _utils.MARKERS.DATE_RANGE_START:
+      return startDate ? (0, _momentTimezone.default)(startDate).format('MMMM D, YYYY') : 'Start Date';
+    default:
+      return endDate ? (0, _momentTimezone.default)(endDate).format('MMMM D, YYYY') : 'End Date';
+  }
+};
+const Calendar = _ref => {
+  let {
+    value,
+    marker,
+    handlers,
+    hoverDay,
+    dateRange,
+    inHoverRange
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _CalendarModule.default.calendar
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    className: _CalendarModule.default.selectedDate,
+    color: _Text.TEXT_COLORS.secondary
+  }, getFormattedDate(marker, dateRange)), /*#__PURE__*/React.createElement("div", {
+    className: _CalendarModule.default.calendarRow
+  }, _utils.WEEKDAYS.map(day => /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    key: day,
+    className: _CalendarModule.default.calendarRowItem,
+    color: _Text.TEXT_COLORS.tertiary
+  }, day))), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/React.createElement("div", {
+    key: week[index],
+    className: _CalendarModule.default.calendarRow
+  }, week.map(date => {
+    const isStart = (0, _utils.isStartOfRange)(dateRange, date);
+    const isEnd = (0, _utils.isEndOfRange)(dateRange, date);
+    const isRangeValid = (0, _utils.isStartDateEndDateSame)(dateRange);
+    const highlighted = (0, _utils.inDateRange)(dateRange, date) || inHoverRange(date);
+    return /*#__PURE__*/React.createElement(_Day.Day, {
+      key: date,
+      date: date,
+      filled: isStart || isEnd,
+      onClick: () => handlers.onDayClick(date),
+      onHover: () => handlers.onDayHover(date),
+      outlined: (0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(), 'd'),
+      disabled: (0, _momentTimezone.default)(date).isAfter((0, _utils.formatIsoDate)()) || !(0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(value), 'month'),
+      endOfRange: isEnd && !isRangeValid,
+      highlighted: highlighted && !isRangeValid,
+      startOfRange: isStart && !isRangeValid,
+      value: (0, _momentTimezone.default)(date).date(),
+      hoverDay: hoverDay
+    });
+  }))));
+};
+exports.Calendar = Calendar;

package/lib/components/DateRangePicker/Calendar.js.flow

@@ -0,0 +1,113 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import moment from 'moment-timezone';
+
+import {BodySmall, SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+
+import {Day} from './Day';
+import {
+  type DateRange,
+  formatIsoDate,
+  getDaysInMonth,
+  inDateRange,
+  isEndOfRange,
+  isStartDateEndDateSame,
+  isStartOfRange,
+  MARKERS,
+  NAVIGATION_ACTION,
+  WEEKDAYS,
+} from './utils';
+
+import css from './Calendar.module.css';
+
+
+type CalendarProps = {
+  value: string,
+  marker: $Values<typeof MARKERS>,
+  hoverDay: string,
+  dateRange: DateRange,
+  inHoverRange: (day: string) => boolean,
+  handlers: {
+    onDayClick: (day: string) => void,
+    onDayHover: (day: string) => void,
+    onMonthNavigate: (
+      marker: $Values<typeof MARKERS>,
+      action: $Values<typeof NAVIGATION_ACTION>,
+    ) => void,
+  },
+};
+
+const getFormattedDate = (marker: string, dateRange: DateRange) => {
+  const {startDate, endDate} = dateRange;
+  switch (marker) {
+  case MARKERS.DATE_RANGE_START:
+    return startDate
+      ? moment(startDate).format('MMMM D, YYYY')
+      : 'Start Date';
+  default:
+    return endDate ? moment(endDate).format('MMMM D, YYYY') : 'End Date';
+  }
+};
+
+export const Calendar = ({
+  value,
+  marker,
+  handlers,
+  hoverDay,
+  dateRange,
+  inHoverRange,
+}: CalendarProps): React.Node => (
+  <div className={css.calendar}>
+    <SubTitleExtraSmall
+      className={css.selectedDate}
+      color={TEXT_COLORS.secondary}
+    >
+      {getFormattedDate(marker, dateRange)}
+    </SubTitleExtraSmall>
+
+    <div className={css.calendarRow}>
+      {WEEKDAYS.map((day) => (
+        <BodySmall
+          key={day}
+          className={css.calendarRowItem}
+          color={TEXT_COLORS.tertiary}
+        >
+          {day}
+        </BodySmall>
+      ))}
+    </div>
+
+    {getDaysInMonth(value).map((week, index) => (
+      <div key={week[index]} className={css.calendarRow}>
+        {week.map((date) => {
+          const isStart = isStartOfRange(dateRange, date);
+          const isEnd = isEndOfRange(dateRange, date);
+          const isRangeValid = isStartDateEndDateSame(dateRange);
+          const highlighted =
+            inDateRange(dateRange, date) || inHoverRange(date);
+          return (
+            <Day
+              key={date}
+              date={date}
+              filled={isStart || isEnd}
+              onClick={() => handlers.onDayClick(date)}
+              onHover={() => handlers.onDayHover(date)}
+              outlined={moment(date).isSame(moment(), 'd')}
+              disabled={
+                moment(date).isAfter(formatIsoDate()) ||
+                !moment(date).isSame(moment(value), 'month')
+              }
+              endOfRange={isEnd && !isRangeValid}
+              highlighted={highlighted && !isRangeValid}
+              startOfRange={isStart && !isRangeValid}
+              value={moment(date).date()}
+              hoverDay={hoverDay}
+            />
+          );
+        })}
+      </div>
+    ))}
+  </div>
+);

package/lib/components/DateRangePicker/Calendar.module.css

@@ -0,0 +1,49 @@
+@value (
+  size5,
+  size30
+) from '../../styles/variables/_size.css';
+@value (
+  spaceNone,
+  spaceSmall,
+  spaceLarge,
+  spaceFluid,
+  spaceXSmall,
+  spaceHalfFluid
+) from '../../styles/variables/_space.css';
+@value (
+  borderRadiusCircle
+) from '../../styles/variables/_border.css';
+
+.calendar {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: spaceHalfFluid;
+  padding: spaceXSmall spaceLarge;
+  gap: spaceNone;
+}
+
+.calendarRow {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  height: calc(size30 + size2);
+  box-sizing: border-box;
+}
+
+.calendarRowItem {
+  justify-content: center;
+  align-self: center;
+  width: spaceFluid;
+  padding: size5;
+  cursor: pointer;
+  border-radius: borderRadiusCircle;
+  box-sizing: border-box;
+  width: calc(size30 + size2);
+  height: calc(size30 + size2);
+}
+
+.selectedDate {
+  display: flex;
+  justify-content: center;
+  margin: spaceSmall spaceNone;
+}

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateRangePicker = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _DateRangeWrapper = require("./DateRangeWrapper");
+var _utils = require("./utils");
+var _DateRangePickerModule = _interopRequireDefault(require("./DateRangePicker.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// $FlowFixMe[untyped-import]
+
+const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    onApply,
+    onCancel,
+    classNames,
+    initialDateRange
+  } = _ref;
+  const today = (0, _utils.formatIsoDate)();
+  let initialFirstMonth = (0, _utils.getSubtractedDate)(today, 1, 'M'),
+    initialSecondMonth = today,
+    initialRangeStart = '',
+    initialRangeEnd = '';
+  if (initialDateRange?.startDate && initialDateRange.endDate) {
+    initialRangeStart = initialFirstMonth = (0, _utils.formatIsoDate)((0, _momentTimezone.default)(initialDateRange.startDate));
+    initialRangeEnd = initialSecondMonth = (0, _utils.formatIsoDate)((0, _momentTimezone.default)(initialDateRange.endDate));
+
+    // If start and end dates are in the same current month, render them in the second calendar since next month isn't enabled yet.
+    if ((0, _momentTimezone.default)(initialRangeStart).isSame((0, _momentTimezone.default)(initialRangeEnd), 'M') && (0, _momentTimezone.default)(initialRangeStart).isSame((0, _momentTimezone.default)(today), 'M')) {
+      initialFirstMonth = (0, _utils.getSubtractedDate)(initialSecondMonth, 1, 'M');
+    } else {
+      initialSecondMonth = (0, _utils.getAddedDate)(initialFirstMonth, 1, 'M');
+    }
+  }
+  const [dateRange, setDateRange] = React.useState({
+    startDate: initialRangeStart,
+    endDate: initialRangeEnd
+  });
+  const [rangeStartMonth, setRangeStartMonth] = React.useState(initialFirstMonth);
+  const [rangeEndMonth, setRangeEndMonth] = React.useState(initialSecondMonth);
+  const [hoverDay, setHoverDay] = React.useState('');
+  const [timeZone, setTimeZone] = React.useState(_momentTimezone.default.tz.guess());
+  const {
+    startDate,
+    endDate
+  } = dateRange;
+  const setRangeStartMonthValidated = date => {
+    if ((0, _momentTimezone.default)(date).isBefore(rangeEndMonth)) {
+      setRangeStartMonth(date);
+    } else {
+      setRangeStartMonth((0, _utils.getSubtractedDate)(rangeEndMonth, 1, 'M'));
+    }
+  };
+  const setRangeEndMonthValidated = date => {
+    if ((0, _momentTimezone.default)(date).isAfter(rangeStartMonth)) {
+      setRangeEndMonth(date);
+    } else {
+      setRangeEndMonth((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M'));
+    }
+  };
+  const onDayClick = day => {
+    if (startDate && !endDate && (0, _momentTimezone.default)(day).isSameOrAfter(startDate)) {
+      setDateRange({
+        startDate,
+        endDate: day
+      });
+    } else {
+      setDateRange({
+        startDate: day,
+        endDate: undefined
+      });
+    }
+    setHoverDay(day);
+  };
+  const onMonthNavigate = (marker, action) => {
+    const [firstMonth, secondMonth] = marker === _utils.MARKERS.DATE_RANGE_START ? [rangeStartMonth, rangeEndMonth] : [rangeEndMonth, rangeStartMonth];
+    const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getAddedDate)(firstMonth, 1, 'M') : (0, _utils.getSubtractedDate)(firstMonth, 1, 'M');
+    const isRangeStartMonth = marker === _utils.MARKERS.DATE_RANGE_START;
+    const isBeforeCurrentMonth = (0, _momentTimezone.default)(newMonth).isBefore((0, _momentTimezone.default)());
+    const isValidMonth = isRangeStartMonth ? (0, _momentTimezone.default)(newMonth).isBefore((0, _momentTimezone.default)(secondMonth)) : (0, _momentTimezone.default)(secondMonth).isBefore((0, _momentTimezone.default)(newMonth));
+    if (isBeforeCurrentMonth && isValidMonth) {
+      isRangeStartMonth ? setRangeStartMonth(newMonth) : setRangeEndMonth(newMonth);
+    }
+  };
+  const onDayHover = date => {
+    if (startDate && !endDate && (!hoverDay || date !== hoverDay)) {
+      setHoverDay(date);
+    }
+  };
+  const inHoverRange = day => Boolean(startDate && !endDate && hoverDay && (0, _momentTimezone.default)(hoverDay).isAfter((0, _momentTimezone.default)(startDate)) && (0, _momentTimezone.default)(day).isBetween((0, _momentTimezone.default)(startDate), (0, _momentTimezone.default)(hoverDay)));
+  const handlers = {
+    onDayClick,
+    onDayHover,
+    onMonthNavigate
+  };
+  return /*#__PURE__*/React.createElement(_DateRangeWrapper.DateRangeWrapper, {
+    ref: ref,
+    onApply: onApply,
+    handlers: handlers,
+    hoverDay: hoverDay,
+    onCancel: onCancel,
+    timeZone: timeZone,
+    dateRange: dateRange,
+    rangeStartMonth: rangeStartMonth,
+    setTimeZone: setTimeZone,
+    rangeEndMonth: rangeEndMonth,
+    inHoverRange: inHoverRange,
+    setRangeStartMonth: setRangeStartMonthValidated,
+    setRangeEndMonth: setRangeEndMonthValidated,
+    cardWrapperClass: (0, _classify.default)(_DateRangePickerModule.default.container, classNames?.wrapper)
+  });
+});
+exports.DateRangePicker = DateRangePicker;

package/lib/components/DateRangePicker/DateRangePicker.js.flow

@@ -0,0 +1,173 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import moment from 'moment-timezone';
+
+import classify from '../../utils/classify';
+
+import {DateRangeWrapper} from './DateRangeWrapper';
+import {
+  type DatePickerSelectedRange,
+  type DateRange,
+  formatIsoDate,
+  getAddedDate,
+  getSubtractedDate,
+  MARKERS,
+  NAVIGATION_ACTION,
+} from './utils';
+
+import css from './DateRangePicker.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type DateRangePickerProps = {
+  classNames?: ClassNames,
+  initialDateRange?: DateRange,
+  onApply: (datePickerSelectedRange: DatePickerSelectedRange) => void,
+  onCancel: () => void,
+};
+
+export const DateRangePicker: React$AbstractComponent<
+  DateRangePickerProps,
+  HTMLDivElement,
+> = React.forwardRef<DateRangePickerProps, HTMLDivElement>(
+  (
+    {onApply, onCancel, classNames, initialDateRange}: DateRangePickerProps,
+    ref,
+  ): React.Node => {
+    const today = formatIsoDate();
+
+    let initialFirstMonth = getSubtractedDate(today, 1, 'M'),
+      initialSecondMonth = today,
+      initialRangeStart = '',
+      initialRangeEnd = '';
+
+    if (initialDateRange?.startDate && initialDateRange.endDate) {
+      initialRangeStart = initialFirstMonth = formatIsoDate(
+        moment(initialDateRange.startDate),
+      );
+      initialRangeEnd = initialSecondMonth = formatIsoDate(
+        moment(initialDateRange.endDate),
+      );
+
+      // If start and end dates are in the same current month, render them in the second calendar since next month isn't enabled yet.
+      if (
+        moment(initialRangeStart).isSame(moment(initialRangeEnd), 'M') &&
+        moment(initialRangeStart).isSame(moment(today), 'M')
+      ) {
+        initialFirstMonth = getSubtractedDate(initialSecondMonth, 1, 'M');
+      } else {
+        initialSecondMonth = getAddedDate(initialFirstMonth, 1, 'M');
+      }
+    }
+
+    const [dateRange, setDateRange] = React.useState<DateRange>({
+      startDate: initialRangeStart,
+      endDate: initialRangeEnd,
+    });
+
+    const [rangeStartMonth, setRangeStartMonth] =
+      React.useState<string>(initialFirstMonth);
+    const [rangeEndMonth, setRangeEndMonth] =
+      React.useState<string>(initialSecondMonth);
+
+    const [hoverDay, setHoverDay] = React.useState<string>('');
+    const [timeZone, setTimeZone] = React.useState<string>(moment.tz.guess());
+
+    const {startDate, endDate} = dateRange;
+
+    const setRangeStartMonthValidated = (date: string) => {
+      if (moment(date).isBefore(rangeEndMonth)) {
+        setRangeStartMonth(date);
+      } else {
+        setRangeStartMonth(getSubtractedDate(rangeEndMonth, 1, 'M'));
+      }
+    };
+
+    const setRangeEndMonthValidated = (date: string) => {
+      if (moment(date).isAfter(rangeStartMonth)) {
+        setRangeEndMonth(date);
+      } else {
+        setRangeEndMonth(getAddedDate(rangeStartMonth, 1, 'M'));
+      }
+    };
+
+    const onDayClick = (day: string) => {
+      if (startDate && !endDate && moment(day).isSameOrAfter(startDate)) {
+        setDateRange({startDate, endDate: day});
+      } else {
+        setDateRange({startDate: day, endDate: undefined});
+      }
+      setHoverDay(day);
+    };
+
+    const onMonthNavigate = (
+      marker: $Values<typeof MARKERS>,
+      action: $Values<typeof NAVIGATION_ACTION>,
+    ) => {
+      const [firstMonth, secondMonth] =
+        marker === MARKERS.DATE_RANGE_START
+          ? [rangeStartMonth, rangeEndMonth]
+          : [rangeEndMonth, rangeStartMonth];
+
+      const newMonth =
+        action === NAVIGATION_ACTION.NEXT
+          ? getAddedDate(firstMonth, 1, 'M')
+          : getSubtractedDate(firstMonth, 1, 'M');
+
+      const isRangeStartMonth = marker === MARKERS.DATE_RANGE_START;
+      const isBeforeCurrentMonth = moment(newMonth).isBefore(moment());
+      const isValidMonth = isRangeStartMonth
+        ? moment(newMonth).isBefore(moment(secondMonth))
+        : moment(secondMonth).isBefore(moment(newMonth));
+
+      if (isBeforeCurrentMonth && isValidMonth) {
+        isRangeStartMonth
+          ? setRangeStartMonth(newMonth)
+          : setRangeEndMonth(newMonth);
+      }
+    };
+
+    const onDayHover = (date: string) => {
+      if (startDate && !endDate && (!hoverDay || date !== hoverDay)) {
+        setHoverDay(date);
+      }
+    };
+
+    const inHoverRange = (day: string): boolean =>
+      Boolean(
+        startDate &&
+          !endDate &&
+          hoverDay &&
+          moment(hoverDay).isAfter(moment(startDate)) &&
+          moment(day).isBetween(moment(startDate), moment(hoverDay)),
+      );
+
+    const handlers = {
+      onDayClick,
+      onDayHover,
+      onMonthNavigate,
+    };
+
+    return (
+      <DateRangeWrapper
+        ref={ref}
+        onApply={onApply}
+        handlers={handlers}
+        hoverDay={hoverDay}
+        onCancel={onCancel}
+        timeZone={timeZone}
+        dateRange={dateRange}
+        rangeStartMonth={rangeStartMonth}
+        setTimeZone={setTimeZone}
+        rangeEndMonth={rangeEndMonth}
+        inHoverRange={inHoverRange}
+        setRangeStartMonth={setRangeStartMonthValidated}
+        setRangeEndMonth={setRangeEndMonthValidated}
+        cardWrapperClass={classify(css.container, classNames?.wrapper)}
+      />
+    );
+  },
+);

package/lib/components/DateRangePicker/DateRangePicker.module.css

@@ -0,0 +1,8 @@
+@value (
+  size580
+) from '../../styles/variables/_size.css';
+
+.container {
+  display: flex;
+  width: size580;
+}