@onesy/ui-react 1.0.1 → 1.0.2

package/LineChartItem/LineChartItem.js

@@ -42,14 +42,14 @@ const LineChartItem = react_1.default.forwardRef((props_, ref) => {
     const { tonal = true, color = 'primary', name, values, refs: refs_, rects, updateDefs, updateLegend, minMax, animate: animate_, animateTimeout: animateTimeout_, smooth = true, smoothRatio = 0.14, PathProps, BackgroundProps, BorderProps, LegendItemProps, className } = props, other = __rest(props, ["tonal", "color", "name", "values", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "smooth", "smoothRatio", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "className"]);
     const { classes } = useStyle();
     const refs = {
-        minMax: react_1.default.useRef(undefined),
-        smooth: react_1.default.useRef(undefined),
-        theme: react_1.default.useRef(undefined),
-        path: react_1.default.useRef(),
+        minMax: react_1.default.useRef(null),
+        smooth: react_1.default.useRef(null),
+        theme: react_1.default.useRef(null),
+        path: react_1.default.useRef(null),
         pathStyle: react_1.default.useRef({}),
-        animate: react_1.default.useRef(undefined),
-        animateTimeout: react_1.default.useRef(),
-        init: react_1.default.useRef(undefined)
+        animate: react_1.default.useRef(null),
+        animateTimeout: react_1.default.useRef(null),
+        init: react_1.default.useRef(null)
     };
     const keys = react_1.default.useMemo(() => {
         const result = [];

package/MainProgress/MainProgress.js

@@ -56,19 +56,19 @@ const MainProgress = react_1.default.forwardRef((props_, ref) => {
     const [value, setValue] = react_1.default.useState(min);
     const refs = {
         value_: react_1.default.useRef({}),
-        value: react_1.default.useRef(),
-        min: react_1.default.useRef(),
-        max: react_1.default.useRef(),
-        firstIncrement: react_1.default.useRef(),
-        incrementMin: react_1.default.useRef(),
-        incrementMax: react_1.default.useRef(),
-        stepInterval: react_1.default.useRef(),
-        stepMin: react_1.default.useRef(),
-        stepMax: react_1.default.useRef(),
-        TransitionComponentProps: react_1.default.useRef(undefined),
-        linearProgress: react_1.default.useRef(undefined),
-        interval: react_1.default.useRef(undefined),
-        props: react_1.default.useRef(undefined)
+        value: react_1.default.useRef(null),
+        min: react_1.default.useRef(null),
+        max: react_1.default.useRef(null),
+        firstIncrement: react_1.default.useRef(null),
+        incrementMin: react_1.default.useRef(null),
+        incrementMax: react_1.default.useRef(null),
+        stepInterval: react_1.default.useRef(null),
+        stepMin: react_1.default.useRef(null),
+        stepMax: react_1.default.useRef(null),
+        TransitionComponentProps: react_1.default.useRef(null),
+        linearProgress: react_1.default.useRef(null),
+        interval: react_1.default.useRef(null),
+        props: react_1.default.useRef(null)
     };
     refs.value.current = value;
     refs.props.current = props;

package/Medias/Medias.d.ts

@@ -5,7 +5,7 @@ export interface IMediasItem {
     value: IMediaObject;
     props?: any;
 }
-export declare type IMediasMediaVersion = 'embed' | 'image' | 'audio' | 'video' | 'other';
+export type IMediasMediaVersion = 'embed' | 'image' | 'audio' | 'video' | 'other';
 export interface IMedias extends ILine {
     size?: 'small' | 'regular' | 'large';
     values?: IMediasItem | IMediasItem[];

package/MenuDesktop/MenuDesktop.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { TTransitionStatus } from '../Transition';
 import { ILine } from '../Line/Line';
 import { IElement, ITonal, IStyle, IElementReference, IPropsAny, IVersion, IColor } from '../types';
-export declare type TMenuDesktopValue = string | number;
-export declare type TMenuDesktopItem = {
+export type TMenuDesktopValue = string | number;
+export type TMenuDesktopItem = {
     value?: TMenuDesktopValue;
     label?: IElement;
     name?: IElement;

package/NavigationBar/NavigationBar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { INavigationItemVersion } from '../NavigationItem/NavigationItem';
-export declare type TNavigationBarValue = Array<string>;
+export type TNavigationBarValue = Array<string>;
 export interface INavigationBar extends Omit<ISurface, 'version'> {
     value?: TNavigationBarValue;
     valueDefault?: TNavigationBarValue;

package/NavigationItem/NavigationItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ITooltip } from '../Tooltip/Tooltip';
 import { ITonal, IColor, IElement, IElementReference, IPropsAny } from '../types';
-export declare type INavigationItemVersion = 'regular' | 'auto';
+export type INavigationItemVersion = 'regular' | 'auto';
 export interface INavigationItem extends ITooltip {
     tonal?: ITonal;
     color?: IColor;

package/Parallax/Parallax.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IPropsAny, IStyle, IValueBreakpoints } from '../types';
-export declare type TParallaxDirection = 'vertical' | 'horizontal';
+export type TParallaxDirection = 'vertical' | 'horizontal';
 export interface IParallax extends IBaseElement {
     value?: number;
     root?: Element | DocumentFragment;

package/RichTextEditor/RichTextEditor.js

@@ -274,43 +274,43 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
     const [selected, setSelected] = react_1.default.useState([]);
     const [selection, setSelection] = react_1.default.useState();
     const refs = {
-        root: react_1.default.useRef(undefined),
-        value: react_1.default.useRef(undefined),
-        range: react_1.default.useRef(undefined),
-        inputValues: react_1.default.useRef(undefined),
-        open: react_1.default.useRef(undefined),
-        props: react_1.default.useRef(undefined),
-        selected: react_1.default.useRef(undefined),
-        miniMenu: react_1.default.useRef(undefined),
-        miniMenuInclude: react_1.default.useRef(undefined),
+        root: react_1.default.useRef(null),
+        value: react_1.default.useRef(null),
+        range: react_1.default.useRef(null),
+        inputValues: react_1.default.useRef(null),
+        open: react_1.default.useRef(null),
+        props: react_1.default.useRef(null),
+        selected: react_1.default.useRef(null),
+        miniMenu: react_1.default.useRef(null),
+        miniMenuInclude: react_1.default.useRef(null),
         miniMenuElements: {
-            color: react_1.default.useRef(undefined),
-            colorPalette: react_1.default.useRef(undefined),
-            background: react_1.default.useRef(undefined),
-            backgroundPalette: react_1.default.useRef(undefined),
-            linkAdd: react_1.default.useRef(undefined),
-            linkAddInput: react_1.default.useRef(undefined),
-            linkRemove: react_1.default.useRef(undefined),
+            color: react_1.default.useRef(null),
+            colorPalette: react_1.default.useRef(null),
+            background: react_1.default.useRef(null),
+            backgroundPalette: react_1.default.useRef(null),
+            linkAdd: react_1.default.useRef(null),
+            linkAddInput: react_1.default.useRef(null),
+            linkRemove: react_1.default.useRef(null),
         },
         elements: {
-            color: react_1.default.useRef(undefined),
-            background: react_1.default.useRef(undefined),
-            linkAdd: react_1.default.useRef(undefined),
-            linkRemove: react_1.default.useRef(undefined),
-            quote: react_1.default.useRef(undefined),
-            image: react_1.default.useRef(undefined),
-            video: react_1.default.useRef(undefined),
-            videoYoutube: react_1.default.useRef(undefined),
-            table: react_1.default.useRef(undefined),
-            drawing: react_1.default.useRef(undefined),
-            drawingSvg: react_1.default.useRef(undefined),
-            drawingSize: react_1.default.useRef(undefined),
-            drawingSelect: react_1.default.useRef(undefined),
-            drawingPalette: react_1.default.useRef(undefined),
-            code: react_1.default.useRef(undefined)
+            color: react_1.default.useRef(null),
+            background: react_1.default.useRef(null),
+            linkAdd: react_1.default.useRef(null),
+            linkRemove: react_1.default.useRef(null),
+            quote: react_1.default.useRef(null),
+            image: react_1.default.useRef(null),
+            video: react_1.default.useRef(null),
+            videoYoutube: react_1.default.useRef(null),
+            table: react_1.default.useRef(null),
+            drawing: react_1.default.useRef(null),
+            drawingSvg: react_1.default.useRef(null),
+            drawingSize: react_1.default.useRef(null),
+            drawingSelect: react_1.default.useRef(null),
+            drawingPalette: react_1.default.useRef(null),
+            code: react_1.default.useRef(null)
         },
-        rootDocument: react_1.default.useRef(),
-        rootWindow: react_1.default.useRef()
+        rootDocument: react_1.default.useRef(null),
+        rootWindow: react_1.default.useRef(null)
     };
     refs.inputValues.current = inputValues;
     refs.open.current = open;

package/ScatterChartItem/ScatterChartItem.js

@@ -43,13 +43,13 @@ const ScatterChartItem = react_1.default.forwardRef((props_, ref) => {
     const { tonal = true, color = 'primary', name, values, refs: refs_, rects, updateDefs, updateLegend, minMax, animate: animate_, animateTimeout: animateTimeout_, PathProps, BackgroundProps, BorderProps, LegendItemProps, className } = props, other = __rest(props, ["tonal", "color", "name", "values", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "className"]);
     const { classes } = useStyle();
     const refs = {
-        minMax: react_1.default.useRef(undefined),
-        path: react_1.default.useRef(undefined),
-        theme: react_1.default.useRef(undefined),
+        minMax: react_1.default.useRef(null),
+        path: react_1.default.useRef(null),
+        theme: react_1.default.useRef(null),
         pathStyle: react_1.default.useRef({}),
-        animate: react_1.default.useRef(undefined),
-        animateTimeout: react_1.default.useRef(),
-        init: react_1.default.useRef(undefined)
+        animate: react_1.default.useRef(null),
+        animateTimeout: react_1.default.useRef(null),
+        init: react_1.default.useRef(null)
     };
     const keys = react_1.default.useMemo(() => {
         const result = [];

package/ScreenCapture/ScreenCapture.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElementReference, IPropsAny } from '../types';
-export declare type TTrackValueVersion = 'image' | 'canvas';
+export type TTrackValueVersion = 'image' | 'canvas';
 export interface IScreenCapture extends ISurface {
     nameDefault?: string;
     name?: string;

package/ScreenCapture/ScreenCapture.js

@@ -68,10 +68,10 @@ const ScreenCapture = react_1.default.forwardRef((props_, ref) => {
     const [canvasSelectorValue, setCanvasSelectorValue] = react_1.default.useState();
     const [supported, setSupported] = react_1.default.useState(true);
     const refs = {
-        root: react_1.default.useRef(undefined),
-        canvas: react_1.default.useRef(undefined),
-        canvasSelectorValue: react_1.default.useRef(undefined),
-        element: react_1.default.useRef()
+        root: react_1.default.useRef(null),
+        canvas: react_1.default.useRef(null),
+        canvasSelectorValue: react_1.default.useRef(null),
+        element: react_1.default.useRef(null)
     };
     const touch = (0, useMediaQuery_1.default)('(pointer: coarse)', { element: refs.root.current });
     refs.canvas.current = canvas;

package/Section/Section.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TPaletteVersion } from '@onesy/style-react';
 import { ILine } from '../Line/Line';
 import { IValueBreakpoints, IMediaObject, IPropsAny } from '../types';
-export declare type ISize = 'extra_small' | 'small' | 'regular' | 'large' | 'extra_large' | 'extra_extra_large';
+export type ISize = 'extra_small' | 'small' | 'regular' | 'large' | 'extra_large' | 'extra_extra_large';
 export interface ISection extends ILine {
     themed?: boolean;
     title?: string | Partial<Record<IValueBreakpoints, string>>;

package/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, ITonal, IColor, ISize, IElement, IPropsAny } from '../types';
-export declare type TSliderValue = number | Array<number>;
+export type TSliderValue = number | Array<number>;
 export interface ISlider extends IBaseElement {
     tonal?: ITonal;
     color?: IColor;

package/SmartTextField/SmartTextField.js

@@ -133,35 +133,35 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
     const [open, setOpen] = react_1.default.useState({});
     const [inputValues, setInputValues] = react_1.default.useState({});
     const refs = {
-        root: react_1.default.useRef(undefined),
-        input: react_1.default.useRef(undefined),
-        searchElement: react_1.default.useRef(undefined),
-        error: react_1.default.useRef(undefined),
-        search: react_1.default.useRef(undefined),
-        open: react_1.default.useRef(undefined),
-        openMenu: react_1.default.useRef(undefined),
-        selectionMenu: react_1.default.useRef(undefined),
-        caret: react_1.default.useRef(undefined),
-        value: react_1.default.useRef(undefined),
+        root: react_1.default.useRef(null),
+        input: react_1.default.useRef(null),
+        searchElement: react_1.default.useRef(null),
+        error: react_1.default.useRef(null),
+        search: react_1.default.useRef(null),
+        open: react_1.default.useRef(null),
+        openMenu: react_1.default.useRef(null),
+        selectionMenu: react_1.default.useRef(null),
+        caret: react_1.default.useRef(null),
+        value: react_1.default.useRef(null),
         version: react_1.default.useRef(version),
         optionsMention: react_1.default.useRef(optionsMention),
         validateMeta: react_1.default.useRef({}),
-        range: react_1.default.useRef(undefined),
-        inputValues: react_1.default.useRef(undefined),
-        miniMenu: react_1.default.useRef(undefined),
+        range: react_1.default.useRef(null),
+        inputValues: react_1.default.useRef(null),
+        miniMenu: react_1.default.useRef(null),
         miniMenuElements: {
-            color: react_1.default.useRef(undefined),
-            colorPalette: react_1.default.useRef(undefined),
-            background: react_1.default.useRef(undefined),
-            backgroundPalette: react_1.default.useRef(undefined),
-            linkAdd: react_1.default.useRef(undefined),
-            linkAddInput: react_1.default.useRef(undefined),
-            linkRemove: react_1.default.useRef(undefined)
+            color: react_1.default.useRef(null),
+            colorPalette: react_1.default.useRef(null),
+            background: react_1.default.useRef(null),
+            backgroundPalette: react_1.default.useRef(null),
+            linkAdd: react_1.default.useRef(null),
+            linkAddInput: react_1.default.useRef(null),
+            linkRemove: react_1.default.useRef(null)
         },
-        textSelected: react_1.default.useRef(undefined),
-        textSelection: react_1.default.useRef(undefined),
-        rootDocument: react_1.default.useRef(),
-        rootWindow: react_1.default.useRef(),
+        textSelected: react_1.default.useRef(null),
+        textSelection: react_1.default.useRef(null),
+        rootDocument: react_1.default.useRef(null),
+        rootWindow: react_1.default.useRef(null),
         edit: react_1.default.useRef(edit),
         multiline: react_1.default.useRef(multiline),
         readOnly: react_1.default.useRef(readOnly),

package/TableCell/TableCell.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TLineAlign, TLineJustify } from '../Line/Line';
 import { IBaseElement, ITonal, IColor, ISize, IPropsAny } from '../types';
-export declare type ITableCellSort = 'asc' | 'desc';
+export type ITableCellSort = 'asc' | 'desc';
 export interface ITableCell extends IBaseElement {
     tonal?: ITonal;
     color?: IColor;

package/TimePicker/TimePicker.d.ts

@@ -3,8 +3,8 @@ import { OnesyDate } from '@onesy/date';
 import { TClockUnit } from '../Clock/Clock';
 import { IAdvancedTextField } from '../AdvancedTextField/AdvancedTextField';
 import { ISize, IValueBreakpoints, IElementReference, IPropsAny } from '../types';
-export declare type TTimePickerValue = OnesyDate | [OnesyDate, OnesyDate];
-export declare type TTimePickerSelecting = TClockUnit | [TClockUnit, TClockUnit];
+export type TTimePickerValue = OnesyDate | [OnesyDate, OnesyDate];
+export type TTimePickerSelecting = TClockUnit | [TClockUnit, TClockUnit];
 export interface ITimePicker extends Omit<IAdvancedTextField, 'version'> {
     version?: 'auto' | 'mobile' | 'desktop';
     value?: TTimePickerValue;

package/Transition/Transition.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TTransitionsDurationProperties } from '@onesy/style-react';
 import { IBaseElement } from '../types';
-export declare type TTransitionStatus = 'appended' | 'add' | 'adding' | 'added' | 'enter' | 'entering' | 'entered' | 'exit' | 'exiting' | 'exited' | 'removed';
+export type TTransitionStatus = 'appended' | 'add' | 'adding' | 'added' | 'enter' | 'entering' | 'entered' | 'exit' | 'exiting' | 'exited' | 'removed';
 export declare const STATUS: Record<TTransitionStatus, TTransitionStatus>;
 export interface ITransitionDelay {
     default?: number;

package/Transitions/Transitions.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IPropsAny } from '../types';
-export declare type TTransitionsMode = 'in-out' | 'in-out-follow' | 'out-in';
+export type TTransitionsMode = 'in-out' | 'in-out-follow' | 'out-in';
 export interface ITransitions {
     id?: string;
     mode?: TTransitionsMode;

package/Tree/Tree.js

@@ -55,7 +55,6 @@ const useStyle = (0, style_react_1.style)(theme => ({
         lineHeight: '1.15',
         margin: '0',
         position: 'relative',
-        color: 'inherit',
         padding: `${theme.methods.space.value(0.25, 'px')} ${theme.methods.space.value(1, 'px')}`,
         borderRadius: `${theme.shape.radius.unit * 0.5}px`
     },
@@ -69,6 +68,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
             height: '14px',
             borderLeft: '2px solid',
             borderBottom: '2px solid',
+            color: theme.palette.color.neutral['90'],
             borderColor: theme.palette.light ? theme.palette.color.neutral['90'] : theme.palette.color.neutral['20'],
             borderBottomLeftRadius: '6px',
             transform: `rotateY(${theme.direction === 'ltr' ? 0 : 180}deg)`
@@ -133,7 +133,7 @@ const Tree = react_1.default.forwardRef((props_, ref) => {
         ids: {
             middle: react_1.default.useId()
         },
-        inProgressTransition: react_1.default.useRef()
+        inProgressTransition: react_1.default.useRef(null)
     };
     const styles = {
         root: {}

package/VideoPlayer/VideoPlayer.js

@@ -190,25 +190,25 @@ const VideoPlayer = react_1.default.forwardRef((props_, ref) => {
     const [playbackSpeed, setPlaybackSpeed] = react_1.default.useState(1);
     const [openMenu, setOpenMenu] = react_1.default.useState();
     const refs = {
-        root: react_1.default.useRef(undefined),
-        video: react_1.default.useRef(),
-        controls: react_1.default.useRef(undefined),
-        duration: react_1.default.useRef(undefined),
-        time: react_1.default.useRef(undefined),
-        play: react_1.default.useRef(undefined),
-        updating: react_1.default.useRef(undefined),
-        onPlay: react_1.default.useRef(undefined),
-        onPause: react_1.default.useRef(undefined),
-        onTimeChange: react_1.default.useRef(undefined),
-        onBackward: react_1.default.useRef(undefined),
-        onForward: react_1.default.useRef(undefined),
-        onStop: react_1.default.useRef(undefined),
-        startMediaSession: react_1.default.useRef(undefined),
-        updateMediaSession: react_1.default.useRef(undefined),
-        startMediaSessionOnPlay: react_1.default.useRef(undefined),
+        root: react_1.default.useRef(null),
+        video: react_1.default.useRef(null),
+        controls: react_1.default.useRef(null),
+        duration: react_1.default.useRef(null),
+        time: react_1.default.useRef(null),
+        play: react_1.default.useRef(null),
+        updating: react_1.default.useRef(null),
+        onPlay: react_1.default.useRef(null),
+        onPause: react_1.default.useRef(null),
+        onTimeChange: react_1.default.useRef(null),
+        onBackward: react_1.default.useRef(null),
+        onForward: react_1.default.useRef(null),
+        onStop: react_1.default.useRef(null),
+        startMediaSession: react_1.default.useRef(null),
+        updateMediaSession: react_1.default.useRef(null),
+        startMediaSessionOnPlay: react_1.default.useRef(null),
         fullScreen: react_1.default.useRef(fullScreen),
         mouseMoved: react_1.default.useRef(mouseMoved),
-        timeoutMouseMoved: react_1.default.useRef(undefined)
+        timeoutMouseMoved: react_1.default.useRef(null)
     };
     refs.duration.current = duration;
     refs.time.current = time;

package/Weather/Weather.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { ISize, 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 type TWeatherDayTime = 'day' | 'night';
+export type TWeather = 'clear' | 'partly clear' | 'rainy' | 'partly rainy' | 'snowy' | 'partly snowy';
+export type TTemperature = number;
 export interface IWeather extends ISurface {
     size?: ISize;
     shadow?: boolean;

package/esm/Accordion/Accordion.js

@@ -205,7 +205,7 @@ const Accordion = /*#__PURE__*/React.forwardRef((props_, ref) => {
       button: React.useId(),
       data: React.useId()
     },
-    expandInProgress: React.useRef()
+    expandInProgress: React.useRef(null)
   };
   const {
     classes

package/esm/AreaChartItem/AreaChartItem.js

@@ -72,15 +72,15 @@ const AreaChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const refs = {
-    minMax: React.useRef(undefined),
-    smooth: React.useRef(undefined),
-    theme: React.useRef(undefined),
-    path: React.useRef(),
-    pathBackground: React.useRef(),
+    minMax: React.useRef(null),
+    smooth: React.useRef(null),
+    theme: React.useRef(null),
+    path: React.useRef(null),
+    pathBackground: React.useRef(null),
     pathStyle: React.useRef({}),
-    animate: React.useRef(undefined),
-    animateTimeout: React.useRef(),
-    init: React.useRef(undefined)
+    animate: React.useRef(null),
+    animateTimeout: React.useRef(null),
+    init: React.useRef(null)
   };
   const keys = React.useMemo(() => {
     const result = [];

package/esm/AudioPlayer/AudioPlayer.js

@@ -188,22 +188,22 @@ const AudioPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [playbackSpeed, setPlaybackSpeed] = React.useState(1);
   const [openMenu, setOpenMenu] = React.useState();
   const refs = {
-    root: React.useRef(undefined),
-    audio: React.useRef(),
-    controls: React.useRef(undefined),
-    duration: React.useRef(undefined),
-    time: React.useRef(undefined),
-    play: React.useRef(undefined),
-    updating: React.useRef(undefined),
-    onPlay: React.useRef(undefined),
-    onPause: React.useRef(undefined),
-    onTimeChange: React.useRef(undefined),
-    onBackward: React.useRef(undefined),
-    onForward: React.useRef(undefined),
-    onStop: React.useRef(undefined),
-    startMediaSession: React.useRef(undefined),
-    updateMediaSession: React.useRef(undefined),
-    startMediaSessionOnPlay: React.useRef(undefined)
+    root: React.useRef(null),
+    audio: React.useRef(null),
+    controls: React.useRef(null),
+    duration: React.useRef(null),
+    time: React.useRef(null),
+    play: React.useRef(null),
+    updating: React.useRef(null),
+    onPlay: React.useRef(null),
+    onPause: React.useRef(null),
+    onTimeChange: React.useRef(null),
+    onBackward: React.useRef(null),
+    onForward: React.useRef(null),
+    onStop: React.useRef(null),
+    startMediaSession: React.useRef(null),
+    updateMediaSession: React.useRef(null),
+    startMediaSessionOnPlay: React.useRef(null)
   };
   refs.duration.current = duration;
   refs.time.current = time;

package/esm/AudioRecorder/AudioRecorder.js

@@ -100,14 +100,14 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const refs = {
-    root: React.useRef(undefined),
-    mediaRecorder: React.useRef(),
+    root: React.useRef(null),
+    mediaRecorder: React.useRef(null),
     mediaRecorderBytes: React.useRef([]),
     start: React.useRef(0),
     valuePaused: React.useRef(0),
-    value: React.useRef(undefined),
-    animationFrame: React.useRef(undefined),
-    onData: React.useRef(undefined)
+    value: React.useRef(null),
+    animationFrame: React.useRef(null),
+    onData: React.useRef(null)
   };
   refs.onData.current = onData;
   const supported = isEnvironment('browser') && window.navigator.mediaDevices?.getUserMedia;

package/esm/Avatar/Avatar.js

@@ -5,11 +5,11 @@ const _excluded = ["tonal", "version", "size", "color", "image", "alt", "square"
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
+import { stringToColor } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import ButtonElement from '../Button';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
-import { stringToColor } from '@onesy/utils';
 const useStyle = styleMethod(theme => ({
   root: {
     '&.onesy-Button-root': {
@@ -81,7 +81,7 @@ const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (size === 'small') typeProps.size = '0.75rem';else if (size === 'regular') typeProps.size = '1rem';else if (size === 'large') typeProps.size = '1.25rem';else if (!['small', 'regular', 'large'].includes(size)) typeProps.size = `${size * 0.4 / 16}rem`;
     children = /*#__PURE__*/React.createElement(Type, _extends({}, typeProps, TypeProps), children);
   }
-  const color = color_ === 'auto' ? stringToColor(children_) : color_;
+  const color = color_ === 'auto' ? stringToColor(children_ || '') : color_;
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
     tonal: tonal,

package/esm/BubbleChartItem/BubbleChartItem.js

@@ -58,13 +58,13 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const refs = {
-    minMax: React.useRef(undefined),
-    theme: React.useRef(undefined),
-    path: React.useRef(),
+    minMax: React.useRef(null),
+    theme: React.useRef(null),
+    path: React.useRef(null),
     pathStyle: React.useRef({}),
-    animate: React.useRef(undefined),
-    animateTimeout: React.useRef(),
-    init: React.useRef(undefined)
+    animate: React.useRef(null),
+    animateTimeout: React.useRef(null),
+    init: React.useRef(null)
   };
   const keys = React.useMemo(() => {
     const result = [];

package/esm/Calendar/Calendar.js

@@ -192,10 +192,10 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     classes
   } = useStyle();
   const refs = {
-    root: React.useRef(undefined),
-    month: React.useRef(undefined),
-    year: React.useRef(undefined),
-    inProgressTransition: React.useRef()
+    root: React.useRef(null),
+    month: React.useRef(null),
+    year: React.useRef(null),
+    inProgressTransition: React.useRef(null)
   };
   const [value, setValue] = React.useState(() => {
     const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);

package/esm/CalendarMonth/CalendarMonth.js

@@ -232,8 +232,8 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
     id: React.useRef(`${month.year} ${month.month}`),
     previous: React.useRef(month),
     previousTheme: React.useRef(theme.palette.light),
-    move: React.useRef(),
-    noTransition: React.useRef(undefined)
+    move: React.useRef(null),
+    noTransition: React.useRef(null)
   };
   const weekStartDay = !['Monday', 'Sunday'].includes(weekStartDay_) ? 'Monday' : weekStartDay_;