@onesy/ui-react 1.0.164 → 1.0.165

package/Step/Step.js

@@ -83,76 +83,65 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Step'
 });
 const Step = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6;
   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.onesyStep) === 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 Interaction = _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.Interaction) || _Interaction.default;
-  }, [theme]);
-  const PaginationItem = _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.PaginationItem) || _PaginationItem.default;
-  }, [theme]);
-  const Divider = _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.Divider) || _Divider.default;
-  }, [theme]);
-  const Surface = _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.Surface) || _Surface.default;
-  }, [theme]);
-  const ListItem = _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.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.onesyStep) === 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 Interaction = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Interaction) || _Interaction.default;
+  const PaginationItem = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.PaginationItem) || _PaginationItem.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Divider) || _Divider.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Surface) || _Surface.default;
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.ListItem) || _ListItem.default;
   const {
-      tonal = true,
-      color = 'default',
-      version = 'text',
-      iconColor = 'inverted',
-      iconColorActive = 'primary',
-      dividerColor = 'inverted',
-      dividerColorActive = 'primary',
-      step = 0,
+      tonal: t0,
+      color: t1,
+      version: t2,
+      iconColor: t3,
+      iconColorActive: t4,
+      dividerColor: t5,
+      dividerColorActive: t6,
+      step: t7,
       activeStep,
       active,
       completed,
       primary,
       secondary,
-      stepDirection = 'row',
-      orientation = 'horizontal',
+      stepDirection: t8,
+      orientation: t9,
       button,
       divider,
       renderIcon: renderIcon_,
       ListItemProps,
       DividerProps,
-      Component = Surface,
+      Component: t10,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "default" : t1;
+  const version = t2 === undefined ? "text" : t2;
+  const iconColor = t3 === undefined ? "inverted" : t3;
+  const iconColorActive = t4 === undefined ? "primary" : t4;
+  const dividerColor = t5 === undefined ? "inverted" : t5;
+  const dividerColorActive = t6 === undefined ? "primary" : t6;
+  const step = t7 === undefined ? 0 : t7;
+  const stepDirection = t8 === undefined ? "row" : t8;
+  const orientation = t9 === undefined ? "horizontal" : t9;
+  const Component = t10 === undefined ? Surface : t10;
   const {
     classes
   } = useStyle();
   const activeDivider = activeStep >= step - 1;
-  const renderIcon = (0, _utils.is)('function', renderIcon_) ? renderIcon_ : () => {
-    return /*#__PURE__*/_react.default.createElement(PaginationItem, {
-      tonal: tonal,
-      color: !(active || completed) ? iconColor : iconColorActive,
-      version: "filled",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Step', theme) && ['onesy-Step-icon'], classes.icon])
-    }, !completed ? step : /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
-      in: true,
-      add: true
-    }));
-  };
+  const renderIcon = (0, _utils.is)("function", renderIcon_) ? renderIcon_ : () => /*#__PURE__*/_react.default.createElement(PaginationItem, {
+    tonal: tonal,
+    color: !(active || completed) ? iconColor : iconColorActive,
+    version: "filled",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-icon"], classes.icon])
+  }, !completed ? step : /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+    in: true,
+    add: true
+  }));
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     ref: ref,
     version: version,
@@ -163,7 +152,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     align: "center",
     justify: "center",
     Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Step', theme) && ['onesy-Step-root', active && `onesy-Step-active`, completed && `onesy-Step-completed`, !active && !completed && `onesy-Step-inactive`], className, classes.root, classes[`direction_${stepDirection}`], !active && !completed && classes.inactive, button && classes.button])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-root", active && "onesy-Step-active", completed && "onesy-Step-completed", !active && !completed && "onesy-Step-inactive"], className, classes.root, classes[`direction_${stepDirection}`], !active && !completed && classes.inactive, button && classes.button])
   }, other), button && /*#__PURE__*/_react.default.createElement(Interaction, {
     border: false
   }), renderIcon(step, active, completed, activeStep), /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
@@ -178,7 +167,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     color: activeDivider ? dividerColorActive : dividerColor,
     flex: true
   }, DividerProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Step', theme) && ['onesy-Step-divider', activeDivider && `onesy-Step-divider-active`], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], activeDivider && classes[`divider_active_orientation_${orientation}`]])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-divider", activeDivider && "onesy-Step-divider-active"], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], activeDivider && classes[`divider_active_orientation_${orientation}`]])
   })));
 });
 Step.displayName = 'onesy-Step';

package/Stepper/Stepper.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IColor, IVersion, IPropsAny } from '../types';
-export type IStepper = ILine & {
+export declare type IStepper = ILine & {
     version?: IVersion;
     iconColor?: IColor;
     iconColorActive?: IColor;

package/Stepper/Stepper.js

@@ -73,19 +73,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Stepper'
 });
 const Stepper = /*#__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.onesyStepper) === 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 Divider = _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.Divider) || _Divider.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.onesyStepper) === 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 Divider = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Divider) || _Divider.default;
   const {
       gap = 2,
       tonal = true,
@@ -144,19 +136,19 @@ const Stepper = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       className: (0, _styleReact.classNames)([!active_ && !free && classes.inactive]),
       style: _objectSpread({}, item.props.style)
     });
-  }).flatMap((item, index) => {
-    const active_ = active >= index + 1;
-    const values = [item];
-    if (!individualDividers && index !== children.length - 1) values.push(/*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({
+  }).flatMap((item_0, index_0) => {
+    const active__0 = active >= index_0 + 1;
+    const values = [item_0];
+    if (!individualDividers && index_0 !== children.length - 1) values.push(/*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({
       orientation: orientation,
-      color: active_ ? dividerColorActive : dividerColor,
+      color: active__0 ? dividerColorActive : dividerColor,
       flex: true
     }, DividerProps, {
-      className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Stepper', theme) && ['onesy-Stepper-divider', active_ && dividerActive && `onesy-Stepper-divider-active`], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], classes[`divider_orientation_${orientation}_stepDirection_${stepDirection}`], active_ && dividerActive && [classes.divider_active, classes[`divider_active_orientation_${orientation}`]]])
+      className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Stepper', theme) && ['onesy-Stepper-divider', active__0 && dividerActive && `onesy-Stepper-divider-active`], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], classes[`divider_orientation_${orientation}_stepDirection_${stepDirection}`], active__0 && dividerActive && [classes.divider_active, classes[`divider_active_orientation_${orientation}`]]])
     })));
     return values;
-  }).map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-    key: index
+  }).map((item_1, index_1) => (/*#__PURE__*/_react.default.cloneElement(item_1, {
+    key: index_1
   }))));
 });
 Stepper.displayName = 'onesy-Stepper';

package/Surface/Surface.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IVersion, IElevation, IPropsAny } from '../types';
-export type ISurface = IBaseElement & {
+export declare type ISurface = IBaseElement & {
     version?: IVersion;
     elevation?: IElevation;
     backgroundOpacity?: number;

package/Surface/Surface.js

@@ -571,201 +571,276 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Surface'
 });
 const Surface = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
   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.onesySurface) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  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.onesySurface) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
     classes
   } = useStyle();
   const {
-      tonal = true,
-      color: color_ = 'default',
-      version = 'filled',
+      tonal: t0,
+      color: t1,
+      version: t2,
       elevation,
       backgroundOpacity,
       noBackground,
       noOutline,
       AdditionalProps,
-      Component = 'div',
+      Component: t3,
       className,
       style,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color_ = t1 === undefined ? "default" : t1;
+  const version = t2 === undefined ? "filled" : t2;
+  const Component = t3 === undefined ? "div" : t3;
   const styles = {
     root: {},
     children: {}
   };
   let color = color_;
   let palette;
-  if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
+  if (!theme.palette.color[color] && !["themed", "inverted", "default", "inherit"].includes(color)) {
     palette = theme.methods.color(color);
     if (tonal) {
       styles.root.color = theme.methods.palette.color.value(color, 10, true, palette);
-      if (version === 'filled') styles.root.backgroundColor = tonal === true ? palette[theme.palette.light ? 80 : 30] : theme.methods.palette.color.value(color, 70, true, palette);
-      if (version === 'outlined') {
-        styles.root.color = theme.methods.palette.color.value(color, tonal === 'secondary' ? 10 : 5, true, palette);
-        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === 'secondary' ? 95 : 99, true, palette);
-        styles.root.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, tonal === 'secondary' ? 20 : 10, true, palette)}`;
+      if (version === "filled") {
+        styles.root.backgroundColor = tonal === true ? palette[theme.palette.light ? 80 : 30] : theme.methods.palette.color.value(color, 70, true, palette);
       }
-      if (version === 'outlined-without-background') {
-        styles.root.color = theme.methods.palette.color.value(color, tonal === 'secondary' ? 30 : 40, true, palette);
-        styles.root.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, tonal === 'secondary' ? 20 : 30, true, palette)}`;
+      if (version === "outlined") {
+        styles.root.color = theme.methods.palette.color.value(color, tonal === "secondary" ? 10 : 5, true, palette);
+        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === "secondary" ? 95 : 99, true, palette);
+        styles.root.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, tonal === "secondary" ? 20 : 10, true, palette)}`;
+      }
+      if (version === "outlined-without-background") {
+        styles.root.color = theme.methods.palette.color.value(color, tonal === "secondary" ? 30 : 40, true, palette);
+        styles.root.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, tonal === "secondary" ? 20 : 30, true, palette)}`;
         delete styles.root.backgroundColor;
       }
-      if (version === 'text') styles.root.color = theme.methods.palette.color.value(color, tonal === 'secondary' ? 30 : 40, true, palette);
+      if (version === "text") {
+        styles.root.color = theme.methods.palette.color.value(color, tonal === "secondary" ? 30 : 40, true, palette);
+      }
     } else {
-      styles.root.color = theme.methods.palette.color.text(palette.main, true, 'light');
-      if (['outlined', 'filled'].includes(version)) styles.root.backgroundColor = palette.main;
-      if (version === 'outlined') styles.root.boxShadow = `inset 0px 0px 0px 1px ${palette[10]}`;
-      if (version === 'outlined-without-background') {
+      styles.root.color = theme.methods.palette.color.text(palette.main, true, "light");
+      if (["outlined", "filled"].includes(version)) {
+        styles.root.backgroundColor = palette.main;
+      }
+      if (version === "outlined") {
+        styles.root.boxShadow = `inset 0px 0px 0px 1px ${palette[10]}`;
+      }
+      if (version === "outlined-without-background") {
         styles.root.color = palette[40];
         styles.root.boxShadow = `inset 0px 0px 0px 1px ${palette[30]}`;
       }
-      if (version === 'text') styles.root.color = palette.main;
+      if (version === "text") {
+        styles.root.color = palette.main;
+      }
     }
     styles.children.backgroundColor = styles.root.backgroundColor;
   } else {
-    if (version === 'filled') {
-      if (color === 'themed') {
+    if (version === "filled") {
+      if (color === "themed") {
         styles.children.backgroundColor = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
-        styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, 'light');
-      } else if (color === 'inverted') {
-        styles.children.backgroundColor = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
-        styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, 'light');
-      } else if (color === 'default') {
-        styles.children.backgroundColor = theme.palette.background.default.primary;
-        styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, 'light');
-      } else if (color === 'inherit') {
-        styles.children.color = 'inherit';
+        styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, "light");
       } else {
-        if (!tonal) {
-          styles.children.color = theme.methods.palette.color.text(theme.palette.color[color].main, true, 'light');
-          styles.children.backgroundColor = theme.palette.color[color].main;
-        } else if (tonal === 'secondary') {
-          styles.children.color = theme.methods.palette.color.value(color, 10);
-          styles.children.backgroundColor = theme.methods.palette.color.value(color, 80);
+        if (color === "inverted") {
+          styles.children.backgroundColor = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
+          styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, "light");
         } else {
-          styles.children.color = theme.methods.palette.color.value(color, 10);
-          styles.children.backgroundColor = theme.methods.palette.color.value(color, 90);
+          if (color === "default") {
+            styles.children.backgroundColor = theme.palette.background.default.primary;
+            styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, "light");
+          } else {
+            if (color === "inherit") {
+              styles.children.color = "inherit";
+            } else {
+              if (!tonal) {
+                styles.children.color = theme.methods.palette.color.text(theme.palette.color[color].main, true, "light");
+                styles.children.backgroundColor = theme.palette.color[color].main;
+              } else {
+                if (tonal === "secondary") {
+                  styles.children.color = theme.methods.palette.color.value(color, 10);
+                  styles.children.backgroundColor = theme.methods.palette.color.value(color, 80);
+                } else {
+                  styles.children.color = theme.methods.palette.color.value(color, 10);
+                  styles.children.backgroundColor = theme.methods.palette.color.value(color, 90);
+                }
+              }
+            }
+          }
         }
       }
-    } else if (version === 'text') {
-      if (color === 'themed') {
-        styles.children.color = theme.palette.light ? theme.palette.text.default.primary : theme.palette.text.default.secondary;
-      } else if (color === 'inverted') {
-        styles.children.color = theme.palette.background.default.primary;
-      } else if (color === 'default') {
-        styles.children.color = theme.palette.text.default.primary;
-      } else if (color === 'inherit') {
-        styles.children.color = 'inherit';
-      } else {
-        if (!tonal) {
-          styles.children.color = theme.palette.color[color].main;
-        } else if (tonal === 'secondary') {
-          styles.children.color = theme.methods.palette.color.value(color, 30);
-        } else {
-          styles.children.color = theme.methods.palette.color.value(color, 40);
-        }
-      }
-    } else if (version === 'outlined') {
-      if (color === 'themed') {
-        styles.children.color = theme.palette.text.default.primary;
-        styles.children.backgroundColor = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
-      } else if (color === 'inverted') {
-        styles.children.color = theme.palette.background.default.primary;
-        styles.children.backgroundColor = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 60 : 40]}`;
-      } else if (color === 'default') {
-        styles.children.color = theme.palette.text.default.primary;
-        styles.children.backgroundColor = theme.palette.background.default.primary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
-      } else if (color === 'inherit') {
-        styles.children.color = 'inherit';
-        styles.children.boxShadow = `inset 0px 0px 0px 1px currentColor`;
-      } else {
-        if (!tonal) {
-          styles.children.color = theme.methods.palette.color.text(theme.palette.color.neutral.main, true, 'light');
-          styles.children.backgroundColor = theme.palette.color.neutral.main;
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[10]}`;
-        } else if (tonal === 'secondary') {
-          styles.children.color = theme.methods.palette.color.value(color, 10);
-          styles.children.backgroundColor = theme.methods.palette.color.value(color, 95);
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 10)}`;
+    } else {
+      if (version === "text") {
+        if (color === "themed") {
+          styles.children.color = theme.palette.light ? theme.palette.text.default.primary : theme.palette.text.default.secondary;
         } else {
-          styles.children.color = theme.methods.palette.color.value(color, 5);
-          styles.children.backgroundColor = theme.methods.palette.color.value(color, 99);
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 10)}`;
+          if (color === "inverted") {
+            styles.children.color = theme.palette.background.default.primary;
+          } else {
+            if (color === "default") {
+              styles.children.color = theme.palette.text.default.primary;
+            } else {
+              if (color === "inherit") {
+                styles.children.color = "inherit";
+              } else {
+                if (!tonal) {
+                  styles.children.color = theme.palette.color[color].main;
+                } else {
+                  if (tonal === "secondary") {
+                    styles.children.color = theme.methods.palette.color.value(color, 30);
+                  } else {
+                    styles.children.color = theme.methods.palette.color.value(color, 40);
+                  }
+                }
+              }
+            }
+          }
         }
-      }
-    } else if (version === 'outlined-without-background') {
-      if (color === 'themed') {
-        styles.children.color = theme.palette.light ? theme.palette.text.default.primary : theme.palette.background.default.secondary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.light ? theme.palette.text.default.primary : theme.palette.background.default.secondary}`;
-      } else if (color === 'inverted') {
-        styles.children.color = theme.palette.background.default.primary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.background.default.primary}`;
-      } else if (color === 'default') {
-        styles.children.color = theme.palette.text.default.primary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
-      } else if (color === 'inherit') {
-        styles.children.color = 'inherit';
-        styles.children.boxShadow = `inset 0px 0px 0px 1px currentColor`;
       } else {
-        if (!tonal) {
-          styles.children.color = theme.palette.text.default.primary;
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.text.default.primary}`;
-        } else if (tonal === 'secondary') {
-          styles.children.color = theme.methods.palette.color.value(color, 30);
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 20)}`;
+        if (version === "outlined") {
+          if (color === "themed") {
+            styles.children.color = theme.palette.text.default.primary;
+            styles.children.backgroundColor = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
+            styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
+          } else {
+            if (color === "inverted") {
+              styles.children.color = theme.palette.background.default.primary;
+              styles.children.backgroundColor = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
+              styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 60 : 40]}`;
+            } else {
+              if (color === "default") {
+                styles.children.color = theme.palette.text.default.primary;
+                styles.children.backgroundColor = theme.palette.background.default.primary;
+                styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
+              } else {
+                if (color === "inherit") {
+                  styles.children.color = "inherit";
+                  styles.children.boxShadow = "inset 0px 0px 0px 1px currentColor";
+                } else {
+                  if (!tonal) {
+                    styles.children.color = theme.methods.palette.color.text(theme.palette.color.neutral.main, true, "light");
+                    styles.children.backgroundColor = theme.palette.color.neutral.main;
+                    styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[10]}`;
+                  } else {
+                    if (tonal === "secondary") {
+                      styles.children.color = theme.methods.palette.color.value(color, 10);
+                      styles.children.backgroundColor = theme.methods.palette.color.value(color, 95);
+                      styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 10)}`;
+                    } else {
+                      styles.children.color = theme.methods.palette.color.value(color, 5);
+                      styles.children.backgroundColor = theme.methods.palette.color.value(color, 99);
+                      styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 10)}`;
+                    }
+                  }
+                }
+              }
+            }
+          }
         } else {
-          styles.children.color = theme.methods.palette.color.value(color, 40);
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 30)}`;
+          if (version === "outlined-without-background") {
+            if (color === "themed") {
+              styles.children.color = theme.palette.light ? theme.palette.text.default.primary : theme.palette.background.default.secondary;
+              styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.light ? theme.palette.text.default.primary : theme.palette.background.default.secondary}`;
+            } else {
+              if (color === "inverted") {
+                styles.children.color = theme.palette.background.default.primary;
+                styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.background.default.primary}`;
+              } else {
+                if (color === "default") {
+                  styles.children.color = theme.palette.text.default.primary;
+                  styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
+                } else {
+                  if (color === "inherit") {
+                    styles.children.color = "inherit";
+                    styles.children.boxShadow = "inset 0px 0px 0px 1px currentColor";
+                  } else {
+                    if (!tonal) {
+                      styles.children.color = theme.palette.text.default.primary;
+                      styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.text.default.primary}`;
+                    } else {
+                      if (tonal === "secondary") {
+                        styles.children.color = theme.methods.palette.color.value(color, 30);
+                        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 20)}`;
+                      } else {
+                        styles.children.color = theme.methods.palette.color.value(color, 40);
+                        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 30)}`;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
     }
     palette = theme.palette.color[color];
   }
   if (backgroundOpacity !== undefined) {
-    if (color === 'themed') color = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
-    if (color === 'inverted') color = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
-    if (color === 'default') color = theme.palette.background.default.primary;
-    if (color === 'inherit') color = theme.palette.background.default.primary;
+    if (color === "themed") {
+      color = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
+    }
+    if (color === "inverted") {
+      color = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
+    }
+    if (color === "default") {
+      color = theme.palette.background.default.primary;
+    }
+    if (color === "inherit") {
+      color = theme.palette.background.default.primary;
+    }
     palette = theme.methods.color(color);
     if (tonal) {
-      if (version === 'filled') styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === 'secondary' ? 80 : 90, true, palette);
-      if (version === 'outlined') {
-        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === 'secondary' ? 95 : 99, true, palette);
+      if (version === "filled") {
+        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === "secondary" ? 80 : 90, true, palette);
+      }
+      if (version === "outlined") {
+        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === "secondary" ? 95 : 99, true, palette);
       }
     } else {
-      if (['outlined', 'filled'].includes(version)) styles.root.backgroundColor = theme.methods.palette.color.value(color, 'main', true, palette);
+      if (["outlined", "filled"].includes(version)) {
+        styles.root.backgroundColor = theme.methods.palette.color.value(color, "main", true, palette);
+      }
+    }
+    if (styles.root.backgroundColor) {
+      styles.root.backgroundColor = theme.methods.palette.color.colorToRgb(styles.root.backgroundColor, backgroundOpacity);
     }
-    if (styles.root.backgroundColor) styles.root.backgroundColor = theme.methods.palette.color.colorToRgb(styles.root.backgroundColor, backgroundOpacity);
   }
   if (!palette) {
     let paletteColor = theme.palette.text.default.primary;
-    if (['default', 'inherit'].includes(color)) paletteColor = theme.palette.text.default.primary;
-    if (['themed'].includes(color)) paletteColor = theme.palette.text.default.secondary;
-    if (['inverted'].includes(color)) paletteColor = theme.palette.background.default.primary;
+    if (["default", "inherit"].includes(color)) {
+      paletteColor = theme.palette.text.default.primary;
+    }
+    if (["themed"].includes(color)) {
+      paletteColor = theme.palette.text.default.secondary;
+    }
+    if (["inverted"].includes(color)) {
+      paletteColor = theme.palette.background.default.primary;
+    }
     palette = theme.methods.color(paletteColor);
   }
-  if ((0, _utils.is)('function', children)) return children(_objectSpread(_objectSpread({}, styles.children), {}, {
-    palette
-  }));
+  if ((0, _utils.is)("function", children)) {
+    return children(_objectSpread(_objectSpread({}, styles.children), {}, {
+      palette
+    }));
+  }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref
   }, AdditionalProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Surface', theme) && ['onesy-Surface-root'], AdditionalProps === null || AdditionalProps === void 0 ? void 0 : AdditionalProps.className, className, classes.root, classes[`version_${version}`], classes[`version_${version}_color_${color}`], classes[`elevation_${elevation}`], tonal && classes[`version_${version}_tonal_${(0, _utils.is)('string', tonal) ? `${tonal}_` : ''}color_${color}`], noBackground && classes.noBackground, noOutline && classes.noOutline]),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Surface", theme) && ["onesy-Surface-root"], AdditionalProps === null || AdditionalProps === void 0 ? void 0 : AdditionalProps.className, className, classes.root, classes[`version_${version}`], classes[`version_${version}_color_${color}`], classes[`elevation_${elevation}`], tonal && classes[`version_${version}_tonal_${(0, _utils.is)("string", tonal) ? `${tonal}_` : ""}color_${color}`], noBackground && classes.noBackground, noOutline && classes.noOutline]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), children && _react.default.Children.toArray(children).filter(Boolean).map((item, index) => {
-    if ((0, _utils.is)('simple', item)) return item;
-    return /*#__PURE__*/_react.default.cloneElement(item, {
-      key: `${item.key || ''}${index}`
-    });
-  }));
+  }, other), children && _react.default.Children.toArray(children).filter(Boolean).map(_temp));
 });
 Surface.displayName = 'onesy-Surface';
-var _default = exports.default = Surface;
+var _default = exports.default = Surface;
+function _temp(item, index) {
+  if ((0, _utils.is)("simple", item)) {
+    return item;
+  }
+  return /*#__PURE__*/_react.default.cloneElement(item, {
+    key: `${item.key || ""}${index}`
+  });
+}