@onesy/ui-react 1.0.172 → 1.0.174

package/esm/Links/Links.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 = ["name", "short_description", "cover", "profile", "links", "share", "start", "end", "sensitiveText", "sensitiveDescription", "IconMore", "IconShare", "ShareProps", "ItemShareProps", "IconButtonProps", "IconProps", "NameProps", "ShortDescriptionProps", "LinkProps", "LinkTypeProps", "className"];
@@ -20,6 +19,7 @@ import MenuItemElement from '../MenuItem';
 import IconButtonElement from '../IconButton';
 import { useConfirm } from '../Confirm';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = style(theme => ({
   root: {
     padding: `${theme.methods.space.value(5, 'px')} ${theme.methods.space.value(3, 'px')}`
@@ -75,8 +75,8 @@ const useStyle = style(theme => ({
 }), {
   name: 'onesy-Links'
 });
-const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(19);
+const Element = props_ => {
+  const $ = _c(18);
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinks?.props?.default), props_);
@@ -138,119 +138,129 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t10 = classNames([staticClassName("Links", theme) && ["onesy-Links-root"], className, classes.root]);
   const t11 = 1.4;
   const t12 = true;
-  const t13 = (profile || cover) && /*#__PURE__*/React.createElement(Line, {
+  const t13 = (profile || cover) && /*#__PURE__*/_jsxs(Line, {
     gap: 0,
     align: "center",
-    fullWidth: true
-  }, cover && /*#__PURE__*/React.createElement(Line, {
     fullWidth: true,
-    className: classes.cover,
-    style: {
-      backgroundImage: `url('${cover?.url || cover?.urlSmall}')`
-    }
-  }), profile && /*#__PURE__*/React.createElement(Line, {
-    fullWidth: true,
-    className: classes.profile,
-    style: {
-      marginTop: cover ? -71 : 0,
-      backgroundImage: `url('${profile?.urlSmall || profile?.url}')`
-    }
-  }));
-  const t14 = (name || short_description) && /*#__PURE__*/React.createElement(Line, {
+    children: [cover && /*#__PURE__*/_jsx(Line, {
+      fullWidth: true,
+      className: classes.cover,
+      style: {
+        backgroundImage: `url('${cover?.url || cover?.urlSmall}')`
+      }
+    }), profile && /*#__PURE__*/_jsx(Line, {
+      fullWidth: true,
+      className: classes.profile,
+      style: {
+        marginTop: cover ? -71 : 0,
+        backgroundImage: `url('${profile?.urlSmall || profile?.url}')`
+      }
+    })]
+  });
+  const t14 = (name || short_description) && /*#__PURE__*/_jsxs(Line, {
     gap: 0.5,
     align: "center",
-    fullWidth: true
-  }, name && /*#__PURE__*/React.createElement(Type, _extends({
-    version: "h1",
-    weight: 400,
-    align: "center",
-    fullWidth: true,
-    dangerouslySetInnerHTML: {
-      __html: textToInnerHTML(name)
-    }
-  }, NameProps, {
-    className: classNames([staticClassName("Links", theme) && ["onesy-Links-name"], NameProps?.className, classes.name])
-  })), short_description && /*#__PURE__*/React.createElement(Type, _extends({
-    version: "b1",
-    weight: 300,
-    align: "center",
     fullWidth: true,
-    dangerouslySetInnerHTML: {
-      __html: textToInnerHTML(short_description)
-    }
-  }, ShortDescriptionProps, {
-    className: classNames([staticClassName("Links", theme) && ["onesy-Links-short-description"], ShortDescriptionProps?.className, classes.summary])
-  })));
-  const t15 = !!links?.length && /*#__PURE__*/React.createElement(Line, {
+    children: [name && /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+      version: "h1",
+      weight: 400,
+      align: "center",
+      fullWidth: true,
+      dangerouslySetInnerHTML: {
+        __html: textToInnerHTML(name)
+      }
+    }, NameProps), {}, {
+      className: classNames([staticClassName("Links", theme) && ["onesy-Links-name"], NameProps?.className, classes.name])
+    })), short_description && /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+      version: "b1",
+      weight: 300,
+      align: "center",
+      fullWidth: true,
+      dangerouslySetInnerHTML: {
+        __html: textToInnerHTML(short_description)
+      }
+    }, ShortDescriptionProps), {}, {
+      className: classNames([staticClassName("Links", theme) && ["onesy-Links-short-description"], ShortDescriptionProps?.className, classes.summary])
+    }))]
+  });
+  const t15 = !!links?.length && /*#__PURE__*/_jsx(Line, {
     gap: 1.4,
     align: "center",
     fullWidth: true,
-    className: classes.links
-  }, links.map((item_0, index) => /*#__PURE__*/React.createElement(Line, {
-    key: index,
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    fullWidth: true,
-    className: classes.linkWrapper
-  }, /*#__PURE__*/React.createElement(Button, _extends({
-    tonal: true
-  }, item_0.props, {
-    version: [undefined, "default"].includes(item_0.version) ? "outlined" : "filled",
-    elevation: item_0.version === "primary",
-    color: item_0.version === "primary" ? "primary" : item_0.version === "secondary" ? "secondary" : "default",
-    fullWidth: true,
-    onClick: () => onOpenLink(item_0)
-  }, LinkProps, {
-    className: classNames([`onesy-Links-link-version-${item_0.version}`, LinkProps?.className, item_0.props?.className, classes.link])
-  }), /*#__PURE__*/React.createElement(Type, _extends({
-    version: "b1",
-    weight: 300
-  }, LinkTypeProps), item_0.name || l("Link"))), /*#__PURE__*/React.createElement(Menu, {
-    menuItems: [/*#__PURE__*/React.createElement(MenuItem, {
-      start: /*#__PURE__*/React.createElement(IconShare, _extends({
-        size: "small"
-      }, IconProps)),
-      startAlign: "center",
-      primary: /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, l("Share")),
-      menu: item_0.share ? /*#__PURE__*/React.createElement(Share, _extends({
-        version: "menu-items",
-        name: item_0.name,
-        url: item_0.url,
-        exclude: ["print"]
-      }, ItemShareProps, {
-        ListItemProps: _objectSpread({
+    className: classes.links,
+    children: links.map((item_0, index) => /*#__PURE__*/_jsxs(Line, {
+      gap: 1,
+      direction: "row",
+      align: "center",
+      justify: "center",
+      fullWidth: true,
+      className: classes.linkWrapper,
+      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({
+        tonal: true
+      }, item_0.props), {}, {
+        version: [undefined, "default"].includes(item_0.version) ? "outlined" : "filled",
+        elevation: item_0.version === "primary",
+        color: item_0.version === "primary" ? "primary" : item_0.version === "secondary" ? "secondary" : "default",
+        fullWidth: true,
+        onClick: () => onOpenLink(item_0)
+      }, LinkProps), {}, {
+        className: classNames([`onesy-Links-link-version-${item_0.version}`, LinkProps?.className, item_0.props?.className, classes.link]),
+        children: /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+          version: "b1",
+          weight: 300
+        }, LinkTypeProps), {}, {
+          children: item_0.name || l("Link")
+        }))
+      })), /*#__PURE__*/_jsx(Menu, {
+        menuItems: [/*#__PURE__*/_jsx(MenuItem, {
+          start: /*#__PURE__*/_jsx(IconShare, _objectSpread({
+            size: "small"
+          }, IconProps)),
+          startAlign: "center",
+          primary: /*#__PURE__*/_jsx(Type, {
+            version: "b3",
+            children: l("Share")
+          }),
+          menu: item_0.share ? /*#__PURE__*/_jsx(Share, _objectSpread(_objectSpread({
+            version: "menu-items",
+            name: item_0.name,
+            url: item_0.url,
+            exclude: ["print"]
+          }, ItemShareProps), {}, {
+            ListItemProps: _objectSpread({
+              size: "small",
+              noBackground: true
+            }, ItemShareProps?.ListItemProps)
+          })) : undefined,
+          MenuProps: {
+            ListProps: {
+              noChildrenTransform: true
+            }
+          },
           size: "small",
-          noBackground: true
-        }, ItemShareProps?.ListItemProps)
-      })) : undefined,
-      MenuProps: {
-        ListProps: {
-          noChildrenTransform: true
-        }
-      },
-      size: "small",
-      button: true,
-      disabled: !item_0.share
-    })]
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    size: "regular",
-    disabled: !item_0.share
-  }, IconButtonProps, {
-    className: classNames([staticClassName("Links", theme) && ["onesy-Links-more"], IconButtonProps?.className, classes.more])
-  }), /*#__PURE__*/React.createElement(IconMore, _extends({
-    size: "large"
-  }, IconProps)))))));
+          button: true,
+          disabled: !item_0.share
+        })],
+        children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+          size: "regular",
+          disabled: !item_0.share
+        }, IconButtonProps), {}, {
+          className: classNames([staticClassName("Links", theme) && ["onesy-Links-more"], IconButtonProps?.className, classes.more]),
+          children: /*#__PURE__*/_jsx(IconMore, _objectSpread({
+            size: "large"
+          }, IconProps))
+        }))
+      })]
+    }, index))
+  });
   let t16;
   if ($[0] !== Line || $[1] !== classes.wrapper || $[2] !== t13 || $[3] !== t14 || $[4] !== t15) {
-    t16 = /*#__PURE__*/React.createElement(Line, {
+    t16 = /*#__PURE__*/_jsxs(Line, {
       gap: t11,
       fullWidth: t12,
-      className: classes.wrapper
-    }, t13, t14, t15);
+      className: classes.wrapper,
+      children: [t13, t14, t15]
+    });
     $[0] = Line;
     $[1] = classes.wrapper;
     $[2] = t13;
@@ -262,7 +272,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t17;
   if ($[6] !== Share || $[7] !== ShareProps || $[8] !== share) {
-    t17 = share && /*#__PURE__*/React.createElement(Share, ShareProps);
+    t17 = share && /*#__PURE__*/_jsx(Share, _objectSpread({}, ShareProps));
     $[6] = Share;
     $[7] = ShareProps;
     $[8] = share;
@@ -271,29 +281,29 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     t17 = $[9];
   }
   let t18;
-  if ($[10] !== Section || $[11] !== end || $[12] !== other || $[13] !== ref || $[14] !== start || $[15] !== t10 || $[16] !== t16 || $[17] !== t17) {
-    t18 = /*#__PURE__*/React.createElement(Section, _extends({
-      ref: ref,
+  if ($[10] !== Section || $[11] !== end || $[12] !== other || $[13] !== start || $[14] !== t10 || $[15] !== t16 || $[16] !== t17) {
+    t18 = /*#__PURE__*/_jsxs(Section, _objectSpread(_objectSpread({
       gap: t5,
       align: t6,
       maxWidth: t7,
       padding: t8,
       fullWidth: t9,
       className: t10
-    }, other), start, t16, t17, end);
+    }, other), {}, {
+      children: [start, t16, t17, end]
+    }));
     $[10] = Section;
     $[11] = end;
     $[12] = other;
-    $[13] = ref;
-    $[14] = start;
-    $[15] = t10;
-    $[16] = t16;
-    $[17] = t17;
-    $[18] = t18;
+    $[13] = start;
+    $[14] = t10;
+    $[15] = t16;
+    $[16] = t17;
+    $[17] = t18;
   } else {
-    t18 = $[18];
+    t18 = $[17];
   }
   return t18;
-});
+};
 Element.displayName = 'onesy-Links';
 export default Element;

package/esm/List/List.js

@@ -1,7 +1,6 @@
-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", "size", "elevation", "menu", "menuOpen", "noMaxWidth", "indent", "paddingHorizontal", "paddingVertical", "noBackground", "noChildrenTransform", "onMenuDesktopClose", "SurfaceProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "size", "elevation", "menu", "menuOpen", "noMaxWidth", "indent", "paddingHorizontal", "paddingVertical", "noBackground", "noChildrenTransform", "onMenuDesktopClose", "SurfaceProps", "Component", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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';
@@ -11,6 +10,7 @@ import SurfaceElement from '../Surface';
 import LineElement from '../Line';
 import useMediaQuery from '../useMediaQuery';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     // Reset
@@ -56,12 +56,13 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-List'
 });
-const List = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const List = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyList?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
+      ref,
       tonal = true,
       color = 'themed',
       size: size_,
@@ -96,7 +97,7 @@ const List = /*#__PURE__*/React.forwardRef((props_, ref) => {
     root: {}
   };
   if (indent !== undefined) styles.root.paddingInlineStart = `${indent * theme.space.unit}px`;
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else ref.current = item;
@@ -114,24 +115,25 @@ const List = /*#__PURE__*/React.forwardRef((props_, ref) => {
     AdditionalProps: {
       Component
     }
-  }, SurfaceProps, {
+  }, SurfaceProps), {}, {
     className: classNames([staticClassName('List', theme) && ['onesy-List-root', `onesy-List-size-${size}`], SurfaceProps?.className, className, classes.root, classes[`padding_vertical_${paddingVertical}`], classes[`padding_horizontal_${paddingHorizontal}`], menu && classes.menu, noMaxWidth && classes.noMaxWidth, noBackground && classes.noBackground]),
-    style: _objectSpread(_objectSpread({}, style), styles.root)
-  }), noChildrenTransform ? children : React.Children.toArray(children).map((item_0, index) => {
-    return /*#__PURE__*/React.cloneElement(item_0, _objectSpread(_objectSpread(_objectSpread({
-      key: index,
-      menuItem: menu,
-      menuOpen,
-      tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
-      color: item_0.props.color !== undefined ? item_0.props.color : color,
-      size: item_0.props.size !== undefined ? item_0.props.size : size
-    }, other), item_0.props), {}, {
-      onClick: event => {
-        if (is('function', onMenuDesktopClose) && item_0.props.menuCloseOnClick) onMenuDesktopClose();
-        if (is('function', item_0.props.onClick)) item_0.props.onClick(event);
-      }
-    }));
+    style: _objectSpread(_objectSpread({}, style), styles.root),
+    children: noChildrenTransform ? children : React.Children.toArray(children).map((item_0, index) => {
+      return /*#__PURE__*/React.cloneElement(item_0, _objectSpread(_objectSpread(_objectSpread({
+        key: index,
+        menuItem: menu,
+        menuOpen,
+        tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
+        color: item_0.props.color !== undefined ? item_0.props.color : color,
+        size: item_0.props.size !== undefined ? item_0.props.size : size
+      }, other), item_0.props), {}, {
+        onClick: event => {
+          if (is('function', onMenuDesktopClose) && item_0.props.menuCloseOnClick) onMenuDesktopClose();
+          if (is('function', item_0.props.onClick)) item_0.props.onClick(event);
+        }
+      }));
+    })
   }));
-});
+};
 List.displayName = 'onesy-List';
 export default List;

package/esm/ListItem/ListItem.js

@@ -1,7 +1,6 @@
-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", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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';
@@ -11,6 +10,7 @@ import SurfaceElement from '../Surface';
 import InteractionElement from '../Interaction';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => {
   const overflow = {
     width: '100%',
@@ -214,13 +214,14 @@ const useStyle = styleMethod(theme => {
 }, {
   name: 'onesy-ListItem'
 });
-const ListItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const ListItem = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListItem?.props?.default), props_);
   const Interaction = theme?.elements?.Interaction || InteractionElement;
   const Surface = theme?.elements?.Surface || SurfaceElement;
   const Type = theme?.elements?.Type || TypeElement;
   const {
+      ref,
       tonal = true,
       color = 'default',
       colorSelected = props.color,
@@ -296,7 +297,7 @@ const ListItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   let RootComponent = RootComponent_;
   if (href) RootComponent = 'a';
   const colorToUse = selected ? colorSelected : color;
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
@@ -310,62 +311,71 @@ const ListItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     "aria-describedby": refs.ids.secondary,
     "aria-selected": selected,
     Component: Component
-  }, WrapperProps, {
+  }, WrapperProps), {}, {
     className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-wrapper'], WrapperProps?.className, className, classes.wrapper, fullWidth && classes.wrapper_fullWidth, noBackground && classes.noBackground]),
     noOutline: noOutline,
     style: _objectSpread(_objectSpread({}, styles.wrapper), WrapperProps?.style)
-  }, other), /*#__PURE__*/React.createElement(RootComponent, _extends({
-    href: href,
-    onClick: onClick,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, RootProps, {
-    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps?.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
-    style: _objectSpread(_objectSpread({}, style), styles.root),
-    disabled: disabled
-  }), (href || button || interaction) && /*#__PURE__*/React.createElement(Interaction, _extends({
-    border: false,
-    preselected: InteractionProps?.focus || preselected || undefined,
-    selected: selected,
-    disabled: disabled
-  }, InteractionProps)), start && /*#__PURE__*/React.createElement("span", _extends({}, AsideProps, AsideStartProps, {
-    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-start', `onesy-ListItem-start-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideStartProps?.className, classes.aside, classes.start, classes[`align_${startAlign}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]])
-  }), is('string', start) ? start : /*#__PURE__*/React.cloneElement(start, {
-    color: start.props?.color || 'inherit',
-    size: start.props?.size !== undefined ? start.props?.size : ['onesy-Switch'].includes(start?.type?.displayName) ? 'small' : 'regular',
-    disabled
-  })), /*#__PURE__*/React.createElement("span", _extends({}, MainProps, {
-    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-middle'], MainProps?.className, classes.middle, menuItem && classes.menuItem_middle, disabled && classes.middle_disabled])
-  }), primary !== undefined && (is('simple', primary) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: "b2",
-    id: refs.ids.primary
-  }, PrimaryProps, {
-    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-primary'], PrimaryProps?.className, classes.text, classes.text_primary, !menuItem && classes.text_primary_weight]),
-    style: _objectSpread(_objectSpread({}, styles.primary), PrimaryProps?.style)
-  }), primary) : /*#__PURE__*/React.cloneElement(primary, {
-    id: refs.ids.primary
-  })), secondary !== undefined && (is('simple', secondary) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: "b2",
-    id: refs.ids.secondary
-  }, SecondaryProps, {
-    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-secondary'], SecondaryProps?.className, classes.text, classes.text_secondary]),
-    style: _objectSpread(_objectSpread({}, styles.secondary), SecondaryProps?.style)
-  }), secondary) : /*#__PURE__*/React.cloneElement(secondary, {
-    id: refs.ids.secondary
-  })), tertiary !== undefined && (is('simple', tertiary) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: "b2"
-  }, TertiaryProps, {
-    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-tertiary'], TertiaryProps?.className, classes.text, classes.text_tertiary]),
-    style: _objectSpread(_objectSpread({}, styles.tertiary), TertiaryProps?.style)
-  }), tertiary) : tertiary)), end && /*#__PURE__*/React.createElement("span", _extends({}, AsideProps, AsideEndProps, {
-    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-end', `onesy-ListItem-end-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideEndProps?.classname, classes.aside, classes.end, classes[`align_${endAlign}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]])
-  }), is('string', end) ? end : /*#__PURE__*/React.cloneElement(end, {
-    color: end.props?.color || 'inherit',
-    size: end.props?.size !== undefined ? end.props?.size : ['onesy-Switch'].includes(end?.type?.displayName) ? 'small' : 'regular',
-    disabled
-  }))), footer);
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsxs(RootComponent, _objectSpread(_objectSpread({
+      href: href,
+      onClick: onClick,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, RootProps), {}, {
+      className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps?.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
+      style: _objectSpread(_objectSpread({}, style), styles.root),
+      disabled: disabled,
+      children: [(href || button || interaction) && /*#__PURE__*/_jsx(Interaction, _objectSpread({
+        border: false,
+        preselected: InteractionProps?.focus || preselected || undefined,
+        selected: selected,
+        disabled: disabled
+      }, InteractionProps)), start && /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread(_objectSpread({}, AsideProps), AsideStartProps), {}, {
+        className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-start', `onesy-ListItem-start-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideStartProps?.className, classes.aside, classes.start, classes[`align_${startAlign}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]]),
+        children: is('string', start) ? start : /*#__PURE__*/React.cloneElement(start, {
+          color: start.props?.color || 'inherit',
+          size: start.props?.size !== undefined ? start.props?.size : ['onesy-Switch'].includes(start?.type?.displayName) ? 'small' : 'regular',
+          disabled
+        })
+      })), /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, MainProps), {}, {
+        className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-middle'], MainProps?.className, classes.middle, menuItem && classes.menuItem_middle, disabled && classes.middle_disabled]),
+        children: [primary !== undefined && (is('simple', primary) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+          version: "b2",
+          id: refs.ids.primary
+        }, PrimaryProps), {}, {
+          className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-primary'], PrimaryProps?.className, classes.text, classes.text_primary, !menuItem && classes.text_primary_weight]),
+          style: _objectSpread(_objectSpread({}, styles.primary), PrimaryProps?.style),
+          children: primary
+        })) : /*#__PURE__*/React.cloneElement(primary, {
+          id: refs.ids.primary
+        })), secondary !== undefined && (is('simple', secondary) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+          version: "b2",
+          id: refs.ids.secondary
+        }, SecondaryProps), {}, {
+          className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-secondary'], SecondaryProps?.className, classes.text, classes.text_secondary]),
+          style: _objectSpread(_objectSpread({}, styles.secondary), SecondaryProps?.style),
+          children: secondary
+        })) : /*#__PURE__*/React.cloneElement(secondary, {
+          id: refs.ids.secondary
+        })), tertiary !== undefined && (is('simple', tertiary) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+          version: "b2"
+        }, TertiaryProps), {}, {
+          className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-tertiary'], TertiaryProps?.className, classes.text, classes.text_tertiary]),
+          style: _objectSpread(_objectSpread({}, styles.tertiary), TertiaryProps?.style),
+          children: tertiary
+        })) : tertiary)]
+      })), end && /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread(_objectSpread({}, AsideProps), AsideEndProps), {}, {
+        className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-end', `onesy-ListItem-end-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideEndProps?.classname, classes.aside, classes.end, classes[`align_${endAlign}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]]),
+        children: is('string', end) ? end : /*#__PURE__*/React.cloneElement(end, {
+          color: end.props?.color || 'inherit',
+          size: end.props?.size !== undefined ? end.props?.size : ['onesy-Switch'].includes(end?.type?.displayName) ? 'small' : 'regular',
+          disabled
+        })
+      }))]
+    })), footer]
+  }));
+};
 ListItem.displayName = 'onesy-ListItem';
 export default ListItem;

package/esm/ListSubheader/ListSubheader.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 = ["className", "children"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import ListItemElement from '../ListItem';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     top: '0',
@@ -22,8 +22,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-ListSubheader'
 });
-const ListSubheader = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(6);
+const ListSubheader = props_ => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListSubheader?.props?.default), props_);
   const ListItem = theme?.elements?.ListItem || ListItemElement;
@@ -37,22 +37,20 @@ const ListSubheader = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } = useStyle();
   const t0 = classNames([staticClassName("ListSubheader", theme) && ["onesy-ListSubheader-root"], className, classes.root]);
   let t1;
-  if ($[0] !== ListItem || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t0) {
-    t1 = /*#__PURE__*/React.createElement(ListItem, _extends({
-      ref: ref,
+  if ($[0] !== ListItem || $[1] !== children || $[2] !== other || $[3] !== t0) {
+    t1 = /*#__PURE__*/_jsx(ListItem, _objectSpread({
       secondary: children,
       className: t0
     }, other));
     $[0] = ListItem;
     $[1] = children;
     $[2] = other;
-    $[3] = ref;
-    $[4] = t0;
-    $[5] = t1;
+    $[3] = t0;
+    $[4] = t1;
   } else {
-    t1 = $[5];
+    t1 = $[4];
   }
   return t1;
-});
+};
 ListSubheader.displayName = 'onesy-ListSubheader';
 export default ListSubheader;