@pushwoosh/dumb-components 2.12.2 → 3.0.1

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js

@@ -1,91 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useFloating, offset, autoPlacement } from '@floating-ui/react-dom';
-import { useState, useEffect } from 'react';
-import { CalendarIcon } from '@pushwoosh/kit-icons';
-import { useUTCDate } from './helpers';
-import { Lang } from '../../polyglot';
-import { InputFrame } from '../../styles';
-import { DateTimePicker } from '../DateTimePicker';
-/**
- * Read-only field showing the selected date-time that opens a {@link DateTimePicker} popover on click.
- *
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
- */
-export function DateTimePickerField(props) {
-  const {
-    value,
-    minDate,
-    maxDate,
-    error,
-    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-    zIndex = 1000,
-    closeOnSelect = false,
-    onChange
-  } = props;
-  const [showPicker, setShowPicker] = useState(false);
-  const {
-    refs,
-    floatingStyles
-  } = useFloating({
-    middleware: [offset(4), autoPlacement({
-      allowedPlacements
-    })]
-  });
-  useEffect(() => {
-    if (!showPicker) {
-      return;
-    }
-    const handleClickListener = event => {
-      const path = event.composedPath();
-      const isInsideFloating = refs.floating.current && path.includes(refs.floating.current);
-      const isInsideReference = refs.reference.current && path.includes(refs.reference.current);
-      if (!isInsideFloating && !isInsideReference) {
-        setShowPicker(false);
-      }
-    };
-    document.addEventListener('click', handleClickListener);
-    return () => {
-      document.removeEventListener('click', handleClickListener);
-    };
-  }, [showPicker, refs]);
-  const onSelect = date => {
-    onChange(date);
-    if (closeOnSelect) {
-      setShowPicker(false);
-    }
-  };
-  const {
-    year,
-    month,
-    day,
-    hours,
-    minutes
-  } = useUTCDate(value);
-  return _jsxs(_Fragment, {
-    children: [_jsxs(InputFrame, {
-      ref: refs.setReference,
-      "$empty": !value,
-      "$error": error,
-      "$gap": 8,
-      onClick: () => setShowPicker(!showPicker),
-      children: [_jsx(CalendarIcon, {
-        size: "medium",
-        view: "lined"
-      }), value ? `${day} ${month} ${year} ${hours}:${minutes}` : _jsx(Lang, {
-        message: "DUMB.DATE_TIME_PICKER.SELECT_DATE_TIME"
-      })]
-    }), showPicker && _jsx("div", {
-      ref: refs.setFloating,
-      style: {
-        ...floatingStyles,
-        zIndex
-      },
-      children: _jsx(DateTimePicker, {
-        value: value,
-        minDate: minDate,
-        maxDate: maxDate,
-        onChange: onSelect
-      })
-    })]
-  });
-}

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

@@ -1,8 +0,0 @@
-export declare const useUTCDate: (dateString: string) => {
-    year: number;
-    month: string;
-    day: string;
-    hours: string;
-    minutes: string;
-    seconds: string;
-};

package/DateTimePicker/components/DateTimePickerField/helpers.js

@@ -1,13 +0,0 @@
-export const useUTCDate = dateString => {
-  const date = new Date(dateString);
-  return {
-    year: date.getUTCFullYear(),
-    month: date.toLocaleString('en-US', {
-      month: 'long'
-    }),
-    day: String(date.getUTCDate()).padStart(2, '0'),
-    hours: String(date.getUTCHours()).padStart(2, '0'),
-    minutes: String(date.getUTCMinutes()).padStart(2, '0'),
-    seconds: String(date.getUTCSeconds()).padStart(2, '0')
-  };
-};

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

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

package/DateTimePicker/components/DateTimePickerField/index.js

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

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

@@ -1,20 +0,0 @@
-import type { Placement } from '@floating-ui/react-dom';
-/** Props of {@link DateTimePickerField}. */
-export interface DateTimePickerFieldProps {
-    /** Currently selected date-time string. */
-    value: string;
-    /** Earliest selectable date. */
-    minDate?: Date | string;
-    /** Latest selectable date. */
-    maxDate?: Date | string;
-    /** Render the field in the error state. */
-    error?: boolean;
-    /** Allowed floating placements for the popover (default bottom/top start/end). */
-    allowedPlacements?: Placement[];
-    /** Popover z-index (default `1000`). */
-    zIndex?: number;
-    /** Close the popover when a value is picked (default `false`). */
-    closeOnSelect?: boolean;
-    /** Fires with the picked date-time string. */
-    onChange: (day: string) => void;
-}

package/DateTimePicker/components/DateTimePickerField/types.js

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

package/DateTimePicker/components/DecadeView/DecadeView.d.ts

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

package/DateTimePicker/components/DecadeView/DecadeView.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Columns } from '@pushwoosh/kit-helpers';
-import { format, parseStringToArray, addPeriod, setPeriod } from '../../helpers';
-import { CellBox } from '../../styles';
-import { PickerPlate } from '../PickerPlate';
-export function DecadeView(props) {
-  const {
-    activeDay,
-    value,
-    onChange,
-    onSelect
-  } = props;
-  const [activeDayYear] = parseStringToArray(activeDay || '');
-  const valueYear = +value;
-  const firstYear = valueYear - valueYear % 12;
-  return _jsx(PickerPlate, {
-    onPrev: () => onChange(format(addPeriod(value, 'year', -12), 'year')),
-    onNext: () => onChange(format(addPeriod(value, 'year', 12), 'year')),
-    children: _jsx(Columns, {
-      "$sizes": 4,
-      "$gap": 4,
-      children: Array.from({
-        length: 12
-      }).map((_, i) => {
-        const year = firstYear + i;
-        return _jsx(CellBox, {
-          "$height": "59px",
-          "$isActive": year === activeDayYear,
-          onClick: () => onSelect(format(setPeriod(value, 'year', year), 'year')),
-          children: year
-        }, year);
-      })
-    })
-  });
-}

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

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

package/DateTimePicker/components/DecadeView/index.js

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

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

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

package/DateTimePicker/components/DecadeView/types.js

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

package/DateTimePicker/components/Input/Input.d.ts

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

package/DateTimePicker/components/Input/Input.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { InputStyled } from './styles';
-export function Input(props) {
-  const {
-    width,
-    isDisabled,
-    ...rest
-  } = props;
-  return _jsx(InputStyled, {
-    type: "text",
-    disabled: isDisabled,
-    style: {
-      width: width || '100%'
-    },
-    ...rest
-  });
-}

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

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

package/DateTimePicker/components/Input/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const InputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;

package/DateTimePicker/components/Input/styles.js

@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-import { Color } from '@pushwoosh/kit-constants';
-export const InputStyled = styled.input.withConfig({
-  displayName: "InputStyled",
-  componentId: "sc-17gtn04-0"
-})(["color:", ";-webkit-text-fill-color:", ";background-color:transparent;&::placeholder{color:", ";-webkit-text-fill-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}"], Color.MAIN, Color.MAIN, Color.PHANTOM, Color.PHANTOM, Color.FROZEN, Color.LOCKED);

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

@@ -1,11 +0,0 @@
-import type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
-export interface InputProps {
-    value: string;
-    width?: number;
-    placeholder?: string;
-    isDisabled?: boolean;
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
-    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-}

package/DateTimePicker/components/Input/types.js

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

package/DateTimePicker/components/Month/Month.d.ts

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

package/DateTimePicker/components/Month/Month.js

@@ -1,78 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Columns } from '@pushwoosh/kit-helpers';
-import { format, firstDayOfWeek, parseStringToDate, differenceInDays, isSamePeriod, isInRange } from '../../helpers';
-import { Lang } from '../../polyglot';
-import { CellBox, DayHeader } from '../../styles';
-export function Month(props) {
-  const {
-    month,
-    activeDay,
-    userInputDay,
-    minDate,
-    maxDate,
-    onDaySelect
-  } = props;
-  const [firstDayDate, days] = useMemo(() => {
-    const monthDate = parseStringToDate(month);
-    const firstDayOfMonth = new Date(monthDate);
-    firstDayOfMonth.setUTCDate(1);
-    const lastDayOfMonth = new Date(month);
-    lastDayOfMonth.setUTCMonth(lastDayOfMonth.getUTCMonth() + 1);
-    lastDayOfMonth.setUTCDate(0);
-    const firstDayOfFirstWeek = firstDayOfWeek(firstDayOfMonth);
-    const firstDayOfLastWeek = firstDayOfWeek(lastDayOfMonth);
-    const daysInCalendar = differenceInDays(firstDayOfLastWeek, firstDayOfFirstWeek) + 7;
-    return [firstDayOfFirstWeek, daysInCalendar];
-  }, [month]);
-  return _jsxs(Columns, {
-    "$sizes": 7,
-    "$gap": 4,
-    children: [_jsx(DayHeader, {
-      children: _jsx(Lang, {
-        message: "DUMB.DATE_TIME_PICKER.WEEKDAY_SUN"
-      })
-    }), _jsx(DayHeader, {
-      children: _jsx(Lang, {
-        message: "DUMB.DATE_TIME_PICKER.WEEKDAY_MON"
-      })
-    }), _jsx(DayHeader, {
-      children: _jsx(Lang, {
-        message: "DUMB.DATE_TIME_PICKER.WEEKDAY_TUE"
-      })
-    }), _jsx(DayHeader, {
-      children: _jsx(Lang, {
-        message: "DUMB.DATE_TIME_PICKER.WEEKDAY_WED"
-      })
-    }), _jsx(DayHeader, {
-      children: _jsx(Lang, {
-        message: "DUMB.DATE_TIME_PICKER.WEEKDAY_THU"
-      })
-    }), _jsx(DayHeader, {
-      children: _jsx(Lang, {
-        message: "DUMB.DATE_TIME_PICKER.WEEKDAY_FRI"
-      })
-    }), _jsx(DayHeader, {
-      children: _jsx(Lang, {
-        message: "DUMB.DATE_TIME_PICKER.WEEKDAY_SAT"
-      })
-    }), Array.from({
-      length: days
-    }).map((_, i) => {
-      const curDay = new Date(Date.UTC(firstDayDate.getUTCFullYear(), firstDayDate.getUTCMonth(), firstDayDate.getUTCDate() + i));
-      const isDisabled = isInRange({
-        value: curDay,
-        minDate: minDate,
-        maxDate: maxDate
-      });
-      return _jsx(CellBox, {
-        "$isActive": !!activeDay && isSamePeriod(curDay, activeDay, 'day'),
-        "$isDisabled": isDisabled,
-        "$secondary": !isSamePeriod(month, curDay, 'month'),
-        "$secondActive": !!userInputDay && isSamePeriod(curDay, userInputDay, 'day'),
-        onClick: () => onDaySelect(format(curDay, 'year-month-day')),
-        children: curDay.getUTCDate()
-      }, `${curDay}`);
-    })]
-  });
-}

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

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

package/DateTimePicker/components/Month/index.js

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

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

@@ -1,8 +0,0 @@
-export interface MonthProps {
-    month: string;
-    activeDay?: string;
-    userInputDay?: string;
-    minDate?: Date | string;
-    maxDate?: Date | string;
-    onDaySelect: (day: string) => void;
-}

package/DateTimePicker/components/Month/types.js

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

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

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

package/DateTimePicker/components/MonthView/MonthView.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 _jsx(PickerPlate, {
-    onPrev: () => onChange(format(addPeriod(month, 'month', -1), 'year-month')),
-    onNext: () => onChange(format(addPeriod(month, 'month', 1), 'year-month')),
-    slot: _jsxs(Horizontal, {
-      "$gap": 4,
-      children: [_jsx(DateInfo, {
-        onClick: onShowYear,
-        children: monthName(+format(month, 'month'))
-      }), _jsx(DateInfo, {
-        onClick: onShowDecade,
-        children: format(month, 'year')
-      })]
-    }),
-    children: _jsx(Month, {
-      month: month,
-      activeDay: activeDay,
-      userInputDay: userInputDay,
-      minDate: minDate,
-      maxDate: maxDate,
-      onDaySelect: onDaySelect
-    })
-  });
-}

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

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

package/DateTimePicker/components/MonthView/index.js

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

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

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

package/DateTimePicker/components/MonthView/types.js

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

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

@@ -1,3 +0,0 @@
-import { type ReactElement } from 'react';
-import type { NumberPickerProps } from './types';
-export declare function NumberPicker({ value, hint, step, placeholder, focusOnMount, minValue, maxValue, autoSize, isDisabled, onChange, onSubmit, }: NumberPickerProps): ReactElement;

package/DateTimePicker/components/NumberPicker/NumberPicker.js

@@ -1,133 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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({
-  value,
-  hint,
-  step = 1,
-  placeholder,
-  focusOnMount,
-  minValue,
-  maxValue,
-  autoSize,
-  isDisabled,
-  onChange,
-  onSubmit
-}) {
-  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 _jsxs(SingleInputFrame, {
-    ref: ref,
-    "$hasHint": !!hint,
-    "$isDisabled": isDisabled,
-    children: [_jsx(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 && _jsx(Hint, {
-      children: hint
-    }), _jsxs(Vertical, {
-      "$gap": 1,
-      children: [_jsx("div", {
-        children: _jsx(ChevronIcon, {
-          direction: "up",
-          size: "small",
-          "aria-disabled": "true",
-          onClick: () => onChangeDiff(step),
-          onMouseDown: () => setAutoDiff(step),
-          onMouseUp: resetAutoDiff,
-          onMouseLeave: resetAutoDiff
-        })
-      }), _jsx("div", {
-        children: _jsx(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

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

package/DateTimePicker/components/NumberPicker/helpers.js

@@ -1,5 +0,0 @@
-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

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

package/DateTimePicker/components/NumberPicker/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const Hint: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;

package/DateTimePicker/components/NumberPicker/styles.js

@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-import { Color } 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:8px;color:", ";pointer-events:none;"], Color.PHANTOM);

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

@@ -1,13 +0,0 @@
-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

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

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

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

package/DateTimePicker/components/PickerPlate/PickerPlate.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Vertical, Horizontal } from '@pushwoosh/kit-helpers';
-import { Arrow } from './styles';
-export function PickerPlate(props) {
-  const {
-    slot,
-    children,
-    onPrev,
-    onNext
-  } = props;
-  return _jsxs(Vertical, {
-    "$gap": 16,
-    children: [_jsxs(Horizontal, {
-      "$justifyContent": "space-between",
-      children: [slot, _jsxs(Horizontal, {
-        "$gap": 4,
-        children: [_jsx(Arrow, {
-          direction: "left",
-          onClick: onPrev
-        }), _jsx(Arrow, {
-          direction: "right",
-          onClick: onNext
-        })]
-      })]
-    }), children]
-  });
-}