@onesy/ui-react 1.0.171 → 1.0.173

package/esm/DropZone/DropZone.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "start", "files", "multiple", "max", "allowedTypes", "dropText", "valueDefault", "value", "onChange", "IconStart", "onFocus", "onBlur", "onDrop", "onDragOver", "onDragEnter", "onDragLeave", "disabled", "children", "className"];
+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) { _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';
@@ -13,6 +13,7 @@ import TypeElement from '../Type';
 import LineElement from '../Line';
 import InteractionElement from '../Interaction';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   wrapperText: {
@@ -43,7 +44,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-DropZone'
 });
-const DropZone = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const DropZone = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDropZone?.props?.default), props_);
@@ -53,6 +54,7 @@ const DropZone = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Type = theme?.elements?.Type || TypeElement;
   const Interaction = theme?.elements?.Interaction || InteractionElement;
   const {
+      ref,
       tonal = true,
       color = 'default',
       version,
@@ -172,7 +174,7 @@ const DropZone = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } else {
     ComponentProps = _objectSpread(_objectSpread({}, ComponentProps), other);
   }
-  return /*#__PURE__*/React.createElement(FileChoose, {
+  return /*#__PURE__*/_jsxs(FileChoose, {
     ref: item_0 => {
       if (ref) {
         if (is('function', ref)) ref(item_0);else ref.current = item_0;
@@ -202,17 +204,20 @@ const DropZone = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }),
     WrapperProps: _objectSpread(_objectSpread({}, WrapperProps), {}, {
       className: classNames([staticClassName('DropZone', theme) && ['onesy-DropZone-wrapper'], WrapperProps?.className, classes.wrapper])
-    })
-  }, /*#__PURE__*/React.createElement(Interaction, {
-    pulse: focus || dragOver
-  }), children, !custom && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('DropZone', theme) && ['onesy-DropZone-wrapper-text'], classes.wrapperText])
-  }, /*#__PURE__*/React.createElement(IconStart, null), /*#__PURE__*/React.createElement(Type, {
-    version: "t1"
-  }, dropText)));
-});
+    }),
+    children: [/*#__PURE__*/_jsx(Interaction, {
+      pulse: focus || dragOver
+    }), children, !custom && /*#__PURE__*/_jsxs(Line, {
+      direction: "row",
+      align: "center",
+      justify: "center",
+      className: classNames([staticClassName('DropZone', theme) && ['onesy-DropZone-wrapper-text'], classes.wrapperText]),
+      children: [/*#__PURE__*/_jsx(IconStart, {}), /*#__PURE__*/_jsx(Type, {
+        version: "t1",
+        children: dropText
+      })]
+    })]
+  });
+};
 DropZone.displayName = 'onesy-DropZone';
 export default DropZone;

package/esm/Emojis/Emojis.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", "label", "onSelect", "emojis", "categories", "selected", "size", "search", "tabs", "className"];
@@ -27,6 +26,7 @@ import TypeElement from '../Type';
 import SurfaceElement from '../Surface';
 import emojis_list from './emojis_list';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   wrapper: {
@@ -142,7 +142,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Emojis'
 });
-const Emojis = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Emojis = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyEmojis?.props?.default), props_);
@@ -160,35 +160,35 @@ const Emojis = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return [{
       "name": l("Smileys and People"),
       "groups": ["Smiley", "Gesture", "Person", "Clothing"],
-      "icon": /*#__PURE__*/React.createElement(IconMaterialMood, null)
+      "icon": /*#__PURE__*/_jsx(IconMaterialMood, {})
     }, {
       "name": l("Animals and Nature"),
       "groups": ["Animal", "Nature"],
-      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiNature, null)
+      "icon": /*#__PURE__*/_jsx(IconMaterialEmojiNature, {})
     }, {
       "name": l("Food and Drink"),
       "groups": ["Food"],
-      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiFoodBeverage, null)
+      "icon": /*#__PURE__*/_jsx(IconMaterialEmojiFoodBeverage, {})
     }, {
       "name": l("Activity"),
       "groups": ["Activity"],
-      "icon": /*#__PURE__*/React.createElement(IconMaterialHiking, null)
+      "icon": /*#__PURE__*/_jsx(IconMaterialHiking, {})
     }, {
       "name": l("Travel and Places"),
       "groups": ["Travel"],
-      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiTransportation, null)
+      "icon": /*#__PURE__*/_jsx(IconMaterialEmojiTransportation, {})
     }, {
       "name": l("Objects"),
       "groups": ["Object"],
-      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiObjects, null)
+      "icon": /*#__PURE__*/_jsx(IconMaterialEmojiObjects, {})
     }, {
       "name": l("Symbols"),
       "groups": ["Symbol"],
-      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiSymbols, null)
+      "icon": /*#__PURE__*/_jsx(IconMaterialEmojiSymbols, {})
     }, {
       "name": l("Flags and Countries"),
       "groups": ["Flag", "Country"],
-      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiFlags, null)
+      "icon": /*#__PURE__*/_jsx(IconMaterialEmojiFlags, {})
     }];
   }, []);
   const {
@@ -285,89 +285,99 @@ const Emojis = /*#__PURE__*/React.forwardRef((props_, ref) => {
     name: item_4.icon,
     value: item_4.name
   }));
-  const label = /*#__PURE__*/React.createElement(Line, {
+  const label = /*#__PURE__*/_jsx(Line, {
     tonal: tonal,
     color: color,
     Component: Surface,
-    className: classNames([classes.wrapper, classes[`size_${size}`]])
-  }, /*#__PURE__*/React.createElement(SpyScroll, {
-    ids: categoriesUsedIDs,
-    parent: openElement,
-    onActive: onActiveTab
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    align: "unset",
-    justify: "unset",
-    fullWidth: true,
-    className: classes.categories
-  }, (search_ || tabs_) && /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    fullWidth: true,
-    className: classes.header
-  }, search_ && /*#__PURE__*/React.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.createElement(Tabs, {
-    valueDefault: tab,
-    value: tab,
-    onChange: onChangeTabs,
-    size: "small",
-    initialLineUpdateTimeout: 440,
-    noDivider: true,
-    className: classes.tabs
-  }, tabs.map((item_5, index) => /*#__PURE__*/React.createElement(Tab, {
-    key: index,
-    value: item_5.value,
-    onClick: () => onTabClick(item_5.value),
-    "data-onesy-spy-scroll": categoryToID(item_5.value),
-    className: classNames([classes.tab, classes[`tab_size_${size}`]])
-  }, /*#__PURE__*/React.cloneElement(item_5.name, {
-    size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
-  }))))), /*#__PURE__*/React.createElement(Line, {
-    ref: refs.main,
-    gap: 0,
-    flex: true,
-    fullWidth: true,
-    className: classes.main
-  }, categoriesUsed.map((item_6, index_0) => /*#__PURE__*/React.createElement(List, {
-    key: index_0,
-    gap: 1,
-    fullWidth: true,
-    SurfaceProps: {
-      id: categoryToID(item_6),
-      'data-onesy-category': item_6
-    }
-  }, /*#__PURE__*/React.createElement(ListSubheader, {
-    className: classes.subheader
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, item_6)), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    wrap: "wrap",
-    Component: "li",
-    className: classes.category
-  }, emojisPerCategory[item_6].map((emoji_0, index_) => /*#__PURE__*/React.createElement("span", {
-    key: index_,
-    onClick: () => onSelect(emoji_0),
-    title: capitalize((is('array', emoji_0.alias) ? emoji_0.alias.join(', ') : emoji_0.alias).replace(/_/g, ' ')),
-    className: classNames([classes.emoji, classes[`emoji_size_${size}`], selected?.includes(emoji_0.unicode) && classes.emoji_selected])
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classes.unicode
-  }, emoji_0.unicode))))))))));
-  return /*#__PURE__*/React.createElement(Menu, _extends({
+    className: classNames([classes.wrapper, classes[`size_${size}`]]),
+    children: /*#__PURE__*/_jsx(SpyScroll, {
+      ids: categoriesUsedIDs,
+      parent: openElement,
+      onActive: onActiveTab,
+      children: /*#__PURE__*/_jsxs(Line, {
+        gap: 0,
+        align: "unset",
+        justify: "unset",
+        fullWidth: true,
+        className: classes.categories,
+        children: [(search_ || tabs_) && /*#__PURE__*/_jsxs(Line, {
+          gap: 1,
+          fullWidth: true,
+          className: classes.header,
+          children: [search_ && /*#__PURE__*/_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__*/_jsx(Tabs, {
+            valueDefault: tab,
+            value: tab,
+            onChange: onChangeTabs,
+            size: "small",
+            initialLineUpdateTimeout: 440,
+            noDivider: true,
+            className: classes.tabs,
+            children: tabs.map((item_5, index) => /*#__PURE__*/_jsx(Tab, {
+              value: item_5.value,
+              onClick: () => onTabClick(item_5.value),
+              "data-onesy-spy-scroll": categoryToID(item_5.value),
+              className: classNames([classes.tab, classes[`tab_size_${size}`]]),
+              children: /*#__PURE__*/React.cloneElement(item_5.name, {
+                size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
+              })
+            }, index))
+          })]
+        }), /*#__PURE__*/_jsx(Line, {
+          ref: refs.main,
+          gap: 0,
+          flex: true,
+          fullWidth: true,
+          className: classes.main,
+          children: categoriesUsed.map((item_6, index_0) => /*#__PURE__*/_jsxs(List, {
+            gap: 1,
+            fullWidth: true,
+            SurfaceProps: {
+              id: categoryToID(item_6),
+              'data-onesy-category': item_6
+            },
+            children: [/*#__PURE__*/_jsx(ListSubheader, {
+              className: classes.subheader,
+              children: /*#__PURE__*/_jsx(Type, {
+                version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+                children: item_6
+              })
+            }), /*#__PURE__*/_jsx(Line, {
+              gap: 1,
+              direction: "row",
+              align: "center",
+              wrap: "wrap",
+              Component: "li",
+              className: classes.category,
+              children: emojisPerCategory[item_6].map((emoji_0, index_) => /*#__PURE__*/_jsx("span", {
+                onClick: () => onSelect(emoji_0),
+                title: capitalize((is('array', emoji_0.alias) ? emoji_0.alias.join(', ') : emoji_0.alias).replace(/_/g, ' ')),
+                className: classNames([classes.emoji, classes[`emoji_size_${size}`], selected?.includes(emoji_0.unicode) && classes.emoji_selected]),
+                children: /*#__PURE__*/_jsx("span", {
+                  className: classes.unicode,
+                  children: emoji_0.unicode
+                })
+              }, index_))
+            })]
+          }, index_0))
+        })]
+      })
+    })
+  });
+  return /*#__PURE__*/_jsx(Menu, _objectSpread({
     open: open,
     onOpen: onOpen,
     onClose: onClose,
     label: label,
     className: classNames([staticClassName('Emojis', theme) && ['onesy-Emojis-root', `onesy-Emojis-size-${size}`], className, classes.root])
   }, other));
-});
+};
 Emojis.displayName = 'onesy-Emojis';
 export default Emojis;

package/esm/Expand/Expand.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 = ["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) { _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";
@@ -10,8 +9,9 @@ import React from 'react';
 import { is } from '@onesy/utils';
 import { useOnesyTheme } from '@onesy/style-react';
 import { Transition } from '..';
-const Wrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const $ = _c(11);
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Wrapper = props => {
+  const $ = _c(10);
   let children;
   let other;
   let style;
@@ -43,26 +43,25 @@ const Wrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
     t0 = $[5];
   }
   let t1;
-  if ($[6] !== children || $[7] !== other || $[8] !== ref || $[9] !== t0) {
-    t1 = /*#__PURE__*/React.createElement("div", _extends({
-      ref: ref
-    }, other, {
-      style: t0
-    }), children);
+  if ($[6] !== children || $[7] !== other || $[8] !== t0) {
+    t1 = /*#__PURE__*/_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.forwardRef((props_, ref) => {
+};
+const Expand = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyExpand?.props?.default), props_);
   const {
+      ref,
       in: inProp,
       value: valueProvided,
       prefix,
@@ -172,60 +171,69 @@ const Expand = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return `${(is('simple', duration) ? duration : duration[status_0]) || properties[property]}ms`;
   };
   const timingFunction = status_1 => (is('simple', timing_function) ? timing_function : timing_function[status_1]) || theme.transitions.timing_function.standard;
-  const children_ = /*#__PURE__*/React.createElement(Wrapper, WrapperProps, children);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, value === null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: item_0 => {
-      if (!item_0) return;
-      if (!parent) setParent(item_0.parentElement);
-    }
-  }), parent && /*#__PURE__*/React.createElement(Wrapper, _extends({}, WrapperProps, {
-    ref: item_1 => {
-      if (!item_1) return;
-      if (WrapperProps?.ref) {
-        if (is('function', WrapperProps.ref)) 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?.style)
-  }), /*#__PURE__*/React.cloneElement(children, _objectSpread({}, childrenWithTransition && {
-    in: true
-  })))), value !== null && /*#__PURE__*/React.createElement(Transition, _extends({
-    removeOnExited: true
-  }, props), (status_2, ref_) => {
-    // If children update
-    // & value is updated
-    if (['appending', 'appended', 'adding', 'added', 'entering', 'entered'].includes(status_2)) {
-      const value_ = (refs.root.current?.getBoundingClientRect() || {})[prop];
-      if (value_ > 0 && value_ !== refs.value.current) setValue(value_);
-    }
-    return /*#__PURE__*/React.cloneElement(children_, _objectSpread(_objectSpread({}, other), {}, {
-      className,
-      ref: item_2 => {
-        refs.root.current = item_2;
-        if (ref) {
-          if (is('function', ref)) ref(item_2);else ref.current = item_2;
-        }
-        if (ref_) {
-          if (is('function', ref_)) ref_(item_2);else ref_.current = item_2;
+  const children_ = /*#__PURE__*/_jsx(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+    children: children
+  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [value === null && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: item_0 => {
+          if (!item_0) return;
+          if (!parent) setParent(item_0.parentElement);
         }
-        if (children_.ref) {
-          if (is('function', children_.ref)) children_.ref(item_2);else children_.ref.current = item_2;
+      }), parent && /*#__PURE__*/_jsx(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+        ref: item_1 => {
+          if (!item_1) return;
+          if (WrapperProps?.ref) {
+            if (is('function', WrapperProps.ref)) 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?.style),
+        children: /*#__PURE__*/React.cloneElement(children, _objectSpread({}, childrenWithTransition && {
+          in: true
+        }))
+      }))]
+    }), value !== null && /*#__PURE__*/_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)) {
+          const value_ = (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_?.style)
-    }));
-  }));
-});
+        return /*#__PURE__*/React.cloneElement(children_, _objectSpread(_objectSpread({}, other), {}, {
+          className,
+          ref: item_2 => {
+            refs.root.current = item_2;
+            if (ref) {
+              if (is('function', ref)) ref(item_2);else ref.current = 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;
+            }
+          },
+          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_?.style)
+        }));
+      }
+    }))]
+  });
+};
 Expand.displayName = 'onesy-Expand';
 export default Expand;

package/esm/Fab/Fab.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
@@ -6,12 +5,13 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import ButtonElement from '../Button';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-Fab'
 });
-const Fab = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Fab = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFab?.props?.default), props_);
   const Button = theme?.elements?.Button || ButtonElement;
@@ -25,14 +25,12 @@ const Fab = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
     className: classNames([staticClassName("Fab", theme) && ["onesy-Fab-root"], className, classes.root]),
     version: version,
     tonal: tonal,
     fab: true
   }));
-});
+};
 Fab.displayName = 'onesy-Fab';
 export default Fab;