@onesy/ui-react 1.0.172 → 1.0.174

package/DropZone/DropZone.js

@@ -17,7 +17,8 @@ var _Type = _interopRequireDefault(require("../Type"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _Interaction = _interopRequireDefault(require("../Interaction"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "version", "start", "files", "multiple", "max", "allowedTypes", "dropText", "valueDefault", "value", "onChange", "IconStart", "onFocus", "onBlur", "onDrop", "onDragOver", "onDragEnter", "onDragLeave", "disabled", "children", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "version", "start", "files", "multiple", "max", "allowedTypes", "dropText", "valueDefault", "value", "onChange", "IconStart", "onFocus", "onBlur", "onDrop", "onDragOver", "onDragEnter", "onDragLeave", "disabled", "children", "className"];
 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 => ({
@@ -50,7 +51,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-DropZone'
 });
-const DropZone = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const DropZone = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _ComponentProps, _WrapperProps;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -61,6 +62,7 @@ const DropZone = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
   const Interaction = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Interaction) || _Interaction.default;
   const {
+      ref,
       tonal = true,
       color = 'default',
       version,
@@ -181,7 +183,7 @@ const DropZone = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   } else {
     ComponentProps = _objectSpread(_objectSpread({}, ComponentProps), other);
   }
-  return /*#__PURE__*/_react.default.createElement(FileChoose, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FileChoose, {
     ref: item_0 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
@@ -211,17 +213,20 @@ const DropZone = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }),
     WrapperProps: _objectSpread(_objectSpread({}, WrapperProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DropZone', theme) && ['onesy-DropZone-wrapper'], (_WrapperProps = WrapperProps) === null || _WrapperProps === void 0 ? void 0 : _WrapperProps.className, classes.wrapper])
-    })
-  }, /*#__PURE__*/_react.default.createElement(Interaction, {
-    pulse: focus || dragOver
-  }), children, !custom && /*#__PURE__*/_react.default.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DropZone', theme) && ['onesy-DropZone-wrapper-text'], classes.wrapperText])
-  }, /*#__PURE__*/_react.default.createElement(IconStart, null), /*#__PURE__*/_react.default.createElement(Type, {
-    version: "t1"
-  }, dropText)));
-});
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, {
+      pulse: focus || dragOver
+    }), children, !custom && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      direction: "row",
+      align: "center",
+      justify: "center",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DropZone', theme) && ['onesy-DropZone-wrapper-text'], classes.wrapperText]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconStart, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "t1",
+        children: dropText
+      })]
+    })]
+  });
+};
 DropZone.displayName = 'onesy-DropZone';
 var _default = exports.default = DropZone;

package/Emojis/Emojis.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"));
@@ -31,6 +30,7 @@ var _Type = _interopRequireDefault(require("../Type"));
 var _Surface = _interopRequireDefault(require("../Surface"));
 var _emojis_list = _interopRequireDefault(require("./emojis_list"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "label", "onSelect", "emojis", "categories", "selected", "size", "search", "tabs", "className"];
 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; }
@@ -149,7 +149,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Emojis'
 });
-const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Emojis = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -168,35 +168,35 @@ const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     return [{
       "name": l("Smileys and People"),
       "groups": ["Smiley", "Gesture", "Person", "Clothing"],
-      "icon": /*#__PURE__*/_react.default.createElement(_IconMaterialMoodW.default, null)
+      "icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialMoodW.default, {})
     }, {
       "name": l("Animals and Nature"),
       "groups": ["Animal", "Nature"],
-      "icon": /*#__PURE__*/_react.default.createElement(_IconMaterialEmojiNatureW.default, null)
+      "icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiNatureW.default, {})
     }, {
       "name": l("Food and Drink"),
       "groups": ["Food"],
-      "icon": /*#__PURE__*/_react.default.createElement(_IconMaterialEmojiFoodBeverageW.default, null)
+      "icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiFoodBeverageW.default, {})
     }, {
       "name": l("Activity"),
       "groups": ["Activity"],
-      "icon": /*#__PURE__*/_react.default.createElement(_IconMaterialHikingW.default, null)
+      "icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialHikingW.default, {})
     }, {
       "name": l("Travel and Places"),
       "groups": ["Travel"],
-      "icon": /*#__PURE__*/_react.default.createElement(_IconMaterialEmojiTransportationW.default, null)
+      "icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiTransportationW.default, {})
     }, {
       "name": l("Objects"),
       "groups": ["Object"],
-      "icon": /*#__PURE__*/_react.default.createElement(_IconMaterialEmojiObjectsW.default, null)
+      "icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiObjectsW.default, {})
     }, {
       "name": l("Symbols"),
       "groups": ["Symbol"],
-      "icon": /*#__PURE__*/_react.default.createElement(_IconMaterialEmojiSymbolsW.default, null)
+      "icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiSymbolsW.default, {})
     }, {
       "name": l("Flags and Countries"),
       "groups": ["Flag", "Country"],
-      "icon": /*#__PURE__*/_react.default.createElement(_IconMaterialEmojiFlagsW.default, null)
+      "icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiFlagsW.default, {})
     }];
   }, []);
   const {
@@ -295,89 +295,99 @@ const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     name: item_4.icon,
     value: item_4.name
   }));
-  const label = /*#__PURE__*/_react.default.createElement(Line, {
+  const label = /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
     tonal: tonal,
     color: color,
     Component: Surface,
-    className: (0, _styleReact.classNames)([classes.wrapper, classes[`size_${size}`]])
-  }, /*#__PURE__*/_react.default.createElement(SpyScroll, {
-    ids: categoriesUsedIDs,
-    parent: openElement,
-    onActive: onActiveTab
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    align: "unset",
-    justify: "unset",
-    fullWidth: true,
-    className: classes.categories
-  }, (search_ || tabs_) && /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    fullWidth: true,
-    className: classes.header
-  }, search_ && /*#__PURE__*/_react.default.createElement(TextField, {
-    name: l('Search'),
-    version: "outlined",
-    value: search || '',
-    onChange: onChangeSearch,
-    size: ['small', 'regular'].includes(size) ? 'small' : 'regular',
-    fullWidth: true,
-    clear: true
-  }), tabs_ && !!categoriesUsed.length && /*#__PURE__*/_react.default.createElement(Tabs, {
-    valueDefault: tab,
-    value: tab,
-    onChange: onChangeTabs,
-    size: "small",
-    initialLineUpdateTimeout: 440,
-    noDivider: true,
-    className: classes.tabs
-  }, tabs.map((item_5, index) => /*#__PURE__*/_react.default.createElement(Tab, {
-    key: index,
-    value: item_5.value,
-    onClick: () => onTabClick(item_5.value),
-    "data-onesy-spy-scroll": categoryToID(item_5.value),
-    className: (0, _styleReact.classNames)([classes.tab, classes[`tab_size_${size}`]])
-  }, /*#__PURE__*/_react.default.cloneElement(item_5.name, {
-    size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
-  }))))), /*#__PURE__*/_react.default.createElement(Line, {
-    ref: refs.main,
-    gap: 0,
-    flex: true,
-    fullWidth: true,
-    className: classes.main
-  }, categoriesUsed.map((item_6, index_0) => /*#__PURE__*/_react.default.createElement(List, {
-    key: index_0,
-    gap: 1,
-    fullWidth: true,
-    SurfaceProps: {
-      id: categoryToID(item_6),
-      'data-onesy-category': item_6
-    }
-  }, /*#__PURE__*/_react.default.createElement(ListSubheader, {
-    className: classes.subheader
-  }, /*#__PURE__*/_react.default.createElement(Type, {
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, item_6)), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    wrap: "wrap",
-    Component: "li",
-    className: classes.category
-  }, emojisPerCategory[item_6].map((emoji_0, index_) => /*#__PURE__*/_react.default.createElement("span", {
-    key: index_,
-    onClick: () => onSelect(emoji_0),
-    title: (0, _utils.capitalize)(((0, _utils.is)('array', emoji_0.alias) ? emoji_0.alias.join(', ') : emoji_0.alias).replace(/_/g, ' ')),
-    className: (0, _styleReact.classNames)([classes.emoji, classes[`emoji_size_${size}`], (selected === null || selected === void 0 ? void 0 : selected.includes(emoji_0.unicode)) && classes.emoji_selected])
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.unicode
-  }, emoji_0.unicode))))))))));
-  return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
+    className: (0, _styleReact.classNames)([classes.wrapper, classes[`size_${size}`]]),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpyScroll, {
+      ids: categoriesUsedIDs,
+      parent: openElement,
+      onActive: onActiveTab,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 0,
+        align: "unset",
+        justify: "unset",
+        fullWidth: true,
+        className: classes.categories,
+        children: [(search_ || tabs_) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1,
+          fullWidth: true,
+          className: classes.header,
+          children: [search_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, {
+            name: l('Search'),
+            version: "outlined",
+            value: search || '',
+            onChange: onChangeSearch,
+            size: ['small', 'regular'].includes(size) ? 'small' : 'regular',
+            fullWidth: true,
+            clear: true
+          }), tabs_ && !!categoriesUsed.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs, {
+            valueDefault: tab,
+            value: tab,
+            onChange: onChangeTabs,
+            size: "small",
+            initialLineUpdateTimeout: 440,
+            noDivider: true,
+            className: classes.tabs,
+            children: tabs.map((item_5, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, {
+              value: item_5.value,
+              onClick: () => onTabClick(item_5.value),
+              "data-onesy-spy-scroll": categoryToID(item_5.value),
+              className: (0, _styleReact.classNames)([classes.tab, classes[`tab_size_${size}`]]),
+              children: /*#__PURE__*/_react.default.cloneElement(item_5.name, {
+                size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
+              })
+            }, index))
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          ref: refs.main,
+          gap: 0,
+          flex: true,
+          fullWidth: true,
+          className: classes.main,
+          children: categoriesUsed.map((item_6, index_0) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(List, {
+            gap: 1,
+            fullWidth: true,
+            SurfaceProps: {
+              id: categoryToID(item_6),
+              'data-onesy-category': item_6
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ListSubheader, {
+              className: classes.subheader,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+                children: item_6
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 1,
+              direction: "row",
+              align: "center",
+              wrap: "wrap",
+              Component: "li",
+              className: classes.category,
+              children: emojisPerCategory[item_6].map((emoji_0, index_) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                onClick: () => onSelect(emoji_0),
+                title: (0, _utils.capitalize)(((0, _utils.is)('array', emoji_0.alias) ? emoji_0.alias.join(', ') : emoji_0.alias).replace(/_/g, ' ')),
+                className: (0, _styleReact.classNames)([classes.emoji, classes[`emoji_size_${size}`], (selected === null || selected === void 0 ? void 0 : selected.includes(emoji_0.unicode)) && classes.emoji_selected]),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: classes.unicode,
+                  children: emoji_0.unicode
+                })
+              }, index_))
+            })]
+          }, index_0))
+        })]
+      })
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread({
     open: open,
     onOpen: onOpen,
     onClose: onClose,
     label: label,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Emojis', theme) && ['onesy-Emojis-root', `onesy-Emojis-size-${size}`], className, classes.root])
   }, other));
-});
+};
 Emojis.displayName = 'onesy-Emojis';
 var _default = exports.default = Emojis;

package/Expand/Expand.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
@@ -13,12 +12,13 @@ var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _ = require("..");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "style"],
-  _excluded2 = ["in", "value", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "expandSize", "orientation", "WrapperProps", "className", "style", "children"];
+  _excluded2 = ["ref", "in", "value", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "expandSize", "orientation", "WrapperProps", "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; }
-const Wrapper = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const $ = (0, _compilerRuntime.c)(11);
+const Wrapper = props => {
+  const $ = (0, _compilerRuntime.c)(10);
   let children;
   let other;
   let style;
@@ -50,27 +50,26 @@ const Wrapper = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     t0 = $[5];
   }
   let t1;
-  if ($[6] !== children || $[7] !== other || $[8] !== ref || $[9] !== t0) {
-    t1 = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      ref: ref
-    }, other, {
-      style: t0
-    }), children);
+  if ($[6] !== children || $[7] !== other || $[8] !== t0) {
+    t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, other), {}, {
+      style: t0,
+      children: children
+    }));
     $[6] = children;
     $[7] = other;
-    $[8] = ref;
-    $[9] = t0;
-    $[10] = t1;
+    $[8] = t0;
+    $[9] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[9];
   }
   return t1;
-});
-const Expand = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+};
+const Expand = props_ => {
   var _theme$ui, _theme$ui2, _children$type;
   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.onesyExpand) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
+      ref,
       in: inProp,
       value: valueProvided,
       prefix,
@@ -181,61 +180,70 @@ const Expand = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     return `${((0, _utils.is)('simple', duration) ? duration : duration[status_0]) || properties[property]}ms`;
   };
   const timingFunction = status_1 => ((0, _utils.is)('simple', timing_function) ? timing_function : timing_function[status_1]) || theme.transitions.timing_function.standard;
-  const children_ = /*#__PURE__*/_react.default.createElement(Wrapper, WrapperProps, children);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value === null && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    ref: item_0 => {
-      if (!item_0) return;
-      if (!parent) setParent(item_0.parentElement);
-    }
-  }), parent && /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({}, WrapperProps, {
-    ref: item_1 => {
-      if (!item_1) return;
-      if (WrapperProps !== null && WrapperProps !== void 0 && WrapperProps.ref) {
-        if ((0, _utils.is)('function', WrapperProps.ref)) WrapperProps === null || WrapperProps === void 0 || WrapperProps.ref(item_1);else WrapperProps.ref.current = item_1;
-      }
-      if (refs.value.current === null) {
-        setValue(item_1.getBoundingClientRect()[prop] || 0);
-      }
-    },
-    style: _objectSpread({
-      position: 'fixed',
-      left: '1114%',
-      visibility: 'hidden',
-      width: parent.offsetWidth
-    }, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style)
-  }), /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({}, childrenWithTransition && {
-    in: true
-  })))), value !== null && /*#__PURE__*/_react.default.createElement(_.Transition, (0, _extends2.default)({
-    removeOnExited: true
-  }, props), (status_2, ref_) => {
-    // If children update
-    // & value is updated
-    if (['appending', 'appended', 'adding', 'added', 'entering', 'entered'].includes(status_2)) {
-      var _refs$root$current;
-      const value_ = (((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.getBoundingClientRect()) || {})[prop];
-      if (value_ > 0 && value_ !== refs.value.current) setValue(value_);
-    }
-    return /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread(_objectSpread({}, other), {}, {
-      className,
-      ref: item_2 => {
-        refs.root.current = item_2;
-        if (ref) {
-          if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
-        }
-        if (ref_) {
-          if ((0, _utils.is)('function', ref_)) ref_(item_2);else ref_.current = item_2;
+  const children_ = /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+    children: children
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [value === null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: item_0 => {
+          if (!item_0) return;
+          if (!parent) setParent(item_0.parentElement);
         }
-        if (children_.ref) {
-          if ((0, _utils.is)('function', children_.ref)) children_.ref(item_2);else children_.ref.current = item_2;
+      }), parent && /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+        ref: item_1 => {
+          if (!item_1) return;
+          if (WrapperProps !== null && WrapperProps !== void 0 && WrapperProps.ref) {
+            if ((0, _utils.is)('function', WrapperProps.ref)) WrapperProps === null || WrapperProps === void 0 || WrapperProps.ref(item_1);else WrapperProps.ref.current = item_1;
+          }
+          if (refs.value.current === null) {
+            setValue(item_1.getBoundingClientRect()[prop] || 0);
+          }
+        },
+        style: _objectSpread({
+          position: 'fixed',
+          left: '1114%',
+          visibility: 'hidden',
+          width: parent.offsetWidth
+        }, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style),
+        children: /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({}, childrenWithTransition && {
+          in: true
+        }))
+      }))]
+    }), value !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Transition, _objectSpread(_objectSpread({
+      removeOnExited: true
+    }, props), {}, {
+      children: (status_2, ref_) => {
+        // If children update
+        // & value is updated
+        if (['appending', 'appended', 'adding', 'added', 'entering', 'entered'].includes(status_2)) {
+          var _refs$root$current;
+          const value_ = (((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.getBoundingClientRect()) || {})[prop];
+          if (value_ > 0 && value_ !== refs.value.current) setValue(value_);
         }
-      },
-      style: _objectSpread(_objectSpread(_objectSpread({
-        position: 'relative',
-        transition: `${prop} ${duration(status_2, prop)} ${timingFunction(status_2)} ${addTransition ? `, ${addTransition}` : ''}`,
-        visibility: status_2 === 'exited' && !inProp && expandSize === undefined ? 'hidden' : undefined
-      }, styles(status_2)), style), children_ === null || children_ === void 0 ? void 0 : children_.style)
-    }));
-  }));
-});
+        return /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread(_objectSpread({}, other), {}, {
+          className,
+          ref: item_2 => {
+            refs.root.current = item_2;
+            if (ref) {
+              if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = 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;
+            }
+          },
+          style: _objectSpread(_objectSpread(_objectSpread({
+            position: 'relative',
+            transition: `${prop} ${duration(status_2, prop)} ${timingFunction(status_2)} ${addTransition ? `, ${addTransition}` : ''}`,
+            visibility: status_2 === 'exited' && !inProp && expandSize === undefined ? 'hidden' : undefined
+          }, styles(status_2)), style), children_ === null || children_ === void 0 ? void 0 : children_.style)
+        }));
+      }
+    }))]
+  });
+};
 Expand.displayName = 'onesy-Expand';
 var _default = exports.default = Expand;

package/Fab/Fab.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 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 => ({
@@ -18,7 +18,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Fab'
 });
-const Fab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Fab = 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.onesyFab) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -33,14 +33,12 @@ const Fab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, props), {}, {
     className: (0, _styleReact.classNames)([(0, _utils.staticClassName)("Fab", theme) && ["onesy-Fab-root"], className, classes.root]),
     version: version,
     tonal: tonal,
     fab: true
   }));
-});
+};
 Fab.displayName = 'onesy-Fab';
 var _default = exports.default = Fab;