@onesy/ui-react 1.0.163 → 1.0.165

package/esm/Breadcrumbs/Breadcrumbs.js

@@ -33,10 +33,10 @@ const useStyle = styleMethod(theme => ({
 const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBreadcrumbs?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBreadcrumbs?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       max: max_,
       separator = /*#__PURE__*/React.createElement(IconMaterialNavigateNext, {
@@ -60,13 +60,13 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [max_];
     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);
   }, [max_]);
   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
     });
   });
@@ -76,17 +76,17 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
     setChildren(resolve(children_, false));
   };
   const resolve = (items_ = children_, maxValue = max) => {
-    let items = React.Children.toArray(items_).filter(Boolean);
-    if (maxValue !== undefined && maxValue >= 2 && maxValue < items.length) {
+    let items_0 = React.Children.toArray(items_).filter(Boolean);
+    if (maxValue !== undefined && maxValue >= 2 && maxValue < items_0.length) {
       const start = [];
       const end = [];
       for (let i = 1; i <= maxValue; i++) {
         // start
-        if (i % 2 > 0) start.push(items[Math.floor(i / 2)]);
+        if (i % 2 > 0) start.push(items_0[Math.floor(i / 2)]);
         // end
-        else end.unshift(items[items.length - i / 2]);
+        else end.unshift(items_0[items_0.length - i / 2]);
       }
-      items = [...start, is('function', renderMore) ? renderMore(onExpandMore) : /*#__PURE__*/React.createElement(IconButton, _extends({
+      items_0 = [...start, is('function', renderMore) ? renderMore(onExpandMore) : /*#__PURE__*/React.createElement(IconButton, _extends({
         color: "default",
         size: "small",
         onClick: onExpandMore,
@@ -97,7 +97,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
         size: "small"
       })), ...end];
     }
-    return items;
+    return items_0;
   };
   const [init, setInit] = React.useState(false);
   const [children, setChildren] = React.useState(resolve);
@@ -114,13 +114,13 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, separator) : /*#__PURE__*/React.cloneElement(separator, {
     'aria-hidden': true
   });
-  const childrenToUse = children.flatMap((item, index) => [item, index !== children.length - 1 && Separator].filter(Boolean));
+  const childrenToUse = children.flatMap((item_0, index) => [item_0, index !== children.length - 1 && Separator].filter(Boolean));
   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;
     },
     gap: 1,
     direction: "row",
@@ -130,23 +130,23 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Component
   }, other, {
     className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-root'], className, classes.root])
-  }), childrenToUse.map((item, index) => {
+  }), childrenToUse.map((item_2, index_0) => {
     const itemProps = {};
-    if (index === childrenToUse.length - 1) {
+    if (index_0 === childrenToUse.length - 1) {
       itemProps['aria-current'] = 'page';
     }
-    if (is('simple', item)) {
+    if (is('simple', item_2)) {
       return /*#__PURE__*/React.createElement(Type, _extends({
-        key: index,
+        key: index_0,
         version: "b2",
         Component: "span"
       }, itemProps, {
         className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-item'], classes.item])
-      }), item);
+      }), item_2);
     }
-    return /*#__PURE__*/React.cloneElement(item, _objectSpread({
-      key: index,
-      className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-item'], item?.props?.className, classes.item])
+    return /*#__PURE__*/React.cloneElement(item_2, _objectSpread({
+      key: index_0,
+      className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-item'], item_2?.props?.className, classes.item])
     }, itemProps));
   }));
 });

package/esm/BubbleChart/BubbleChart.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "names", "values", "animate", "animateTimeout", "tooltipRender", "tooltipGroupRender", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -49,17 +50,18 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-BubbleChart'
 });
 const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(11);
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBubbleChart?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const BubbleChartItem = React.useMemo(() => theme?.elements?.BubbleChartItem || BubbleChartItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBubbleChart?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Chart = theme?.elements?.Chart || ChartElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const BubbleChartItem = theme?.elements?.BubbleChartItem || BubbleChartItemElement;
   const {
-      tonal = true,
-      color = 'primary',
+      tonal: t0,
+      color: t1,
       names,
       values,
       animate,
@@ -69,10 +71,12 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       className
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
   const {
     classes
   } = useStyle();
-  const tooltipRender = is('function', tooltipRender_) ? tooltipRender_ : values_ => {
+  const tooltipRender = is("function", tooltipRender_) ? tooltipRender_ : values_ => {
     const {
       values: values__
     } = values_;
@@ -84,7 +88,7 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
         gap: 0.5,
         direction: "column",
         Component: Surface,
-        className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-append'], classes.append])
+        className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append])
       }, /*#__PURE__*/React.createElement(Line, {
         gap: 1,
         direction: "row",
@@ -103,7 +107,7 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
         style: {
           fontWeight: 600
         }
-      }, names?.y || 'y'), /*#__PURE__*/React.createElement(Type, {
+      }, names?.y || "y"), /*#__PURE__*/React.createElement(Type, {
         version: "b3"
       }, values__?.[1])), /*#__PURE__*/React.createElement(Line, {
         gap: 1,
@@ -114,7 +118,7 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
         style: {
           fontWeight: 600
         }
-      }, names?.x || 'x'), /*#__PURE__*/React.createElement(Type, {
+      }, names?.x || "x"), /*#__PURE__*/React.createElement(Type, {
         version: "b3"
       }, values__?.[0])), /*#__PURE__*/React.createElement(Line, {
         gap: 1,
@@ -125,108 +129,130 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
         style: {
           fontWeight: 600
         }
-      }, names?.size || 'Size'), /*#__PURE__*/React.createElement(Type, {
+      }, names?.size || "Size"), /*#__PURE__*/React.createElement(Type, {
         version: "b3"
       }, values__?.[2]))))
     };
   };
-  const tooltipGroupRender = is('function', tooltipGroupRender_) ? tooltipGroupRender_ : (groups, groupsSorted) => {
-    return /*#__PURE__*/React.createElement(Line, {
-      tonal: tonal,
-      color: color,
-      elevation: 1,
-      gap: 0.25,
-      direction: "column",
-      Component: Surface,
-      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-append'], classes.append])
-    }, /*#__PURE__*/React.createElement(Line, {
-      gap: 1,
-      direction: "column",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/React.createElement(Line, {
-      gap: 1,
-      direction: "row",
-      align: "center"
-    }, /*#__PURE__*/React.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, l('Label')), /*#__PURE__*/React.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, names?.y || 'y'), /*#__PURE__*/React.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, names?.x || 'x'), /*#__PURE__*/React.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, names?.size || l('Size'))), /*#__PURE__*/React.createElement(Line, {
-      gap: 1,
-      direction: "column"
-    }, groupsSorted.map((group, index) => /*#__PURE__*/React.createElement(Line, {
-      key: index,
-      gap: 1,
-      direction: "column",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-append-icon'], classes.append_icon]),
-      style: {
-        background: !theme.palette.color[group] ? group : theme.palette.color[group][groups[group][0]?.item?.tone || 'main']
-      }
-    }), /*#__PURE__*/React.createElement(Line, {
-      gap: 0,
-      direction: "column",
-      style: {
-        width: '100%'
-      }
-    }, groups[group].map((item, index_) => /*#__PURE__*/React.createElement(Line, {
-      key: index_,
-      gap: 1,
-      direction: "row",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, item?.values?.[3]), /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, item?.values?.[1]), /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, item?.values?.[0]), /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, item?.values?.[2])))))))));
-  };
-  values.sort((a, b) => a.values?.[2] - b.values?.[2]);
-  const minSize = values[0]?.values?.[2];
-  const maxSize = values[values.length - 1]?.values?.[2];
-  return /*#__PURE__*/React.createElement(Chart, _extends({
-    ref: ref,
+  const tooltipGroupRender = is("function", tooltipGroupRender_) ? tooltipGroupRender_ : (groups, groupsSorted) => /*#__PURE__*/React.createElement(Line, {
     tonal: tonal,
     color: color,
-    values: values,
-    pointsVisibility: "hidden",
-    elementTooltip: true,
-    tooltipRender: tooltipRender,
-    tooltipGroupRender: tooltipGroupRender,
-    className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-root'], className, classes.root])
-  }, other), is('array', values) && values.map((item, index) => /*#__PURE__*/React.createElement(BubbleChartItem, _extends({
+    elevation: 1,
+    gap: 0.25,
+    direction: "column",
+    Component: Surface,
+    className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append])
+  }, /*#__PURE__*/React.createElement(Line, {
+    gap: 1,
+    direction: "column",
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(Type, {
+    version: "b3",
+    style: {
+      fontWeight: 600
+    }
+  }, l("Label")), /*#__PURE__*/React.createElement(Type, {
+    version: "b3",
+    style: {
+      fontWeight: 600
+    }
+  }, names?.y || "y"), /*#__PURE__*/React.createElement(Type, {
+    version: "b3",
+    style: {
+      fontWeight: 600
+    }
+  }, names?.x || "x"), /*#__PURE__*/React.createElement(Type, {
+    version: "b3",
+    style: {
+      fontWeight: 600
+    }
+  }, names?.size || l("Size"))), /*#__PURE__*/React.createElement(Line, {
+    gap: 1,
+    direction: "column"
+  }, groupsSorted.map((group, index) => /*#__PURE__*/React.createElement(Line, {
     key: index,
+    gap: 1,
+    direction: "column",
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append-icon"], classes.append_icon]),
+    style: {
+      background: !theme.palette.color[group] ? group : theme.palette.color[group][groups[group][0]?.item?.tone || "main"]
+    }
+  }), /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "column",
+    style: {
+      width: "100%"
+    }
+  }, groups[group].map((item, index_) => /*#__PURE__*/React.createElement(Line, {
+    key: index_,
+    gap: 1,
+    direction: "row",
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(Type, {
+    version: "b3"
+  }, item?.values?.[3]), /*#__PURE__*/React.createElement(Type, {
+    version: "b3"
+  }, item?.values?.[1]), /*#__PURE__*/React.createElement(Type, {
+    version: "b3"
+  }, item?.values?.[0]), /*#__PURE__*/React.createElement(Type, {
+    version: "b3"
+  }, item?.values?.[2])))))))));
+  values.sort(_temp);
+  const minSize = values[0]?.values?.[2];
+  const maxSize = values[values.length - 1]?.values?.[2];
+  const t2 = "hidden";
+  const t3 = true;
+  const t4 = classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-root"], className, classes.root]);
+  const t5 = is("array", values) && values.map((item_0, index_0) => /*#__PURE__*/React.createElement(BubbleChartItem, _extends({
+    key: index_0,
     animate: animate,
     animateTimeout: animateTimeout,
     minSize: minSize,
     maxSize: maxSize
-  }, item))));
+  }, item_0)));
+  let t6;
+  if ($[0] !== Chart || $[1] !== color || $[2] !== other || $[3] !== ref || $[4] !== t4 || $[5] !== t5 || $[6] !== tonal || $[7] !== tooltipGroupRender || $[8] !== tooltipRender || $[9] !== values) {
+    t6 = /*#__PURE__*/React.createElement(Chart, _extends({
+      ref: ref,
+      tonal: tonal,
+      color: color,
+      values: values,
+      pointsVisibility: t2,
+      elementTooltip: t3,
+      tooltipRender: tooltipRender,
+      tooltipGroupRender: tooltipGroupRender,
+      className: t4
+    }, other), t5);
+    $[0] = Chart;
+    $[1] = color;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t4;
+    $[5] = t5;
+    $[6] = tonal;
+    $[7] = tooltipGroupRender;
+    $[8] = tooltipRender;
+    $[9] = values;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 });
 BubbleChart.displayName = 'onesy-BubbleChart';
-export default BubbleChart;
+export default BubbleChart;
+function _temp(a, b) {
+  return a.values?.[2] - b.values?.[2];
+}

package/esm/BubbleChartItem/BubbleChartItem.js

@@ -31,10 +31,10 @@ const useStyle = styleMethod(theme => ({
 });
 const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBubbleChartItem?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBubbleChartItem?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Path = theme?.elements?.Path || PathElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       tonal = true,
       color = 'primary',
@@ -70,13 +70,13 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [animate_, animateTimeout_];
     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);
   }, [animate_, animateTimeout_]);
   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.path.current
     });
   });
@@ -88,7 +88,7 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.animate.current = animate;
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
-  const LegendItem = React.useCallback(() => {
+  const LegendItem = () => {
     return /*#__PURE__*/React.createElement(Line, _extends({
       gap: 1,
       direction: "row",
@@ -103,7 +103,7 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }), /*#__PURE__*/React.createElement(Type, {
       version: "b3"
     }, name));
-  }, [theme]);
+  };
   const make = () => {
     // Make values into x, y, coordinates
     // normalized in rect width, height values
@@ -176,7 +176,7 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setValue(element);
     }
   };
-  const initMethod = React.useCallback(() => {
+  const initMethod = () => {
     if (animate) {
       if (!init) {
         refs.pathStyle.current = {
@@ -194,7 +194,7 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }, refs.animateTimeout.current);
       }
     }
-  }, [init, animate]);
+  };
   React.useEffect(() => {
     make();
     initMethod();

package/esm/Button/Button.js

@@ -234,11 +234,11 @@ const useStyle = styleMethod(theme => ({
 });
 const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyButton?.props?.default), props_), [props_]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
-  const RoundProgress = React.useMemo(() => theme?.elements?.RoundProgress || RoundProgressElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyButton?.props?.default), props_);
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
+  const RoundProgress = theme?.elements?.RoundProgress || RoundProgressElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       tonal = true,
       color: color_ = 'primary',
@@ -352,12 +352,12 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
         if (!noIconRootFontSize) styles.iconRoot.fontSize = size;
       }
     } else {
-      children_ = is('array', children_) ? children_.filter(Boolean).map((item, index) => is('string', item.type) ? /*#__PURE__*/React.cloneElement(item, {
-        key: index
-      }) : /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
-        key: index
+      children_ = is('array', children_) ? children_.filter(Boolean).map((item_0, index_0) => is('string', item_0.type) ? /*#__PURE__*/React.cloneElement(item_0, {
+        key: index_0
+      }) : /*#__PURE__*/React.cloneElement(item_0, _objectSpread(_objectSpread({
+        key: index_0
       }, IconProps), {}, {
-        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : IconProps?.size || (size === 'large' ? 'medium' : size) : undefined
+        size: item_0.props.size !== undefined ? item_0.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : IconProps?.size || (size === 'large' ? 'medium' : size) : undefined
       }))) : /*#__PURE__*/React.cloneElement(children_, _objectSpread(_objectSpread({}, IconProps), {}, {
         size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : IconProps?.size || (size === 'large' ? 'medium' : size) : undefined
       }));
@@ -374,9 +374,9 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (size === 'small') styles.Icon.fontSize = 18;
     if (size === 'regular') styles.Icon.fontSize = 24;
     if (size === 'large') styles.Icon.fontSize = 30;
-    children_ = React.Children.toArray(children_).map(item => /*#__PURE__*/React.isValidElement(item) ? /*#__PURE__*/React.cloneElement(item, {
+    children_ = React.Children.toArray(children_).map(item_1 => /*#__PURE__*/React.isValidElement(item_1) ? /*#__PURE__*/React.cloneElement(item_1, {
       style: styles.Icon
-    }) : item);
+    }) : item_1);
   }
   if (fontSize !== undefined) {
     styles.root.fontSize = fontSize;
@@ -405,21 +405,21 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
     delete styles.root.color;
     delete styles.label.color;
   }
-  const onFocus = React.useCallback(event => {
+  const onFocus = event => {
     if (focus_ === undefined && event.target === refs.root.current && !disabled) setFocus(true);
     if (is('function', onFocus_)) onFocus_(event);
-  }, [focus_, onFocus_, disabled]);
-  const onBlur = React.useCallback(event => {
+  };
+  const onBlur = event_0 => {
     if (focus_ === undefined && !disabled) setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event);
-  }, [focus_, onBlur_, disabled]);
+    if (is('function', onBlur_)) onBlur_(event_0);
+  };
   const IconElement = selected && iconSelected || children_;
   return /*#__PURE__*/React.createElement(Surface, _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;
     },
     tabIndex: !disabled ? 0 : -1,
     type: "button",
@@ -459,11 +459,11 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, LabelProps, {
     className: classNames([staticClassName('Button', theme) && ['onesy-Button-label'], LabelProps?.className, TypeProps?.className, classes.label, classes[`label_size_${size}`], classes[`align_${align}`]]),
     style: _objectSpread(_objectSpread(_objectSpread({}, styles.label), TypeProps?.style), LabelProps?.style)
-  }), React.Children.toArray(children_).map((item_, index) => {
-    const item = selected && item_.type?.displayName?.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
-    if (is('simple', item)) return item;
-    return /*#__PURE__*/React.cloneElement(selected && item.type?.displayName?.includes('onesy-Icon') && iconSelected ? iconSelected : item, {
-      key: index
+  }), React.Children.toArray(children_).map((item_, index_1) => {
+    const item_3 = selected && item_.type?.displayName?.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
+    if (is('simple', item_3)) return item_3;
+    return /*#__PURE__*/React.cloneElement(selected && item_3.type?.displayName?.includes('onesy-Icon') && iconSelected ? iconSelected : item_3, {
+      key: index_1
     });
   })), end && /*#__PURE__*/React.createElement("span", {
     className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon', 'onesy-Button-end'], classes.Icon, classes.end, classes[`end_size_${size}`], chip && classes[`chip_end_size_${size}`]])