@onesy/ui-react 1.0.164 → 1.0.165

package/esm/AvatarGroup/AvatarGroup.js

@@ -27,24 +27,29 @@ const useStyle = styleMethod(theme => ({
 });
 const AvatarGroup = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAvatarGroup?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Avatar = React.useMemo(() => theme?.elements?.Avatar || AvatarElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAvatarGroup?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Avatar = theme?.elements?.Avatar || AvatarElement;
   const {
-      tonal = true,
-      color = 'primary',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      size: t2,
       total,
       max,
       disabled,
       AdditionalAvatar,
-      AdditionalAvatarProps = {},
-      Component = 'div',
+      AdditionalAvatarProps: t3,
+      Component: t4,
       className,
       style,
       children: children_
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const AdditionalAvatarProps = t3 === undefined ? {} : t3;
+  const Component = t4 === undefined ? "div" : t4;
   const {
     classes
   } = useStyle();
@@ -54,14 +59,32 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef((props_, ref) => {
   };
   const children = React.Children.toArray(children_).slice(0, max || children_.length).reverse();
   if (size !== undefined) {
-    if (size === 'small') styles.item.outlineWidth = 2;else if (size === 'regular') styles.item.outlineWidth = 3;else if (size === 'large') styles.item.outlineWidth = 4;else styles.item.outlineWidth = Math.ceil(size / 20);
+    if (size === "small") {
+      styles.item.outlineWidth = 2;
+    } else {
+      if (size === "regular") {
+        styles.item.outlineWidth = 3;
+      } else {
+        if (size === "large") {
+          styles.item.outlineWidth = 4;
+        } else {
+          styles.item.outlineWidth = Math.ceil(size / 20);
+        }
+      }
+    }
   }
   other.style = styles.item;
   if (total !== undefined && total - children_.length >= 1 || max < children_.length) {
     let value;
-    if (total !== undefined && total - children_.length >= 1) value = `+${total - children_.length}`;else value = `+${Math.abs(children_.length - max)}`;
-    if (!AdditionalAvatarProps.TypeProps) AdditionalAvatarProps.TypeProps = {};
-    AdditionalAvatarProps.TypeProps.size = '0.44em';
+    if (total !== undefined && total - children_.length >= 1) {
+      value = `+${total - children_.length}`;
+    } else {
+      value = `+${Math.abs(children_.length - max)}`;
+    }
+    if (!AdditionalAvatarProps.TypeProps) {
+      AdditionalAvatarProps.TypeProps = {};
+    }
+    AdditionalAvatarProps.TypeProps.size = "0.44em";
     children.unshift(AdditionalAvatar || /*#__PURE__*/React.createElement(Avatar, _extends({
       tonal: tonal,
       color: "neutral"
@@ -69,13 +92,15 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef((props_, ref) => {
       noIconRootFontSize: true
     }), value));
   }
-  if (AdditionalAvatarProps?.size !== undefined) styles.root.fontSize = AdditionalAvatarProps.size;
+  if (AdditionalAvatarProps?.size !== undefined) {
+    styles.root.fontSize = AdditionalAvatarProps.size;
+  }
   return /*#__PURE__*/React.createElement(Line, {
     ref: ref,
     gap: 0,
     direction: "row-reverse",
     Component: Component,
-    className: classNames([staticClassName('AvatarGroup', theme) && ['onesy-AvatarGroup-root', `onesy-AvatarGroup-size-${size}`], className, classes.root, disabled && classes.disabled]),
+    className: classNames([staticClassName("AvatarGroup", theme) && ["onesy-AvatarGroup-root", `onesy-AvatarGroup-size-${size}`], className, classes.root, disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, children.map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
     key: index,

package/esm/Backdrop/Backdrop.js

@@ -41,10 +41,10 @@ const useStyle = styleMethod(theme => ({
 let BACKDROPS_OPEN = 0;
 const Backdrop = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBackdrop?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Focus = React.useMemo(() => theme?.elements?.Focus || FocusElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBackdrop?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const Focus = theme?.elements?.Focus || FocusElement;
   const {
       open: open_,
       invisible,
@@ -86,8 +86,8 @@ const Backdrop = /*#__PURE__*/React.forwardRef((props_, ref) => {
     },
     close: () => {
       BACKDROPS_OPEN--;
-      const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-      if (!BACKDROPS_OPEN) rootDocument.body.style.removeProperty('overflow');
+      const rootDocument_0 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+      if (!BACKDROPS_OPEN) rootDocument_0.body.style.removeProperty('overflow');
     }
   };
   React.useEffect(() => {

package/esm/Badge/Badge.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "size", "value", "max", "vertical", "horizontal", "indicator", "element", "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) { _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";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import SurfaceElement from '../Surface';
@@ -59,39 +60,52 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Badge'
 });
 const Badge = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(9);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBadge?.props?.default), props_), [props_]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBadge?.props?.default), props_);
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
-      tonal = false,
-      color = 'primary',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      size: t2,
       value: value_,
       max,
-      vertical = 'top',
-      horizontal = 'right',
+      vertical: t3,
+      horizontal: t4,
       indicator,
       element,
-      Component = 'span',
+      Component: t5,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? false : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const vertical = t3 === undefined ? "top" : t3;
+  const horizontal = t4 === undefined ? "right" : t4;
+  const Component = t5 === undefined ? "span" : t5;
   const {
     classes
   } = useStyle();
-  const styles = {
-    badge: {}
-  };
+  let t6;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      badge: {}
+    };
+    $[0] = t6;
+  } else {
+    t6 = $[0];
+  }
+  const styles = t6;
   let value = value_;
-  if (max !== undefined && value > max) value = `${max}+`;
+  if (max !== undefined && value > max) {
+    value = `${max}+`;
+  }
   const useValue = value !== undefined || indicator || element;
-  const classesBadge = classNames([staticClassName('Badge', theme) && ['onesy-Badge-badge'], classes.badge, classes[`vertical_${vertical}`], classes[`horizontal_${horizontal}`], classes[`vertical_horizontal_${vertical}_${horizontal}`], indicator && classes.indicator]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
-    size: size,
-    className: classNames([staticClassName('Badge', theme) && ['onesy-Badge-root', `onesy-Badge-size-${size}`], className, classes.root])
-  }, other), children, useValue && (element ? /*#__PURE__*/React.cloneElement(element, {
+  const classesBadge = classNames([staticClassName("Badge", theme) && ["onesy-Badge-badge"], classes.badge, classes[`vertical_${vertical}`], classes[`horizontal_${horizontal}`], classes[`vertical_horizontal_${vertical}_${horizontal}`], indicator && classes.indicator]);
+  const t7 = classNames([staticClassName("Badge", theme) && ["onesy-Badge-root", `onesy-Badge-size-${size}`], className, classes.root]);
+  const t8 = useValue && (element ? /*#__PURE__*/React.cloneElement(element, {
     className: classNames([classesBadge, element.props?.className])
   }) : /*#__PURE__*/React.createElement(Surface, {
     tonal: tonal,
@@ -99,7 +113,26 @@ const Badge = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: "span",
     className: classesBadge,
     style: styles.badge
-  }, value)));
+  }, value));
+  let t9;
+  if ($[1] !== Component || $[2] !== children || $[3] !== other || $[4] !== ref || $[5] !== size || $[6] !== t7 || $[7] !== t8) {
+    t9 = /*#__PURE__*/React.createElement(Component, _extends({
+      ref: ref,
+      size: size,
+      className: t7
+    }, other), children, t8);
+    $[1] = Component;
+    $[2] = children;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = size;
+    $[6] = t7;
+    $[7] = t8;
+    $[8] = t9;
+  } else {
+    t9 = $[8];
+  }
+  return t9;
 });
 Badge.displayName = 'onesy-Badge';
 export default Badge;

package/esm/Banner/Banner.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["size", "maxWidth", "actions", "start", "end", "Component", "style", "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) { _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";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import ListItemElement from '../ListItem';
@@ -46,23 +47,26 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Banner'
 });
 const Banner = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(15);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBanner?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const Grid = React.useMemo(() => theme?.elements?.Grid || GridElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBanner?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
+  const Grid = theme?.elements?.Grid || GridElement;
   const {
-      size = 'regular',
+      size: t0,
       maxWidth,
       actions,
       start,
       end,
-      Component = 'div',
+      Component: t1,
       style,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const size = t0 === undefined ? "regular" : t0;
+  const Component = t1 === undefined ? "div" : t1;
   const {
     classes
   } = useStyle();
@@ -75,37 +79,91 @@ const Banner = /*#__PURE__*/React.forwardRef((props_, ref) => {
     other.RootProps.values = {
       md: 7
     };
+    let t2;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        gap: 1,
+        direction: "row"
+      };
+      $[0] = t2;
+    } else {
+      t2 = $[0];
+    }
+    let t3;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = {
+        md: 2
+      };
+      $[1] = t3;
+    } else {
+      t3 = $[1];
+    }
+    let t4;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = {
+        md: 1
+      };
+      $[2] = t4;
+    } else {
+      t4 = $[2];
+    }
     other.footer = /*#__PURE__*/React.createElement(Grid, {
       Component: Line,
-      RootProps: {
-        gap: 1,
-        direction: 'row'
-      },
+      RootProps: t2,
       justify: "flex-end",
       align: "flex-end",
-      values: {
-        md: 2
-      },
-      offsets: {
-        md: 1
-      }
+      values: t3,
+      offsets: t4
     }, actions);
   }
-  if (!classes[`maxWidth_${maxWidth}`]) styles.root.maxWidth = maxWidth;
+  if (!classes[`maxWidth_${maxWidth}`]) {
+    styles.root.maxWidth = maxWidth;
+  }
+  const t2 = classNames([staticClassName("Banner", theme) && ["onesy-Banner-root", `onesy-Banner-size-${size}`], className, classes.root]);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      version: "b2"
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== classes || $[5] !== maxWidth || $[6] !== theme) {
+    t4 = classNames([staticClassName("Banner", theme) && ["onesy-Banner-list-item"], classes.listItem, classes[`maxWidth_${maxWidth}`]]);
+    $[4] = classes;
+    $[5] = maxWidth;
+    $[6] = theme;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== Grid || $[9] !== ListItem || $[10] !== children || $[11] !== other || $[12] !== size || $[13] !== t4) {
+    t5 = /*#__PURE__*/React.createElement(ListItem, _extends({
+      size: size,
+      Component: Grid,
+      RootComponent: Grid,
+      PrimaryProps: t3,
+      className: t4
+    }, other), children);
+    $[8] = Grid;
+    $[9] = ListItem;
+    $[10] = children;
+    $[11] = other;
+    $[12] = size;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
   return /*#__PURE__*/React.createElement(Component, {
     ref: ref,
     role: "alert",
-    className: classNames([staticClassName('Banner', theme) && ['onesy-Banner-root', `onesy-Banner-size-${size}`], className, classes.root]),
+    className: t2,
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, start, /*#__PURE__*/React.createElement(ListItem, _extends({
-    size: size,
-    Component: Grid,
-    RootComponent: Grid,
-    PrimaryProps: {
-      version: 'b2'
-    },
-    className: classNames([staticClassName('Banner', theme) && ['onesy-Banner-list-item'], classes.listItem, classes[`maxWidth_${maxWidth}`]])
-  }, other), children), end);
+  }, start, t5, end);
 });
 Banner.displayName = 'onesy-Banner';
 export default Banner;

package/esm/BottomAppBar/BottomAppBar.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "size", "fixed", "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";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
@@ -40,38 +41,75 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-BottomAppBar'
 });
 const BottomAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(13);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBottomAppBar?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBottomAppBar?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
-      tonal = true,
-      color = 'default',
-      size = 'regular',
-      fixed = true,
+      tonal: t0,
+      color: t1,
+      size: t2,
+      fixed: t3,
       className,
       style,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "default" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const fixed = t3 === undefined ? true : t3;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: ref,
-    color: color,
-    tonal: tonal,
-    gap: 0,
-    direction: "row",
-    align: "unset",
-    justify: "unset",
-    Component: Line,
-    fullWidth: true,
-    className: classNames([staticClassName('BottomAppBar', theme) && ['onesy-BottomAppBar-root', `onesy-BottomAppBar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
-    style: _objectSpread({
-      maxWidth: `clamp(100px, ${(children?.length || 3) * 110}px, calc(100vw - 24px))`
-    }, style)
-  }, other), children);
+  const t4 = 0;
+  const t5 = "row";
+  const t6 = "unset";
+  const t7 = "unset";
+  const t8 = true;
+  const t9 = classNames([staticClassName("BottomAppBar", theme) && ["onesy-BottomAppBar-root", `onesy-BottomAppBar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]);
+  const t10 = `clamp(100px, ${(children?.length || 3) * 110}px, calc(100vw - 24px))`;
+  let t11;
+  if ($[0] !== style || $[1] !== t10) {
+    t11 = _objectSpread({
+      maxWidth: t10
+    }, style);
+    $[0] = style;
+    $[1] = t10;
+    $[2] = t11;
+  } else {
+    t11 = $[2];
+  }
+  let t12;
+  if ($[3] !== Line || $[4] !== Surface || $[5] !== children || $[6] !== color || $[7] !== other || $[8] !== ref || $[9] !== t11 || $[10] !== t9 || $[11] !== tonal) {
+    t12 = /*#__PURE__*/React.createElement(Surface, _extends({
+      ref: ref,
+      color: color,
+      tonal: tonal,
+      gap: t4,
+      direction: t5,
+      align: t6,
+      justify: t7,
+      Component: Line,
+      fullWidth: t8,
+      className: t9,
+      style: t11
+    }, other), children);
+    $[3] = Line;
+    $[4] = Surface;
+    $[5] = children;
+    $[6] = color;
+    $[7] = other;
+    $[8] = ref;
+    $[9] = t11;
+    $[10] = t9;
+    $[11] = tonal;
+    $[12] = t12;
+  } else {
+    t12 = $[12];
+  }
+  return t12;
 });
 BottomAppBar.displayName = 'onesy-BottomAppBar';
 export default BottomAppBar;

package/esm/BottomSheet/BottomSheet.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import NavigationDrawerElement from '../NavigationDrawer';
@@ -37,9 +38,10 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-BottomSheet'
 });
 const BottomSheet = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBottomSheet?.props?.default), props_), [props_]);
-  const NavigationDrawer = React.useMemo(() => theme?.elements?.NavigationDrawer || NavigationDrawerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBottomSheet?.props?.default), props_);
+  const NavigationDrawer = theme?.elements?.NavigationDrawer || NavigationDrawerElement;
   const {
       className
     } = props,
@@ -47,11 +49,24 @@ const BottomSheet = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(NavigationDrawer, _extends({
-    ref: ref,
-    direction: "bottom",
-    className: classNames([staticClassName('BottomSheet', theme) && ['onesy-BottomSheet-root'], className, classes.root])
-  }, other));
+  const t0 = "bottom";
+  const t1 = classNames([staticClassName("BottomSheet", theme) && ["onesy-BottomSheet-root"], className, classes.root]);
+  let t2;
+  if ($[0] !== NavigationDrawer || $[1] !== other || $[2] !== ref || $[3] !== t1) {
+    t2 = /*#__PURE__*/React.createElement(NavigationDrawer, _extends({
+      ref: ref,
+      direction: t0,
+      className: t1
+    }, other));
+    $[0] = NavigationDrawer;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 });
 BottomSheet.displayName = 'onesy-BottomSheet';
 export default BottomSheet;

package/esm/Box/Box.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["styles", "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) { _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";
 import React from 'react';
 import { style as styleMethod, classNames, useOnesyTheme, className as classNameMethod } from '@onesy/style-react';
 import { staticClassName } from '../utils';
@@ -13,24 +14,39 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Box'
 });
 const Box = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(6);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBox?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBox?.props?.default), props_);
   const {
       styles,
-      Component = 'div',
+      Component: t0,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const Component = t0 === undefined ? "div" : t0;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
-    className: classNameMethod(styles, props, classNames([staticClassName('Box', theme) && ['onesy-Box-root'], className, classes.root]), {
-      name: 'onesy-BoxClassNameRoot'
-    })
-  }, other), children);
+  const t1 = classNameMethod(styles, props, classNames([staticClassName("Box", theme) && ["onesy-Box-root"], className, classes.root]), {
+    name: "onesy-BoxClassNameRoot"
+  });
+  let t2;
+  if ($[0] !== Component || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t1) {
+    t2 = /*#__PURE__*/React.createElement(Component, _extends({
+      ref: ref,
+      className: t1
+    }, other), children);
+    $[0] = Component;
+    $[1] = children;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
 });
 Box.displayName = 'onesy-Box';
 export default Box;