@onesy/ui-react 1.0.163 → 1.0.165

package/Clock/Clock.js

@@ -38,19 +38,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Clock'
 });
 const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyClock) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props__);
-  }, [props__]);
-  const RoundMeter = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.RoundMeter) || _RoundMeter.default;
-  }, [theme]);
-  const Path = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Path) || _Path.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyClock) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props__);
+  const RoundMeter = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.RoundMeter) || _RoundMeter.default;
+  const Path = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Path) || _Path.default;
   const {
       tonal = true,
       color = 'primary',
@@ -109,7 +101,7 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   refs.autoNext.current = autoNext;
   refs.format.current = format;
   refs.dayTime.current = dayTime;
-  const resolve = _react.default.useCallback((valueNew = refs.value.current, dayTimeValue = refs.dayTime.current) => {
+  const resolve = (valueNew = refs.value.current, dayTimeValue = refs.dayTime.current) => {
     // Resolve the range value
     const valueHour = valueNew.hour;
     if (format === '12') {
@@ -117,16 +109,16 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       if (dayTimeValue === 'pm' && valueHour < 12) return (0, _date.set)(valueHour + 12, 'hour', valueNew);
     }
     return valueNew;
-  }, [value, dayTime, format]);
-  const inputToValue = _react.default.useCallback((valueNew, unit = refs.selecting.current) => {
+  };
+  const inputToValue = (valueNew_0, unit = refs.selecting.current) => {
     let onesyDate = new _date.OnesyDate(refs.value.current);
-    let valueTime = valueNew;
+    let valueTime = valueNew_0;
     if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
     valueTime = +valueTime;
     if (unit === 'hour') onesyDate = (0, _date.set)(format === '12' && dayTime === 'pm' ? valueTime + 12 : valueTime, 'hour', onesyDate);else onesyDate = (0, _date.set)(valueTime, unit, onesyDate);
     return resolve(onesyDate);
-  }, [value, format, dayTime, hour, minute, second]);
-  const onMove = _react.default.useCallback((x_, y_) => {
+  };
+  const onMove = (x_, y_) => {
     const rectMiddle = refs.middle.current.getBoundingClientRect();
     const x = x_ - rectMiddle.x;
     const y = y_ - rectMiddle.y;
@@ -145,7 +137,7 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       valuesAll = Array.from({
         length: 12
       }).map((item, index_) => [part * index_ - part / 2, part * index_ + part / 2]);
-      let index = valuesAll.findIndex(item => angle >= item[0] && angle <= item[1]);
+      let index = valuesAll.findIndex(item_0 => angle >= item_0[0] && angle <= item_0[1]);
       if (index === -1 || index === 0) index = refs.format.current === '24' ? 0 : 12;
       if (refs.format.current === '24') {
         let within = false;
@@ -172,20 +164,20 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       // Update values
       onUpdate(inputToValue(index, 'hour'));
     } else if (['minute', 'second'].includes(refs.selecting.current)) {
-      const part = 360 / 60;
+      const part_0 = 360 / 60;
       valuesAll = Array.from({
         length: 60
-      }).map((item, index_) => [part * index_ - part / 2, part * index_ + part / 2]);
-      let index = valuesAll.findIndex(item => angle >= item[0] && angle <= item[1]);
-      if (index === -1 || index === 0) index = 0;
+      }).map((item_1, index__0) => [part_0 * index__0 - part_0 / 2, part_0 * index__0 + part_0 / 2]);
+      let index_0 = valuesAll.findIndex(item_2 => angle >= item_2[0] && angle <= item_2[1]);
+      if (index_0 === -1 || index_0 === 0) index_0 = 0;
 
       // Validate
-      if (!valid(inputToValue(index), refs.selecting.current)) return;
+      if (!valid(inputToValue(index_0), refs.selecting.current)) return;
 
       // Update values
-      onUpdate(inputToValue(index));
+      onUpdate(inputToValue(index_0));
     }
-  }, []);
+  };
   _react.default.useEffect(() => {
     var _refs$root$current;
     const onMouseUp = () => {
@@ -218,13 +210,13 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     };
 
     // Touch move
-    const onTouchMove = event => {
+    const onTouchMove = event_0 => {
       if (refs.mouseDown.current) {
         const {
-          clientY,
-          clientX
-        } = event.touches[0];
-        onMove(clientX, clientY);
+          clientY: clientY_0,
+          clientX: clientX_0
+        } = event_0.touches[0];
+        onMove(clientX_0, clientY_0);
       }
     };
     const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
@@ -244,7 +236,7 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   _react.default.useEffect(() => {
     if (value_ !== undefined && value_ !== value) setValue(value_);
   }, [value_]);
-  const updateTransitions = _react.default.useCallback(() => {
+  const updateTransitions = () => {
     // Add momentary transition to the OnesyRoundMeter-children > *
     // if selecting value updates
     if (refs.root.current) {
@@ -253,14 +245,14 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       if (elementChildren && elementLabels) {
         elementChildren = Array.from(elementChildren.children);
         elementLabels = Array.from(elementLabels.children);
-        elementChildren.forEach(item => item.style.transition = 'transform .3s');
-        elementLabels.forEach(item => item.style.transition = 'fill .3s');
+        elementChildren.forEach(item_3 => item_3.style.transition = 'transform .3s');
+        elementLabels.forEach(item_4 => item_4.style.transition = 'fill .3s');
         setTimeout(() => {
-          [...elementChildren, ...elementLabels].forEach(item => item.style.removeProperty('transition'));
+          [...elementChildren, ...elementLabels].forEach(item_5 => item_5.style.removeProperty('transition'));
         }, 300);
       }
     }
-  }, []);
+  };
   _react.default.useEffect(() => {
     if (selecting_ !== undefined && selecting_ !== selecting) {
       setSelecting(selecting_);
@@ -274,46 +266,46 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       updateTransitions();
     }
   }, [selecting]);
-  const onUpdate = _react.default.useCallback(valueNew => {
-    const newValue = (valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds) || null;
+  const onUpdate = valueNew_1 => {
+    const newValue = (valueNew_1 === null || valueNew_1 === void 0 ? void 0 : valueNew_1.milliseconds) || null;
     const previousValue = refs.value.current.milliseconds;
     if (newValue === previousValue) return;
     if (!(readOnly || disabled)) {
       // Inner controlled value
-      if (!props.hasOwnProperty('value')) setValue(valueNew);
-      if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+      if (!props.hasOwnProperty('value')) setValue(valueNew_1);
+      if ((0, _utils.is)('function', onChange)) onChange(valueNew_1);
     }
-  }, [readOnly, disabled]);
-  const onUpdateSelecting = _react.default.useCallback(valueNew => {
+  };
+  const onUpdateSelecting = valueNew_2 => {
     if (!(readOnly || disabled)) {
       // Inner controlled selecting
-      if (!props.hasOwnProperty('selecting')) setSelecting(valueNew);
-      if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew);
+      if (!props.hasOwnProperty('selecting')) setSelecting(valueNew_2);
+      if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew_2);
     }
-  }, [readOnly, disabled]);
-  const valid = _react.default.useCallback((...args) => {
+  };
+  const valid = (...args) => {
     if ((0, _utils.is)('function', valid_)) return valid_(...args);
-    const onesyDate = args[0];
+    const onesyDate_0 = args[0];
     if (min || max || validate) {
       let response = true;
-      if ((0, _utils.is)('function', validate)) response = validate(onesyDate);
-      if (min !== undefined) response = response && (0, _date.is)(onesyDate, 'after or same', min);
-      if (max !== undefined) response = response && (0, _date.is)(onesyDate, 'before or same', max);
+      if ((0, _utils.is)('function', validate)) response = validate(onesyDate_0);
+      if (min !== undefined) response = response && (0, _date.is)(onesyDate_0, 'after or same', min);
+      if (max !== undefined) response = response && (0, _date.is)(onesyDate_0, 'before or same', max);
       return response;
     }
     return true;
-  }, [valid_, min, max, validate]);
-  const onMouseDown = _react.default.useCallback(() => {
+  };
+  const onMouseDown = () => {
     setMouseDown(true);
-  }, []);
-  const onClick = _react.default.useCallback(event => {
+  };
+  const onClick = event_1 => {
     const {
-      clientX: x,
-      clientY: y
-    } = event;
-    onMove(x, y);
-    if ((0, _utils.is)('function', onClick_)) onClick_(event);
-  }, [onClick_]);
+      clientX: x_0,
+      clientY: y_0
+    } = event_1;
+    onMove(x_0, y_0);
+    if ((0, _utils.is)('function', onClick_)) onClick_(event_1);
+  };
   const palette = _react.default.useMemo(() => {
     var _theme$palette$color$;
     if (['inherit', 'default'].includes(color)) return theme.methods.color(theme.palette.text.default.primary);
@@ -342,42 +334,42 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     // 12 hours
     ...Array.from({
       length: 12
-    }).map((item, index) => ({
-      value: index === 0 ? 12 : index,
+    }).map((item_6, index_1) => ({
+      value: index_1 === 0 ? 12 : index_1,
       padding: theme.methods.space.value(2.5, 'px'),
       style: {
         fontSize: 14,
-        opacity: valid(inputToValue(index === 0 ? 12 : index, 'hour'), 'hour') ? 1 : 0.27,
-        fill: valueClock === 12 && index === 0 || valueClock === index ? colors.inverse : colors.regular
+        opacity: valid(inputToValue(index_1 === 0 ? 12 : index_1, 'hour'), 'hour') ? 1 : 0.27,
+        fill: valueClock === 12 && index_1 === 0 || valueClock === index_1 ? colors.inverse : colors.regular
       },
-      position: index * (100 / 12)
+      position: index_1 * (100 / 12)
     }))], 'position');else {
       labels = [(0, _utils.unique)([
       // 0-11 hours
       ...Array.from({
         length: 12
-      }).map((item, index) => ({
-        value: index === 0 ? '00' : index,
+      }).map((item_7, index_2) => ({
+        value: index_2 === 0 ? '00' : index_2,
         padding: theme.methods.space.value(2.5, 'px'),
         style: {
           fontSize: 14,
-          opacity: valid(inputToValue(index === 0 ? 0 : index, 'hour'), 'hour') ? 1 : 0.27,
-          fill: valueClock24 === index ? colors.inverse : colors.regular
+          opacity: valid(inputToValue(index_2 === 0 ? 0 : index_2, 'hour'), 'hour') ? 1 : 0.27,
+          fill: valueClock24 === index_2 ? colors.inverse : colors.regular
         },
-        position: index * (100 / 12)
+        position: index_2 * (100 / 12)
       }))], 'position'), (0, _utils.unique)([
       // 12-23 hours
       ...Array.from({
         length: 12
-      }).map((item, index) => ({
-        value: 12 + index,
+      }).map((item_8, index_3) => ({
+        value: 12 + index_3,
         padding: theme.methods.space.value(6, 'px'),
         style: {
           fontSize: 14,
-          opacity: valid(inputToValue(12 + index, 'hour'), 'hour') ? 1 : 0.27,
-          fill: valueClock24 === 12 + index ? colors.inverse : colors.regular
+          opacity: valid(inputToValue(12 + index_3, 'hour'), 'hour') ? 1 : 0.27,
+          fill: valueClock24 === 12 + index_3 ? colors.inverse : colors.regular
         },
-        position: index * (100 / 12)
+        position: index_3 * (100 / 12)
       }))], 'position')];
     }
   }
@@ -391,15 +383,15 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     // 59 minutes
     ...Array.from({
       length: 12
-    }).map((item, index) => ({
-      value: index === 0 ? '00' : (0, _utils.getLeadingZerosNumber)(60 / 12 * index),
+    }).map((item_9, index_4) => ({
+      value: index_4 === 0 ? '00' : (0, _utils.getLeadingZerosNumber)(60 / 12 * index_4),
       padding: theme.methods.space.value(2.5, 'px'),
       style: {
         fontSize: 14,
-        opacity: valid(inputToValue(index === 0 ? 0 : 60 / 12 * index), 'minute') ? 1 : 0.27,
-        fill: valueClock === 60 / 12 * index ? colors.inverse : colors.regular
+        opacity: valid(inputToValue(index_4 === 0 ? 0 : 60 / 12 * index_4), 'minute') ? 1 : 0.27,
+        fill: valueClock === 60 / 12 * index_4 ? colors.inverse : colors.regular
       },
-      position: index * (100 / 12)
+      position: index_4 * (100 / 12)
     }))], 'position');
   }
   if (selecting === 'second') {
@@ -412,23 +404,23 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     // 59 seconds
     ...Array.from({
       length: 12
-    }).map((item, index) => ({
-      value: index === 0 ? '00' : (0, _utils.getLeadingZerosNumber)(60 / 12 * index),
+    }).map((item_10, index_5) => ({
+      value: index_5 === 0 ? '00' : (0, _utils.getLeadingZerosNumber)(60 / 12 * index_5),
       padding: theme.methods.space.value(2.5, 'px'),
       style: {
         fontSize: 14,
-        opacity: valid(inputToValue(index === 0 ? 0 : 60 / 12 * index, 'second'), 'second') ? 1 : 0.27,
-        fill: valueClock === 60 / 12 * index ? colors.inverse : colors.regular
+        opacity: valid(inputToValue(index_5 === 0 ? 0 : 60 / 12 * index_5, 'second'), 'second') ? 1 : 0.27,
+        fill: valueClock === 60 / 12 * index_5 ? colors.inverse : colors.regular
       },
-      position: index * (100 / 12)
+      position: index_5 * (100 / 12)
     }))], 'position');
   }
   return /*#__PURE__*/_react.default.createElement(RoundMeter, (0, _extends2.default)({
-    ref: item => {
+    ref: item_11 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_11);else ref.current = item_11;
       }
-      refs.root.current = item;
+      refs.root.current = item_11;
     },
     tonal: tonal,
     color: color,
@@ -443,7 +435,7 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       onMouseDown: onMouseDown,
       onTouchStart: onMouseDown
     },
-    renderLabel: (0, _utils.is)('function', renderValue) ? (x, y, valueItem, otherProps) => renderValue(value, selecting, x, y, valueItem, otherProps) : undefined
+    renderLabel: (0, _utils.is)('function', renderValue) ? (x_1, y_1, valueItem, otherProps) => renderValue(value, selecting, x_1, y_1, valueItem, otherProps) : undefined
   }, other, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Clock', theme) && ['onesy-Clock-round-meter'], className, classes.root, mouseDown && classes.mouseDown])
   }), /*#__PURE__*/_react.default.createElement(Path, {

package/ColorTextField/ColorTextField.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ITextField } from '../TextField/TextField';
-export type IColorTextField = ITextField & {
+export declare type IColorTextField = ITextField & {
     name?: any;
     valueColor?: string;
     valueOpacity?: string | number;

package/ColorTextField/ColorTextField.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -22,61 +23,183 @@ const _excluded = ["name", "value", "onChange", "min", "max", "children", "class
 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) { (0, _defineProperty2.default)(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; }
 const SliderInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  var _theme$elements, _theme$elements2, _theme$elements3;
+  const $ = (0, _compilerRuntime.c)(43);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const FormRow = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.FormRow) || _FormRow.default;
-  }, [theme]);
-  const Slider = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Slider) || _Slider.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
-  }, [theme]);
-  const {
-      name,
-      value,
-      onChange,
-      min,
-      max,
-      children,
-      className
-    } = props,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(FormRow, {
-    gap: 1,
-    description: `${name} ${(value || 100).toFixed(0)}`,
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([className])
-  }, /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
-    value: value,
-    onChange: onChange,
-    valueDefault: 100,
-    min: min,
-    max: max,
-    size: "small",
-    tooltip: true,
-    marks: [{
-      label: /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, min),
+  const FormRow = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.FormRow) || _FormRow.default;
+  const Slider = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Slider) || _Slider.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  let className;
+  let max;
+  let min;
+  let name;
+  let onChange;
+  let other;
+  let value;
+  if ($[0] !== props) {
+    const {
+        name: t0,
+        value: t1,
+        onChange: t2,
+        min: t3,
+        max: t4,
+        children,
+        className: t5
+      } = props,
+      t6 = (0, _objectWithoutProperties2.default)(props, _excluded);
+    name = t0;
+    value = t1;
+    onChange = t2;
+    min = t3;
+    max = t4;
+    className = t5;
+    other = t6;
+    $[0] = props;
+    $[1] = className;
+    $[2] = max;
+    $[3] = min;
+    $[4] = name;
+    $[5] = onChange;
+    $[6] = other;
+    $[7] = value;
+  } else {
+    className = $[1];
+    max = $[2];
+    min = $[3];
+    name = $[4];
+    onChange = $[5];
+    other = $[6];
+    value = $[7];
+  }
+  const t0 = value || 100;
+  let t1;
+  if ($[8] !== t0) {
+    t1 = t0.toFixed(0);
+    $[8] = t0;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const t2 = `${name} ${t1}`;
+  let t3;
+  if ($[10] !== className) {
+    t3 = (0, _styleReact.classNames)([className]);
+    $[10] = className;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== Type || $[13] !== min) {
+    t4 = /*#__PURE__*/_react.default.createElement(Type, {
+      version: "b3"
+    }, min);
+    $[12] = Type;
+    $[13] = min;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== min || $[16] !== t4) {
+    t5 = {
+      label: t4,
       value: min
-    }, {
-      label: /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, max),
+    };
+    $[15] = min;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  if ($[18] !== Type || $[19] !== max) {
+    t6 = /*#__PURE__*/_react.default.createElement(Type, {
+      version: "b3"
+    }, max);
+    $[18] = Type;
+    $[19] = max;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  let t7;
+  if ($[21] !== max || $[22] !== t6) {
+    t7 = {
+      label: t6,
       value: max
-    }],
-    labels: true
-  }, other, {
-    style: _objectSpread({
-      maxWidth: 'unset',
-      width: 'calc(100% - 8px)',
-      margin: '4px 4px 16px'
-    }, other.style)
-  })));
+    };
+    $[21] = max;
+    $[22] = t6;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  let t8;
+  if ($[24] !== t5 || $[25] !== t7) {
+    t8 = [t5, t7];
+    $[24] = t5;
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  let t9;
+  if ($[27] !== other.style) {
+    t9 = _objectSpread({
+      maxWidth: "unset",
+      width: "calc(100% - 8px)",
+      margin: "4px 4px 16px"
+    }, other.style);
+    $[27] = other.style;
+    $[28] = t9;
+  } else {
+    t9 = $[28];
+  }
+  let t10;
+  if ($[29] !== Slider || $[30] !== max || $[31] !== min || $[32] !== onChange || $[33] !== other || $[34] !== t8 || $[35] !== t9 || $[36] !== value) {
+    t10 = /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      value: value,
+      onChange: onChange,
+      valueDefault: 100,
+      min: min,
+      max: max,
+      size: "small",
+      tooltip: true,
+      marks: t8,
+      labels: true
+    }, other, {
+      style: t9
+    }));
+    $[29] = Slider;
+    $[30] = max;
+    $[31] = min;
+    $[32] = onChange;
+    $[33] = other;
+    $[34] = t8;
+    $[35] = t9;
+    $[36] = value;
+    $[37] = t10;
+  } else {
+    t10 = $[37];
+  }
+  let t11;
+  if ($[38] !== FormRow || $[39] !== t10 || $[40] !== t2 || $[41] !== t3) {
+    t11 = /*#__PURE__*/_react.default.createElement(FormRow, {
+      gap: 1,
+      description: t2,
+      fullWidth: true,
+      className: t3
+    }, t10);
+    $[38] = FormRow;
+    $[39] = t10;
+    $[40] = t2;
+    $[41] = t3;
+    $[42] = t11;
+  } else {
+    t11 = $[42];
+  }
+  return t11;
 });
 const useStyle = (0, _styleReact.style)(theme => ({
   root: {
@@ -115,20 +238,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ColorTextField'
 });
 const ColorTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements4, _theme$elements5;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyColorTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Line) || _Line.default;
-  }, [theme]);
-  const TextField = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.TextField) || _TextField.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyColorTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Line) || _Line.default;
+  const TextField = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.TextField) || _TextField.default;
   const {
       name,
       version = 'outlined',
@@ -182,7 +297,7 @@ const ColorTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     if (valueOpacity_ !== undefined && valueOpacity !== valueOpacity_) setValueOpacity(valueOpacity_);
   }, [valueOpacity_]);
-  const onChange = _react.default.useCallback(valueNew => {
+  const onChange = valueNew => {
     if (opacity) {
       const opacity_ = (0, _utils.clamp)(+refs.valueOpacity.current / 100, 0.0001, 1);
       if ((0, _utils.is)('function', onChange_)) onChange_((0, _utils.colorToRgb)(refs.valueColor.current, +opacity_.toFixed(2)) || '');
@@ -191,22 +306,22 @@ const ColorTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (!props.hasOwnProperty('value')) setValue(valueNew);
       if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
     }
-  }, [onChange_]);
-  const onChangeColor = _react.default.useCallback(valueNew => {
-    if (!props.hasOwnProperty('valueColor')) setValueColor(valueNew);
-    if ((0, _utils.is)('function', onChangeColor_)) onChangeColor_(valueNew);
+  };
+  const onChangeColor = valueNew_0 => {
+    if (!props.hasOwnProperty('valueColor')) setValueColor(valueNew_0);
+    if ((0, _utils.is)('function', onChangeColor_)) onChangeColor_(valueNew_0);
     setTimeout(() => {
       onChange();
     }, 14);
-  }, [onChangeColor_]);
-  const onChangeOpacity = _react.default.useCallback(valueNew_ => {
-    const valueNew = +(valueNew_ === null || valueNew_ === void 0 ? void 0 : valueNew_.toFixed(2));
-    if (!props.hasOwnProperty('valueOpacity')) setValueOpacity(valueNew);
-    if ((0, _utils.is)('function', onChangeOpacity_)) onChangeOpacity_(valueNew);
+  };
+  const onChangeOpacity = valueNew_ => {
+    const valueNew_1 = +(valueNew_ === null || valueNew_ === void 0 ? void 0 : valueNew_.toFixed(2));
+    if (!props.hasOwnProperty('valueOpacity')) setValueOpacity(valueNew_1);
+    if ((0, _utils.is)('function', onChangeOpacity_)) onChangeOpacity_(valueNew_1);
     setTimeout(() => {
       onChange();
     }, 14);
-  }, [onChangeOpacity_]);
+  };
   const root = /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
     name: name,
     value: opacity ? valueColor : value,

package/ColumnChart/ColumnChart.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IChart } from '../Chart/Chart';
-export type IColumnChart = IChart & {};
+export declare type IColumnChart = IChart & {};
 declare const ColumnChart: React.FC<IColumnChart>;
 export default ColumnChart;