@onesy/ui-react 1.0.172 → 1.0.173

package/Checkbox/Checkbox.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
@@ -16,15 +15,16 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Buttons = require("../Buttons/Buttons");
 var _utils2 = require("../utils");
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
 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 IconMaterialIndeterminateCheckBox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const $ = (0, _compilerRuntime.c)(4);
+const IconMaterialIndeterminateCheckBox = props => {
+  const $ = (0, _compilerRuntime.c)(3);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /*#__PURE__*/_react.default.createElement("path", {
+    t0 = /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       d: "M7 13H17V11H7V13Z"
     });
     $[0] = t0;
@@ -32,20 +32,20 @@ const IconMaterialIndeterminateCheckBox = /*#__PURE__*/_react.default.forwardRef
     t0 = $[0];
   }
   let t1;
-  if ($[1] !== props || $[2] !== ref) {
-    t1 = /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
-      ref: ref,
+  if ($[1] !== props) {
+    t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, _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 = (0, _styleReact.style)(theme => ({
   root: {
     position: 'relative',
@@ -277,10 +277,11 @@ const IconItem = props => {
   }
   let t3;
   if ($[16] !== Component || $[17] !== className || $[18] !== t1 || $[19] !== t2) {
-    t3 = /*#__PURE__*/_react.default.createElement(Component, {
+    t3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
       className: className,
-      style: t1
-    }, t2);
+      style: t1,
+      children: t2
+    });
     $[16] = Component;
     $[17] = className;
     $[18] = t1;
@@ -291,7 +292,7 @@ const IconItem = props => {
   }
   return t3;
 };
-const Checkbox = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Checkbox = props_ => {
   var _theme$ui, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread({}, props_), 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.onesyCheckbox) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default);
@@ -396,15 +397,14 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   let colorValue = color;
   if (!value && tonal) colorValue = colorUnchecked;
   if (indeterminate) colorValue = colorIndeterminate;
-  return /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButton, _objectSpread(_objectSpread({
     tabIndex: !disabled ? 0 : -1,
     color: colorValue,
     tonal: tonal,
     version: version,
     size: size,
     onKeyDown: onKeyDown,
-    firstLevelChildren: /*#__PURE__*/_react.default.createElement("input", {
+    firstLevelChildren: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       ref: item => {
         if (inputRef) {
           if ((0, _utils.is)('function', inputRef)) inputRef(item);else inputRef.current = item;
@@ -424,29 +424,32 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     disabled: disabled,
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(IconItem, {
-    size: size,
-    className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(IconItem, {
-    Component: "div",
-    size: size,
-    className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(IconItem, {
-    size: size,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-indeterminate'], classes.icon, classes.iconDone, indeterminate && classes.indeterminate]),
-    style: styles.iconDone,
-    noFontSizeDownScale: true
-  }, /*#__PURE__*/_react.default.createElement(IconMaterialIndeterminateCheckBox, {
-    size: "inherit"
-  })), value && /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
-    size: size === 'large' ? '3rem' : size,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-done'], classes.icon, classes.iconDone]),
-    style: styles.iconDone,
-    in: value,
-    add: true
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconItem, {
+      size: size,
+      className: (0, _styleReact.classNames)([(0, _utils2.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__*/(0, _jsxRuntime.jsx)(IconItem, {
+      Component: "div",
+      size: size,
+      className: (0, _styleReact.classNames)([(0, _utils2.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__*/(0, _jsxRuntime.jsx)(IconItem, {
+      size: size,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-indeterminate'], classes.icon, classes.iconDone, indeterminate && classes.indeterminate]),
+      style: styles.iconDone,
+      noFontSizeDownScale: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconMaterialIndeterminateCheckBox, {
+        size: "inherit"
+      })
+    }), value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
+      size: size === 'large' ? '3rem' : size,
+      className: (0, _styleReact.classNames)([(0, _utils2.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';
 var _default = exports.default = Checkbox;

package/Chip/Chip.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -15,6 +14,7 @@ var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-
 var _Button = _interopRequireDefault(require("../Button"));
 var _Buttons = require("../Buttons/Buttons");
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "version", "input", "filter", "selected", "start", "focus", "noCheckIcon", "onClick", "onRemove", "onSelected", "onUnselected", "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; }
 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; }
@@ -30,7 +30,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Chip'
 });
-const Chip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Chip = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyChip) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -64,7 +64,7 @@ const Chip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, [selected_]);
   const OtherProps = {};
   if (input) {
-    OtherProps.end = /*#__PURE__*/_react.default.createElement(_IconMaterialCloseW.default, {
+    OtherProps.end = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialCloseW.default, {
       onClick: event => {
         if ((0, _utils.is)('function', onRemove)) onRemove(event);
       }
@@ -98,8 +98,7 @@ const Chip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       setSelected(false);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     tonal: tonal,
     version: version,
     color: color || (tonal ? 'neutral' : 'default'),
@@ -111,23 +110,25 @@ const Chip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     },
     start: start
   }, !noCheckIcon && start && selected ? {
-    start: /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+    start: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
       simple: true,
       in: true,
       add: true
     })
-  } : {}, !noCheckIcon && !start && (selected || preSelected) ? {
-    start: /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+  } : {}), !noCheckIcon && !start && (selected || preSelected) ? {
+    start: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
       in: start ? selected : preSelected,
       onExited: () => updateSelected(),
       add: true
     })
-  } : {}, {
+  } : {}), {}, {
     focus: focus,
     selected: selected,
     chip: true,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chip', theme) && ['onesy-Chip-root', selected && `onesy-Chip-selected`], className, classes.root])
-  }, other, OtherProps), children);
-});
+  }, other), OtherProps), {}, {
+    children: children
+  }));
+};
 Chip.displayName = 'onesy-Chip';
 var _default = exports.default = Chip;

package/Chips/Chips.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compilerRuntime = require("react/compiler-runtime");
@@ -14,6 +13,7 @@ var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
 var _Chip = _interopRequireDefault(require("../Chip/Chip"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["size", "gap", "align", "justify", "direction", "wrap", "total", "max", "showAllDefault", "moreShowAll", "AdditionalChip", "AdditionalChipProps", "Component", "className", "style", "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) { (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; }
@@ -58,9 +58,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Chips'
 });
-const Chips = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Chips = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
-  const $ = (0, _compilerRuntime.c)(13);
+  const $ = (0, _compilerRuntime.c)(12);
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyChips) === 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$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
@@ -120,11 +120,12 @@ const Chips = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         AdditionalChipProps.TypeProps = {};
       }
       AdditionalChipProps.TypeProps.size = "0.44em";
-      children.push(AdditionalChip || /*#__PURE__*/_react.default.createElement(Chip, (0, _extends2.default)({
+      children.push(AdditionalChip || /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, _objectSpread(_objectSpread(_objectSpread({
         color: "default"
-      }, other, AdditionalChipProps, {
-        onClick: moreShowAll ? onClickMore : undefined
-      }), value));
+      }, other), AdditionalChipProps), {}, {
+        onClick: moreShowAll ? onClickMore : undefined,
+        children: value
+      })));
     }
   }
   const t9 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Chips", theme) && ["onesy-Chips-root", `onesy-Chips-size-${size}`], className, classes.root, classes[`size_${size}`], wrap === "wrap" && [classes.wrap, classes[`wrap_${size}`]]]);
@@ -133,9 +134,8 @@ const Chips = /*#__PURE__*/_react.default.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.default.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__*/(0, _jsxRuntime.jsx)(Line, {
       gap: gap,
       justify: justify,
       align: align,
@@ -143,24 +143,24 @@ const Chips = /*#__PURE__*/_react.default.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';
 var _default = exports.default = Chips;

package/ClickListener/ClickListener.js

@@ -11,15 +11,17 @@ var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _utils2 = require("../utils");
-const _excluded = ["mouseEvent", "touchEvent", "contextMenu", "include", "includeParentQueries", "includeQueries", "ignoreNonExisting", "onClickInside", "onClickOutside", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (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 resolve = value => value.replace(/^on/, '').toLowerCase();
-const ClickListener = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ClickListener = props_ => {
   var _theme$ui, _theme$ui2;
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyClickListener) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
+      ref,
       mouseEvent = 'onClick',
       touchEvent = 'onTouchEnd',
       contextMenu = true,
@@ -71,19 +73,21 @@ const ClickListener = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (contextMenu) rootDocument.removeEventListener('contextmenu', onMethod);
     };
   }, [mouseEvent, touchEvent, contextMenu]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children && (/*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({
-    ref: item_2 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
-      }
-      if (children.ref) {
-        if ((0, _utils.is)('function', children.ref)) children.ref(item_2);else children.ref.current = item_2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+    children: children && (/*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({
+      ref: item_2 => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
+        }
+        if (children.ref) {
+          if ((0, _utils.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: (0, _styleReact.classNames)([other.className, children.props.className])
-  }))));
-});
+    }, other), {}, {
+      className: (0, _styleReact.classNames)([other.className, children.props.className])
+    })))
+  });
+};
 ClickListener.displayName = 'onesy-ClickListener';
 var _default = exports.default = ClickListener;

package/Clock/Clock.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -15,7 +14,8 @@ var _date = require("@onesy/date");
 var _RoundMeter = _interopRequireDefault(require("../RoundMeter"));
 var _Path = _interopRequireDefault(require("../Path"));
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (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 useStyle = (0, _styleReact.style)(theme => ({
@@ -37,13 +37,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Clock'
 });
-const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+const Clock = props__ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const theme = (0, _styleReact.useOnesyTheme)();
   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 {
+      ref,
       tonal = true,
       color = 'primary',
       size = 'regular',
@@ -415,7 +416,7 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       position: index_5 * (100 / 12)
     }))], 'position');
   }
-  return /*#__PURE__*/_react.default.createElement(RoundMeter, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread({
     ref: item_11 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_11);else ref.current = item_11;
@@ -436,38 +437,39 @@ const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       onTouchStart: onMouseDown
     },
     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, {
-    ref: refs.middle,
-    Component: "circle",
-    r: "4",
-    cx: "120",
-    cy: "120",
-    style: {
-      stroke: 'none',
-      fill: palette[40]
-    }
-  }), /*#__PURE__*/_react.default.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.default.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Clock', theme) && ['onesy-Clock-round-meter'], className, classes.root, mouseDown && classes.mouseDown]),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Path, {
+      ref: refs.middle,
+      Component: "circle",
+      r: "4",
+      cx: "120",
+      cy: "120",
+      style: {
+        stroke: 'none',
+        fill: palette[40]
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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';
 var _default = exports.default = Clock;