@hhgtech/hhg-components 1.29.565 → 1.29.566-beta-1

package/build/index-ff238933.js

@@ -0,0 +1,574 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-6e217008.js');
+var React = require('react');
+var index = require('./index-44b7e21e.js');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var core = require('@hhgtech/icons/core');
+var cn = require('classnames');
+var dayjs = require('dayjs');
+var index$1 = require('./index-e5036c4f.js');
+var reactDayPickerV9 = require('react-day-picker-v9');
+var arrow = require('@hhgtech/icons/arrow');
+var locale = require('react-day-picker-v9/locale');
+var styled = require('@emotion/styled');
+var miscTheme = require('./miscTheme.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var cn__default = /*#__PURE__*/_interopDefault(cn);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const toValidDate = (value) => {
+    if (value instanceof Date && !Number.isNaN(value.getTime())) {
+        return value;
+    }
+    return undefined;
+};
+/**
+ * Month/year shown when the popover opens. Uses the selected date when set;
+ * otherwise picks the latest selectable day from `{ after: … }` disabled rules
+ * (e.g. max birthday for min-age tools like BMI).
+ */
+const getInitialCalendarMonth = (selected, disabled) => {
+    if (selected && !Number.isNaN(selected.getTime())) {
+        return selected;
+    }
+    const matchers = disabled
+        ? Array.isArray(disabled)
+            ? disabled
+            : [disabled]
+        : [];
+    let latestSelectableUpperBound;
+    for (const matcher of matchers) {
+        if (!matcher || typeof matcher !== 'object' || matcher instanceof Date) {
+            continue;
+        }
+        if ('after' in matcher) {
+            const afterDate = toValidDate(matcher.after);
+            if (afterDate &&
+                (!latestSelectableUpperBound ||
+                    afterDate.getTime() < latestSelectableUpperBound.getTime())) {
+                latestSelectableUpperBound = afterDate;
+            }
+        }
+    }
+    if (latestSelectableUpperBound) {
+        return latestSelectableUpperBound;
+    }
+    for (const matcher of matchers) {
+        if (!matcher || typeof matcher !== 'object' || matcher instanceof Date) {
+            continue;
+        }
+        if ('before' in matcher) {
+            const beforeDate = toValidDate(matcher.before);
+            if (beforeDate) {
+                return beforeDate;
+            }
+        }
+    }
+    return new Date();
+};
+const DAY_PICKER_DEFAULT_LOCALE = locale.enUS;
+const DATE_PICKER_POPOVER_Z_INDEX = 1;
+/** Previous/next month days in grid (not selected). */
+const DAY_PICKER_OUTSIDE_DAY_COLOR = '#111111';
+const DAYS_OF_WEEK = {
+    SUNDAY: 0,
+    MONDAY: 1,
+    TUESDAY: 2,
+    WEDNESDAY: 3,
+    THURSDAY: 4,
+    FRIDAY: 5,
+    SATURDAY: 6,
+};
+const APP_LOCALE_MAP_DAY_PICKER = {
+    [index.LOCALE.Vietnam]: locale.vi,
+    [index.LOCALE.Indonesia]: locale.id,
+    [index.LOCALE.Malaysia]: locale.ms,
+    [index.LOCALE.Cambodia]: locale.km,
+    [index.LOCALE.PhilippinesEnglish]: locale.enUS,
+    [index.LOCALE.PhilippinesTagalog]: locale.enUS,
+    [index.LOCALE.Thailand]: locale.th,
+    [index.LOCALE.Myanmar]: locale.enUS,
+    [index.LOCALE.Taiwan]: locale.zhTW,
+    [index.LOCALE.India]: locale.hi,
+    [index.LOCALE.Singapore]: locale.zhCN,
+};
+
+const CELL_SIZE = '2.625rem';
+const StyledRoot = styled__default["default"].div `
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
+`;
+const StyledLabel = styled__default["default"].div `
+  margin-bottom: 0.25rem;
+`;
+const StyledError = styled__default["default"].div `
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: ${miscTheme.theme.colors.red600};
+`;
+const StyledInputWrapper = styled__default["default"].div `
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+const StyledTriggerButton = styled__default["default"].button `
+  display: flex;
+  width: 100%;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  border: 1px solid ${miscTheme.theme.colors.gray200};
+  background: ${miscTheme.theme.colors.white};
+  padding: 0.25rem 0.875rem;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: ${miscTheme.theme.colors.gray800};
+  cursor: pointer;
+
+  &:focus,
+  &:focus-visible {
+    border-color: ${miscTheme.theme.colors.blue600};
+    outline: none;
+    box-shadow: 0 0 0 2px ${miscTheme.theme.colors.blue200};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: ${miscTheme.theme.colors.gray50};
+    color: ${miscTheme.theme.colors.gray400};
+  }
+
+  [data-slot='placeholder'] {
+    color: ${miscTheme.theme.colors.gray400};
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    color: ${miscTheme.theme.colors.gray500};
+  }
+`;
+const StyledPopoverContent = styled__default["default"](PopoverPrimitive__namespace.Content) `
+  z-index: ${DATE_PICKER_POPOVER_Z_INDEX};
+  width: auto;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  background: transparent;
+  padding: 0;
+  outline: none;
+`;
+const StyledCalendar = styled__default["default"].div `
+  --cell-size: ${CELL_SIZE};
+
+  .rdp-root {
+    width: fit-content;
+  }
+
+  .hhg-day-picker {
+    border-radius: 0.5rem;
+    border: 1px solid ${miscTheme.theme.colors.gray200};
+    background: ${miscTheme.theme.colors.white};
+    padding: 0.75rem 1rem;
+  }
+
+  .rdp-months {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+
+  .rdp-month {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+
+  .rdp-nav {
+    position: absolute;
+    inset: 0 0 auto 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.25rem;
+  }
+
+  .rdp-button_previous,
+  .rdp-button_next {
+    display: flex;
+    width: var(--cell-size);
+    height: var(--cell-size);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    user-select: none;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: ${miscTheme.theme.colors.gray700};
+
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.2;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .rdp-month_caption {
+    display: flex;
+    width: 100%;
+    height: var(--cell-size);
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--cell-size);
+  }
+
+  .rdp-dropdowns {
+    display: flex;
+    width: 100%;
+    height: var(--cell-size);
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .rdp-dropdown_root {
+    position: relative;
+    border-radius: 0.5rem;
+    border: none;
+
+    &:hover {
+      background: ${miscTheme.theme.colors.gray100};
+    }
+  }
+
+  .rdp-dropdown {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .rdp-caption_label {
+    display: flex;
+    height: 2rem;
+    align-items: center;
+    gap: 0.25rem;
+    border-radius: 0.375rem;
+    padding: 0 0.25rem 0 0.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    color: ${miscTheme.theme.colors.gray800};
+    user-select: none;
+
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+      color: ${miscTheme.theme.colors.gray500};
+    }
+  }
+
+  .rdp-weekdays {
+    display: flex;
+    margin-bottom: 0.5rem;
+    color: ${miscTheme.theme.colors.gray500};
+  }
+
+  .rdp-weekday {
+    flex: 1;
+    user-select: none;
+    border-radius: 0.375rem;
+    font-size: 0.8rem;
+    font-weight: 400;
+    text-align: center;
+    color: ${miscTheme.theme.colors.gray500};
+  }
+
+  .rdp-week {
+    display: flex;
+    width: 100%;
+  }
+
+  .rdp-day {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    user-select: none;
+    text-align: center;
+  }
+
+  .rdp-today:not(:has([data-selected-single='true'])):not(
+      :has([data-range-start='true'])
+    ):not(:has([data-range-end='true'])) {
+    border-radius: 0.375rem;
+    background: ${miscTheme.theme.colors.blue50};
+  }
+
+  .rdp-today:has([data-selected-single='true']),
+  .rdp-today:has([data-selected='true']),
+  .rdp-today:has([data-range-start='true']),
+  .rdp-today:has([data-range-end='true']) {
+    background: transparent;
+  }
+
+  .rdp-disabled {
+    cursor: not-allowed !important;
+  }
+
+  .rdp-hidden {
+    visibility: hidden;
+  }
+
+  [data-slot='day-button'] {
+    display: flex;
+    width: 100%;
+    min-width: var(--cell-size);
+    height: auto;
+    aspect-ratio: 1 / 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    border: none;
+    border-radius: 0.5rem;
+    background: transparent;
+    font-weight: 400;
+    line-height: 1;
+    color: ${miscTheme.theme.colors.gray800};
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background: ${miscTheme.theme.colors.gray100};
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: ${miscTheme.theme.colors.gray400};
+    }
+
+    &[data-selected-single='true'],
+    &[data-range-start='true'],
+    &[data-range-end='true'] {
+      background: ${miscTheme.theme.colors.blue600};
+      color: ${miscTheme.theme.colors.white};
+      border-radius: 0.375rem;
+
+      &:hover:not(:disabled) {
+        background: ${miscTheme.theme.colors.blue600};
+        color: ${miscTheme.theme.colors.white};
+      }
+    }
+
+    &[data-range-middle='true'] {
+      border-radius: 0;
+      background: ${miscTheme.theme.colors.blue50};
+      color: ${miscTheme.theme.colors.blue700};
+    }
+  }
+
+  .rdp-outside:not([data-selected='true']):not(.rdp-disabled)
+    [data-slot='day-button']:not([data-selected-single='true']):not(
+      [data-selected='true']
+    ):not(:disabled) {
+    color: ${DAY_PICKER_OUTSIDE_DAY_COLOR};
+  }
+
+  .hhg-day-friday:not(.rdp-disabled)
+    [data-slot='day-button']:not([data-selected-single='true']):not(:disabled),
+  .hhg-day-sunday:not(.rdp-disabled)
+    [data-slot='day-button']:not([data-selected-single='true']):not(:disabled) {
+    color: ${miscTheme.theme.colors.red600};
+  }
+
+  .rdp-today:not(:has([data-selected-single='true'])) [data-slot='day-button'] {
+    color: ${miscTheme.theme.colors.blue700};
+  }
+
+  .rdp-day[data-selected='true'] [data-slot='day-button'],
+  .rdp-day[data-selected='true'] .rdp-day_button {
+    background: ${miscTheme.theme.colors.blue600};
+    color: ${miscTheme.theme.colors.white};
+    border-radius: 0.375rem;
+  }
+
+  .hhg-day-friday [data-slot='day-button'][data-selected-single='true'],
+  .hhg-day-sunday [data-slot='day-button'][data-selected-single='true'],
+  .rdp-today [data-slot='day-button'][data-selected-single='true'],
+  .rdp-outside [data-slot='day-button'][data-selected-single='true'],
+  .rdp-outside [data-slot='day-button'][data-selected='true'] {
+    background: ${miscTheme.theme.colors.blue600};
+    color: ${miscTheme.theme.colors.white};
+  }
+
+  .rdp-disabled [data-slot='day-button'],
+  .rdp-disabled [data-slot='day-button']:disabled {
+    color: ${miscTheme.theme.colors.gray400} !important;
+  }
+`;
+
+function Calendar(props) {
+    const { className, classNames, showOutsideDays = true, captionLayout = 'label', formatters, components, modifiers = {}, modifiersClassNames = {}, locale } = props, rest = tslib_es6.__rest(props, ["className", "classNames", "showOutsideDays", "captionLayout", "formatters", "components", "modifiers", "modifiersClassNames", "locale"]);
+    const defaultClassNames = reactDayPickerV9.getDefaultClassNames();
+    const localeCode = (locale === null || locale === void 0 ? void 0 : locale.code) || DAY_PICKER_DEFAULT_LOCALE.code;
+    return (React__default["default"].createElement(StyledCalendar, null,
+        React__default["default"].createElement(reactDayPickerV9.DayPicker, Object.assign({ locale: locale, showOutsideDays: showOutsideDays, weekStartsOn: DAYS_OF_WEEK.MONDAY, className: cn__default["default"]('hhg-day-picker', className), captionLayout: captionLayout, formatters: Object.assign({ formatMonthDropdown: (date) => date.toLocaleString(localeCode, { month: 'short' }) }, formatters), classNames: Object.assign({ root: cn__default["default"](defaultClassNames.root), months: cn__default["default"](defaultClassNames.months), month: cn__default["default"](defaultClassNames.month), nav: cn__default["default"](defaultClassNames.nav), button_previous: cn__default["default"](defaultClassNames.button_previous), button_next: cn__default["default"](defaultClassNames.button_next), month_caption: cn__default["default"](defaultClassNames.month_caption), dropdowns: cn__default["default"](defaultClassNames.dropdowns), dropdown_root: cn__default["default"](defaultClassNames.dropdown_root), dropdown: cn__default["default"](defaultClassNames.dropdown), caption_label: cn__default["default"](defaultClassNames.caption_label), table: 'w-full', weekdays: cn__default["default"](defaultClassNames.weekdays), weekday: cn__default["default"](defaultClassNames.weekday), week: cn__default["default"](defaultClassNames.week), day: cn__default["default"](defaultClassNames.day), today: cn__default["default"](defaultClassNames.today), outside: cn__default["default"](defaultClassNames.outside), disabled: cn__default["default"](defaultClassNames.disabled), hidden: cn__default["default"](defaultClassNames.hidden) }, classNames), modifiers: Object.assign({ friday: { dayOfWeek: DAYS_OF_WEEK.SATURDAY }, sunday: { dayOfWeek: DAYS_OF_WEEK.SUNDAY }, today: [new Date()] }, modifiers), modifiersClassNames: Object.assign({ friday: 'hhg-day-friday', sunday: 'hhg-day-sunday' }, modifiersClassNames), components: Object.assign({ Root: (_a) => {
+                    var { className: rootClassName, rootRef } = _a, rootProps = tslib_es6.__rest(_a, ["className", "rootRef"]);
+                    return (React__default["default"].createElement("div", Object.assign({ "data-slot": "calendar", ref: rootRef, className: rootClassName }, rootProps)));
+                }, Chevron: (_a) => {
+                    var { className: chevronClassName, orientation } = _a, chevronProps = tslib_es6.__rest(_a, ["className", "orientation"]);
+                    if (orientation === 'left') {
+                        return (React__default["default"].createElement(arrow.ChevronLeft, Object.assign({ className: chevronClassName }, chevronProps)));
+                    }
+                    if (orientation === 'right') {
+                        return (React__default["default"].createElement(arrow.ChevronRight, Object.assign({ className: chevronClassName }, chevronProps)));
+                    }
+                    return (React__default["default"].createElement(arrow.ChevronDown, Object.assign({ className: chevronClassName }, chevronProps)));
+                }, DayButton: CalendarDayButton }, components) }, rest))));
+}
+function CalendarDayButton(_a) {
+    var { className, day, modifiers } = _a, props = tslib_es6.__rest(_a, ["className", "day", "modifiers"]);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (modifiers.focused) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [modifiers.focused]);
+    const isSelectedSingle = Boolean(modifiers.selected) &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle;
+    return (React__default["default"].createElement("button", Object.assign({ ref: ref, type: "button", "data-day": day.date.toLocaleDateString(), "data-selected": modifiers.selected ? 'true' : undefined, "data-selected-single": isSelectedSingle ? 'true' : undefined, "data-range-start": modifiers.range_start ? 'true' : undefined, "data-range-end": modifiers.range_end ? 'true' : undefined, "data-range-middle": modifiers.range_middle ? 'true' : undefined, "data-slot": "day-button", className: className }, props)));
+}
+
+const DatePickerV2Input = React.forwardRef((props, ref) => {
+    var _a, _b;
+    const { name, value, locale = index.LOCALE.Vietnam, disabled, placeholder, startSection, endSection, buttonProps, wrapperProps, calendarProps, excludeDate, className, onBlur, onChange, } = props;
+    const dayPickerLocale = APP_LOCALE_MAP_DAY_PICKER[locale];
+    const displayFormat = ((_a = index$1.ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.dateFormat) || 'DD/MM/YYYY';
+    const validButtonProps = buttonProps || {};
+    const _c = calendarProps || {}, { disabled: calendarDisabled, month: calendarMonthProp, onMonthChange: calendarOnMonthChange } = _c, restCalendarProps = tslib_es6.__rest(_c, ["disabled", "month", "onMonthChange"]);
+    const [open, setOpen] = React.useState(false);
+    const [innerDate, setInnerDate] = React.useState(undefined);
+    const [viewMonth, setViewMonth] = React.useState(() => new Date());
+    const popoverContentRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!open)
+            return;
+        const contentNode = popoverContentRef.current;
+        if (!contentNode)
+            return;
+        const zIndex = String(DATE_PICKER_POPOVER_Z_INDEX);
+        contentNode.style.zIndex = zIndex;
+        const popperWrapper = contentNode.closest('[data-radix-popper-content-wrapper]');
+        if (popperWrapper) {
+            popperWrapper.style.zIndex = zIndex;
+        }
+    }, [open]);
+    const currentDate = (_b = innerDate !== null && innerDate !== void 0 ? innerDate : value) !== null && _b !== void 0 ? _b : undefined;
+    React.useEffect(() => {
+        setInnerDate(value !== null && value !== void 0 ? value : undefined);
+    }, [value]);
+    React.useEffect(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [innerDate, onBlur]);
+    const disabledMatchers = React.useMemo(() => {
+        const matchers = [];
+        if (calendarDisabled) {
+            if (Array.isArray(calendarDisabled)) {
+                matchers.push(...calendarDisabled);
+            }
+            else {
+                matchers.push(calendarDisabled);
+            }
+        }
+        if (excludeDate) {
+            matchers.push(excludeDate);
+        }
+        return matchers.length > 0 ? matchers : undefined;
+    }, [calendarDisabled, excludeDate]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        setViewMonth(getInitialCalendarMonth(currentDate, disabledMatchers));
+    }, [open, currentDate, disabledMatchers]);
+    const calendarMonth = calendarMonthProp !== null && calendarMonthProp !== void 0 ? calendarMonthProp : viewMonth;
+    const handleMonthChange = (month) => {
+        setViewMonth(month);
+        calendarOnMonthChange === null || calendarOnMonthChange === void 0 ? void 0 : calendarOnMonthChange(month);
+    };
+    return (React__default["default"].createElement(StyledInputWrapper, Object.assign({}, wrapperProps),
+        React__default["default"].createElement(PopoverPrimitive__namespace.Root, { open: open, onOpenChange: setOpen },
+            React__default["default"].createElement(PopoverPrimitive__namespace.Trigger, { asChild: true },
+                React__default["default"].createElement(StyledTriggerButton, Object.assign({ ref: ref, type: "button", name: name, disabled: disabled, className: cn__default["default"](className, validButtonProps.className) }, validButtonProps),
+                    startSection,
+                    currentDate ? (React__default["default"].createElement("span", null, dayjs__default["default"](currentDate).format(displayFormat))) : (React__default["default"].createElement("span", { "data-slot": "placeholder" }, placeholder || displayFormat)), endSection !== null && endSection !== void 0 ? endSection : React__default["default"].createElement(core.CalendarOutline, null))),
+            React__default["default"].createElement(PopoverPrimitive__namespace.Portal, null,
+                React__default["default"].createElement(StyledPopoverContent, { ref: popoverContentRef, align: "start", sideOffset: 8, style: { zIndex: DATE_PICKER_POPOVER_Z_INDEX } },
+                    React__default["default"].createElement(Calendar, Object.assign({}, restCalendarProps, { mode: "single", locale: dayPickerLocale, month: calendarMonth, onMonthChange: handleMonthChange, selected: currentDate, captionLayout: "dropdown", disabled: disabledMatchers, onSelect: (date) => {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(date);
+                            setInnerDate(date);
+                            setOpen(false);
+                        } })))))));
+});
+DatePickerV2Input.displayName = 'DatePickerV2Input';
+
+/**
+ * DatePicker UI ported from hhg-components-v2 (react-day-picker v9 + Radix Popover).
+ * Use this when you need the v2 calendar look inside Mantine-based apps.
+ */
+const DatePickerV2 = (props) => {
+    const { label, error, fullWidth = true, locale = index.LOCALE.Vietnam, onChange, className, wrapperProps } = props, rest = tslib_es6.__rest(props, ["label", "error", "fullWidth", "locale", "onChange", "className", "wrapperProps"]);
+    return (React__default["default"].createElement(StyledRoot, { "$fullWidth": fullWidth },
+        label ? React__default["default"].createElement(StyledLabel, null, label) : null,
+        React__default["default"].createElement(DatePickerV2Input, Object.assign({}, rest, { locale: locale, className: className, wrapperProps: wrapperProps, onChange: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date !== null && date !== void 0 ? date : null) })),
+        error && typeof error !== 'boolean' ? (React__default["default"].createElement(StyledError, null, error)) : null,
+        error === true ? React__default["default"].createElement(StyledError, null) : null));
+};
+
+exports.Calendar = Calendar;
+exports.CalendarDayButton = CalendarDayButton;
+exports.DatePickerV2 = DatePickerV2;
+exports.DatePickerV2Input = DatePickerV2Input;