@pushwoosh/dumb-components 1.0.13 → 1.0.15

package/DateTimePicker/components/MonthView/MonthView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { addPeriod, format, monthName } from '../../helpers';
+import { DateInfo } from '../../styles';
+import { Month } from '../Month';
+import { PickerPlate } from '../PickerPlate';
+export function MonthView(props) {
+  const {
+    month,
+    activeDay,
+    userInputDay,
+    minDate,
+    maxDate,
+    onDaySelect,
+    onShowYear,
+    onShowDecade,
+    onChange
+  } = props;
+  return React.createElement(PickerPlate, {
+    onPrev: () => onChange(format(addPeriod(month, 'month', -1), 'year-month')),
+    onNext: () => onChange(format(addPeriod(month, 'month', 1), 'year-month')),
+    slot: React.createElement(Horizontal, {
+      "$gap": 4
+    }, React.createElement(DateInfo, {
+      onClick: onShowYear
+    }, monthName(+format(month, 'month'))), React.createElement(DateInfo, {
+      onClick: onShowDecade
+    }, format(month, 'year')))
+  }, React.createElement(Month, {
+    month: month,
+    activeDay: activeDay,
+    userInputDay: userInputDay,
+    minDate: minDate,
+    maxDate: maxDate,
+    onDaySelect: onDaySelect
+  }));
+}

package/DateTimePicker/components/MonthView/index.d.ts

@@ -0,0 +1 @@
+export * from './MonthView';

package/DateTimePicker/components/MonthView/index.js

@@ -0,0 +1 @@
+export * from './MonthView';

package/DateTimePicker/components/MonthView/types.d.ts

@@ -0,0 +1,11 @@
+export interface MonthViewProps {
+    month: string;
+    activeDay?: string;
+    userInputDay?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    onDaySelect: (day: string) => void;
+    onShowYear: () => void;
+    onShowDecade: () => void;
+    onChange: (day: string) => void;
+}

package/DateTimePicker/components/MonthView/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/NumberPicker/NumberPicker.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NumberPickerProps } from './types';
+export declare function NumberPicker(props: NumberPickerProps): ReactElement;

package/DateTimePicker/components/NumberPicker/NumberPicker.js

@@ -0,0 +1,125 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Vertical, useMount, usePersistentFunction } from '@pushwoosh/kit-helpers';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+import { intVal, isStringInteger } from './helpers';
+import { SingleInputFrame } from '../../styles';
+import { AutosizeInput } from '../AutosizeInput';
+import { Input } from '../Input';
+import { Hint } from './styles';
+export function NumberPicker(props) {
+  const {
+    value,
+    hint,
+    step = 1,
+    placeholder,
+    focusOnMount,
+    minValue,
+    maxValue,
+    autoSize,
+    isDisabled,
+    onChange,
+    onSubmit
+  } = props;
+  const ref = useRef(null);
+  const [autoDiff, setAutoDiff] = useState(0);
+  const [localValue, setLocalValue] = useState(value.toString() || '');
+  const onChangeDiff = usePersistentFunction(diff => {
+    const newValue = intVal(value) + diff;
+    const minValueValid = minValue === undefined || newValue >= minValue;
+    const maxValueValid = maxValue === undefined || newValue <= maxValue;
+    if (minValueValid && maxValueValid) {
+      onChange(newValue);
+    }
+  });
+  useEffect(() => {
+    setLocalValue(value.toString() || '');
+  }, [value]);
+  useEffect(() => {
+    if (!autoDiff) {
+      return;
+    }
+    const interval = setInterval(() => {
+      onChangeDiff(autoDiff);
+    }, 250);
+    return () => clearInterval(interval);
+  }, [autoDiff, onChangeDiff]);
+  useMount(() => {
+    if (focusOnMount && ref.current) {
+      ref.current.children[0].focus();
+    }
+  });
+  const handleChange = event => {
+    const val = event.target.value;
+    if (val === '' || val === '-') {
+      setLocalValue(val);
+      return;
+    }
+    const parsedValue = intVal(val);
+    if (parsedValue === 0 && val !== '0') {
+      return;
+    }
+    setLocalValue(val);
+    const minValueValid = minValue === undefined || parsedValue >= minValue;
+    const maxValueValid = maxValue === undefined || parsedValue <= maxValue;
+    if (isStringInteger(val) && minValueValid && maxValueValid) {
+      onChange(parsedValue);
+    }
+  };
+  const handleKeyDown = event => {
+    if (onSubmit && event.key === 'Enter' && isStringInteger(localValue)) {
+      onSubmit();
+    }
+    if (event.key === 'ArrowUp') {
+      onChangeDiff(1);
+      setAutoDiff(1);
+    }
+    if (event.key === 'ArrowDown') {
+      onChangeDiff(-1);
+      setAutoDiff(-1);
+    }
+  };
+  const resetAutoDiff = () => setAutoDiff(0);
+  const InputComponent = autoSize ? AutosizeInput : Input;
+  return React.createElement(SingleInputFrame, {
+    ref: ref,
+    "$hasHint": !!hint,
+    "$isDisabled": isDisabled
+  }, React.createElement(InputComponent, {
+    value: localValue,
+    placeholder: placeholder,
+    isDisabled: isDisabled,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onKeyUp: resetAutoDiff,
+    onBlur: event => {
+      let blurValue = intVal(event.target.value);
+      const minValueValid = minValue === undefined || blurValue >= minValue;
+      const maxValueValid = maxValue === undefined || blurValue <= maxValue;
+      if (!maxValueValid) {
+        blurValue = maxValue;
+      } else if (!minValueValid) {
+        blurValue = minValue;
+      }
+      onChange(blurValue);
+      setLocalValue(blurValue.toString());
+    }
+  }), hint && React.createElement(Hint, null, hint), React.createElement(Vertical, {
+    "$gap": 1
+  }, React.createElement("div", null, React.createElement(ChevronIcon, {
+    direction: "up",
+    size: "small",
+    "aria-disabled": "true",
+    onClick: () => onChangeDiff(step),
+    onMouseDown: () => setAutoDiff(step),
+    onMouseUp: resetAutoDiff,
+    onMouseLeave: resetAutoDiff
+  })), React.createElement("div", null, React.createElement(ChevronIcon, {
+    size: "small",
+    direction: "down",
+    "aria-disabled": isDisabled,
+    onClick: () => onChangeDiff(-1 * step),
+    onMouseDown: () => setAutoDiff(-1 * step),
+    onMouseUp: resetAutoDiff,
+    onMouseLeave: resetAutoDiff
+  }))));
+}

package/DateTimePicker/components/NumberPicker/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const intVal: (value: any) => number;
+export declare const isStringInteger: (value: string) => boolean;

package/DateTimePicker/components/NumberPicker/helpers.js

@@ -0,0 +1,5 @@
+export const intVal = value => {
+  const num = parseInt(value, 10);
+  return Number.isNaN(num) ? 0 : num;
+};
+export const isStringInteger = value => /^-?\d+$/.test(value);

package/DateTimePicker/components/NumberPicker/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberPicker';

package/DateTimePicker/components/NumberPicker/index.js

@@ -0,0 +1 @@
+export * from './NumberPicker';

package/DateTimePicker/components/NumberPicker/styles.d.ts

@@ -0,0 +1 @@
+export declare const Hint: import("styled-components").StyledComponent<"div", any, {}, never>;

package/DateTimePicker/components/NumberPicker/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Color, Spacing } from '@pushwoosh/kit-constants';
+export const Hint = styled.div.withConfig({
+  displayName: "Hint",
+  componentId: "sc-170ev2t-0"
+})(["display:flex;align-items:center;font-size:100%;line-height:initial;padding-right:", ";color:", ";pointer-events:none;"], Spacing.S3, Color.PHANTOM);

package/DateTimePicker/components/NumberPicker/types.d.ts

@@ -0,0 +1,13 @@
+export interface NumberPickerProps {
+    value: number;
+    hint?: string;
+    step?: number;
+    placeholder?: string;
+    focusOnMount?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    autoSize?: boolean;
+    isDisabled?: boolean;
+    onChange: (value: number) => void;
+    onSubmit?: () => void;
+}

package/DateTimePicker/components/NumberPicker/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/PickerPlate/PickerPlate.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { PickerPlateProps } from './types';
+export declare function PickerPlate(props: PickerPlateProps): ReactElement;

package/DateTimePicker/components/PickerPlate/PickerPlate.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Vertical, Horizontal } from '@pushwoosh/kit-helpers';
+import { Arrow } from './styles';
+export function PickerPlate(props) {
+  const {
+    slot,
+    children,
+    onPrev,
+    onNext
+  } = props;
+  return React.createElement(Vertical, {
+    "$gap": Spacing.S5
+  }, React.createElement(Horizontal, {
+    "$justifyContent": "space-between"
+  }, slot, React.createElement(Horizontal, {
+    "$gap": Spacing.S1
+  }, React.createElement(Arrow, {
+    direction: "left",
+    onClick: onPrev
+  }), React.createElement(Arrow, {
+    direction: "right",
+    onClick: onNext
+  }))), children);
+}

package/DateTimePicker/components/PickerPlate/index.d.ts

@@ -0,0 +1 @@
+export * from './PickerPlate';

package/DateTimePicker/components/PickerPlate/index.js

@@ -0,0 +1 @@
+export * from './PickerPlate';

package/DateTimePicker/components/PickerPlate/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Arrow: import("styled-components").StyledComponent<import("react").FC<import("@pushwoosh/kit-icons").ArrowIconProps>, any, {
+    size: "medium";
+}, "size">;

package/DateTimePicker/components/PickerPlate/styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { ArrowIcon } from '@pushwoosh/kit-icons';
+export const Arrow = styled(ArrowIcon).attrs({
+  size: 'medium'
+}).withConfig({
+  displayName: "Arrow",
+  componentId: "sc-1icudiw-0"
+})(["color:", ";cursor:pointer;&:hover{color:", ";}"], Color.BRIGHT, Color.BRIGHT_HOVER);

package/DateTimePicker/components/PickerPlate/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PickerPlateProps {
+    slot?: ReactNode;
+    onPrev: () => void;
+    onNext: () => void;
+    children: ReactNode;
+}

package/DateTimePicker/components/PickerPlate/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/YearView/YearView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { YearViewProps } from './types';
+export declare function YearView(props: YearViewProps): ReactElement;

package/DateTimePicker/components/YearView/YearView.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Columns } from '@pushwoosh/kit-helpers';
+import { format, addPeriod, setPeriod, monthName, isSamePeriod } from '../../helpers';
+import { CellBox, DateInfo } from '../../styles';
+import { PickerPlate } from '../PickerPlate';
+export function YearView(props) {
+  const {
+    activeDay,
+    year,
+    onChange,
+    onSelect
+  } = props;
+  return React.createElement(PickerPlate, {
+    onPrev: () => onChange(format(addPeriod(year, 'year', -1), 'year')),
+    onNext: () => onChange(format(addPeriod(year, 'year', 1), 'year')),
+    slot: React.createElement(DateInfo, null, year)
+  }, React.createElement(Columns, {
+    "$sizes": 4,
+    "$gap": Spacing.S1,
+    "$justifyContent": "space-between"
+  }, Array.from({
+    length: 12
+  }).map((_, i) => {
+    const month = format(setPeriod(year, 'month', i + 1), 'year-month');
+    return React.createElement(CellBox, {
+      key: `${year}-${month}`,
+      height: "59px",
+      "$isActive": !!activeDay && isSamePeriod(month, activeDay, 'month'),
+      onClick: () => onSelect(month)
+    }, monthName(i + 1, 'short'));
+  })));
+}

package/DateTimePicker/components/YearView/index.d.ts

@@ -0,0 +1 @@
+export * from './YearView';

package/DateTimePicker/components/YearView/index.js

@@ -0,0 +1 @@
+export * from './YearView';

package/DateTimePicker/components/YearView/types.d.ts

@@ -0,0 +1,6 @@
+export interface YearViewProps {
+    activeDay?: string;
+    year: string;
+    onChange: (year: string) => void;
+    onSelect: (month: string) => void;
+}

package/DateTimePicker/components/YearView/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/constants.d.ts

@@ -0,0 +1,5 @@
+import type { Period } from './types';
+export declare const allPeriods: Period[];
+export declare const periodMethodMap: {
+    [key in Period]: string;
+};

package/DateTimePicker/constants.js

@@ -0,0 +1,9 @@
+export const allPeriods = ['year', 'month', 'day', 'hour', 'minute', 'second'];
+export const periodMethodMap = {
+  second: 'Seconds',
+  minute: 'Minutes',
+  hour: 'Hours',
+  day: 'Date',
+  month: 'Month',
+  year: 'FullYear'
+};

package/DateTimePicker/helpers.d.ts

@@ -0,0 +1,15 @@
+import type { Period, RangeOptions } from './types';
+export declare const parseStringToArray: <T extends string>(datetime: T) => number[];
+export declare const createUTCDate: (year: number, month?: number, day?: number, hour?: number, minute?: number, second?: number) => Date;
+export declare const parseStringToDate: (date: string) => Date;
+export declare const get: (d: string | Date, period: Period) => number;
+export declare const format: (d: string | Date, template: string) => string;
+export declare const addPeriod: <T extends string>(d: T, period: Period, value: number) => Date;
+export declare const setPeriod: <T extends string>(d: T, period: Period, value: number) => Date;
+export declare const differenceInDays: (d1: Date, d2: Date) => number;
+export declare const monthName: (month: number, monthFormat?: "short" | "long") => string;
+export declare const isSamePeriod: (d1: string | Date, d2: string | Date, period: Period) => boolean;
+export declare const firstDayOfWeek: (date: Date) => Date;
+export declare const startOfYear: (date: Date) => Date;
+export declare const endOfYear: (date: Date) => Date;
+export declare const isInRange: (options: RangeOptions) => boolean;

package/DateTimePicker/helpers.js

@@ -0,0 +1,79 @@
+import { allPeriods, periodMethodMap } from './constants';
+export const parseStringToArray = datetime => datetime.split(/[\s-T:]/).map(Number);
+export const createUTCDate = (year, month = 1, day = 1, hour = 0, minute = 0, second = 0) => new Date(Date.UTC(year, month - 1, day, hour, minute, second));
+export const parseStringToDate = date => {
+  const args = parseStringToArray(date);
+  return createUTCDate(...args);
+};
+export const get = (d, period) => {
+  const date = d instanceof Date ? d : parseStringToDate(d);
+  const value = date[`getUTC${periodMethodMap[period]}`]();
+  return period === 'month' ? value + 1 : value;
+};
+const padStart = value => `${value}`.padStart(2, '0');
+export const format = (d, template) => {
+  const date = d instanceof Date ? d : parseStringToDate(d);
+  return template.replace(/[a-z]+/g, match => padStart(get(date, match)));
+};
+export const addPeriod = (d, period, value) => {
+  const date = parseStringToDate(d);
+  const method = periodMethodMap[period];
+  date[`setUTC${method}`](date[`getUTC${method}`]() + value);
+  return date;
+};
+export const setPeriod = (d, period, value) => {
+  const date = parseStringToDate(d);
+  const method = periodMethodMap[period];
+  date[`setUTC${method}`](period === 'month' ? value - 1 : value);
+  return date;
+};
+export const differenceInDays = (d1, d2) => {
+  const diff = d1.getTime() - d2.getTime();
+  return Math.floor(diff / (1000 * 3600 * 24));
+};
+export const monthName = (month, monthFormat = 'long') => {
+  const date = new Date(2023, month - 1, 1);
+  return date.toLocaleString('default', {
+    month: monthFormat
+  });
+};
+export const isSamePeriod = (d1, d2, period) => {
+  const date1 = d1 instanceof Date ? d1 : parseStringToDate(d1);
+  const date2 = d2 instanceof Date ? d2 : parseStringToDate(d2);
+  const periodIdx = allPeriods.indexOf(period);
+  for (let i = 0; i <= periodIdx; i += 1) {
+    const method = `getUTC${periodMethodMap[allPeriods[i]]}`;
+    if (date1[method]() !== date2[method]()) {
+      return false;
+    }
+  }
+  return true;
+};
+export const firstDayOfWeek = date => {
+  const d = new Date(date);
+  const day = d.getUTCDay();
+  const diff = d.getUTCDate() - day + (day === 0 ? -6 : 1);
+  d.setUTCDate(diff);
+  return d;
+};
+export const startOfYear = date => new Date(date.getFullYear(), 0, 1, 0, 0, 0, 0);
+export const endOfYear = date => new Date(date.getFullYear(), 11, 31, 23, 59, 59, 999);
+export const isInRange = options => {
+  const {
+    value,
+    minDate,
+    maxDate
+  } = options;
+  let result = false;
+  if (minDate) {
+    if (value.getTime() < minDate.getTime()) {
+      result = true;
+    }
+  }
+  if (maxDate) {
+    if (value.getTime() > maxDate.getTime()) {
+      result = true;
+    }
+  }
+  return result;
+};

package/DateTimePicker/index.d.ts

@@ -0,0 +1,4 @@
+export { DatePicker } from './components/DatePicker';
+export { DatePickerField } from './components/DatePickerField';
+export { DateTimePicker } from './components/DateTimePicker';
+export { DateTimePickerField } from './components/DateTimePickerField';

package/DateTimePicker/index.js

@@ -0,0 +1,4 @@
+export { DatePicker } from './components/DatePicker';
+export { DatePickerField } from './components/DatePickerField';
+export { DateTimePicker } from './components/DateTimePicker';
+export { DateTimePickerField } from './components/DateTimePickerField';

package/DateTimePicker/styles.d.ts

@@ -0,0 +1,67 @@
+export declare const CellBox: import("styled-components").StyledComponent<"div", any, {
+    $isActive?: boolean;
+    $isDisabled?: boolean;
+    $secondary?: boolean;
+    $secondActive?: boolean;
+    height?: number | string;
+}, never>;
+export declare const DayHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DateInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RoundedBlock: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignItems: string;
+    $padding: string;
+}, "$gridAutoFlow" | "$alignItems" | "$padding">;
+export declare const InputFrame: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignItems: string;
+    $padding: string;
+} & {
+    $empty?: boolean;
+    $error?: boolean;
+}, "$gridAutoFlow" | "$alignItems" | "$padding">;
+export declare const SingleInputFrame: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignItems: string;
+    $padding: string;
+} & {
+    $empty?: boolean;
+    $error?: boolean;
+} & {
+    $hasHint: boolean;
+    $isDisabled?: boolean;
+}, "$gridAutoFlow" | "$alignItems" | "$padding">;
+export declare const CalendarBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/DateTimePicker/styles.js

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components';
+import { Color, Spacing, ShapeRadius, FontSize, FontWeight, LineHeight, Shadow } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+const disabled = css(["border:1px solid ", ";background:linear-gradient( to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) calc(50% - 0.8px),", " 50%,rgba(0,0,0,0) calc(50% + 0.8px),rgba(0,0,0,0) 100% );opacity:0.8;pointer-events:none;"], Color.FORM, Color.FORM);
+const CalendarCellBaseStyled = styled.div.withConfig({
+  displayName: "CalendarCellBaseStyled",
+  componentId: "sc-t3ruuk-0"
+})(["display:flex;justify-content:center;align-items:center;"]);
+export const CellBox = styled(CalendarCellBaseStyled).withConfig({
+  displayName: "CellBox",
+  componentId: "sc-t3ruuk-1"
+})(["height:", ";color:", ";background-color:", ";border-radius:", ";opacity:", ";outline:", ";cursor:pointer;", " &:hover{background-color:", ";}"], ({
+  height
+}) => height || '32px', ({
+  $isActive
+}) => $isActive ? Color.CLEAR : Color.MAIN, ({
+  $isActive
+}) => $isActive ? Color.BRIGHT : Color.CLEAR, ShapeRadius.CONTROL, ({
+  $secondary
+}) => $secondary ? 0.8 : 1, ({
+  $isActive,
+  $secondActive
+}) => $secondActive && !$isActive ? '1px solid #00a2ff5a' : 'none', ({
+  $isDisabled
+}) => $isDisabled && disabled, ({
+  $isActive
+}) => $isActive ? Color.BRIGHT_HOVER : Color.SOFT_LIGHT);
+export const DayHeader = styled(CalendarCellBaseStyled).withConfig({
+  displayName: "DayHeader",
+  componentId: "sc-t3ruuk-2"
+})(["height:32px;color:", ";font-weight:", ";font-size:", ";line-height:", ";"], Color.LOCKED, FontWeight.REGULAR, FontSize.SMALL, LineHeight.SMALL);
+export const DateInfo = styled.div.withConfig({
+  displayName: "DateInfo",
+  componentId: "sc-t3ruuk-3"
+})(["display:flex;align-items:center;height:24px;color:", ";background:", ";padding:", " ", ";font-weight:", ";font-size:", ";line-height:", ";border-radius:", ";cursor:pointer;"], Color.MAIN, Color.SOFT_LIGHT, Spacing.S0, Spacing.S3, FontWeight.MEDIUM, FontSize.SMALL, LineHeight.SMALL, ShapeRadius.CONTROL);
+export const RoundedBlock = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $padding: '0 12px'
+}).withConfig({
+  displayName: "RoundedBlock",
+  componentId: "sc-t3ruuk-4"
+})(["display:inline-grid;height:36px;border-radius:", ";"], ShapeRadius.CONTROL);
+export const InputFrame = styled(RoundedBlock).withConfig({
+  displayName: "InputFrame",
+  componentId: "sc-t3ruuk-5"
+})(["position:relative;color:", ";border:1px solid ", ";box-sizing:border-box;cursor:pointer;&:focus-within{border-color:", ";}& > input{color:#4b5057;height:34px;border:none;padding:0;outline:none;line-height:140%;}"], ({
+  $empty
+}) => $empty ? Color.BRIGHT : Color.MAIN, ({
+  $error
+}) => $error ? '#ff0000' : Color.FORM, Color.BRIGHT);
+export const SingleInputFrame = styled(InputFrame).withConfig({
+  displayName: "SingleInputFrame",
+  componentId: "sc-t3ruuk-6"
+})(["grid-template-columns:", ";padding-right:0;background-color:", ";pointer-events:", ";& > div:last-of-type{height:34px;padding-left:1px;background-color:", ";border-radius:0 ", " ", " 0;& > div{display:flex;justify-content:center;align-items:center;color:black;background-color:", ";cursor:pointer;&:hover > *{transform:scale(1.3);}&:first-of-type{border-top-right-radius:", ";}&:last-of-type{border-bottom-right-radius:", ";}}}"], ({
+  $hasHint
+}) => $hasHint ? '1fr max-content 21px' : '1fr 21px', ({
+  $isDisabled
+}) => $isDisabled ? Color.FROZEN : Color.CLEAR, ({
+  $isDisabled
+}) => $isDisabled ? 'none' : 'auto', Color.FORM, ShapeRadius.CONTROL, ShapeRadius.CONTROL, Color.FROZEN, ShapeRadius.CONTROL, ShapeRadius.CONTROL);
+export const CalendarBox = styled.div.withConfig({
+  displayName: "CalendarBox",
+  componentId: "sc-t3ruuk-7"
+})(["width:282px;background-color:", ";padding:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";box-sizing:border-box;z-index:1;"], Color.CLEAR, Spacing.S5, Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR);

package/DateTimePicker/types.d.ts

@@ -0,0 +1,6 @@
+export type Period = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+export type RangeOptions = {
+    value: Date;
+    minDate?: Date;
+    maxDate?: Date;
+};

package/DateTimePicker/types.js

@@ -0,0 +1 @@
+export {};

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -6,6 +6,7 @@ const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end']
 export const DropdownMenu = ({
   renderHandler,
   children,
+  isScrollable,
   menuZIndex,
   menuPlacement
 }) => {
@@ -41,6 +42,7 @@ export const DropdownMenu = ({
   }), isOpen && React.createElement(Place, {
     ref: refs.setFloating,
     style: floatingStyles,
+    "$scrollable": isScrollable,
     "$zIndex": menuZIndex
   }, typeof children === 'function' ? children() : children));
 };