@onesy/ui-react 1.0.163 → 1.0.165

package/esm/Switch/Switch.js

@@ -5,6 +5,7 @@ const _excluded = ["style", "children"],
   _excluded2 = ["tonal", "color", "size", "inputRef", "valueDefault", "checkedDefault", "value", "checked", "onChange", "OnIcon", "OffIcon", "disabled", "Component", "className", "style", "children", "version", "colorUnchecked"];
 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';
@@ -186,27 +187,93 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Switch'
 });
 const Icon = props => {
-  const {
+  const $ = _c(14);
+  let children;
+  let other;
+  let style;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       style,
       children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const size = ['very small', 'small', 'regular', 'medium', 'large', 'very large'].includes(props.size) ? props.size : 'small';
+    } = _props);
+    other = _objectWithoutProperties(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = children;
+    $[2] = other;
+    $[3] = style;
+  } else {
+    children = $[1];
+    other = $[2];
+    style = $[3];
+  }
+  const size = ["very small", "small", "regular", "medium", "large", "very large"].includes(props.size) ? props.size : "small";
   let fontSize = 24;
-  if (size === 'very small') fontSize = 12;else if (size === 'small') fontSize = 18;else if (size === 'regular') fontSize = 24;else if (size === 'medium') fontSize = 30;else if (size === 'large') fontSize = 38;else if (size === 'very large') fontSize = 42;
-  return /*#__PURE__*/React.createElement("span", _extends({
-    style: _objectSpread(_objectSpread({}, style), {}, {
+  if (size === "very small") {
+    fontSize = 12;
+  } else {
+    if (size === "small") {
+      fontSize = 18;
+    } else {
+      if (size === "regular") {
+        fontSize = 24;
+      } else {
+        if (size === "medium") {
+          fontSize = 30;
+        } else {
+          if (size === "large") {
+            fontSize = 38;
+          } else {
+            if (size === "very large") {
+              fontSize = 42;
+            }
+          }
+        }
+      }
+    }
+  }
+  let t0;
+  if ($[4] !== fontSize || $[5] !== style) {
+    t0 = _objectSpread(_objectSpread({}, style), {}, {
       fontSize
-    })
-  }, other), children && /*#__PURE__*/React.cloneElement(children, {
-    size: fontSize / 1.5
-  }));
+    });
+    $[4] = fontSize;
+    $[5] = style;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  let t1;
+  if ($[7] !== children || $[8] !== fontSize) {
+    t1 = children && /*#__PURE__*/React.cloneElement(children, {
+      size: fontSize / 1.5
+    });
+    $[7] = children;
+    $[8] = fontSize;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  let t2;
+  if ($[10] !== other || $[11] !== t0 || $[12] !== t1) {
+    t2 = /*#__PURE__*/React.createElement("span", _extends({
+      style: t0
+    }, other), t1);
+    $[10] = other;
+    $[11] = t0;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
 };
 const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySwitch?.props?.default), props_), [props_]);
-  const Keyframes = React.useMemo(() => theme?.elements?.Keyframes || KeyframesElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySwitch?.props?.default), props_);
+  const Keyframes = theme?.elements?.Keyframes || KeyframesElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       tonal: tonal_ = true,
       color: color_ = 'primary',
@@ -450,8 +517,8 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
   };
   const styleKeyframes = () => {
-    const paletteColor = theme.palette.color[color] || palette || theme.palette.color.neutral;
-    const dynamicBackgroundColor = tonal ? paletteColor[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
+    const paletteColor_0 = theme.palette.color[color] || palette || theme.palette.color.neutral;
+    const dynamicBackgroundColor_0 = tonal ? paletteColor_0[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
     return {
       background: {
         growEnd: _objectSpread({}, initial().background.checked),
@@ -496,7 +563,7 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
       iconButton: {
         growStart: {
           transform: sizes('grow-start', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor_0[theme.palette.light ? 40 : 20],
           transition: theme.methods.transitions.make('transform', {
             duration: 240,
             timing_function: 'decelerated'
@@ -504,11 +571,11 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
         },
         waitStart: {
           transform: sizes('grow-start', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20]
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor_0[theme.palette.light ? 40 : 20]
         },
         moveEnd: {
           transform: sizes('move-end', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor_0.main : 'currentColor',
           transition: `${theme.methods.transitions.make('width', {
             duration: 70
           })}, ${theme.methods.transitions.make('transform', {
@@ -527,7 +594,7 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }),
         growEnd: {
           transform: sizes('grow-end', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor_0.main : 'currentColor',
           transition: theme.methods.transitions.make('transform', {
             duration: 240,
             timing_function: 'decelerated'
@@ -535,11 +602,11 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
         },
         waitEnd: {
           transform: sizes('grow-end', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor'
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor_0.main : 'currentColor'
         },
         moveStart: {
           transform: sizes('move-start', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor_0[theme.palette.light ? 40 : 20],
           transition: `${theme.methods.transitions.make('width', {
             duration: 70
           })}, ${theme.methods.transitions.make('transform', {
@@ -560,8 +627,8 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
       icon: {
         growStart: {
           transform: sizes('grow-start', 'icon'),
-          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
-          color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary,
+          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor_0[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor_0[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary,
           transition: theme.methods.transitions.make('transform', {
             duration: 240,
             timing_function: 'decelerated'
@@ -569,12 +636,12 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
         },
         waitStart: {
           transform: sizes('grow-start', 'icon'),
-          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
-          color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary
+          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor_0[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor_0[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary
         },
         moveEnd: _objectSpread(_objectSpread({}, sizes('move-end', 'icon')), {}, {
-          background: dynamicBackgroundColor,
-          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
+          background: dynamicBackgroundColor_0,
+          color: tonal ? paletteColor_0[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor_0, true, 'light'),
           transition: `${theme.methods.transitions.make('width', {
             duration: 70
           })}, ${theme.methods.transitions.make('transform', {
@@ -593,8 +660,8 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }),
         growEnd: {
           transform: sizes('grow-end', 'icon'),
-          background: dynamicBackgroundColor,
-          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
+          background: dynamicBackgroundColor_0,
+          color: tonal ? paletteColor_0[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor_0, true, 'light'),
           transition: theme.methods.transitions.make('transform', {
             duration: 240,
             timing_function: 'decelerated'
@@ -602,12 +669,12 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
         },
         waitEnd: {
           transform: sizes('grow-end', 'icon'),
-          background: dynamicBackgroundColor,
-          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light')
+          background: dynamicBackgroundColor_0,
+          color: tonal ? paletteColor_0[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor_0, true, 'light')
         },
         moveStart: _objectSpread(_objectSpread({}, sizes('move-start', 'icon')), {}, {
-          background: tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
-          color: tonal ? paletteColor[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary,
+          background: tonal ? paletteColor_0[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor_0[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary,
           transition: `${theme.methods.transitions.make('width', {
             duration: 70
           })}, ${theme.methods.transitions.make('transform', {
@@ -627,8 +694,8 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     };
   };
-  const onKeyDown = event => {
-    switch (event.key) {
+  const onKeyDown = event_0 => {
+    switch (event_0.key) {
       case 'Enter':
         if (refs.input.current) refs.input.current.click();
         break;
@@ -646,9 +713,9 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-root', `onesy-Switch-size-${size}`, value && `onesy-Switch-checked`, disabled && `onesy-Switch-disabled`], className, classes.root, classes[`color_${color}`], classes[`size_${size}`], tonal && classes[`tonal_color_${color}`], disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), /*#__PURE__*/React.createElement("input", {
-    ref: item => {
-      if (inputRef) inputRef.current = item;
-      refs.input.current = item;
+    ref: item_0 => {
+      if (inputRef) inputRef.current = item_0;
+      refs.input.current = item_0;
     },
     tabIndex: -1,
     type: "checkbox",

package/esm/Tab/Tab.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "disabled", "onBlur", "onFocus", "LineProps", "TooltipProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -73,18 +74,19 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Tab'
 });
 const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(29);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTab?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTab?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const {
-      tonal = true,
-      color = 'primary',
-      version = 'primary',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      version: t2,
+      size: t3,
       value,
       onChange,
       active,
@@ -92,73 +94,157 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
       name,
       label: label_,
       icon,
-      iconPosition = 'start',
+      iconPosition: t4,
       activateOnFocus,
       tooltip,
       disabled,
       onBlur: onBlur_,
       onFocus: onFocus_,
-      LineProps = {},
+      LineProps: t5,
       TooltipProps,
-      Component = 'button',
+      Component: t6,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "primary" : t2;
+  const size = t3 === undefined ? "regular" : t3;
+  const iconPosition = t4 === undefined ? "start" : t4;
+  const LineProps = t5 === undefined ? {} : t5;
+  const Component = t6 === undefined ? "button" : t6;
   const {
     classes
   } = useStyle();
   const [focus, setFocus] = React.useState(false);
   const label = name !== undefined ? name : label_;
-  const onBlur = React.useCallback(event => {
-    if (!disabled) setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event);
-  }, [disabled, onBlur_]);
-  const onFocus = React.useCallback(event => {
+  const onBlur = event => {
+    if (!disabled) {
+      setFocus(false);
+    }
+    if (is("function", onBlur_)) {
+      onBlur_(event);
+    }
+  };
+  const onFocus = event_0 => {
     if (!disabled) {
       setFocus(true);
-      if (activateOnFocus) onChange(value, index);
+      if (activateOnFocus) {
+        onChange(value, index);
+      }
     }
-    if (is('function', onFocus_)) onFocus_(event);
-  }, [activateOnFocus, value, disabled, onFocus_]);
+    if (is("function", onFocus_)) {
+      onFocus_(event_0);
+    }
+  };
   if (icon !== undefined) {
-    LineProps.direction = iconPosition === 'start' ? 'row' : iconPosition === 'top' ? 'column' : iconPosition === 'end' ? 'row-reverse' : 'column-reverse';
+    LineProps.direction = iconPosition === "start" ? "row" : iconPosition === "top" ? "column" : iconPosition === "end" ? "row-reverse" : "column-reverse";
+  }
+  let typeVersion = "l2";
+  if (size === "large") {
+    typeVersion = "l1";
+  } else {
+    if (size === "small") {
+      typeVersion = "l3";
+    }
   }
-  let typeVersion = 'l2';
-  if (size === 'large') typeVersion = 'l1';else if (size === 'small') typeVersion = 'l3';
   const hasTooltip = ![null, undefined].includes(tooltip);
   const Wrapper = hasTooltip ? Tooltip : React.Fragment;
   const wrapperProps = hasTooltip ? _objectSpread({
     name: tooltip
   }, TooltipProps) : undefined;
-  return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: ref,
-    tabIndex: !disabled ? 0 : -1,
-    tonal: tonal,
-    color: color,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    role: "tab",
-    "aria-selected": active,
-    "data-onesy-tab-value": value,
-    Component: Component,
-    className: classNames([staticClassName('Tab', theme) && ['onesy-Tab-root', `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && `onesy-Tab-active`, disabled && `onesy-Tab-disabled`], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled])
-  }, other), /*#__PURE__*/React.createElement(Interaction, {
-    pulse: focus
-  }), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center"
-  }, LineProps, {
-    className: classNames([staticClassName('Tab', theme) && ['onesy-Tab-line'], LineProps?.className, classes.line])
-  }), icon, label !== undefined && (is('simple', label) ? /*#__PURE__*/React.createElement(Type, {
+  const t7 = !disabled ? 0 : -1;
+  const t8 = "tab";
+  const t9 = classNames([staticClassName("Tab", theme) && ["onesy-Tab-root", `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && "onesy-Tab-active", disabled && "onesy-Tab-disabled"], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled]);
+  let t10;
+  if ($[0] !== Interaction || $[1] !== focus) {
+    t10 = /*#__PURE__*/React.createElement(Interaction, {
+      pulse: focus
+    });
+    $[0] = Interaction;
+    $[1] = focus;
+    $[2] = t10;
+  } else {
+    t10 = $[2];
+  }
+  const t11 = 1;
+  const t12 = "row";
+  const t13 = "center";
+  const t14 = "center";
+  const t15 = classNames([staticClassName("Tab", theme) && ["onesy-Tab-line"], LineProps?.className, classes.line]);
+  const t16 = label !== undefined && (is("simple", label) ? /*#__PURE__*/React.createElement(Type, {
     version: typeVersion,
-    className: classNames([staticClassName('Tab', theme) && ['onesy-Tab-type'], classes[`type_${size}`]])
-  }, label) : label), children !== undefined && (is('simple', children) ? /*#__PURE__*/React.createElement(Type, {
+    className: classNames([staticClassName("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]])
+  }, label) : label);
+  const t17 = children !== undefined && (is("simple", children) ? /*#__PURE__*/React.createElement(Type, {
     version: typeVersion,
-    className: classNames([staticClassName('Tab', theme) && ['onesy-Tab-type'], classes[`type_${size}`]])
-  }, children) : children))));
+    className: classNames([staticClassName("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]])
+  }, children) : children);
+  let t18;
+  if ($[3] !== Line || $[4] !== LineProps || $[5] !== icon || $[6] !== t15 || $[7] !== t16 || $[8] !== t17) {
+    t18 = /*#__PURE__*/React.createElement(Line, _extends({
+      gap: t11,
+      direction: t12,
+      align: t13,
+      justify: t14
+    }, LineProps, {
+      className: t15
+    }), icon, t16, t17);
+    $[3] = Line;
+    $[4] = LineProps;
+    $[5] = icon;
+    $[6] = t15;
+    $[7] = t16;
+    $[8] = t17;
+    $[9] = t18;
+  } else {
+    t18 = $[9];
+  }
+  let t19;
+  if ($[10] !== Component || $[11] !== Surface || $[12] !== active || $[13] !== color || $[14] !== onBlur || $[15] !== onFocus || $[16] !== other || $[17] !== ref || $[18] !== t10 || $[19] !== t18 || $[20] !== t7 || $[21] !== t9 || $[22] !== tonal || $[23] !== value) {
+    t19 = /*#__PURE__*/React.createElement(Surface, _extends({
+      ref: ref,
+      tabIndex: t7,
+      tonal: tonal,
+      color: color,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      role: t8,
+      "aria-selected": active,
+      "data-onesy-tab-value": value,
+      Component: Component,
+      className: t9
+    }, other), t10, t18);
+    $[10] = Component;
+    $[11] = Surface;
+    $[12] = active;
+    $[13] = color;
+    $[14] = onBlur;
+    $[15] = onFocus;
+    $[16] = other;
+    $[17] = ref;
+    $[18] = t10;
+    $[19] = t18;
+    $[20] = t7;
+    $[21] = t9;
+    $[22] = tonal;
+    $[23] = value;
+    $[24] = t19;
+  } else {
+    t19 = $[24];
+  }
+  let t20;
+  if ($[25] !== Wrapper || $[26] !== t19 || $[27] !== wrapperProps) {
+    t20 = /*#__PURE__*/React.createElement(Wrapper, wrapperProps, t19);
+    $[25] = Wrapper;
+    $[26] = t19;
+    $[27] = wrapperProps;
+    $[28] = t20;
+  } else {
+    t20 = $[28];
+  }
+  return t20;
 });
 Tab.displayName = 'onesy-Tab';
 export default Tab;

package/esm/Table/Table.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "size", "elevation", "header", "footer", "WrapperComponentProps", "TableComponent", "WrapperComponent", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import SurfaceElement from '../Surface';
@@ -29,28 +30,84 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Table'
 });
 const Table = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(14);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTable?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTable?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
-      tonal = true,
-      color = 'themed',
-      size = 'regular',
-      elevation = 1,
+      tonal: t0,
+      color: t1,
+      size: t2,
+      elevation: t3,
       header,
       footer,
       WrapperComponentProps,
-      TableComponent = 'table',
-      WrapperComponent = 'div',
-      Component = 'div',
+      TableComponent: t4,
+      WrapperComponent: t5,
+      Component: t6,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "themed" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const elevation = t3 === undefined ? 1 : t3;
+  const TableComponent = t4 === undefined ? "table" : t4;
+  const WrapperComponent = t5 === undefined ? "div" : t5;
+  const Component = t6 === undefined ? "div" : t6;
   const {
     classes
   } = useStyle();
+  const t7 = classNames([staticClassName("Table", theme) && ["onesy-Table-root", `onesy-Table-size-${size}`], className, classes.root]);
+  const t8 = classNames([staticClassName("Table", theme) && ["onesy-Table-wrapper"], WrapperComponentProps?.className, classes.wrapper]);
+  const t9 = classNames([staticClassName("Table", theme) && ["onesy-Table-table", header && "onesy-Table-header", footer && "onesy-Table-footer"], classes.table]);
+  const t10 = React.Children.toArray(children).map(item => /*#__PURE__*/React.cloneElement(item, {
+    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
+  }));
+  let t11;
+  if ($[0] !== TableComponent || $[1] !== t10 || $[2] !== t9) {
+    t11 = /*#__PURE__*/React.createElement(TableComponent, {
+      className: t9
+    }, t10);
+    $[0] = TableComponent;
+    $[1] = t10;
+    $[2] = t9;
+    $[3] = t11;
+  } else {
+    t11 = $[3];
+  }
+  let t12;
+  if ($[4] !== WrapperComponent || $[5] !== WrapperComponentProps || $[6] !== t11 || $[7] !== t8) {
+    t12 = /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, WrapperComponentProps, {
+      className: t8
+    }), t11);
+    $[4] = WrapperComponent;
+    $[5] = WrapperComponentProps;
+    $[6] = t11;
+    $[7] = t8;
+    $[8] = t12;
+  } else {
+    t12 = $[8];
+  }
+  let t13;
+  if ($[9] !== color || $[10] !== footer || $[11] !== size || $[12] !== tonal) {
+    t13 = footer && /*#__PURE__*/React.cloneElement(footer, {
+      tonal: footer.props.tonal !== undefined ? footer.props.tonal : tonal,
+      color: footer.props.color !== undefined ? footer.props.color : color,
+      size: footer.props.size !== undefined ? footer.props.size : size
+    });
+    $[9] = color;
+    $[10] = footer;
+    $[11] = size;
+    $[12] = tonal;
+    $[13] = t13;
+  } else {
+    t13 = $[13];
+  }
   return /*#__PURE__*/React.createElement(Line, _extends({
     ref: ref,
     gap: 0,
@@ -65,24 +122,12 @@ const Table = /*#__PURE__*/React.forwardRef((props_, ref) => {
     AdditionalProps: {
       Component
     },
-    className: classNames([staticClassName('Table', theme) && [`onesy-Table-root`, `onesy-Table-size-${size}`], className, classes.root])
+    className: t7
   }, other), header && /*#__PURE__*/React.cloneElement(header, {
     tonal: header.props.tonal !== undefined ? header.props.tonal : tonal,
     color: header.props.color !== undefined ? header.props.color : color,
     size: header.props.size !== undefined ? header.props.size : size
-  }), /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, WrapperComponentProps, {
-    className: classNames([staticClassName('Table', theme) && [`onesy-Table-wrapper`], WrapperComponentProps?.className, classes.wrapper])
-  }), /*#__PURE__*/React.createElement(TableComponent, {
-    className: classNames([staticClassName('Table', theme) && [`onesy-Table-table`, header && `onesy-Table-header`, footer && `onesy-Table-footer`], classes.table])
-  }, React.Children.toArray(children).map(item => (/*#__PURE__*/React.cloneElement(item, {
-    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
-  }))))), footer && /*#__PURE__*/React.cloneElement(footer, {
-    tonal: footer.props.tonal !== undefined ? footer.props.tonal : tonal,
-    color: footer.props.color !== undefined ? footer.props.color : color,
-    size: footer.props.size !== undefined ? footer.props.size : size
-  }));
+  }), t12, t13);
 });
 Table.displayName = 'onesy-Table';
 export default Table;