@pushwoosh/dumb-components 1.1.134 → 1.1.136

package/CrashScreen/polyglot/types.js

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

package/DateTimePicker/components/AutosizeInput/AutosizeInput.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
 import { Input } from '../Input';
 import { Hidden } from './styles';
 export function AutosizeInput(props) {
@@ -20,16 +21,19 @@ export function AutosizeInput(props) {
     const addWidth = offsetWidth ? 12 : 16;
     setWidth(offsetWidth + addWidth);
   }, [value]);
-  return React.createElement(React.Fragment, null, React.createElement(Input, {
-    value: value,
-    placeholder: placeholder,
-    width: width,
-    isDisabled: isDisabled,
-    onChange: onChange,
-    onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
-    onBlur: onBlur
-  }), React.createElement(Hidden, {
-    ref: ref
-  }, value || placeholder));
+  return _jsxs(_Fragment, {
+    children: [_jsx(Input, {
+      value: value,
+      placeholder: placeholder,
+      width: width,
+      isDisabled: isDisabled,
+      onChange: onChange,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown,
+      onBlur: onBlur
+    }), _jsx(Hidden, {
+      ref: ref,
+      children: value || placeholder
+    })]
+  });
 }

package/DateTimePicker/components/DatePicker/DatePicker.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { format } from '../../helpers';
 import { CalendarBox } from '../../styles';
@@ -23,35 +24,37 @@ export function DatePicker(props) {
       setView('month');
     }
   }, [userInputDay]);
-  return React.createElement(CalendarBox, {
-    "$disabled": isDisabled
-  }, view === 'month' && React.createElement(Vertical, {
-    "$gap": 16
-  }, React.createElement(MonthView, {
-    month: month,
-    activeDay: value ? format(value, 'year-month-day') : undefined,
-    userInputDay: userInputDay,
-    minDate: minDate,
-    maxDate: maxDate,
-    onChange: setMonth,
-    onDaySelect: onChange,
-    onShowYear: () => setView('year'),
-    onShowDecade: () => setView('decade')
-  }), slotAfterMonth && slotAfterMonth()), view === 'year' && React.createElement(YearView, {
-    year: format(month, 'year'),
-    activeDay: value ? format(value, 'year-month-day') : undefined,
-    onChange: setMonth,
-    onSelect: newMon => {
-      setMonth(newMon);
-      setView('month');
-    }
-  }), view === 'decade' && React.createElement(DecadeView, {
-    value: format(month, 'year'),
-    activeDay: value ? format(value, 'year-month-day') : undefined,
-    onChange: setMonth,
-    onSelect: newYear => {
-      setMonth(newYear);
-      setView('year');
-    }
-  }));
+  return _jsxs(CalendarBox, {
+    "$disabled": isDisabled,
+    children: [view === 'month' && _jsxs(Vertical, {
+      "$gap": 16,
+      children: [_jsx(MonthView, {
+        month: month,
+        activeDay: value ? format(value, 'year-month-day') : undefined,
+        userInputDay: userInputDay,
+        minDate: minDate,
+        maxDate: maxDate,
+        onChange: setMonth,
+        onDaySelect: onChange,
+        onShowYear: () => setView('year'),
+        onShowDecade: () => setView('decade')
+      }), slotAfterMonth && slotAfterMonth()]
+    }), view === 'year' && _jsx(YearView, {
+      year: format(month, 'year'),
+      activeDay: value ? format(value, 'year-month-day') : undefined,
+      onChange: setMonth,
+      onSelect: newMon => {
+        setMonth(newMon);
+        setView('month');
+      }
+    }), view === 'decade' && _jsx(DecadeView, {
+      value: format(month, 'year'),
+      activeDay: value ? format(value, 'year-month-day') : undefined,
+      onChange: setMonth,
+      onSelect: newYear => {
+        setMonth(newYear);
+        setView('year');
+      }
+    })]
+  });
 }

package/DateTimePicker/components/DatePickerField/DatePickerField.js

@@ -1,7 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFloating, offset, autoPlacement } from '@floating-ui/react-dom';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { format, monthName, get } from '../../helpers';
+import { Lang } from '../../polyglot';
 import { InputFrame } from '../../styles';
 import { DatePicker } from '../DatePicker';
 export function DatePickerField(props) {
@@ -47,25 +49,33 @@ export function DatePickerField(props) {
       setShowPicker(false);
     }
   };
-  return React.createElement(React.Fragment, null, React.createElement(InputFrame, {
-    ref: refs.setReference,
-    "$gap": 8,
-    "$error": error,
-    "$empty": !value,
-    onClick: () => setShowPicker(!showPicker)
-  }, React.createElement(CalendarIcon, {
-    size: "medium",
-    view: "lined"
-  }), value ? React.createElement(React.Fragment, null, format(value, 'day '), monthName(get(value, 'month'), 'long'), format(value, ' year')) : 'Select date'), showPicker && React.createElement("div", {
-    ref: refs.setFloating,
-    style: {
-      ...floatingStyles,
-      zIndex
-    }
-  }, React.createElement(DatePicker, {
-    value: value,
-    minDate: minDate,
-    maxDate: maxDate,
-    onChange: onSelect
-  })));
+  return _jsxs(_Fragment, {
+    children: [_jsxs(InputFrame, {
+      ref: refs.setReference,
+      "$gap": 8,
+      "$error": error,
+      "$empty": !value,
+      onClick: () => setShowPicker(!showPicker),
+      children: [_jsx(CalendarIcon, {
+        size: "medium",
+        view: "lined"
+      }), value ? _jsxs(_Fragment, {
+        children: [format(value, 'day '), monthName(get(value, 'month'), 'long'), format(value, ' year')]
+      }) : _jsx(Lang, {
+        message: "DUMB.DATE_TIME_PICKER.SELECT_DATE"
+      })]
+    }), showPicker && _jsx("div", {
+      ref: refs.setFloating,
+      style: {
+        ...floatingStyles,
+        zIndex
+      },
+      children: _jsx(DatePicker, {
+        value: value,
+        minDate: minDate,
+        maxDate: maxDate,
+        onChange: onSelect
+      })
+    })]
+  });
 }

package/DateTimePicker/components/DateTimePicker/DateTimePicker.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapse, Horizontal } from '@pushwoosh/kit-helpers';
 import { format, createUTCDate } from '../../helpers';
 import { DatePicker } from '../DatePicker';
@@ -29,29 +29,31 @@ export function DateTimePicker(props) {
     date.setUTCSeconds(seconds);
     onChange(date.toUTCString());
   };
-  return React.createElement(DatePicker, {
+  return _jsx(DatePicker, {
     value: format(date, 'year-month-dayThour:minute:second'),
     userInputDay: userInputDay,
     minDate: minDate,
     maxDate: maxDate,
     onChange: handleChange,
-    slotAfterMonth: () => React.createElement(Collapse, {
-      expanded: !!value
-    }, React.createElement(Horizontal, {
-      "$padding": "0 16px",
-      "$gap": 8
-    }, React.createElement(NumberPicker, {
-      placeholder: "00",
-      value: date.getUTCHours(),
-      onChange: handleChangeHour
-    }), React.createElement(NumberPicker, {
-      placeholder: "00",
-      value: date.getUTCMinutes(),
-      onChange: handleChangeMinutes
-    }), React.createElement(NumberPicker, {
-      placeholder: "00",
-      value: date.getUTCSeconds(),
-      onChange: handleChangeSeconds
-    })))
+    slotAfterMonth: () => _jsx(Collapse, {
+      expanded: !!value,
+      children: _jsxs(Horizontal, {
+        "$padding": "0 16px",
+        "$gap": 8,
+        children: [_jsx(NumberPicker, {
+          placeholder: "00",
+          value: date.getUTCHours(),
+          onChange: handleChangeHour
+        }), _jsx(NumberPicker, {
+          placeholder: "00",
+          value: date.getUTCMinutes(),
+          onChange: handleChangeMinutes
+        }), _jsx(NumberPicker, {
+          placeholder: "00",
+          value: date.getUTCSeconds(),
+          onChange: handleChangeSeconds
+        })]
+      })
+    })
   });
 }

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js

@@ -1,7 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFloating, offset, autoPlacement } from '@floating-ui/react-dom';
-import React, { useState, useEffect } from 'react';
+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';
 export function DateTimePickerField(props) {
@@ -54,25 +56,31 @@ export function DateTimePickerField(props) {
     hours,
     minutes
   } = useUTCDate(value);
-  return React.createElement(React.Fragment, null, React.createElement(InputFrame, {
-    ref: refs.setReference,
-    "$empty": !value,
-    "$error": error,
-    "$gap": 8,
-    onClick: () => setShowPicker(!showPicker)
-  }, React.createElement(CalendarIcon, {
-    size: "medium",
-    view: "lined"
-  }), value ? `${day} ${month} ${year} ${hours}:${minutes}` : 'Select date and time'), showPicker && React.createElement("div", {
-    ref: refs.setFloating,
-    style: {
-      ...floatingStyles,
-      zIndex
-    }
-  }, React.createElement(DateTimePicker, {
-    value: value,
-    minDate: minDate,
-    maxDate: maxDate,
-    onChange: onSelect
-  })));
+  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/DecadeView/DecadeView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+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';
@@ -13,21 +13,23 @@ export function DecadeView(props) {
   const [activeDayYear] = parseStringToArray(activeDay || '');
   const valueYear = +value;
   const firstYear = valueYear - valueYear % 12;
-  return React.createElement(PickerPlate, {
+  return _jsx(PickerPlate, {
     onPrev: () => onChange(format(addPeriod(value, 'year', -12), 'year')),
-    onNext: () => onChange(format(addPeriod(value, 'year', 12), 'year'))
-  }, React.createElement(Columns, {
-    "$sizes": 4,
-    "$gap": 4
-  }, Array.from({
-    length: 12
-  }).map((_, i) => {
-    const year = firstYear + i;
-    return React.createElement(CellBox, {
-      key: year,
-      height: "59px",
-      "$isActive": year === activeDayYear,
-      onClick: () => onSelect(format(setPeriod(value, 'year', year), 'year'))
-    }, 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/Input/Input.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { InputStyled } from './styles';
 export function Input(props) {
   const {
@@ -6,7 +6,7 @@ export function Input(props) {
     isDisabled,
     ...rest
   } = props;
-  return React.createElement(InputStyled, {
+  return _jsx(InputStyled, {
     type: "text",
     disabled: isDisabled,
     style: {

package/DateTimePicker/components/Month/Month.js

@@ -1,6 +1,8 @@
-import React, { useMemo } from 'react';
+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 {
@@ -23,25 +25,54 @@ export function Month(props) {
     const daysInCalendar = differenceInDays(firstDayOfLastWeek, firstDayOfFirstWeek) + 7;
     return [firstDayOfFirstWeek, daysInCalendar];
   }, [month]);
-  return React.createElement(Columns, {
+  return _jsxs(Columns, {
     "$sizes": 7,
-    "$gap": 4
-  }, React.createElement(DayHeader, null, "Sun"), React.createElement(DayHeader, null, "Mon"), React.createElement(DayHeader, null, "Tue"), React.createElement(DayHeader, null, "Wed"), React.createElement(DayHeader, null, "Thu"), React.createElement(DayHeader, null, "Fri"), React.createElement(DayHeader, null, "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 React.createElement(CellBox, {
-      key: `${curDay}`,
-      "$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'))
-    }, curDay.getUTCDate());
-  }));
+    "$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/MonthView/MonthView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+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';
@@ -16,22 +16,26 @@ export function MonthView(props) {
     onShowDecade,
     onChange
   } = props;
-  return React.createElement(PickerPlate, {
+  return _jsx(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
-  }));
+    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/NumberPicker/NumberPicker.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
+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';
@@ -79,46 +80,54 @@ export function NumberPicker({
   };
   const resetAutoDiff = () => setAutoDiff(0);
   const InputComponent = autoSize ? AutosizeInput : Input;
-  return React.createElement(SingleInputFrame, {
+  return _jsxs(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;
+    "$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());
       }
-      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
-  }))));
+    }), 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/PickerPlate/PickerPlate.js

@@ -1,4 +1,4 @@
-import React from 'react';
+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) {
@@ -8,17 +8,20 @@ export function PickerPlate(props) {
     onPrev,
     onNext
   } = props;
-  return React.createElement(Vertical, {
-    "$gap": 16
-  }, React.createElement(Horizontal, {
-    "$justifyContent": "space-between"
-  }, slot, React.createElement(Horizontal, {
-    "$gap": 4
-  }, React.createElement(Arrow, {
-    direction: "left",
-    onClick: onPrev
-  }), React.createElement(Arrow, {
-    direction: "right",
-    onClick: onNext
-  }))), children);
+  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]
+  });
 }