@onesy/ui-react 1.0.171 → 1.0.173

package/esm/Checkbox/Checkbox.js

@@ -1,6 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["noFontSizeDownScale", "Component", "className", "style", "children"],
   _excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"];
 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; }
@@ -13,11 +12,12 @@ import IconButtonElement from '../IconButton';
 import { IconDoneAnimated } from '../Buttons/Buttons';
 import { staticClassName } from '../utils';
 import Icon from '../Icon';
-const IconMaterialIndeterminateCheckBox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const $ = _c(4);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconMaterialIndeterminateCheckBox = props => {
+  const $ = _c(3);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /*#__PURE__*/React.createElement("path", {
+    t0 = /*#__PURE__*/_jsx("path", {
       d: "M7 13H17V11H7V13Z"
     });
     $[0] = t0;
@@ -25,20 +25,20 @@ const IconMaterialIndeterminateCheckBox = /*#__PURE__*/React.forwardRef((props,
     t0 = $[0];
   }
   let t1;
-  if ($[1] !== props || $[2] !== ref) {
-    t1 = /*#__PURE__*/React.createElement(Icon, _extends({
-      ref: ref,
+  if ($[1] !== props) {
+    t1 = /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({
       name: "IndeterminateCheckBox",
       short_name: "IndeterminateCheckBox"
-    }, props), t0);
+    }, props), {}, {
+      children: t0
+    }));
     $[1] = props;
-    $[2] = ref;
-    $[3] = t1;
+    $[2] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[2];
   }
   return t1;
-});
+};
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -270,10 +270,11 @@ const IconItem = props => {
   }
   let t3;
   if ($[16] !== Component || $[17] !== className || $[18] !== t1 || $[19] !== t2) {
-    t3 = /*#__PURE__*/React.createElement(Component, {
+    t3 = /*#__PURE__*/_jsx(Component, {
       className: className,
-      style: t1
-    }, t2);
+      style: t1,
+      children: t2
+    });
     $[16] = Component;
     $[17] = className;
     $[18] = t1;
@@ -284,7 +285,7 @@ const IconItem = props => {
   }
   return t3;
 };
-const Checkbox = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Checkbox = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread({}, props_), theme?.ui?.elements?.onesyCheckbox?.props?.default);
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
@@ -387,15 +388,14 @@ const Checkbox = /*#__PURE__*/React.forwardRef((props_, ref) => {
   let colorValue = color;
   if (!value && tonal) colorValue = colorUnchecked;
   if (indeterminate) colorValue = colorIndeterminate;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(IconButton, _objectSpread(_objectSpread({
     tabIndex: !disabled ? 0 : -1,
     color: colorValue,
     tonal: tonal,
     version: version,
     size: size,
     onKeyDown: onKeyDown,
-    firstLevelChildren: /*#__PURE__*/React.createElement("input", {
+    firstLevelChildren: /*#__PURE__*/_jsx("input", {
       ref: item => {
         if (inputRef) {
           if (is('function', inputRef)) inputRef(item);else inputRef.current = item;
@@ -415,29 +415,32 @@ const Checkbox = /*#__PURE__*/React.forwardRef((props_, ref) => {
     disabled: disabled,
     Component: Component,
     className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
-  }, other), /*#__PURE__*/React.createElement(IconItem, {
-    size: size,
-    className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon-item'], classes.iconItem, value && classes.iconItem_checked, indeterminate && classes.iconItem_indeterminate, value && disabled && classes.iconItem_checked_disabled]),
-    style: styles.iconItem
-  }), /*#__PURE__*/React.createElement(IconItem, {
-    Component: "div",
-    size: size,
-    className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon-box'], classes.icon, classes.iconBox, value && [classes.iconBox_checked, classes[`iconBox_checked_version_${version}`]], indeterminate && [classes.iconBox_indeterminate, classes[`iconBox_indeterminate_version_${version}`]], disabled && [value && classes.iconBox_checked_disabled, indeterminate && classes.iconBox_indeterminate_disabled]]),
-    style: styles.iconBox
-  }), indeterminate && /*#__PURE__*/React.createElement(IconItem, {
-    size: size,
-    className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-indeterminate'], classes.icon, classes.iconDone, indeterminate && classes.indeterminate]),
-    style: styles.iconDone,
-    noFontSizeDownScale: true
-  }, /*#__PURE__*/React.createElement(IconMaterialIndeterminateCheckBox, {
-    size: "inherit"
-  })), value && /*#__PURE__*/React.createElement(IconDoneAnimated, {
-    size: size === 'large' ? '3rem' : size,
-    className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-done'], classes.icon, classes.iconDone]),
-    style: styles.iconDone,
-    in: value,
-    add: true
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx(IconItem, {
+      size: size,
+      className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon-item'], classes.iconItem, value && classes.iconItem_checked, indeterminate && classes.iconItem_indeterminate, value && disabled && classes.iconItem_checked_disabled]),
+      style: styles.iconItem
+    }), /*#__PURE__*/_jsx(IconItem, {
+      Component: "div",
+      size: size,
+      className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon-box'], classes.icon, classes.iconBox, value && [classes.iconBox_checked, classes[`iconBox_checked_version_${version}`]], indeterminate && [classes.iconBox_indeterminate, classes[`iconBox_indeterminate_version_${version}`]], disabled && [value && classes.iconBox_checked_disabled, indeterminate && classes.iconBox_indeterminate_disabled]]),
+      style: styles.iconBox
+    }), indeterminate && /*#__PURE__*/_jsx(IconItem, {
+      size: size,
+      className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-indeterminate'], classes.icon, classes.iconDone, indeterminate && classes.indeterminate]),
+      style: styles.iconDone,
+      noFontSizeDownScale: true,
+      children: /*#__PURE__*/_jsx(IconMaterialIndeterminateCheckBox, {
+        size: "inherit"
+      })
+    }), value && /*#__PURE__*/_jsx(IconDoneAnimated, {
+      size: size === 'large' ? '3rem' : size,
+      className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-done'], classes.icon, classes.iconDone]),
+      style: styles.iconDone,
+      in: value,
+      add: true
+    })]
   }));
-});
+};
 Checkbox.displayName = 'onesy-Checkbox';
 export default Checkbox;

package/esm/Chip/Chip.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "input", "filter", "selected", "start", "focus", "noCheckIcon", "onClick", "onRemove", "onSelected", "onUnselected", "className", "children"];
@@ -11,6 +10,7 @@ import IconMaterialClose from '@onesy/icons-material-rounded-react/IconMaterialC
 import ButtonElement from '../Button';
 import { IconDoneAnimated } from '../Buttons/Buttons';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     '&.onesy-Button-root': {
@@ -23,7 +23,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Chip'
 });
-const Chip = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Chip = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChip?.props?.default), props_);
   const Button = theme?.elements?.Button || ButtonElement;
@@ -56,7 +56,7 @@ const Chip = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, [selected_]);
   const OtherProps = {};
   if (input) {
-    OtherProps.end = /*#__PURE__*/React.createElement(IconMaterialClose, {
+    OtherProps.end = /*#__PURE__*/_jsx(IconMaterialClose, {
       onClick: event => {
         if (is('function', onRemove)) onRemove(event);
       }
@@ -90,8 +90,7 @@ const Chip = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setSelected(false);
     }
   };
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     tonal: tonal,
     version: version,
     color: color || (tonal ? 'neutral' : 'default'),
@@ -103,23 +102,25 @@ const Chip = /*#__PURE__*/React.forwardRef((props_, ref) => {
     },
     start: start
   }, !noCheckIcon && start && selected ? {
-    start: /*#__PURE__*/React.createElement(IconDoneAnimated, {
+    start: /*#__PURE__*/_jsx(IconDoneAnimated, {
       simple: true,
       in: true,
       add: true
     })
-  } : {}, !noCheckIcon && !start && (selected || preSelected) ? {
-    start: /*#__PURE__*/React.createElement(IconDoneAnimated, {
+  } : {}), !noCheckIcon && !start && (selected || preSelected) ? {
+    start: /*#__PURE__*/_jsx(IconDoneAnimated, {
       in: start ? selected : preSelected,
       onExited: () => updateSelected(),
       add: true
     })
-  } : {}, {
+  } : {}), {}, {
     focus: focus,
     selected: selected,
     chip: true,
     className: classNames([staticClassName('Chip', theme) && ['onesy-Chip-root', selected && `onesy-Chip-selected`], className, classes.root])
-  }, other, OtherProps), children);
-});
+  }, other), OtherProps), {}, {
+    children: children
+  }));
+};
 Chip.displayName = 'onesy-Chip';
 export default Chip;

package/esm/Chips/Chips.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["size", "gap", "align", "justify", "direction", "wrap", "total", "max", "showAllDefault", "moreShowAll", "AdditionalChip", "AdditionalChipProps", "Component", "className", "style", "children"];
@@ -10,6 +9,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import LineElement from '../Line';
 import ChipElement from '../Chip/Chip';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     width: '100%',
@@ -51,8 +51,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Chips'
 });
-const Chips = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(13);
+const Chips = props_ => {
+  const $ = _c(12);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChips?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -112,11 +112,12 @@ const Chips = /*#__PURE__*/React.forwardRef((props_, ref) => {
         AdditionalChipProps.TypeProps = {};
       }
       AdditionalChipProps.TypeProps.size = "0.44em";
-      children.push(AdditionalChip || /*#__PURE__*/React.createElement(Chip, _extends({
+      children.push(AdditionalChip || /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread(_objectSpread({
         color: "default"
-      }, other, AdditionalChipProps, {
-        onClick: moreShowAll ? onClickMore : undefined
-      }), value));
+      }, other), AdditionalChipProps), {}, {
+        onClick: moreShowAll ? onClickMore : undefined,
+        children: value
+      })));
     }
   }
   const t9 = classNames([staticClassName("Chips", theme) && ["onesy-Chips-root", `onesy-Chips-size-${size}`], className, classes.root, classes[`size_${size}`], wrap === "wrap" && [classes.wrap, classes[`wrap_${size}`]]]);
@@ -125,9 +126,8 @@ const Chips = /*#__PURE__*/React.forwardRef((props_, ref) => {
     size
   }, other), item.props)));
   let t11;
-  if ($[1] !== Component || $[2] !== Line || $[3] !== align || $[4] !== direction || $[5] !== gap || $[6] !== justify || $[7] !== ref || $[8] !== style || $[9] !== t10 || $[10] !== t9 || $[11] !== wrap) {
-    t11 = /*#__PURE__*/React.createElement(Line, {
-      ref: ref,
+  if ($[1] !== Component || $[2] !== Line || $[3] !== align || $[4] !== direction || $[5] !== gap || $[6] !== justify || $[7] !== style || $[8] !== t10 || $[9] !== t9 || $[10] !== wrap) {
+    t11 = /*#__PURE__*/_jsx(Line, {
       gap: gap,
       justify: justify,
       align: align,
@@ -135,24 +135,24 @@ const Chips = /*#__PURE__*/React.forwardRef((props_, ref) => {
       wrap: wrap,
       Component: Component,
       className: t9,
-      style: style
-    }, t10);
+      style: style,
+      children: t10
+    });
     $[1] = Component;
     $[2] = Line;
     $[3] = align;
     $[4] = direction;
     $[5] = gap;
     $[6] = justify;
-    $[7] = ref;
-    $[8] = style;
-    $[9] = t10;
-    $[10] = t9;
-    $[11] = wrap;
-    $[12] = t11;
+    $[7] = style;
+    $[8] = t10;
+    $[9] = t9;
+    $[10] = wrap;
+    $[11] = t11;
   } else {
-    t11 = $[12];
+    t11 = $[11];
   }
   return t11;
-});
+};
 Chips.displayName = 'onesy-Chips';
 export default Chips;

package/esm/ClickListener/ClickListener.js

@@ -1,17 +1,19 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["mouseEvent", "touchEvent", "contextMenu", "include", "includeParentQueries", "includeQueries", "ignoreNonExisting", "onClickInside", "onClickOutside", "children"];
+const _excluded = ["ref", "mouseEvent", "touchEvent", "contextMenu", "include", "includeParentQueries", "includeQueries", "ignoreNonExisting", "onClickInside", "onClickOutside", "children"];
 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 { is, element, Try, isEnvironment } from '@onesy/utils';
 import { classNames, useOnesyTheme } from '@onesy/style-react';
 import { matches } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const resolve = value => value.replace(/^on/, '').toLowerCase();
-const ClickListener = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const ClickListener = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyClickListener?.props?.default), props_);
   const {
+      ref,
       mouseEvent = 'onClick',
       touchEvent = 'onTouchEnd',
       contextMenu = true,
@@ -59,19 +61,21 @@ const ClickListener = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (contextMenu) rootDocument.removeEventListener('contextmenu', onMethod);
     };
   }, [mouseEvent, touchEvent, contextMenu]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
-    ref: item_2 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_2);else ref.current = item_2;
-      }
-      if (children.ref) {
-        if (is('function', children.ref)) children.ref(item_2);else children.ref.current = item_2;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
+      ref: item_2 => {
+        if (ref) {
+          if (is('function', ref)) ref(item_2);else ref.current = item_2;
+        }
+        if (children.ref) {
+          if (is('function', children.ref)) children.ref(item_2);else children.ref.current = item_2;
+        }
+        refs.root.current = item_2;
       }
-      refs.root.current = item_2;
-    }
-  }, other), {}, {
-    className: classNames([other.className, children.props.className])
-  }))));
-});
+    }, other), {}, {
+      className: classNames([other.className, children.props.className])
+    })))
+  });
+};
 ClickListener.displayName = 'onesy-ClickListener';
 export default ClickListener;

package/esm/Clock/Clock.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "format", "dayTime", "hour", "minute", "second", "autoNext", "min", "max", "validate", "readOnly", "disabled", "valid", "renderValue", "onDoneSelecting", "onClick", "className", "BackgroundProps"];
+const _excluded = ["ref", "tonal", "color", "size", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "format", "dayTime", "hour", "minute", "second", "autoNext", "min", "max", "validate", "readOnly", "disabled", "valid", "renderValue", "onDoneSelecting", "onClick", "className", "BackgroundProps"];
 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';
@@ -11,6 +10,7 @@ import { OnesyDate, is as isOnesyDate, set } from '@onesy/date';
 import RoundMeterElement from '../RoundMeter';
 import PathElement from '../Path';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = style(theme => ({
   root: {
     userSelect: 'none',
@@ -30,12 +30,13 @@ const useStyle = style(theme => ({
 }), {
   name: 'onesy-Clock'
 });
-const Clock = /*#__PURE__*/React.forwardRef((props__, ref) => {
+const Clock = props__ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyClock?.props?.default), props__);
   const RoundMeter = theme?.elements?.RoundMeter || RoundMeterElement;
   const Path = theme?.elements?.Path || PathElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       size = 'regular',
@@ -405,7 +406,7 @@ const Clock = /*#__PURE__*/React.forwardRef((props__, ref) => {
       position: index_5 * (100 / 12)
     }))], 'position');
   }
-  return /*#__PURE__*/React.createElement(RoundMeter, _extends({
+  return /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread({
     ref: item_11 => {
       if (ref) {
         if (is('function', ref)) ref(item_11);else ref.current = item_11;
@@ -426,38 +427,39 @@ const Clock = /*#__PURE__*/React.forwardRef((props__, ref) => {
       onTouchStart: onMouseDown
     },
     renderLabel: is('function', renderValue) ? (x_1, y_1, valueItem, otherProps) => renderValue(value, selecting, x_1, y_1, valueItem, otherProps) : undefined
-  }, other, {
-    className: classNames([staticClassName('Clock', theme) && ['onesy-Clock-round-meter'], className, classes.root, mouseDown && classes.mouseDown])
-  }), /*#__PURE__*/React.createElement(Path, {
-    ref: refs.middle,
-    Component: "circle",
-    r: "4",
-    cx: "120",
-    cy: "120",
-    style: {
-      stroke: 'none',
-      fill: palette[40]
-    }
-  }), /*#__PURE__*/React.createElement(Path, {
-    d: "M 120 119 L 195 119 A 1 1 0 0 1 195 121 L 120 121 A 1 1 0 0 1 121 119",
-    value: valuePosition,
-    style: {
-      transformOrigin: '50% 50%',
-      fill: palette[40],
-      stroke: 'none'
-    }
-  }), /*#__PURE__*/React.createElement(Path, {
-    Component: "circle",
-    r: "24",
-    cx: lowerPointer ? 182 : 212.5,
-    cy: "120",
-    value: valuePosition,
-    style: {
-      transformOrigin: 'center',
-      fill: palette[40],
-      stroke: 'none'
-    }
+  }, other), {}, {
+    className: classNames([staticClassName('Clock', theme) && ['onesy-Clock-round-meter'], className, classes.root, mouseDown && classes.mouseDown]),
+    children: [/*#__PURE__*/_jsx(Path, {
+      ref: refs.middle,
+      Component: "circle",
+      r: "4",
+      cx: "120",
+      cy: "120",
+      style: {
+        stroke: 'none',
+        fill: palette[40]
+      }
+    }), /*#__PURE__*/_jsx(Path, {
+      d: "M 120 119 L 195 119 A 1 1 0 0 1 195 121 L 120 121 A 1 1 0 0 1 121 119",
+      value: valuePosition,
+      style: {
+        transformOrigin: '50% 50%',
+        fill: palette[40],
+        stroke: 'none'
+      }
+    }), /*#__PURE__*/_jsx(Path, {
+      Component: "circle",
+      r: "24",
+      cx: lowerPointer ? 182 : 212.5,
+      cy: "120",
+      value: valuePosition,
+      style: {
+        transformOrigin: 'center',
+        fill: palette[40],
+        stroke: 'none'
+      }
+    })]
   }));
-});
+};
 Clock.displayName = 'onesy-Clock';
 export default Clock;

package/esm/ColorTextField/ColorTextField.js

@@ -1,8 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 const _excluded = ["name", "value", "onChange", "min", "max", "children", "className"],
-  _excluded2 = ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "WrapperProps", "opacity", "className", "style"];
+  _excluded2 = ["ref", "name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "WrapperProps", "opacity", "className", "style"];
 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 { c as _c } from "react/compiler-runtime";
@@ -15,7 +14,8 @@ import FormRowElement from '../FormRow';
 import SliderElement from '../Slider';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
-const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SliderInput = props => {
   const $ = _c(43);
   const theme = useOnesyTheme();
   const FormRow = theme?.elements?.FormRow || FormRowElement;
@@ -83,9 +83,10 @@ const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   let t4;
   if ($[12] !== Type || $[13] !== min) {
-    t4 = /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, min);
+    t4 = /*#__PURE__*/_jsx(Type, {
+      version: "b3",
+      children: min
+    });
     $[12] = Type;
     $[13] = min;
     $[14] = t4;
@@ -106,9 +107,10 @@ const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   let t6;
   if ($[18] !== Type || $[19] !== max) {
-    t6 = /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, max);
+    t6 = /*#__PURE__*/_jsx(Type, {
+      version: "b3",
+      children: max
+    });
     $[18] = Type;
     $[19] = max;
     $[20] = t6;
@@ -150,7 +152,7 @@ const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   let t10;
   if ($[29] !== Slider || $[30] !== max || $[31] !== min || $[32] !== onChange || $[33] !== other || $[34] !== t8 || $[35] !== t9 || $[36] !== value) {
-    t10 = /*#__PURE__*/React.createElement(Slider, _extends({
+    t10 = /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread({
       value: value,
       onChange: onChange,
       valueDefault: 100,
@@ -160,7 +162,7 @@ const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       tooltip: true,
       marks: t8,
       labels: true
-    }, other, {
+    }, other), {}, {
       style: t9
     }));
     $[29] = Slider;
@@ -177,12 +179,13 @@ const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   let t11;
   if ($[38] !== FormRow || $[39] !== t10 || $[40] !== t2 || $[41] !== t3) {
-    t11 = /*#__PURE__*/React.createElement(FormRow, {
+    t11 = /*#__PURE__*/_jsx(FormRow, {
       gap: 1,
       description: t2,
       fullWidth: true,
-      className: t3
-    }, t10);
+      className: t3,
+      children: t10
+    });
     $[38] = FormRow;
     $[39] = t10;
     $[40] = t2;
@@ -192,7 +195,7 @@ const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     t11 = $[42];
   }
   return t11;
-});
+};
 const useStyle = styleMethod(theme => ({
   root: {
     margin: '0',
@@ -229,13 +232,14 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-ColorTextField'
 });
-const ColorTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const ColorTextField = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyColorTextField?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const TextField = theme?.elements?.TextField || TextFieldElement;
   const {
+      ref,
       name,
       version = 'outlined',
       size = 'regular',
@@ -313,14 +317,15 @@ const ColorTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange();
     }, 14);
   };
-  const root = /*#__PURE__*/React.createElement(TextField, _extends({
+  const root = /*#__PURE__*/_jsx(TextField, _objectSpread({
     name: name,
     value: opacity ? valueColor : value,
     onChange: opacity ? onChangeColor : onChange,
     version: version,
     size: size,
     endVerticalAlign: "center",
-    end: /*#__PURE__*/React.createElement("input", {
+    end: /*#__PURE__*/_jsx("input", {
+      ref: ref,
       type: "color",
       value: opacity ? valueColor : value,
       onChange: event => opacity ? onChangeColor(event.target.value) : onChange(event.target.value),
@@ -331,19 +336,20 @@ const ColorTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     style: style
   }, !opacity && other));
   if (opacity) {
-    return /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref,
+    return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
       gap: 1,
       fullWidth: true
-    }, WrapperProps), root, /*#__PURE__*/React.createElement(SliderInput, {
-      name: l('Opacity'),
-      value: valueOpacity,
-      onChange: onChangeOpacity,
-      min: 0,
-      max: 100
+    }, WrapperProps), {}, {
+      children: [root, /*#__PURE__*/_jsx(SliderInput, {
+        name: l('Opacity'),
+        value: valueOpacity,
+        onChange: onChangeOpacity,
+        min: 0,
+        max: 100
+      })]
     }));
   }
   return root;
-});
+};
 ColorTextField.displayName = 'onesy-ColorTextField';
 export default ColorTextField;