@onesy/ui-react 1.0.164 → 1.0.167

package/Link/Link.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Type = _interopRequireDefault(require("../Type"));
@@ -116,26 +117,27 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Link'
 });
 const Link = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(4);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyLink) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Type) || _Type.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyLink) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Type = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Type) || _Type.default;
   const {
-      tonal = true,
-      color: color_ = 'primary',
-      version = 'b2',
-      underline = true,
-      Component = 'a',
+      tonal: t0,
+      color: t1,
+      version: t2,
+      underline: t3,
+      Component: t4,
       className,
       style,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color_ = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "b2" : t2;
+  const underline = t3 === undefined ? true : t3;
+  const Component = t4 === undefined ? "a" : t4;
   const {
     classes
   } = useStyle();
@@ -144,24 +146,54 @@ const Link = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const styles = {
     root: {}
   };
-  const onFocus = _react.default.useCallback(event => {
-    setFocus(true);
-  }, []);
-  const onBlur = _react.default.useCallback(event => {
-    setFocus(false);
-  }, []);
-  const onMouseEnter = _react.default.useCallback(event => {
-    setHover(true);
-  }, []);
-  const onMouseLeave = _react.default.useCallback(event => {
-    setHover(false);
-  }, []);
+  let t5;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = event => {
+      setFocus(true);
+    };
+    $[0] = t5;
+  } else {
+    t5 = $[0];
+  }
+  const onFocus = t5;
+  let t6;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = event_0 => {
+      setFocus(false);
+    };
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  const onBlur = t6;
+  let t7;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = event_1 => {
+      setHover(true);
+    };
+    $[2] = t7;
+  } else {
+    t7 = $[2];
+  }
+  const onMouseEnter = t7;
+  let t8;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = event_2 => {
+      setHover(false);
+    };
+    $[3] = t8;
+  } else {
+    t8 = $[3];
+  }
+  const onMouseLeave = t8;
   const color = color_;
   let palette;
   if (!classes[`color_${color}`]) {
     styles.root.color = color;
     palette = theme.methods.color(color);
-    if (tonal) styles.root.color = theme.methods.palette.color.value(undefined, 30, true, palette);
+    if (tonal) {
+      styles.root.color = theme.methods.palette.color.value(undefined, 30, true, palette);
+    }
   }
   if (underline === true && !hover) {
     styles.root.textDecorationColor = theme.methods.palette.color.value(color, 70, true, palette);
@@ -180,7 +212,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     version: version,
     role: "link",
     Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Link', theme) && ['onesy-Link-root', hover && `onesy-Link-hover`, focus && `onesy-Link-focus`], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], underline === true && classes.underline, underline === 'hover' && classes.underline_hover, focus && classes.focus]),
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)("Link", theme) && ["onesy-Link-root", hover && "onesy-Link-hover", focus && "onesy-Link-focus"], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], underline === true && classes.underline, underline === "hover" && classes.underline_hover, focus && classes.focus]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), children);
 });

package/Links/Links.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IMediaObject } from '../types';
-export type ILinksItem = {
+export declare type ILinksItem = {
     version?: 'primary' | 'secondary' | 'default';
     name?: any;
     url?: string;
@@ -8,7 +8,7 @@ export type ILinksItem = {
     share?: boolean;
     props?: any;
 };
-export type ILinks = IBaseElement & {
+export declare type ILinks = IBaseElement & {
     name?: any;
     short_description?: any;
     links?: ILinksItem[];

package/Links/Links.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -82,44 +83,19 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Links'
 });
 const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8;
+  const $ = (0, _compilerRuntime.c)(19);
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyLinks) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Section = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Section) || _Section.default;
-  }, [theme]);
-  const Menu = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Menu) || _Menu.default;
-  }, [theme]);
-  const Share = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Share) || _Share.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Type) || _Type.default;
-  }, [theme]);
-  const Button = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Button) || _Button.default;
-  }, [theme]);
-  const MenuItem = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.MenuItem) || _MenuItem.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.IconButton) || _IconButton.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyLinks) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Section = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Section) || _Section.default;
+  const Menu = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Menu) || _Menu.default;
+  const Share = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Share) || _Share.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Type) || _Type.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Button) || _Button.default;
+  const MenuItem = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.MenuItem) || _MenuItem.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.IconButton) || _IconButton.default;
   const {
     classes
   } = useStyle();
@@ -129,13 +105,13 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       cover,
       profile,
       links,
-      share = true,
+      share: t0,
       start,
       end,
-      sensitiveText = l('Sensitive URL'),
-      sensitiveDescription = l('This is URL might contain sensitive information, confirm you are 18+ to continue.'),
-      IconMore = _IconMaterialMoreVertW.default,
-      IconShare = _IconMaterialShareW.default,
+      sensitiveText: t1,
+      sensitiveDescription: t2,
+      IconMore: t3,
+      IconShare: t4,
       ShareProps,
       ItemShareProps,
       IconButtonProps,
@@ -147,29 +123,30 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       className
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const share = t0 === undefined ? true : t0;
+  const sensitiveText = t1 === undefined ? l("Sensitive URL") : t1;
+  const sensitiveDescription = t2 === undefined ? l("This is URL might contain sensitive information, confirm you are 18+ to continue.") : t2;
+  const IconMore = t3 === undefined ? _IconMaterialMoreVertW.default : t3;
+  const IconShare = t4 === undefined ? _IconMaterialShareW.default : t4;
   const confirm = (0, _Confirm.useConfirm)();
-  const onOpenLink = _react.default.useCallback(async item => {
-    const confirmed = item.sensitivity && !['none'].includes(item.sensitivity) ? await confirm.open({
+  const onOpenLink = async item => {
+    const confirmed = item.sensitivity && !["none"].includes(item.sensitivity) ? await confirm.open({
       name: sensitiveText,
       description: sensitiveDescription
     }) : true;
     if (confirmed) {
-      window.open(item.url, 'blank');
+      window.open(item.url, "blank");
     }
-  }, [sensitiveText, sensitiveDescription]);
-  return /*#__PURE__*/_react.default.createElement(Section, (0, _extends2.default)({
-    ref: ref,
-    gap: 2,
-    align: "center",
-    maxWidth: false,
-    padding: false,
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Links', theme) && ['onesy-Links-root'], className, classes.root])
-  }, other), start, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1.4,
-    fullWidth: true,
-    className: classes.wrapper
-  }, (profile || cover) && /*#__PURE__*/_react.default.createElement(Line, {
+  };
+  const t5 = 2;
+  const t6 = "center";
+  const t7 = false;
+  const t8 = false;
+  const t9 = true;
+  const t10 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Links", theme) && ["onesy-Links-root"], className, classes.root]);
+  const t11 = 1.4;
+  const t12 = true;
+  const t13 = (profile || cover) && /*#__PURE__*/_react.default.createElement(Line, {
     gap: 0,
     align: "center",
     fullWidth: true
@@ -186,7 +163,8 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       marginTop: cover ? -71 : 0,
       backgroundImage: `url('${(profile === null || profile === void 0 ? void 0 : profile.urlSmall) || (profile === null || profile === void 0 ? void 0 : profile.url)}')`
     }
-  })), (name || short_description) && /*#__PURE__*/_react.default.createElement(Line, {
+  }));
+  const t14 = (name || short_description) && /*#__PURE__*/_react.default.createElement(Line, {
     gap: 0.5,
     align: "center",
     fullWidth: true
@@ -199,7 +177,7 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       __html: (0, _utils.textToInnerHTML)(name)
     }
   }, NameProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Links', theme) && ['onesy-Links-name'], NameProps === null || NameProps === void 0 ? void 0 : NameProps.className, classes.name])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Links", theme) && ["onesy-Links-name"], NameProps === null || NameProps === void 0 ? void 0 : NameProps.className, classes.name])
   })), short_description && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
     version: "b1",
     weight: 300,
@@ -209,14 +187,15 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       __html: (0, _utils.textToInnerHTML)(short_description)
     }
   }, ShortDescriptionProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Links', theme) && ['onesy-Links-short-description'], ShortDescriptionProps === null || ShortDescriptionProps === void 0 ? void 0 : ShortDescriptionProps.className, classes.summary])
-  }))), !!(links !== null && links !== void 0 && links.length) && /*#__PURE__*/_react.default.createElement(Line, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Links", theme) && ["onesy-Links-short-description"], ShortDescriptionProps === null || ShortDescriptionProps === void 0 ? void 0 : ShortDescriptionProps.className, classes.summary])
+  })));
+  const t15 = !!(links !== null && links !== void 0 && links.length) && /*#__PURE__*/_react.default.createElement(Line, {
     gap: 1.4,
     align: "center",
     fullWidth: true,
     className: classes.links
-  }, links.map((item, index) => {
-    var _item$props;
+  }, links.map((item_0, index) => {
+    var _item_0$props;
     return /*#__PURE__*/_react.default.createElement(Line, {
       key: index,
       gap: 1,
@@ -227,18 +206,18 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       className: classes.linkWrapper
     }, /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
       tonal: true
-    }, item.props, {
-      version: [undefined, 'default'].includes(item.version) ? 'outlined' : 'filled',
-      elevation: item.version === 'primary',
-      color: item.version === 'primary' ? 'primary' : item.version === 'secondary' ? 'secondary' : 'default',
+    }, 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)
+      onClick: () => onOpenLink(item_0)
     }, LinkProps, {
-      className: (0, _styleReact.classNames)([`onesy-Links-link-version-${item.version}`, LinkProps === null || LinkProps === void 0 ? void 0 : LinkProps.className, (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.className, classes.link])
+      className: (0, _styleReact.classNames)([`onesy-Links-link-version-${item_0.version}`, LinkProps === null || LinkProps === void 0 ? void 0 : LinkProps.className, (_item_0$props = item_0.props) === null || _item_0$props === void 0 ? void 0 : _item_0$props.className, classes.link])
     }), /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
       version: "b1",
       weight: 300
-    }, LinkTypeProps), item.name || l('Link'))), /*#__PURE__*/_react.default.createElement(Menu, {
+    }, LinkTypeProps), item_0.name || l("Link"))), /*#__PURE__*/_react.default.createElement(Menu, {
       menuItems: [/*#__PURE__*/_react.default.createElement(MenuItem, {
         start: /*#__PURE__*/_react.default.createElement(IconShare, (0, _extends2.default)({
           size: "small"
@@ -246,15 +225,15 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         startAlign: "center",
         primary: /*#__PURE__*/_react.default.createElement(Type, {
           version: "b3"
-        }, l('Share')),
-        menu: item.share ? /*#__PURE__*/_react.default.createElement(Share, (0, _extends2.default)({
+        }, l("Share")),
+        menu: item_0.share ? /*#__PURE__*/_react.default.createElement(Share, (0, _extends2.default)({
           version: "menu-items",
-          name: item.name,
-          url: item.url,
-          exclude: ['print']
+          name: item_0.name,
+          url: item_0.url,
+          exclude: ["print"]
         }, ItemShareProps, {
           ListItemProps: _objectSpread({
-            size: 'small',
+            size: "small",
             noBackground: true
           }, ItemShareProps === null || ItemShareProps === void 0 ? void 0 : ItemShareProps.ListItemProps)
         })) : undefined,
@@ -265,17 +244,67 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         },
         size: "small",
         button: true,
-        disabled: !item.share
+        disabled: !item_0.share
       })]
     }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
       size: "regular",
-      disabled: !item.share
+      disabled: !item_0.share
     }, IconButtonProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Links', theme) && ['onesy-Links-more'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.more])
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Links", theme) && ["onesy-Links-more"], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.more])
     }), /*#__PURE__*/_react.default.createElement(IconMore, (0, _extends2.default)({
       size: "large"
     }, IconProps)))));
-  }))), share && /*#__PURE__*/_react.default.createElement(Share, ShareProps), end);
+  }));
+  let t16;
+  if ($[0] !== Line || $[1] !== classes.wrapper || $[2] !== t13 || $[3] !== t14 || $[4] !== t15) {
+    t16 = /*#__PURE__*/_react.default.createElement(Line, {
+      gap: t11,
+      fullWidth: t12,
+      className: classes.wrapper
+    }, t13, t14, t15);
+    $[0] = Line;
+    $[1] = classes.wrapper;
+    $[2] = t13;
+    $[3] = t14;
+    $[4] = t15;
+    $[5] = t16;
+  } else {
+    t16 = $[5];
+  }
+  let t17;
+  if ($[6] !== Share || $[7] !== ShareProps || $[8] !== share) {
+    t17 = share && /*#__PURE__*/_react.default.createElement(Share, ShareProps);
+    $[6] = Share;
+    $[7] = ShareProps;
+    $[8] = share;
+    $[9] = t17;
+  } else {
+    t17 = $[9];
+  }
+  let t18;
+  if ($[10] !== Section || $[11] !== end || $[12] !== other || $[13] !== ref || $[14] !== start || $[15] !== t10 || $[16] !== t16 || $[17] !== t17) {
+    t18 = /*#__PURE__*/_react.default.createElement(Section, (0, _extends2.default)({
+      ref: ref,
+      gap: t5,
+      align: t6,
+      maxWidth: t7,
+      padding: t8,
+      fullWidth: t9,
+      className: t10
+    }, other), start, t16, t17, end);
+    $[10] = Section;
+    $[11] = end;
+    $[12] = other;
+    $[13] = ref;
+    $[14] = start;
+    $[15] = t10;
+    $[16] = t16;
+    $[17] = t17;
+    $[18] = t18;
+  } else {
+    t18 = $[18];
+  }
+  return t18;
 });
 Element.displayName = 'onesy-Links';
 var _default = exports.default = Element;

package/List/List.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElement } from '../types';
-export type IList = ISurface & {
+export declare type IList = ISurface & {
     gap?: any;
     menu?: IElement;
     menuOpen?: boolean;

package/List/List.js

@@ -64,19 +64,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-List'
 });
 const List = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyList) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyList) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
   const {
       tonal = true,
       color = 'themed',
@@ -133,18 +125,18 @@ const List = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, SurfaceProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('List', theme) && ['onesy-List-root', `onesy-List-size-${size}`], SurfaceProps === null || SurfaceProps === void 0 ? void 0 : 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.default.Children.toArray(children).map((item, index) => {
-    return /*#__PURE__*/_react.default.cloneElement(item, _objectSpread(_objectSpread(_objectSpread({
+  }), noChildrenTransform ? children : _react.default.Children.toArray(children).map((item_0, index) => {
+    return /*#__PURE__*/_react.default.cloneElement(item_0, _objectSpread(_objectSpread(_objectSpread({
       key: index,
       menuItem: menu,
       menuOpen,
-      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-      color: item.props.color !== undefined ? item.props.color : color,
-      size: item.props.size !== undefined ? item.props.size : size
-    }, other), item.props), {}, {
+      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 ((0, _utils.is)('function', onMenuDesktopClose) && item.props.menuCloseOnClick) onMenuDesktopClose();
-        if ((0, _utils.is)('function', item.props.onClick)) item.props.onClick(event);
+        if ((0, _utils.is)('function', onMenuDesktopClose) && item_0.props.menuCloseOnClick) onMenuDesktopClose();
+        if ((0, _utils.is)('function', item_0.props.onClick)) item_0.props.onClick(event);
       }
     }));
   }));

package/ListItem/ListItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IColor, IElement, IElementReference, IPropsAny } from '../types';
-export type IListItem = ISurface & {
+export declare type IListItem = ISurface & {
     colorSelected?: IColor;
     inset?: boolean;
     primary?: IElement;

package/ListItem/ListItem.js

@@ -222,24 +222,12 @@ const useStyle = (0, _styleReact.style)(theme => {
   name: 'onesy-ListItem'
 });
 const ListItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _type, _type2, _type3, _type4, _type5, _type6, _props, _props2, _props3, _type7, _type8, _type9, _type0, _type1, _type10, _type11, _props4, _props5, _props6, _type12;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _type, _type2, _type3, _type4, _type5, _type6, _props, _props2, _props3, _type7, _type8, _type9, _type0, _type1, _type10, _type11, _props4, _props5, _props6, _type12;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyListItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Interaction = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Interaction) || _Interaction.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyListItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Interaction = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Interaction) || _Interaction.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
   const {
       tonal = true,
       color = 'default',

package/ListSubheader/ListSubheader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IListItem } from '../ListItem/ListItem';
-export type IListSubheader = IListItem & {};
+export declare type IListSubheader = IListItem & {};
 declare const ListSubheader: React.FC<IListSubheader>;
 export default ListSubheader;

package/ListSubheader/ListSubheader.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _ListItem = _interopRequireDefault(require("../ListItem"));
@@ -29,15 +30,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ListSubheader'
 });
 const ListSubheader = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(6);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyListSubheader) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const ListItem = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.ListItem) || _ListItem.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyListSubheader) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.ListItem) || _ListItem.default;
   const {
       className,
       children
@@ -46,11 +43,24 @@ const ListSubheader = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-    ref: ref,
-    secondary: children,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('ListSubheader', theme) && ['onesy-ListSubheader-root'], className, classes.root])
-  }, other));
+  const t0 = (0, _styleReact.classNames)([(0, _utils.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.default.createElement(ListItem, (0, _extends2.default)({
+      ref: ref,
+      secondary: children,
+      className: t0
+    }, other));
+    $[0] = ListItem;
+    $[1] = children;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
 });
 ListSubheader.displayName = 'onesy-ListSubheader';
 var _default = exports.default = ListSubheader;

package/MainProgress/MainProgress.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
-export type IMainProgressValue = {
+export declare type IMainProgressValue = {
     start: () => void;
     done: () => void;
 };