@onesy/ui-react 1.0.164 → 1.0.167

package/esm/ImageGallery/ImageGallery.js

@@ -153,12 +153,12 @@ const useStyle = styleMethod(theme => ({
 });
 const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageGallery?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Image = React.useMemo(() => theme?.elements?.Image || ImageElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
-  const Backdrop = React.useMemo(() => theme?.elements?.Backdrop || BackdropElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageGallery?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Image = theme?.elements?.Image || ImageElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
+  const Backdrop = theme?.elements?.Backdrop || BackdropElement;
   const {
       version = 'modal',
       size = 'regular',
@@ -225,7 +225,7 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.incrementZoom.current = incrementZoom;
   refs.minZoom.current = minZoom;
   refs.maxZoom.current = maxZoom;
-  const init = React.useCallback(() => {
+  const init = () => {
     setTimeout(() => {
       setMoveValue({
         left: refs.more.current?.scrollLeft,
@@ -233,15 +233,15 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
       });
       setLoaded(true);
     }, 14);
-  }, []);
-  const cleanUp = React.useCallback(() => {
+  };
+  const cleanUp = () => {
     refs.mouseDown.current = false;
-  }, []);
+  };
   React.useEffect(() => {
     const onKeyDown = event => {
       setKeyDown(event.metaKey || event.ctrlKey);
     };
-    const onKeyUp = event => {
+    const onKeyUp = event_0 => {
       setKeyDown(null);
     };
     window.document.addEventListener('keydown', onKeyDown);
@@ -261,7 +261,7 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     if (value_ !== undefined && value !== value_) setValue(clamp(value_, 0, length));
   }, [value_]);
-  const onResetZoom = React.useCallback(() => {
+  const onResetZoom = () => {
     refs.zoom.current = null;
     if (refs.imageWrapper.current) {
       refs.imageWrapper.current.style.transition = 'none';
@@ -272,21 +272,21 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
         refs.imageWrapper.current.style.removeProperty('transition');
       }, 14);
     }
-  }, []);
-  const onValue = React.useCallback(index => {
+  };
+  const onValue = index => {
     onResetZoom();
     setValue(index);
-  }, [onResetZoom]);
-  const onOpen = React.useCallback(() => {
+  };
+  const onOpen = () => {
     setOpen(true);
-  }, []);
-  const onClose = React.useCallback(() => {
+  };
+  const onClose = () => {
     setOpen(false);
     setTimeout(() => {
       setLoaded(false);
     }, 140);
     if (is('function', onClose_)) onClose_();
-  }, [onClose_]);
+  };
   const move = (forward_ = true) => {
     const forward = forward_;
     const rect = refs.more.current.getBoundingClientRect();
@@ -296,24 +296,24 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
     refs.more.current.scrollTo(moveValue_);
   };
-  const onMouseDown = React.useCallback(event => {
+  const onMouseDown = event_1 => {
     refs.mouseDown.current = true;
     refs.mouseMovePrevious.current = {
-      x: event.clientX,
-      y: event.clientY
+      x: event_1.clientX,
+      y: event_1.clientY
     };
-  }, []);
-  const onMouseUp = React.useCallback(() => {
+  };
+  const onMouseUp = () => {
     refs.mouseDown.current = false;
     refs.mouseMovePrevious.current = null;
-  }, []);
-  const onWheel = React.useCallback(event => {
+  };
+  const onWheel = event_2 => {
     if (!refs.useZoom.current) return;
-    event.preventDefault();
-    event.stopPropagation();
+    event_2.preventDefault();
+    event_2.stopPropagation();
     let scale = refs.zoom.current?.scale !== undefined ? refs.zoom.current.scale : 1;
     const part = refs.incrementZoom.current;
-    const up = event.wheelDelta > 0 || event.deltaY < 0;
+    const up = event_2.wheelDelta > 0 || event_2.deltaY < 0;
     scale = clamp(up ? scale + part : scale - part, refs.minZoom.current, refs.maxZoom.current);
 
     // Only allow in 100's decimal places, ie. 1.01
@@ -331,28 +331,28 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
       };
       refs.imageWrapper.current.style.transform = `scale(${scale})`;
     }
-  }, []);
-  const onMouseMove = React.useCallback(event => {
+  };
+  const onMouseMove = event_3 => {
     if (!refs.useZoom.current) return;
     if (!(refs.mouseDown.current && refs.image.current)) return;
-    const x = event.x - (refs.mouseMovePrevious.current?.x || 0);
-    const y = event.y - (refs.mouseMovePrevious.current?.y || 0);
+    const x = event_3.x - (refs.mouseMovePrevious.current?.x || 0);
+    const y = event_3.y - (refs.mouseMovePrevious.current?.y || 0);
     refs.mouseMovePrevious.current = {
-      x: event.clientX,
-      y: event.clientY
+      x: event_3.clientX,
+      y: event_3.clientY
     };
     let left = Number(refs.imageWrapper.current?.style?.left?.replace('px', '')) || 0;
     let top = Number(refs.imageWrapper.current?.style?.top?.replace('px', '')) || 0;
-    const imageBoundingRect = refs.image.current.getBoundingClientRect();
-    if (imageBoundingRect.left <= 0 && imageBoundingRect.left + x <= 0 && imageBoundingRect.width + imageBoundingRect.left + x >= window.innerWidth) {
+    const imageBoundingRect_0 = refs.image.current.getBoundingClientRect();
+    if (imageBoundingRect_0.left <= 0 && imageBoundingRect_0.left + x <= 0 && imageBoundingRect_0.width + imageBoundingRect_0.left + x >= window.innerWidth) {
       left += x;
       refs.imageWrapper.current.style.left = `${left}px`;
     }
-    if (imageBoundingRect.top <= 0 && imageBoundingRect.top + y <= 0 && imageBoundingRect.height + imageBoundingRect.top + y >= window.innerHeight) {
+    if (imageBoundingRect_0.top <= 0 && imageBoundingRect_0.top + y <= 0 && imageBoundingRect_0.height + imageBoundingRect_0.top + y >= window.innerHeight) {
       top += y;
       refs.imageWrapper.current.style.top = `${top}px`;
     }
-  }, []);
+  };
   React.useEffect(() => {
     if (refs.useZoom.current) {
       if (imageRef) imageRef.addEventListener('wheel', onWheel, {
@@ -369,7 +369,7 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
       window.removeEventListener('touchend', onMouseUp);
     };
   }, [imageRef, refs.useZoom.current]);
-  const onScroll = React.useCallback(event => {
+  const onScroll = event_4 => {
     if (!refs.useZoom.current) return;
     if (arrows) {
       setMoveValue({
@@ -377,7 +377,7 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
         top: refs.more.current.scrollTop
       });
     }
-  }, [arrows]);
+  };
   const iconButtonProps = _objectSpread({
     version: 'filled',
     color: 'default',
@@ -397,9 +397,9 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([staticClassName('ImageGallery', theme) && ['onesy-ImageGallery-arrow', 'onesy-ImageGallery-arrow-end'], iconButtonProps?.className, classes.arrow])
   }), /*#__PURE__*/React.createElement(IconEnd, null));
   const more = !!items?.length;
-  const onDragStartImage = React.useCallback(event => {
-    event.preventDefault();
-  }, []);
+  const onDragStartImage = event_5 => {
+    event_5.preventDefault();
+  };
   const url = media?.url || media?.urlSmall || (is('string', media) ? media : '');
   const main = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line, {
     justify: "center",
@@ -450,31 +450,31 @@ const ImageGallery = /*#__PURE__*/React.forwardRef((props_, ref) => {
     fullWidth: true,
     onScroll: onScroll,
     className: classNames([classes.items])
-  }, items.map((item, index) => /*#__PURE__*/React.createElement(Line, {
-    onClick: () => onValue(index),
-    className: classNames([staticClassName('ImageGallery', theme) && ['onesy-ImageGallery-item', value === index && 'onesy-ImageGallery-item-selected'], classes.item, value === index && classes.itemSelected]),
+  }, items.map((item_0, index_0) => /*#__PURE__*/React.createElement(Line, {
+    onClick: () => onValue(index_0),
+    className: classNames([staticClassName('ImageGallery', theme) && ['onesy-ImageGallery-item', value === index_0 && 'onesy-ImageGallery-item-selected'], classes.item, value === index_0 && classes.itemSelected]),
     style: {
-      backgroundImage: `url('${item?.urlSmall || item?.url || item}')`
+      backgroundImage: `url('${item_0?.urlSmall || item_0?.url || item_0}')`
     }
   }, /*#__PURE__*/React.createElement(Interaction, null)))), arrows && arrowPost, endThumbnails)));
   if (version === 'regular') {
     return /*#__PURE__*/React.createElement(Line, _extends({
-      ref: item => {
+      ref: item_1 => {
         if (ref) {
-          if (is('function', ref)) ref(item);else ref.current = item;
+          if (is('function', ref)) ref(item_1);else ref.current = item_1;
         }
-        refs.root.current = item;
+        refs.root.current = item_1;
       },
       fullWidth: true,
       className: classNames([staticClassName('ImageGallery', theme) && ['onesy-ImageGallery-root', `onesy-ImageGallery-version-${version}`, `onesy-ImageGallery-size-${size}`], className, classes.root, classes[`version_${version}`]])
     }, other), main);
   }
   return /*#__PURE__*/React.createElement(Backdrop, _extends({
-    ref: item => {
+    ref: item_2 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_2);else ref.current = item_2;
       }
-      refs.root.current = item;
+      refs.root.current = item_2;
     },
     open: open,
     onClose: onClose,

package/esm/ImageList/ImageList.js

@@ -35,7 +35,7 @@ const useStyle = styleMethod(theme => ({
 });
 const ImageList = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageList?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageList?.props?.default), props_);
   const {
     classes
   } = useStyle();
@@ -59,13 +59,13 @@ const ImageList = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [gap_, rowGap_, columnGap_, columns_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [gap_, rowGap_, columnGap_, columns_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -103,29 +103,29 @@ const ImageList = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Wrapper = version !== 'masonry' ? React.Fragment : 'div';
   const WrapperProps = {};
   if (version === 'masonry') {
-    WrapperProps.ref = item => {
+    WrapperProps.ref = item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     };
     WrapperProps.style = _objectSpread({}, style);
     other.style = _objectSpread({}, styles.root);
   } else {
-    other.ref = item => {
+    other.ref = item_1 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_1);else ref.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     };
     other.style = _objectSpread(_objectSpread({}, styles.root), style);
   }
   return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
     className: classNames([staticClassName('ImageList', theme) && [`onesy-ImageList-root`], className, classes.root, classes[`version_${version}`]])
-  }, other), React.Children.toArray(children).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
+  }, other), React.Children.toArray(children).map((item_2, index) => (/*#__PURE__*/React.cloneElement(item_2, {
     key: index,
     version,
-    style: _objectSpread(_objectSpread({}, styles.item), item.props.style)
+    style: _objectSpread(_objectSpread({}, styles.item), item_2.props.style)
   })))));
 });
 ImageList.displayName = 'onesy-ImageList';

package/esm/ImageListItem/ImageListItem.js

@@ -30,8 +30,8 @@ const useStyle = styleMethod(theme => ({
 });
 const ImageListItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageListItem?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageListItem?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
   const {
       rows: rows_,
       columns: columns_,
@@ -52,13 +52,13 @@ const ImageListItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [rows_, columns_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [rows_, columns_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -74,11 +74,11 @@ const ImageListItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const children = React.Children.toArray(children_);
   if (children.length > 1) other.justify = 'flex-end';
   return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     gap: 0,
     direction: "column",

package/esm/ImageListItemBox/ImageListItemBox.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["position", "backgroundOpacity", "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 ListItemElement from '../ListItem';
@@ -26,26 +27,44 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-ImageListItemBox'
 });
 const ImageListItemBox = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(8);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageListItemBox?.props?.default), props_), [props_]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageListItemBox?.props?.default), props_);
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
   const {
       position,
-      backgroundOpacity = 0.74,
-      Component = 'div',
+      backgroundOpacity: t0,
+      Component: t1,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const backgroundOpacity = t0 === undefined ? 0.74 : t0;
+  const Component = t1 === undefined ? "div" : t1;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(ListItem, _extends({
-    ref: ref,
-    backgroundOpacity: backgroundOpacity,
-    Component: Component,
-    className: classNames([staticClassName('ImageListItemBox', theme) && ['onesy-ImageListItemBox-root'], className, classes.root, position && classes[`position_${position}`]])
-  }, other), children);
+  const t2 = classNames([staticClassName("ImageListItemBox", theme) && ["onesy-ImageListItemBox-root"], className, classes.root, position && classes[`position_${position}`]]);
+  let t3;
+  if ($[0] !== Component || $[1] !== ListItem || $[2] !== backgroundOpacity || $[3] !== children || $[4] !== other || $[5] !== ref || $[6] !== t2) {
+    t3 = /*#__PURE__*/React.createElement(ListItem, _extends({
+      ref: ref,
+      backgroundOpacity: backgroundOpacity,
+      Component: Component,
+      className: t2
+    }, other), children);
+    $[0] = Component;
+    $[1] = ListItem;
+    $[2] = backgroundOpacity;
+    $[3] = children;
+    $[4] = other;
+    $[5] = ref;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
 });
 ImageListItemBox.displayName = 'onesy-ImageListItemBox';
 export default ImageListItemBox;

package/esm/Info/Info.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["name", "title", "render", "Icon", "IconProps", "IconButtonProps", "TitleProps", "ContainerProps", "TooltipProps", "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 { is } from '@onesy/utils';
 import { classNames, style, useOnesyTheme } from '@onesy/style-react';
@@ -31,19 +32,20 @@ const useStyle = style(theme => ({
   name: 'onesy-Info'
 });
 const Info = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(22);
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyInfo?.props?.default), props_), [props_]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyInfo?.props?.default), props_);
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Line = theme?.elements?.Line || LineElement;
+  const Menu = theme?.elements?.Menu || MenuElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       name,
       title,
       render,
-      Icon = IconMaterialInfo,
+      Icon: t0,
       IconProps,
       IconButtonProps,
       TitleProps,
@@ -53,26 +55,82 @@ const Info = /*#__PURE__*/React.forwardRef((props_, ref) => {
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const Icon = t0 === undefined ? IconMaterialInfo : t0;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(Menu, _extends({
-    ref: ref,
-    alignment: "center",
-    name: is('function', render) ? render() : /*#__PURE__*/React.createElement(Line, {
-      gap: 1,
-      fullWidth: true,
-      className: classNames([staticClassName('Info', theme) && ['onesy-Info-menu'], classes.menu])
-    }, /*#__PURE__*/React.createElement(Line, _extends({
-      gap: 1,
-      fullWidth: true
-    }, ContainerProps), /*#__PURE__*/React.createElement(Type, _extends({
-      version: "l2"
-    }, TitleProps), title), children)),
-    className: classNames([staticClassName('Info', theme) && ['onesy-Info-root'], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: name !== undefined ? name : l('Info')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, IconButtonProps, /*#__PURE__*/React.createElement(Icon, IconProps)))));
+  const t1 = "center";
+  const t2 = is("function", render) ? render() : /*#__PURE__*/React.createElement(Line, {
+    gap: 1,
+    fullWidth: true,
+    className: classNames([staticClassName("Info", theme) && ["onesy-Info-menu"], classes.menu])
+  }, /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 1,
+    fullWidth: true
+  }, ContainerProps), /*#__PURE__*/React.createElement(Type, _extends({
+    version: "l2"
+  }, TitleProps), title), children));
+  const t3 = classNames([staticClassName("Info", theme) && ["onesy-Info-root"], className, classes.root]);
+  let t4;
+  if ($[0] !== l || $[1] !== name) {
+    t4 = name !== undefined ? name : l("Info");
+    $[0] = l;
+    $[1] = name;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== Icon || $[4] !== IconProps) {
+    t5 = /*#__PURE__*/React.createElement(Icon, IconProps);
+    $[3] = Icon;
+    $[4] = IconProps;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== IconButton || $[7] !== IconButtonProps || $[8] !== t5) {
+    t6 = /*#__PURE__*/React.createElement(IconButton, IconButtonProps, t5);
+    $[6] = IconButton;
+    $[7] = IconButtonProps;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== Tooltip || $[11] !== TooltipProps || $[12] !== t4 || $[13] !== t6) {
+    t7 = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
+      name: t4
+    }, TooltipProps), t6));
+    $[10] = Tooltip;
+    $[11] = TooltipProps;
+    $[12] = t4;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== Menu || $[16] !== other || $[17] !== ref || $[18] !== t2 || $[19] !== t3 || $[20] !== t7) {
+    t8 = /*#__PURE__*/React.createElement(Menu, _extends({
+      ref: ref,
+      alignment: t1,
+      name: t2,
+      className: t3
+    }, other), t7);
+    $[15] = Menu;
+    $[16] = other;
+    $[17] = ref;
+    $[18] = t2;
+    $[19] = t3;
+    $[20] = t7;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  return t8;
 });
 Info.displayName = 'onesy-Info';
 export default Info;