@onesy/ui-react 1.0.0 → 1.0.2

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_;
 

package/esm/Clock/Clock.js

@@ -71,17 +71,17 @@ const Clock = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const [selecting, setSelecting] = React.useState((selectingDefault !== undefined ? selectingDefault : selecting_) || 'hour');
   const [mouseDown, setMouseDown] = React.useState(false);
   const refs = {
-    root: React.useRef(undefined),
-    middle: React.useRef(undefined),
-    mouseDown: React.useRef(undefined),
-    value: React.useRef(),
-    selecting: React.useRef(),
-    autoNext: React.useRef(),
-    hour: React.useRef(),
-    minute: React.useRef(),
-    second: React.useRef(),
-    format: React.useRef(),
-    dayTime: React.useRef(undefined),
+    root: React.useRef(null),
+    middle: React.useRef(null),
+    mouseDown: React.useRef(null),
+    value: React.useRef(null),
+    selecting: React.useRef(null),
+    autoNext: React.useRef(null),
+    hour: React.useRef(null),
+    minute: React.useRef(null),
+    second: React.useRef(null),
+    format: React.useRef(null),
+    dayTime: React.useRef(null),
     previous: React.useRef(selecting)
   };
   refs.mouseDown.current = mouseDown;

package/esm/ColumnChartItem/ColumnChartItem.js

@@ -54,13 +54,13 @@ const ColumnChartItem = /*#__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/Confirm/Confirm.js

@@ -62,11 +62,11 @@ const Confirm = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [openModal, setOpenModal] = React.useState(false);
   const refs = {
     value: React.useRef({}),
-    modal: React.useRef(),
-    props: React.useRef(undefined),
+    modal: React.useRef(null),
+    props: React.useRef(null),
     promise: {
-      resolve: React.useRef(undefined),
-      reject: React.useRef(undefined)
+      resolve: React.useRef(null),
+      reject: React.useRef(null)
     }
   };
   refs.props.current = props;

package/esm/DragAndDropList/DragAndDropList.js

@@ -33,11 +33,11 @@ const DragAndDropList = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const refs = {
-    root: React.useRef(undefined),
-    dragging: React.useRef(undefined),
-    rectDragged: React.useRef(undefined),
-    isDragging: React.useRef(),
-    previous: React.useRef(undefined)
+    root: React.useRef(null),
+    dragging: React.useRef(null),
+    rectDragged: React.useRef(null),
+    isDragging: React.useRef(null),
+    previous: React.useRef(null)
   };
   const onChange = React.useMemo(() => {
     return debounce((indexPrevious, indexNew) => onChange_(indexPrevious, indexNew), delay);

package/esm/HTMLCanvas/HTMLCanvas.js

@@ -145,16 +145,16 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [keyDown, setKeyDown] = React.useState();
   const [showGuidelines, setShowGuidelines] = React.useState(!!showGuidelinesDefault);
   const refs = {
-    root: React.useRef(undefined),
-    container: React.useRef(undefined),
-    miniMap: React.useRef(undefined),
+    root: React.useRef(null),
+    container: React.useRef(null),
+    miniMap: React.useRef(null),
     minZoom: React.useRef(minZoom),
     maxZoom: React.useRef(maxZoom),
     positions: React.useRef(positions),
-    previousMouseEvent: React.useRef(),
+    previousMouseEvent: React.useRef(null),
     mouseDown: React.useRef(false),
     mouseDownMiniMap: React.useRef(false),
-    keyDown: React.useRef(undefined),
+    keyDown: React.useRef(null),
     boundaries: React.useRef({
       x: [width * positions?.zoom * -1, 0],
       y: [height * positions?.zoom * -1, 0]

package/esm/ImageCrop/ImageCrop.js

@@ -281,28 +281,28 @@ const ImageCrop = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [selector, setSelector] = React.useState(selectorDefault !== undefined ? selectorDefault : selector_);
   const [selectorRelative, setSelectorRelative] = React.useState();
   const refs = {
-    root: React.useRef(undefined),
-    image: React.useRef(undefined),
-    mouseDown: React.useRef(undefined),
-    selector: React.useRef(undefined),
-    imageSelectorMain: React.useRef(undefined),
-    imageSelector: React.useRef(undefined),
-    previousMouseEvent: React.useRef(undefined),
-    canvasMain: React.useRef(),
-    canvasImageSelector: React.useRef(),
-    move: React.useRef(undefined),
-    borderTop: React.useRef(undefined),
-    borderLeft: React.useRef(undefined),
-    borderRight: React.useRef(undefined),
-    borderBottom: React.useRef(undefined),
-    dotTopLeft: React.useRef(undefined),
-    dotTopRight: React.useRef(undefined),
-    dotBottomLeft: React.useRef(undefined),
-    dotBottomRight: React.useRef(undefined),
-    props: React.useRef(undefined),
-    dynamicParent: React.useRef(undefined),
-    focus: React.useRef(undefined),
-    aspectRatio: React.useRef(undefined)
+    root: React.useRef(null),
+    image: React.useRef(null),
+    mouseDown: React.useRef(null),
+    selector: React.useRef(null),
+    imageSelectorMain: React.useRef(null),
+    imageSelector: React.useRef(null),
+    previousMouseEvent: React.useRef(null),
+    canvasMain: React.useRef(null),
+    canvasImageSelector: React.useRef(null),
+    move: React.useRef(null),
+    borderTop: React.useRef(null),
+    borderLeft: React.useRef(null),
+    borderRight: React.useRef(null),
+    borderBottom: React.useRef(null),
+    dotTopLeft: React.useRef(null),
+    dotTopRight: React.useRef(null),
+    dotBottomLeft: React.useRef(null),
+    dotBottomRight: React.useRef(null),
+    props: React.useRef(null),
+    dynamicParent: React.useRef(null),
+    focus: React.useRef(null),
+    aspectRatio: React.useRef(null)
   };
   refs.image.current = image;
   refs.mouseDown.current = mouseDown;

package/esm/ImageEdit/ImageEdit.js

@@ -205,15 +205,15 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const refs = {
-    root: React.useRef(undefined),
-    option: React.useRef(undefined),
-    value: React.useRef(undefined),
-    valueCopy: React.useRef(undefined),
-    canvasMain: React.useRef(),
-    open: React.useRef(),
-    resizeAspectRatio: React.useRef(undefined),
-    filterValues: React.useRef(undefined),
-    filterValuesCopy: React.useRef(undefined)
+    root: React.useRef(null),
+    option: React.useRef(null),
+    value: React.useRef(null),
+    valueCopy: React.useRef(null),
+    canvasMain: React.useRef(null),
+    open: React.useRef(null),
+    resizeAspectRatio: React.useRef(null),
+    filterValues: React.useRef(null),
+    filterValuesCopy: React.useRef(null)
   };
   refs.value.current = value;
   refs.valueCopy.current = valueCopy;

package/esm/ImageGallery/ImageGallery.js

@@ -196,18 +196,18 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [imageRef, setImageRef] = React.useState();
   const [keyDown, setKeyDown] = React.useState();
   const refs = {
-    root: React.useRef(undefined),
+    root: React.useRef(null),
     version: React.useRef(version),
-    more: React.useRef(undefined),
-    image: React.useRef(),
-    imageWrapper: React.useRef(undefined),
-    media: React.useRef(undefined),
-    zoom: React.useRef(undefined),
-    incrementZoom: React.useRef(undefined),
-    minZoom: React.useRef(undefined),
-    maxZoom: React.useRef(undefined),
-    mouseDown: React.useRef(undefined),
-    mouseMovePrevious: React.useRef(undefined),
+    more: React.useRef(null),
+    image: React.useRef(null),
+    imageWrapper: React.useRef(null),
+    media: React.useRef(null),
+    zoom: React.useRef(null),
+    incrementZoom: React.useRef(null),
+    minZoom: React.useRef(null),
+    maxZoom: React.useRef(null),
+    mouseDown: React.useRef(null),
+    mouseMovePrevious: React.useRef(null),
     keyDown: React.useRef(keyDown),
     useZoom: React.useRef(false)
   };

package/esm/LineChartItem/LineChartItem.js

@@ -55,14 +55,14 @@ const LineChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const refs = {
-    minMax: React.useRef(undefined),
-    smooth: React.useRef(undefined),
-    theme: React.useRef(undefined),
-    path: React.useRef(),
+    minMax: React.useRef(null),
+    smooth: 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/MainProgress/MainProgress.js

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

package/esm/RichTextEditor/RichTextEditor.js

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

package/esm/ScatterChartItem/ScatterChartItem.js

@@ -54,13 +54,13 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const refs = {
-    minMax: React.useRef(undefined),
-    path: React.useRef(undefined),
-    theme: React.useRef(undefined),
+    minMax: React.useRef(null),
+    path: React.useRef(null),
+    theme: 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/ScreenCapture/ScreenCapture.js

@@ -88,10 +88,10 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [canvasSelectorValue, setCanvasSelectorValue] = React.useState();
   const [supported, setSupported] = React.useState(true);
   const refs = {
-    root: React.useRef(undefined),
-    canvas: React.useRef(undefined),
-    canvasSelectorValue: React.useRef(undefined),
-    element: React.useRef()
+    root: React.useRef(null),
+    canvas: React.useRef(null),
+    canvasSelectorValue: React.useRef(null),
+    element: React.useRef(null)
   };
   const touch = useMediaQuery('(pointer: coarse)', {
     element: refs.root.current

package/esm/SmartTextField/SmartTextField.js

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

package/esm/Tree/Tree.js

@@ -44,7 +44,6 @@ const useStyle = styleMethod(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`
   },
@@ -58,6 +57,7 @@ const useStyle = styleMethod(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)`
@@ -166,7 +166,7 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
     ids: {
       middle: React.useId()
     },
-    inProgressTransition: React.useRef()
+    inProgressTransition: React.useRef(null)
   };
   const styles = {
     root: {}

package/esm/VideoPlayer/VideoPlayer.js

@@ -240,25 +240,25 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [playbackSpeed, setPlaybackSpeed] = React.useState(1);
   const [openMenu, setOpenMenu] = React.useState();
   const refs = {
-    root: React.useRef(undefined),
-    video: 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),
+    video: 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),
     fullScreen: React.useRef(fullScreen),
     mouseMoved: React.useRef(mouseMoved),
-    timeoutMouseMoved: React.useRef(undefined)
+    timeoutMouseMoved: React.useRef(null)
   };
   refs.duration.current = duration;
   refs.time.current = time;

package/esm/Zoom/Zoom.js

@@ -6,7 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, useOnesyTheme } from '@onesy/style-react';
-import { Transition } from '../';
+import { Transition } from '..';
 const Zoom = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyZoom?.props?.default), props_), [props_]);

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license AmauiUiReact v1.0.0
+/** @license UiReact v1.0.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/useScroll/useScroll.js

@@ -11,8 +11,8 @@ const useScroll = props => {
   const refs = {
     root: React.useRef(root),
     previous: React.useRef(0),
-    offset: React.useRef(),
-    direction: React.useRef(),
+    offset: React.useRef(null),
+    direction: React.useRef(null),
     response: React.useRef(response)
   };
   refs.root.current = root;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "UI for React",
   "repository": "https://github.com/onesy-org/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@onesy/date": "^1.0.0",
     "@onesy/errors": "^1.0.0",
-    "@amaui/icons-material-rounded-react": "^1.0.4",
+    "@onesy/icons-material-rounded-react": "^1.0.1",
     "@onesy/log": "^1.0.0",
     "@onesy/subscription": "^1.0.0",
     "@onesy/utils": "^1.0.0"

package/types.d.ts

@@ -1,26 +1,26 @@
 /// <reference types="react" />
 import { IBreakpoint, TPaletteVersion } from '@onesy/style-react';
-export declare type IPoint = [number, number];
-export declare type ITonal = true | false | 'secondary';
-declare type RGB = `rgb(${number}, ${number}, ${number})`;
-declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
-declare type HSL = `hsl(${number}, ${number}, ${number})`;
-declare type HSLA = `hsla(${number}, ${number}, ${number}, ${number})`;
-declare type HEX = `#${string}`;
-declare type Color = RGB | RGBA | HSL | HSLA | HEX;
-export declare type IColor = 'default' | 'themed' | 'inverted' | 'inherit' | TPaletteVersion | Color;
-export declare type IVersion = 'filled' | 'outlined' | 'outlined-without-background' | 'text';
-export declare type ISize = 'small' | 'regular' | 'large';
-export declare type ISizeAny = ISize | number;
-export declare type IElevation = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 9 | 12 | 16 | 24;
-export declare type IElementReference = string | React.FC<any> | (React.ForwardRefExoticComponent<any>);
-export declare type IElement = React.ReactNode | React.ReactNode[] | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export declare type IElementAny = IElement | string | number | boolean | null | undefined;
-export declare type IHTMLElement = Element | HTMLElement;
-export declare type IPropsAny = Record<string, any>;
-export declare type IStyle = React.CSSProperties | undefined;
-export declare type IChildren = React.ReactNode | React.ReactNode[];
-export declare type IRef = React.MutableRefObject<any>;
+export type IPoint = [number, number];
+export type ITonal = true | false | 'secondary';
+type RGB = `rgb(${number}, ${number}, ${number})`;
+type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+type HSL = `hsl(${number}, ${number}, ${number})`;
+type HSLA = `hsla(${number}, ${number}, ${number}, ${number})`;
+type HEX = `#${string}`;
+type Color = RGB | RGBA | HSL | HSLA | HEX;
+export type IColor = 'default' | 'themed' | 'inverted' | 'inherit' | TPaletteVersion | Color;
+export type IVersion = 'filled' | 'outlined' | 'outlined-without-background' | 'text';
+export type ISize = 'small' | 'regular' | 'large';
+export type ISizeAny = ISize | number;
+export type IElevation = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 9 | 12 | 16 | 24;
+export type IElementReference = string | React.FC<any> | (React.ForwardRefExoticComponent<any>);
+export type IElement = React.ReactNode | React.ReactNode[] | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export type IElementAny = IElement | string | number | boolean | null | undefined;
+export type IHTMLElement = Element | HTMLElement;
+export type IPropsAny = Record<string, any>;
+export type IStyle = React.CSSProperties | undefined;
+export type IChildren = React.ReactNode | React.ReactNode[];
+export type IRef = React.MutableRefObject<any>;
 export interface IBaseElement {
     Component?: any;
     className?: string;
@@ -28,8 +28,8 @@ export interface IBaseElement {
     children?: IChildren;
     [property: string]: any;
 }
-export declare type IMethodTransition = (element?: IHTMLElement) => any;
-export declare type IValueBreakpoints = IBreakpoint | 'default';
+export type IMethodTransition = (element?: IHTMLElement) => any;
+export type IValueBreakpoints = IBreakpoint | 'default';
 export interface IMediaObject {
     id?: string;
     name?: string;