@onesy/ui-react 1.0.131 → 1.0.132

package/Transitions/Transitions.js

@@ -197,9 +197,9 @@ const Transitions = props_ => {
           children_ = [/*#__PURE__*/_react.default.cloneElement(children__, _objectSpread({
             in: true,
             onEntered: () => {
-              var _children__$props9, _children__$props10;
+              var _children__$props9, _children__$props0;
               if (refs.status.current === 'entered') return;
-              if ((_children__$props9 = children__.props) !== null && _children__$props9 !== void 0 && _children__$props9.onEntered) (_children__$props10 = children__.props) === null || _children__$props10 === void 0 || _children__$props10.onEntered();
+              if ((_children__$props9 = children__.props) !== null && _children__$props9 !== void 0 && _children__$props9.onEntered) (_children__$props0 = children__.props) === null || _children__$props0 === void 0 || _children__$props0.onEntered();
               setElement(/*#__PURE__*/_react.default.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, _objectSpread({
                 in: true
               }, other)));

package/Tree/Tree.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IElement, IPropsAny, IElementReference, IVersion } from '../types';
-export declare type ITree = Omit<IBaseElement, 'onChange'> & {
+export type ITree = Omit<IBaseElement, 'onChange'> & {
     open?: boolean;
     openDefault?: boolean;
     version?: IVersion;

package/Type/Type.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TTypographyItem } from '@onesy/style-react';
 import { IBaseElement } from '../types';
-export declare type IType = IBaseElement & {
+export type IType = IBaseElement & {
     responsive?: boolean;
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
     version?: TTypographyItem;

package/VideoPlayer/VideoPlayer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElementReference, IPropsAny } from '../types';
-export declare type IVideoPlayer = ILine & {
+export type IVideoPlayer = ILine & {
     name?: string;
     src?: string;
     mime?: string;

package/VideoPlayer/VideoPlayer.js

@@ -569,8 +569,8 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     } catch (error) {}
   }, []);
   const onPictureInPictureExit = _react.default.useCallback(async () => {
-    var _refs$root$current10;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current10 = refs.root.current) === null || _refs$root$current10 === void 0 ? void 0 : _refs$root$current10.ownerDocument) || window.document : undefined;
+    var _refs$root$current0;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current0 = refs.root.current) === null || _refs$root$current0 === void 0 ? void 0 : _refs$root$current0.ownerDocument) || window.document : undefined;
     try {
       if (rootDocument.exitPictureInPicture) await rootDocument.exitPictureInPicture();else if (rootDocument.webkitExitPictureInPicture) await rootDocument.webkitExitPictureInPicture();else if (rootDocument.msExitPictureInPicture) await rootDocument.msExitPictureInPicture();
     } catch (error) {}
@@ -584,8 +584,8 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
   }, [play, fullScreen, onPlay, onPause, onFullScreen, onFullScreenExit]);
   _react.default.useEffect(() => {
-    var _refs$root$current11;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current11 = refs.root.current) === null || _refs$root$current11 === void 0 ? void 0 : _refs$root$current11.ownerDocument) || window.document : undefined;
+    var _refs$root$current1;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current1 = refs.root.current) === null || _refs$root$current1 === void 0 ? void 0 : _refs$root$current1.ownerDocument) || window.document : undefined;
     rootDocument.addEventListener('mouseup', onUpdatingDone);
     rootDocument.addEventListener('touchend', onUpdatingDone);
     return () => {

package/ViewSplit/ViewSplit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElement, IPropsAny } from '../types';
-export declare type IViewSplit = Omit<ILine, 'onChange'> & {
+export type IViewSplit = Omit<ILine, 'onChange'> & {
     valueDefault?: number;
     value?: number;
     onChange?: (value: number) => any;

package/Watch/Watch.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { OnesyDate } from '@onesy/date';
 import { ISurface } from '../Surface/Surface';
 import { IElement, IPropsAny } from '../types';
-export declare type IWatch = Omit<ISurface, 'version'> & {
+export type IWatch = Omit<ISurface, 'version'> & {
     version?: 'regular' | 'analog' | 'modern' | 'minimal';
     start?: boolean;
     timeVisible?: boolean;

package/Weather/Weather.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElementReference, IPropsAny } from '../types';
-export declare type TWeatherDayTime = 'day' | 'night';
-export declare type TWeather = 'clear' | 'partly clear' | 'rainy' | 'partly rainy' | 'snowy' | 'partly snowy';
-export declare type TTemperature = number;
-export declare type IWeather = ISurface & {
+export type TWeatherDayTime = 'day' | 'night';
+export type TWeather = 'clear' | 'partly clear' | 'rainy' | 'partly rainy' | 'snowy' | 'partly snowy';
+export type TTemperature = number;
+export type IWeather = ISurface & {
     shadow?: boolean;
     dayTime?: TWeatherDayTime;
     weather?: TWeather;

package/Whiteboard/Whiteboard.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { IBaseElement } from '../types';
-export declare type IWhiteboardAction = {
+export type IWhiteboardAction = {
     v: 'a' | 'r';
     i: IWhiteboardItem | IWhiteboardItem[];
 };
-export declare type IWhiteboardTool = 'pen' | 'eraser' | 'pan' | 'zoom' | 'select' | 'circle' | 'rectangle' | 'triangle' | 'line' | 'line-arrow' | 'text' | 'image';
-export declare type IWhiteboardValue = IWhiteboardItem[];
-export declare type IWhiteboard = Omit<IBaseElement, 'onChange'> & {
+export type IWhiteboardTool = 'pen' | 'eraser' | 'pan' | 'zoom' | 'select' | 'circle' | 'rectangle' | 'triangle' | 'line' | 'line-arrow' | 'text' | 'image';
+export type IWhiteboardValue = IWhiteboardItem[];
+export type IWhiteboard = Omit<IBaseElement, 'onChange'> & {
     valueDefault?: IWhiteboardValue;
     onChange?: (value: IWhiteboardValue) => any;
     minZoom?: number;
@@ -14,7 +14,7 @@ export declare type IWhiteboard = Omit<IBaseElement, 'onChange'> & {
     grid?: boolean;
     settings?: any;
 };
-export declare type IWhiteboardItem = {
+export type IWhiteboardItem = {
     i: string;
     v?: 'dl' | 'dp' | 'oc' | 'oe' | 'or' | 'os' | 'ot' | 'ote' | 'ol' | 'oa' | 'i' | 't';
     p: number[];

package/Widgets/Widgets.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { IBaseElement, IElement, IPropsAny, IElementReference } from '../types';
-export declare type IWidgetsValue = {
+export type IWidgetsValue = {
     open: (value?: string) => void;
     openAll: () => void;
     close: (value?: string) => void;
     closeAll: () => void;
 };
-export declare type IWidgets = IBaseElement & {
+export type IWidgets = IBaseElement & {
     widgets?: IElement;
     position?: 'top' | 'bottom';
     move?: boolean;

package/WindowSplit/WindowSplit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElement, IPropsAny } from '../types';
-export declare type IWindowSplit = Omit<ILine, 'onChange'> & {
+export type IWindowSplit = Omit<ILine, 'onChange'> & {
     valueDefault?: number;
     value?: number;
     onChange?: (value: number) => any;

package/Zoom/Zoom.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ITransition } from '..';
-export declare type IZoom = ITransition & {};
+export type IZoom = ITransition & {};
 declare const Zoom: React.FC<IZoom>;
 export default Zoom;

package/esm/Append/Append.js

@@ -216,14 +216,12 @@ const Append = props_ => {
       rectOffset
     };
   };
-  const make = async function () {
-    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      position: refs.position.current,
-      alignment: refs.alignment.current,
-      inset: inset_,
-      switch: false
-    };
-    let valueMeasurements_ = arguments.length > 1 ? arguments[1] : undefined;
+  const make = async (value = {
+    position: refs.position.current,
+    alignment: refs.alignment.current,
+    inset: inset_,
+    switch: false
+  }, valueMeasurements_) => {
     const valueMeasurements = valueMeasurements_ !== undefined ? valueMeasurements_ : await getValues();
     if (!valueMeasurements || valueMeasurements.rect.element.width === 0 && valueMeasurements.rect.element.height === 0) return;
     const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;

package/esm/AutoComplete/AutoComplete.js

@@ -250,9 +250,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     updateOptions(undefined, options_);
   }, [options_]);
-  const updateOptions = function () {
-    let valueInputNew = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : refs.valueInput.current;
-    let newOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+  const updateOptions = (valueInputNew = refs.valueInput.current, newOptions = undefined) => {
     let optionsValue = refs.optionsProps.current;
 
     // reset
@@ -321,8 +319,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
       return !open_;
     });
   }, [readOnly, disabled]);
-  const onClose = function () {
-    let refocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  const onClose = (refocus = true) => {
     if (!disabled && !readOnly) {
       setOpen(open_ => {
         if (open_) {
@@ -362,27 +359,21 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (is('function', onChangeInput_)) onChangeInput_(valueNew);
     }
   };
-  const onClear = React.useCallback(function () {
-    let refocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  const onClear = React.useCallback((refocus = true) => {
     if (!disabled && !readOnly) {
       onChangeInput('');
       onChange(multiple ? [] : null);
       if (refocus) refs.input.current.focus();
     }
   }, [multiple, readOnly, disabled]);
-  const onClearInput = React.useCallback(function () {
-    let refocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  const onClearInput = React.useCallback((refocus = true) => {
     if (!disabled && !readOnly) {
       onChangeInput('');
       if (refocus) refs.input.current.focus();
     }
   }, []);
   const isEqual = (value1, value2) => is('function', equal) ? equal(value1, value2) : getValue(value1) === getValue(value2);
-  const isEqualToInput = function () {
-    let inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : refs.valueInput.current;
-    let item = arguments.length > 1 ? arguments[1] : undefined;
-    return is('function', equalInput) ? equalInput(inputValue, item) : getText(item)?.toLowerCase().includes(inputValue?.toLowerCase());
-  };
+  const isEqualToInput = (inputValue = refs.valueInput.current, item) => is('function', equalInput) ? equalInput(inputValue, item) : getText(item)?.toLowerCase().includes(inputValue?.toLowerCase());
   const onSelect = valueNew => {
     const values = multiple ? is('array', value) ? value : [value] : value;
     const selected = multiple ? !!values.find(item => isEqual(valueNew, item)) : isEqual(valueNew, value);
@@ -415,14 +406,11 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     return 'No name';
   };
-  const renderValue = function () {
-    let itemValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : value;
+  const renderValue = (itemValue = value) => {
     const item = !!items?.length ? items.find(item_ => getValue(item_) === getValue(itemValue)) : children.find(item_ => getValue(item_.props?.value) === getValue(itemValue));
     return item ? getLabel(item, props) : getLabel(itemValue, props) || '';
   };
-  const renderValues = renderValues_ || function () {
-    let value__ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : refs.value.current;
-    let onUnselectMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : onUnselect;
+  const renderValues = renderValues_ || ((value__ = refs.value.current, onUnselectMethod = onUnselect) => {
     if (multiple) {
       if (chip) {
         let values = value__;
@@ -456,7 +444,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
       return value__.map(item => renderValue(item)).join(', ');
     }
     return renderValue(value);
-  };
+  });
   let optionsToUse = options;
   if (filterOutSelectedOptions) {
     optionsToUse = optionsToUse.filter(option => {

package/esm/Breadcrumbs/Breadcrumbs.js

@@ -75,9 +75,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const onExpandMore = () => {
     setChildren(resolve(children_, false));
   };
-  const resolve = function () {
-    let items_ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : children_;
-    let maxValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : max;
+  const resolve = (items_ = children_, maxValue = max) => {
     let items = React.Children.toArray(items_).filter(Boolean);
     if (maxValue !== undefined && maxValue >= 2 && maxValue < items.length) {
       const start = [];

package/esm/Buttons/Buttons.js

@@ -233,7 +233,6 @@ const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const [init, setInit] = React.useState(false);
-  const [preSelected, setPreSelected] = React.useState([]);
   const [selected, setSelected] = React.useState(() => {
     const valueNew = valueDefault !== undefined ? valueDefault : value;
     return valueNew !== undefined ? is('array', valueNew) ? valueNew : [valueNew] : [];
@@ -264,8 +263,7 @@ const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     if (init && value !== selected) setSelected(is('array', value) ? value : [value]);
   }, [value]);
-  const onSelect = function (itemProps) {
-    let start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const onSelect = (itemProps, start = false) => {
     let valueNew;
     if (start) {
       if (selected.includes(itemProps.value)) {
@@ -277,23 +275,13 @@ const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
     } else {
       // Unselect
       if (selected.includes(itemProps.value) && (unselect || select === 'multiple' && selected.length > 1)) {
-        if (!refs.noCheckIcon.current) {
-          setPreSelected(items => items.filter(item => item !== itemProps.value));
-        } else {
-          valueNew = selected.filter(item => item !== itemProps.value);
-        }
+        valueNew = selected.filter(item => item !== itemProps.value);
       } else {
         if (select === 'single') {
-          if (!refs.noCheckIcon.current) {
-            setPreSelected([itemProps.value]);
-            valueNew = [...selected, itemProps.value];
-          } else valueNew = [itemProps.value];
+          valueNew = [itemProps.value];
         }
         if (select === 'multiple') {
-          if (!refs.noCheckIcon.current) {
-            setPreSelected(items => unique([...items, itemProps.value]));
-            valueNew = unique([...selected, itemProps.value]);
-          } else valueNew = unique([...selected, itemProps.value]);
+          valueNew = unique([...selected, itemProps.value]);
         }
       }
     }
@@ -303,17 +291,10 @@ const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (is('function', onChange)) onChange(valueNew);
     }
   };
-  const updateSelected = itemProps => {
-    const valueNew = selected.filter(item => item !== itemProps.value);
-
-    // Update inner or controlled
-    if (!props.hasOwnProperty('value')) setSelected(valueNew);
-    if (is('function', onChange)) onChange(valueNew);
-  };
   const children = React.Children.toArray(children_)
   // Clamp array to max of 5 values
   // .slice(0, 5)
-  .map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread(_objectSpread({
+  .map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
     key: index,
     className: classNames([item.className, classes.item, classes[version], classes[`start_orientation_${orientation}`], classes[`end_orientation_${orientation}`], selected.includes(item.props.value) && classes.selected, border && classes.border]),
     onClick: () => {
@@ -322,17 +303,11 @@ const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
       // Invoke items on click method
       if (is('function', item.props.onClick)) item.props.onClick();
     }
-  }, !refs.noCheckIcon.current && item.props.start && selected.includes(item.props.value) ? {
+  }, !refs.noCheckIcon.current && selected.includes(item.props.value) ? {
     start: /*#__PURE__*/React.createElement(IconDoneAnimated, {
-      simple: true,
       in: true,
-      add: true
-    })
-  } : {}), !refs.noCheckIcon.current && !item.props.start && (selected.includes(item.props.value) || preSelected.includes(item.props.value)) ? {
-    start: /*#__PURE__*/React.createElement(IconDoneAnimated, {
-      in: (item.props.start ? selected : preSelected).includes(item.props.value),
-      onExited: () => updateSelected(item.props),
-      add: true
+      add: true,
+      simple: true
     })
   } : {}), {}, {
     version: item.props?.version !== undefined ? item.props.version : version,

package/esm/Calendar/Calendar.js

@@ -244,18 +244,15 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const onCalendarMonthChangeCalendar = React.useCallback(valueNew => {
     onUpdateCalendar(valueNew);
   }, [calendar]);
-  const valid = React.useCallback(function () {
-    if (is('function', valid_)) return valid_(...arguments);
+  const valid = React.useCallback((...args) => {
+    if (is('function', valid_)) return valid_(...args);
     return true;
   }, [valid_]);
-  const move = React.useCallback(function () {
-    let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'month';
+  const move = React.useCallback((next = true, unit = 'month') => {
     if (refs.inProgressTransition.current) return;
     onUpdateCalendar((next ? add : remove)(1, unit, calendar));
   }, [calendar]);
-  const onOpen = React.useCallback(function () {
-    let valueUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'month';
+  const onOpen = React.useCallback((valueUpdate = 'month') => {
     const valueNew = open === valueUpdate ? null : valueUpdate;
     setOpen(valueNew);
 
@@ -609,80 +606,77 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     });
   }))), open === 'year' && /*#__PURE__*/React.createElement(Surface, {
     color: "default"
-  }, _ref => {
-    let {
-      palette
-    } = _ref;
-    return menu === 'month-year' ? /*#__PURE__*/React.createElement(Fade, {
-      in: true
-    }, /*#__PURE__*/React.createElement(List, {
-      ref: refs.year,
-      color: "default",
+  }, ({
+    palette
+  }) => menu === 'month-year' ? /*#__PURE__*/React.createElement(Fade, {
+    in: true
+  }, /*#__PURE__*/React.createElement(List, {
+    ref: refs.year,
+    color: "default",
+    size: size,
+    menu: true,
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list])
+  }, getYears(value, calendar, props).map((item, index) => {
+    const onesyDate = item.value;
+    const yearValue = format(onesyDate, 'YYYY');
+    const selected = calendar.year === onesyDate.year;
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: index,
+      onClick: () => onUpdateCalendarOption(onesyDate),
+      primary: yearValue,
+      inset: !selected,
+      startAlign: "center",
       size: size,
-      menu: true,
-      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list])
-    }, getYears(value, calendar, props).map((item, index) => {
-      const onesyDate = item.value;
-      const yearValue = format(onesyDate, 'YYYY');
-      const selected = calendar.year === onesyDate.year;
-      return /*#__PURE__*/React.createElement(ListItem, {
-        key: index,
-        onClick: () => onUpdateCalendarOption(onesyDate),
-        primary: yearValue,
-        inset: !selected,
-        startAlign: "center",
-        size: size,
-        start: selected ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
-          in: true,
-          add: true,
-          simple: true,
-          size: size
-        }) : undefined,
-        selected: selected,
-        disabled: !valid(onesyDate, 'year'),
-        button: true,
-        PrimaryProps: {
-          version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
-        },
-        "data-value": yearValue,
-        className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
-      });
-    }))) : /*#__PURE__*/React.createElement(Fade, {
-      in: true
-    }, /*#__PURE__*/React.createElement(Line, {
-      ref: refs.year,
-      direction: "row",
-      wrap: "wrap",
-      justify: "space-evenly",
-      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-version-year'], classes.list_version_year])
-    }, getYears(value, calendar, props).map((item, index) => {
-      const onesyDate = item.value;
-      const yearValue = format(onesyDate, 'YYYY');
-      const selected = calendar.year === onesyDate.year;
-      return /*#__PURE__*/React.createElement(PaginationItem, _extends({
-        key: index,
-        tonal: tonal,
-        color: "inherit",
-        size: size,
-        InteractionProps: {
-          background: false
-        },
-        TypeProps: {
-          version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-          tone: !selected ? 'primary' : undefined
-        },
-        onClick: () => onUpdateCalendarOption(onesyDate),
-        "data-value": yearValue,
-        disabled: !valid(onesyDate, 'year')
-      }, PaginationItemsProps, {
-        className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps?.className, classes.day_version_year]),
-        style: _objectSpread(_objectSpread({}, selected ? {
-          color: theme.methods.palette.color.value(undefined, 90, true, palette),
-          backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
-        } : undefined), PaginationItemsProps?.style)
-      }), yearValue);
-    })));
-  }), end);
+      start: selected ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
+        in: true,
+        add: true,
+        simple: true,
+        size: size
+      }) : undefined,
+      selected: selected,
+      disabled: !valid(onesyDate, 'year'),
+      button: true,
+      PrimaryProps: {
+        version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
+      },
+      "data-value": yearValue,
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
+    });
+  }))) : /*#__PURE__*/React.createElement(Fade, {
+    in: true
+  }, /*#__PURE__*/React.createElement(Line, {
+    ref: refs.year,
+    direction: "row",
+    wrap: "wrap",
+    justify: "space-evenly",
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-version-year'], classes.list_version_year])
+  }, getYears(value, calendar, props).map((item, index) => {
+    const onesyDate = item.value;
+    const yearValue = format(onesyDate, 'YYYY');
+    const selected = calendar.year === onesyDate.year;
+    return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+      key: index,
+      tonal: tonal,
+      color: "inherit",
+      size: size,
+      InteractionProps: {
+        background: false
+      },
+      TypeProps: {
+        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+        tone: !selected ? 'primary' : undefined
+      },
+      onClick: () => onUpdateCalendarOption(onesyDate),
+      "data-value": yearValue,
+      disabled: !valid(onesyDate, 'year')
+    }, PaginationItemsProps, {
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps?.className, classes.day_version_year]),
+      style: _objectSpread(_objectSpread({}, selected ? {
+        color: theme.methods.palette.color.value(undefined, 90, true, palette),
+        backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
+      } : undefined), PaginationItemsProps?.style)
+    }), yearValue);
+  })))), end);
 });
 Calendar.displayName = 'onesy-Calendar';
 export default Calendar;

package/esm/CalendarAvailability/CalendarAvailability.js

@@ -203,8 +203,7 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     return (is('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
   }, [events, timesProps]);
-  const onStatusToggle = React.useCallback(function () {
-    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'working';
+  const onStatusToggle = React.useCallback((value = 'working') => {
     setStatuses(previous => _objectSpread(_objectSpread({}, previous), {}, {
       [value]: previous[value] === undefined ? false : !previous[value]
     }));

package/esm/CalendarMenu/CalendarMenu.js

@@ -147,8 +147,8 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.dateProperty.current = dateProperty;
   refs.value.current = value;
   refs.onChange.current = onChange_;
-  const onChange = React.useCallback(async function () {
-    if (is('function', onChange_)) onChange_(...arguments);
+  const onChange = React.useCallback(async (...args) => {
+    if (is('function', onChange_)) onChange_(...args);
   }, [onChange_]);
   React.useEffect(() => {
     if (menuOpen !== menuOpen_ && menuOpen_ !== undefined) setMenuOpen(menuOpen_);