@birdnet/advanced-react-dates 0.0.0-stage → 1.0.0

package/src/defaultPhrases.js

@@ -0,0 +1,215 @@
+const calendarLabel = 'Calendar';
+const roleDescription = 'datepicker';
+const closeDatePicker = 'Close';
+const focusStartDate = 'Interact with the calendar and add the check-in date for your trip.';
+const clearDate = 'Clear Date';
+const clearDates = 'Clear Dates';
+const jumpToPrevMonth = 'Move backward to switch to the previous month.';
+const jumpToNextMonth = 'Move forward to switch to the next month.';
+const keyboardShortcuts = 'Keyboard Shortcuts';
+const showKeyboardShortcutsPanel = 'Open the keyboard shortcuts panel.';
+const hideKeyboardShortcutsPanel = 'Close the shortcuts panel.';
+const openThisPanel = 'Open this panel.';
+const enterKey = 'Enter key';
+const leftArrowRightArrow = 'Right and left arrow keys';
+const upArrowDownArrow = 'up and down arrow keys';
+const pageUpPageDown = 'page up and page down keys';
+const homeEnd = 'Home and end keys';
+const escape = 'Escape key';
+const questionMark = 'Question mark';
+const selectFocusedDate = 'Select the date in focus.';
+const moveFocusByOneDay = 'Move backward (left) and forward (right) by one day.';
+const moveFocusByOneWeek = 'Move backward (up) and forward (down) by one week.';
+const moveFocusByOneMonth = 'Switch months.';
+const moveFocustoStartAndEndOfWeek = 'Go to the first or last day of a week.';
+const returnFocusToInput = 'Return to the date input field.';
+const keyboardForwardNavigationInstructions = 'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
+const keyboardBackwardNavigationInstructions = 'Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
+
+const chooseAvailableStartDate = ({ date }) => `Choose ${date} as your check-in date. It’s available.`;
+const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out date. It’s available.`;
+const chooseAvailableDate = ({ date }) => date;
+const dateIsUnavailable = ({ date }) => `Not available. ${date}`;
+const dateIsSelected = ({ date }) => `Selected. ${date}`;
+const dateIsSelectedAsStartDate = ({ date }) => `Selected as start date. ${date}`;
+const dateIsSelectedAsEndDate = ({ date }) => `Selected as end date. ${date}`;
+
+export default {
+  calendarLabel,
+  roleDescription,
+  closeDatePicker,
+  focusStartDate,
+  clearDate,
+  clearDates,
+  jumpToPrevMonth,
+  jumpToNextMonth,
+  keyboardShortcuts,
+  showKeyboardShortcutsPanel,
+  hideKeyboardShortcutsPanel,
+  openThisPanel,
+  enterKey,
+  leftArrowRightArrow,
+  upArrowDownArrow,
+  pageUpPageDown,
+  homeEnd,
+  escape,
+  questionMark,
+  selectFocusedDate,
+  moveFocusByOneDay,
+  moveFocusByOneWeek,
+  moveFocusByOneMonth,
+  moveFocustoStartAndEndOfWeek,
+  returnFocusToInput,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
+
+  chooseAvailableStartDate,
+  chooseAvailableEndDate,
+  dateIsUnavailable,
+  dateIsSelected,
+  dateIsSelectedAsStartDate,
+  dateIsSelectedAsEndDate,
+};
+
+export const DateRangePickerPhrases = {
+  calendarLabel,
+  roleDescription,
+  closeDatePicker,
+  clearDates,
+  focusStartDate,
+  jumpToPrevMonth,
+  jumpToNextMonth,
+  keyboardShortcuts,
+  showKeyboardShortcutsPanel,
+  hideKeyboardShortcutsPanel,
+  openThisPanel,
+  enterKey,
+  leftArrowRightArrow,
+  upArrowDownArrow,
+  pageUpPageDown,
+  homeEnd,
+  escape,
+  questionMark,
+  selectFocusedDate,
+  moveFocusByOneDay,
+  moveFocusByOneWeek,
+  moveFocusByOneMonth,
+  moveFocustoStartAndEndOfWeek,
+  returnFocusToInput,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
+  chooseAvailableStartDate,
+  chooseAvailableEndDate,
+  dateIsUnavailable,
+  dateIsSelected,
+  dateIsSelectedAsStartDate,
+  dateIsSelectedAsEndDate,
+};
+
+export const DateRangePickerInputPhrases = {
+  focusStartDate,
+  clearDates,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
+};
+
+export const SingleDatePickerPhrases = {
+  calendarLabel,
+  roleDescription,
+  closeDatePicker,
+  clearDate,
+  jumpToPrevMonth,
+  jumpToNextMonth,
+  keyboardShortcuts,
+  showKeyboardShortcutsPanel,
+  hideKeyboardShortcutsPanel,
+  openThisPanel,
+  enterKey,
+  leftArrowRightArrow,
+  upArrowDownArrow,
+  pageUpPageDown,
+  homeEnd,
+  escape,
+  questionMark,
+  selectFocusedDate,
+  moveFocusByOneDay,
+  moveFocusByOneWeek,
+  moveFocusByOneMonth,
+  moveFocustoStartAndEndOfWeek,
+  returnFocusToInput,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
+  chooseAvailableDate,
+  dateIsUnavailable,
+  dateIsSelected,
+};
+
+export const SingleDatePickerInputPhrases = {
+  clearDate,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
+};
+
+export const DayPickerPhrases = {
+  calendarLabel,
+  roleDescription,
+  jumpToPrevMonth,
+  jumpToNextMonth,
+  keyboardShortcuts,
+  showKeyboardShortcutsPanel,
+  hideKeyboardShortcutsPanel,
+  openThisPanel,
+  enterKey,
+  leftArrowRightArrow,
+  upArrowDownArrow,
+  pageUpPageDown,
+  homeEnd,
+  escape,
+  questionMark,
+  selectFocusedDate,
+  moveFocusByOneDay,
+  moveFocusByOneWeek,
+  moveFocusByOneMonth,
+  moveFocustoStartAndEndOfWeek,
+  returnFocusToInput,
+  chooseAvailableStartDate,
+  chooseAvailableEndDate,
+  chooseAvailableDate,
+  dateIsUnavailable,
+  dateIsSelected,
+  dateIsSelectedAsStartDate,
+  dateIsSelectedAsEndDate,
+};
+
+export const DayPickerKeyboardShortcutsPhrases = {
+  keyboardShortcuts,
+  showKeyboardShortcutsPanel,
+  hideKeyboardShortcutsPanel,
+  openThisPanel,
+  enterKey,
+  leftArrowRightArrow,
+  upArrowDownArrow,
+  pageUpPageDown,
+  homeEnd,
+  escape,
+  questionMark,
+  selectFocusedDate,
+  moveFocusByOneDay,
+  moveFocusByOneWeek,
+  moveFocusByOneMonth,
+  moveFocustoStartAndEndOfWeek,
+  returnFocusToInput,
+};
+
+export const DayPickerNavigationPhrases = {
+  jumpToPrevMonth,
+  jumpToNextMonth,
+};
+
+export const CalendarDayPhrases = {
+  chooseAvailableDate,
+  dateIsUnavailable,
+  dateIsSelected,
+  dateIsSelectedAsStartDate,
+  dateIsSelectedAsEndDate,
+};

package/src/index.js

@@ -0,0 +1,20 @@
+export { default as CalendarDay } from './components/CalendarDay';
+export { default as CalendarMonth } from './components/CalendarMonth';
+export { default as CalendarMonthGrid } from './components/CalendarMonthGrid';
+export { default as DateRangePicker } from './components/DateRangePicker';
+export { default as DateRangePickerInput } from './components/DateRangePickerInput';
+export { default as DateRangePickerInputController } from './components/DateRangePickerInputController';
+export { default as DateRangePickerShape } from './shapes/DateRangePickerShape';
+export { default as DayPicker } from './components/DayPicker';
+export { default as DayPickerRangeController } from './components/DayPickerRangeController';
+export { default as DayPickerSingleDateController } from './components/DayPickerSingleDateController';
+export { default as SingleDatePicker } from './components/SingleDatePicker';
+export { default as SingleDatePickerInput } from './components/SingleDatePickerInput';
+export { default as SingleDatePickerShape } from './shapes/SingleDatePickerShape';
+export { default as isInclusivelyAfterDay } from './utils/isInclusivelyAfterDay';
+export { default as isInclusivelyBeforeDay } from './utils/isInclusivelyBeforeDay';
+export { default as isNextDay } from './utils/isNextDay';
+export { default as isSameDay } from './utils/isSameDay';
+export { default as toISODateString } from './utils/toISODateString';
+export { default as toLocalizedDateString } from './utils/toLocalizedDateString';
+export { default as toMomentObject } from './utils/toMomentObject';

package/src/initialize.js

@@ -0,0 +1,3 @@
+import registerCSSInterfaceWithDefaultTheme from './utils/registerCSSInterfaceWithDefaultTheme';
+
+registerCSSInterfaceWithDefaultTheme();

package/src/shapes/AnchorDirectionShape.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+import {
+  ANCHOR_LEFT,
+  ANCHOR_RIGHT,
+} from '../constants';
+
+export default PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]);

package/src/shapes/CalendarInfoPositionShape.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+import {
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_BEFORE,
+  INFO_POSITION_AFTER,
+} from '../constants';
+
+export default PropTypes.oneOf([
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_BEFORE,
+  INFO_POSITION_AFTER,
+]);

package/src/shapes/DateRangePickerShape.js

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import { mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
+
+import { DateRangePickerPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
+import FocusedInputShape from './FocusedInputShape';
+import IconPositionShape from './IconPositionShape';
+import OrientationShape from './OrientationShape';
+import DisabledShape from './DisabledShape';
+import anchorDirectionShape from './AnchorDirectionShape';
+import openDirectionShape from './OpenDirectionShape';
+import DayOfWeekShape from './DayOfWeekShape';
+import CalendarInfoPositionShape from './CalendarInfoPositionShape';
+import NavPositionShape from './NavPositionShape';
+
+export default {
+  // required props for a functional interactive DateRangePicker
+  startDate: momentPropTypes.momentObj,
+  endDate: momentPropTypes.momentObj,
+  onDatesChange: PropTypes.func.isRequired,
+
+  focusedInput: FocusedInputShape,
+  onFocusChange: PropTypes.func.isRequired,
+
+  onClose: PropTypes.func,
+
+  // input related props
+  startDateId: PropTypes.string.isRequired,
+  startDatePlaceholderText: PropTypes.string,
+  startDateOffset: PropTypes.func,
+  endDateOffset: PropTypes.func,
+  endDateId: PropTypes.string.isRequired,
+  endDatePlaceholderText: PropTypes.string,
+  startDateAriaLabel: PropTypes.string,
+  endDateAriaLabel: PropTypes.string,
+  startDateTitleText: PropTypes.string,
+  endDateTitleText: PropTypes.string,
+  disabled: DisabledShape,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  screenReaderInputMessage: PropTypes.string,
+  showClearDates: PropTypes.bool,
+  showDefaultInputIcon: PropTypes.bool,
+  inputIconPosition: IconPositionShape,
+  customInputIcon: PropTypes.node,
+  customArrowIcon: PropTypes.node,
+  customCloseIcon: PropTypes.node,
+  noBorder: PropTypes.bool,
+  block: PropTypes.bool,
+  small: PropTypes.bool,
+  regular: PropTypes.bool,
+  keepFocusOnInput: PropTypes.bool,
+  autoComplete: PropTypes.string,
+
+  // calendar presentation and interaction related props
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderWeekHeaderElement: PropTypes.func,
+  orientation: OrientationShape,
+  anchorDirection: anchorDirectionShape,
+  openDirection: openDirectionShape,
+  horizontalMargin: PropTypes.number,
+  withPortal: PropTypes.bool,
+  withFullScreenPortal: PropTypes.bool,
+  appendToBody: PropTypes.bool,
+  disableScroll: PropTypes.bool,
+  daySize: nonNegativeInteger,
+  isRTL: PropTypes.bool,
+  firstDayOfWeek: DayOfWeekShape,
+  initialVisibleMonth: PropTypes.func,
+  numberOfMonths: PropTypes.number,
+  keepOpenOnDateSelect: PropTypes.bool,
+  reopenPickerOnClearDates: PropTypes.bool,
+  renderCalendarInfo: PropTypes.func,
+  calendarInfoPosition: CalendarInfoPositionShape,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
+  verticalHeight: nonNegativeInteger,
+  transitionDuration: nonNegativeInteger,
+  verticalSpacing: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
+
+  // navigation related props
+  dayPickerNavigationInlineStyles: PropTypes.object,
+  navPosition: NavPositionShape,
+  navPrev: PropTypes.node,
+  navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
+  onPrevMonthClick: PropTypes.func,
+  onNextMonthClick: PropTypes.func,
+
+  // day presentation and interaction related props
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
+  minimumNights: PropTypes.number,
+  minDate: momentPropTypes.momentObj,
+  maxDate: momentPropTypes.momentObj,
+  enableOutsideDays: PropTypes.bool,
+  isDayBlocked: PropTypes.func,
+  isOutsideRange: PropTypes.func,
+  isDayHighlighted: PropTypes.func,
+
+  // internationalization props
+  displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  monthFormat: PropTypes.string,
+  weekDayFormat: PropTypes.string,
+  phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
+};

package/src/shapes/DayOfWeekShape.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+
+import { WEEKDAYS } from '../constants';
+
+export default PropTypes.oneOf(WEEKDAYS);

package/src/shapes/DisabledShape.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+
+import { START_DATE, END_DATE } from '../constants';
+
+export default PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]);

package/src/shapes/FocusedInputShape.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+import {
+  START_DATE,
+  END_DATE,
+} from '../constants';
+
+export default PropTypes.oneOf([START_DATE, END_DATE]);

package/src/shapes/IconPositionShape.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+import {
+  ICON_BEFORE_POSITION,
+  ICON_AFTER_POSITION,
+} from '../constants';
+
+export default PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]);

package/src/shapes/ModifiersShape.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import { and } from 'airbnb-prop-types';
+
+export default and([
+  PropTypes.instanceOf(Set),
+  function modifiers(props, propName, ...rest) {
+    const { [propName]: propValue } = props;
+    let firstError;
+    [...propValue].some((v, i) => {
+      const fakePropName = `${propName}: index ${i}`;
+      firstError = PropTypes.string.isRequired(
+        { [fakePropName]: v },
+        fakePropName,
+        ...rest,
+      );
+      return firstError != null;
+    });
+    return firstError == null ? null : firstError;
+  },
+], 'Modifiers (Set of Strings)');

package/src/shapes/NavPositionShape.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+import {
+  NAV_POSITION_BOTTOM,
+  NAV_POSITION_TOP,
+} from '../constants';
+
+export default PropTypes.oneOf([NAV_POSITION_BOTTOM, NAV_POSITION_TOP]);

package/src/shapes/OpenDirectionShape.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+import {
+  OPEN_DOWN,
+  OPEN_UP,
+} from '../constants';
+
+export default PropTypes.oneOf([OPEN_DOWN, OPEN_UP]);

package/src/shapes/OrientationShape.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+import {
+  HORIZONTAL_ORIENTATION,
+  VERTICAL_ORIENTATION,
+} from '../constants';
+
+export default PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]);

package/src/shapes/ScrollableOrientationShape.js

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+
+import {
+  HORIZONTAL_ORIENTATION,
+  VERTICAL_ORIENTATION,
+  VERTICAL_SCROLLABLE,
+} from '../constants';
+
+export default PropTypes.oneOf([
+  HORIZONTAL_ORIENTATION,
+  VERTICAL_ORIENTATION,
+  VERTICAL_SCROLLABLE,
+]);

package/src/shapes/SingleDatePickerShape.js

@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import { mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
+
+import { SingleDatePickerPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
+import IconPositionShape from './IconPositionShape';
+import OrientationShape from './OrientationShape';
+import anchorDirectionShape from './AnchorDirectionShape';
+import openDirectionShape from './OpenDirectionShape';
+import DayOfWeekShape from './DayOfWeekShape';
+import CalendarInfoPositionShape from './CalendarInfoPositionShape';
+import NavPositionShape from './NavPositionShape';
+
+export default {
+  // required props for a functional interactive SingleDatePicker
+  date: momentPropTypes.momentObj,
+  onDateChange: PropTypes.func.isRequired,
+
+  focused: PropTypes.bool,
+  onFocusChange: PropTypes.func.isRequired,
+
+  // input related props
+  id: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  screenReaderInputMessage: PropTypes.string,
+  showClearDate: PropTypes.bool,
+  customCloseIcon: PropTypes.node,
+  showDefaultInputIcon: PropTypes.bool,
+  inputIconPosition: IconPositionShape,
+  customInputIcon: PropTypes.node,
+  noBorder: PropTypes.bool,
+  block: PropTypes.bool,
+  small: PropTypes.bool,
+  regular: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
+  keepFocusOnInput: PropTypes.bool,
+  autoComplete: PropTypes.string,
+
+  // calendar presentation and interaction related props
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderWeekHeaderElement: PropTypes.func,
+  orientation: OrientationShape,
+  anchorDirection: anchorDirectionShape,
+  openDirection: openDirectionShape,
+  horizontalMargin: PropTypes.number,
+  withPortal: PropTypes.bool,
+  withFullScreenPortal: PropTypes.bool,
+  appendToBody: PropTypes.bool,
+  disableScroll: PropTypes.bool,
+  initialVisibleMonth: PropTypes.func,
+  firstDayOfWeek: DayOfWeekShape,
+  numberOfMonths: PropTypes.number,
+  keepOpenOnDateSelect: PropTypes.bool,
+  reopenPickerOnClearDate: PropTypes.bool,
+  renderCalendarInfo: PropTypes.func,
+  calendarInfoPosition: CalendarInfoPositionShape,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
+  daySize: nonNegativeInteger,
+  isRTL: PropTypes.bool,
+  verticalHeight: nonNegativeInteger,
+  transitionDuration: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
+
+  // navigation related props
+  dayPickerNavigationInlineStyles: PropTypes.object,
+  navPosition: NavPositionShape,
+  navPrev: PropTypes.node,
+  navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
+
+  onPrevMonthClick: PropTypes.func,
+  onNextMonthClick: PropTypes.func,
+  onClose: PropTypes.func,
+
+  // day presentation and interaction related props
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
+  enableOutsideDays: PropTypes.bool,
+  isDayBlocked: PropTypes.func,
+  isOutsideRange: PropTypes.func,
+  isDayHighlighted: PropTypes.func,
+  minDate: momentPropTypes.momentObj,
+  maxDate: momentPropTypes.momentObj,
+
+  // internationalization props
+  displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  monthFormat: PropTypes.string,
+  weekDayFormat: PropTypes.string,
+  phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
+};

package/src/svg/arrow-left.svg

@@ -0,0 +1 @@
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M336 275L126 485h806c13 0 23 10 23 23s-10 23-23 23H126l210 210c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7L55 524c-11-11-11-21 0-32l249-249c21-22 53 10 32 32z"/></svg>

package/src/svg/arrow-right.svg

@@ -0,0 +1 @@
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M694 242l249 250c12 11 12 21 1 32L694 773c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210-210H68c-13 0-23-10-23-23s10-23 23-23h806L662 275c-21-22 11-54 32-33z"/></svg>

package/src/svg/calendar.svg

@@ -0,0 +1 @@
+<svg focusable="false" viewBox="0 0 1393.1 1500"><path d="m107 1393h241v-241h-241zm295 0h268v-241h-268zm-295-295h241v-268h-241zm295 0h268v-268h-268zm-295-321h241v-241h-241zm616 616h268v-241h-268zm-321-616h268v-241h-268zm643 616h241v-241h-241zm-322-295h268v-268h-268zm-294-723v-241c0-7-3-14-8-19-6-5-12-8-19-8h-54c-7 0-13 3-19 8-5 5-8 12-8 19v241c0 7 3 14 8 19 6 5 12 8 19 8h54c7 0 13-3 19-8 5-5 8-12 8-19zm616 723h241v-268h-241zm-322-321h268v-241h-268zm322 0h241v-241h-241zm27-402v-241c0-7-3-14-8-19-6-5-12-8-19-8h-54c-7 0-13 3-19 8-5 5-8 12-8 19v241c0 7 3 14 8 19 6 5 12 8 19 8h54c7 0 13-3 19-8 5-5 8-12 8-19zm321-54v1072c0 29-11 54-32 75s-46 32-75 32h-1179c-29 0-54-11-75-32s-32-46-32-75v-1072c0-29 11-54 32-75s46-32 75-32h107v-80c0-37 13-68 40-95s57-39 94-39h54c37 0 68 13 95 39 26 26 39 58 39 95v80h321v-80c0-37 13-69 40-95 26-26 57-39 94-39h54c37 0 68 13 94 39s40 58 40 95v80h107c29 0 54 11 75 32s32 46 32 75z"/></svg>

package/src/svg/chevron-down.svg

@@ -0,0 +1 @@
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M968 289L514 741c-11 11-21 11-32 0L29 289c-4-5-6-11-6-16 0-13 10-23 23-23 6 0 11 2 15 7l437 436 438-436c4-5 9-7 16-7 6 0 11 2 16 7 9 10 9 21 0 32z"/></svg>

package/src/svg/chevron-up.svg

@@ -0,0 +1 @@
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M32 713l453-453c11-11 21-11 32 0l453 453c5 5 7 10 7 16 0 13-10 23-22 23-7 0-12-2-16-7L501 309 64 745c-4 5-9 7-15 7-7 0-12-2-17-7-9-11-9-21 0-32z"/></svg>

package/src/svg/close.svg

@@ -0,0 +1 @@
+<svg focusable="false" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M11.53.47a.75.75 0 0 0-1.061 0l-4.47 4.47L1.529.47A.75.75 0 1 0 .468 1.531l4.47 4.47-4.47 4.47a.75.75 0 1 0 1.061 1.061l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.061-1.061l-4.47-4.47 4.47-4.47a.75.75 0 0 0 0-1.061z"/></svg>