@onesy/ui-react 1.0.130 → 1.0.132

package/Button/Button.js

@@ -1,476 +1,497 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Surface_1 = __importDefault(require("../Surface"));
-const Interaction_1 = __importDefault(require("../Interaction"));
-const RoundProgress_1 = __importDefault(require("../RoundProgress"));
-const Type_1 = __importDefault(require("../Type"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        // Reset
-        fontFamily: 'inherit',
-        '-webkit-appearance': 'none',
-        appearance: 'none',
-        border: 'none',
-        fontSize: '100%',
-        lineHeight: '1.15',
-        padding: '0',
-        margin: '0',
-        overflow: 'visible',
-        textTransform: 'none',
-        flex: '0 0 auto',
-        display: 'inline-flex',
-        justifyContent: 'space-around',
-        alignItems: 'center',
-        position: 'relative',
-        cursor: 'pointer',
-        textAlign: 'center',
-        textDecoration: 'none',
-        verticalAlign: 'middle',
-        userSelect: 'none',
-        transition: theme.methods.transitions.make(['color'])
-    },
-    // Color
-    color_inherit: { color: 'inherit' },
-    // Size
-    size_small: {
-        paddingBlock: theme.methods.space.value(1, 'px'),
-        paddingInline: theme.methods.space.value(2, 'px'),
-        borderRadius: `${theme.shape.radius.unit * 4}px`
-    },
-    size_regular: {
-        paddingBlock: theme.methods.space.value(1.5, 'px'),
-        paddingInline: theme.methods.space.value(3, 'px'),
-        borderRadius: `${theme.shape.radius.unit * 4.5}px`
-    },
-    size_large: {
-        paddingBlock: theme.methods.space.value(2, 'px'),
-        paddingInline: theme.methods.space.value(4, 'px'),
-        borderRadius: `${theme.shape.radius.unit * 5.5}px`
-    },
-    // icon
-    icon: {
-        borderRadius: `calc(${theme.shape.radius.unit / 8} * 2em)`,
-        padding: '0'
-    },
-    icon_size_small: {
-        width: '30px',
-        height: '30px'
-    },
-    icon_size_regular: {
-        width: '40px',
-        height: '40px'
-    },
-    icon_size_large: {
-        width: '50px',
-        height: '50px'
-    },
-    // fab
-    fab_size_small: {
-        height: `40px`,
-        minWidth: `64px`,
-        borderRadius: `${(theme.shape.radius.unit * 2) - (theme.shape.radius.unit / 2)}px`,
-        padding: theme.methods.space.value(1.5, 'px')
-    },
-    fab_size_regular: {
-        height: `56px`,
-        minWidth: `80px`,
-        borderRadius: `${theme.shape.radius.unit * 2}px`,
-        padding: theme.methods.space.value(2, 'px')
-    },
-    fab_size_large: {
-        height: `72px`,
-        minWidth: `96px`,
-        borderRadius: `${(theme.shape.radius.unit * 2) + (theme.shape.radius.unit / 2)}px`,
-        padding: theme.methods.space.value(3, 'px')
-    },
-    // Chip
-    chip_size_small: {
-        padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
-        borderRadius: `${theme.shape.radius.unit - (theme.shape.radius.unit / 4)}px`
-    },
-    chip_size_regular: {
-        padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
-        borderRadius: `${theme.shape.radius.unit}px`
-    },
-    chip_size_large: {
-        padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
-        borderRadius: `${theme.shape.radius.unit + (theme.shape.radius.unit / 4)}px`
-    },
-    // Icons
-    start: {
-        paddingInlineStart: '0px'
-    },
-    end: {
-        paddingInlineEnd: '0px'
-    },
-    fullWidth: {
-        width: '100%'
-    },
-    // Label
-    label: {
-        display: 'inline-flex',
-        position: 'relative',
-        whiteSpace: 'normal',
-        wordBreak: 'break-word',
-        alignItems: 'center',
-        gap: '8px',
-        width: '100%'
-    },
-    align_start: {
-        textAlign: 'start',
-        justifyContent: 'flex-start'
-    },
-    align_center: {
-        textAlign: 'center',
-        justifyContent: 'center'
-    },
-    align_end: {
-        textAlign: 'start',
-        justifyContent: 'flex-end'
-    },
-    // Size
-    label_size_small: {
-        gap: '6px'
-    },
-    label_size_regular: {
-        gap: '8px'
-    },
-    label_size_large: {
-        gap: '10px'
-    },
-    // icon
-    iconRoot: {
-        position: 'relative',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        lineHeight: '0',
-        '& > *': {
-            lineHeight: '0 !important'
-        }
-    },
-    // Icon element
-    Icon: {
-        position: 'relative',
-        lineHeight: '0'
-    },
-    start_size_small: {
-        paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(0.5, 'px')}`
-    },
-    start_size_regular: {
-        paddingInline: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(1, 'px')}`
-    },
-    start_size_large: {
-        paddingInline: `${theme.methods.space.value(2.75, 'px')} ${theme.methods.space.value(1.25, 'px')}`
-    },
-    end_size_small: {
-        paddingInline: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
-    },
-    end_size_regular: {
-        paddingInline: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`
-    },
-    end_size_large: {
-        paddingInline: `${theme.methods.space.value(1.25, 'px')} ${theme.methods.space.value(2.75, 'px')}`
-    },
-    // Chip
-    chip_start_size_small: {
-        padding: `0 ${theme.methods.space.value(0.75, 'px')}`
-    },
-    chip_start_size_regular: {
-        padding: `0 ${theme.methods.space.value(1, 'px')}`
-    },
-    chip_start_size_large: {
-        padding: `0 ${theme.methods.space.value(1.25, 'px')}`
-    },
-    chip_end_size_small: {
-        padding: `0 ${theme.methods.space.value(0.75, 'px')}`
-    },
-    chip_end_size_regular: {
-        padding: `0 ${theme.methods.space.value(1, 'px')}`
-    },
-    chip_end_size_large: {
-        padding: `0 ${theme.methods.space.value(1.25, 'px')}`
-    },
-    // Elevation
-    elevation: {
-        transition: theme.methods.transitions.make('box-shadow'),
-        '&:hover': {
-            boxShadow: theme.shadows.values.neutral[3]
-        }
-    },
-    // Disabled
-    disabled: {
-        cursor: 'default',
-        opacity: theme.palette.visual_contrast.default.opacity.disabled
-    },
-    disabled_version_text: {
-        '&.onesy-Surface-root': {
-            color: theme.palette.text.default.primary
-        }
-    },
-    disabled_version_outlined: {
-        '&.onesy-Surface-root': {
-            color: theme.palette.text.default.primary
-        }
-    },
-    disabled_version_filled: {
-        '&.onesy-Surface-root': {
-            color: theme.palette.text.neutral.primary,
-            background: theme.palette.light ? theme.palette.text.divider : theme.palette.text.neutral.quaternary
-        }
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _Interaction = _interopRequireDefault(require("../Interaction"));
+var _RoundProgress = _interopRequireDefault(require("../RoundProgress"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "Component", "className", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(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; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    // Reset
+    fontFamily: 'inherit',
+    '-webkit-appearance': 'none',
+    appearance: 'none',
+    border: 'none',
+    fontSize: '100%',
+    lineHeight: '1.15',
+    padding: '0',
+    margin: '0',
+    overflow: 'visible',
+    textTransform: 'none',
+    flex: '0 0 auto',
+    display: 'inline-flex',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    position: 'relative',
+    cursor: 'pointer',
+    textAlign: 'center',
+    textDecoration: 'none',
+    verticalAlign: 'middle',
+    userSelect: 'none',
+    transition: theme.methods.transitions.make(['color'])
+  },
+  // Color
+  color_inherit: {
+    color: 'inherit'
+  },
+  // Size
+  size_small: {
+    paddingBlock: theme.methods.space.value(1, 'px'),
+    paddingInline: theme.methods.space.value(2, 'px'),
+    borderRadius: `${theme.shape.radius.unit * 4}px`
+  },
+  size_regular: {
+    paddingBlock: theme.methods.space.value(1.5, 'px'),
+    paddingInline: theme.methods.space.value(3, 'px'),
+    borderRadius: `${theme.shape.radius.unit * 4.5}px`
+  },
+  size_large: {
+    paddingBlock: theme.methods.space.value(2, 'px'),
+    paddingInline: theme.methods.space.value(4, 'px'),
+    borderRadius: `${theme.shape.radius.unit * 5.5}px`
+  },
+  // icon
+  icon: {
+    borderRadius: `calc(${theme.shape.radius.unit / 8} * 2em)`,
+    padding: '0'
+  },
+  icon_size_small: {
+    width: '30px',
+    height: '30px'
+  },
+  icon_size_regular: {
+    width: '40px',
+    height: '40px'
+  },
+  icon_size_large: {
+    width: '50px',
+    height: '50px'
+  },
+  // fab
+  fab_size_small: {
+    height: `40px`,
+    minWidth: `64px`,
+    borderRadius: `${theme.shape.radius.unit * 2 - theme.shape.radius.unit / 2}px`,
+    padding: theme.methods.space.value(1.5, 'px')
+  },
+  fab_size_regular: {
+    height: `56px`,
+    minWidth: `80px`,
+    borderRadius: `${theme.shape.radius.unit * 2}px`,
+    padding: theme.methods.space.value(2, 'px')
+  },
+  fab_size_large: {
+    height: `72px`,
+    minWidth: `96px`,
+    borderRadius: `${theme.shape.radius.unit * 2 + theme.shape.radius.unit / 2}px`,
+    padding: theme.methods.space.value(3, 'px')
+  },
+  // Chip
+  chip_size_small: {
+    padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
+    borderRadius: `${theme.shape.radius.unit - theme.shape.radius.unit / 4}px`
+  },
+  chip_size_regular: {
+    padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
+    borderRadius: `${theme.shape.radius.unit}px`
+  },
+  chip_size_large: {
+    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
+    borderRadius: `${theme.shape.radius.unit + theme.shape.radius.unit / 4}px`
+  },
+  // Icons
+  start: {
+    paddingInlineStart: '0px'
+  },
+  end: {
+    paddingInlineEnd: '0px'
+  },
+  fullWidth: {
+    width: '100%'
+  },
+  // Label
+  label: {
+    display: 'inline-flex',
+    position: 'relative',
+    whiteSpace: 'normal',
+    wordBreak: 'break-word',
+    alignItems: 'center',
+    gap: '8px',
+    width: '100%'
+  },
+  align_start: {
+    textAlign: 'start',
+    justifyContent: 'flex-start'
+  },
+  align_center: {
+    textAlign: 'center',
+    justifyContent: 'center'
+  },
+  align_end: {
+    textAlign: 'start',
+    justifyContent: 'flex-end'
+  },
+  // Size
+  label_size_small: {
+    gap: '6px'
+  },
+  label_size_regular: {
+    gap: '8px'
+  },
+  label_size_large: {
+    gap: '10px'
+  },
+  // icon
+  iconRoot: {
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: '0',
+    '& > *': {
+      lineHeight: '0 !important'
+    }
+  },
+  // Icon element
+  Icon: {
+    position: 'relative',
+    lineHeight: '0'
+  },
+  start_size_small: {
+    paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(0.5, 'px')}`
+  },
+  start_size_regular: {
+    paddingInline: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(1, 'px')}`
+  },
+  start_size_large: {
+    paddingInline: `${theme.methods.space.value(2.75, 'px')} ${theme.methods.space.value(1.25, 'px')}`
+  },
+  end_size_small: {
+    paddingInline: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
+  },
+  end_size_regular: {
+    paddingInline: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`
+  },
+  end_size_large: {
+    paddingInline: `${theme.methods.space.value(1.25, 'px')} ${theme.methods.space.value(2.75, 'px')}`
+  },
+  // Chip
+  chip_start_size_small: {
+    padding: `0 ${theme.methods.space.value(0.75, 'px')}`
+  },
+  chip_start_size_regular: {
+    padding: `0 ${theme.methods.space.value(1, 'px')}`
+  },
+  chip_start_size_large: {
+    padding: `0 ${theme.methods.space.value(1.25, 'px')}`
+  },
+  chip_end_size_small: {
+    padding: `0 ${theme.methods.space.value(0.75, 'px')}`
+  },
+  chip_end_size_regular: {
+    padding: `0 ${theme.methods.space.value(1, 'px')}`
+  },
+  chip_end_size_large: {
+    padding: `0 ${theme.methods.space.value(1.25, 'px')}`
+  },
+  // Elevation
+  elevation: {
+    transition: theme.methods.transitions.make('box-shadow'),
+    '&:hover': {
+      boxShadow: theme.shadows.values.neutral[3]
     }
-}), { name: 'onesy-Button' });
-const Button = react_1.default.forwardRef((props_, ref) => {
-    var _a, _b;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyButton) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_1.default; }, [theme]);
-    const RoundProgress = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.RoundProgress) || RoundProgress_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const { tonal = true, color: color_ = 'primary', version = 'outlined', name, size = 'regular', fullWidth, fontSize, selected, iconSelected, start: start_, startSelected, end: end_, endSelected, elevation = true, backgroundOpacity, align = 'center', loading, loadingLabel, loadingIcon = (0, jsx_runtime_1.jsx)(RoundProgress, { size: 'small' }), loadingIconPosition = 'center', fab, chip, icon, focus: focus_, value, noIconRootFontSize, firstLevelChildren, noFontSize, disabled: disabled_, onFocus: onFocus_, onBlur: onBlur_, IconWrapperComponent = 'span', InteractionProps = {}, IconWrapperProps, LabelProps, Component = props.href ? 'a' : 'button', className, style, children: childrenProps } = props, other = __rest(props, ["tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "Component", "className", "style", "children"]);
-    const { classes } = useStyle();
-    const [focus, setFocus] = react_1.default.useState(focus_ !== undefined ? focus_ : false);
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        ids: {
-            label: react_1.default.useId()
-        }
-    };
-    let color = color_;
-    let start = (selected && startSelected) || start_;
-    let end = (selected && endSelected) || end_;
-    const disabled = disabled_ || loading;
-    const TypeProps = {};
-    const children = name !== undefined ? name : childrenProps;
-    if (disabled)
-        color = 'default';
-    const styles = {
-        root: {},
-        background: {},
-        border: {},
-        iconRoot: {},
-        label: { margin: 0 },
-        Icon: { fontSize: '1.0625rem' }
-    };
-    // Size
-    // if (size === 'small') {
-    //   if (!noFontSize) styles.Icon.fontSize = '0.9375rem';
-    //   TypeProps.version = 'l3';
-    // }
-    // if (size === 'large') {
-    //   if (!noFontSize) styles.Icon.fontSize = '1.375rem';
-    //   TypeProps.version = 'l1';
-    // }
-    // if (fontSize !== undefined) {
-    //   if (!noFontSize) styles.Icon.fontSize = fontSize;
-    // }
-    let children_ = children;
-    // icon
-    if (icon) {
-        const iconFontSize = fontSize !== undefined ? 'inherit' : undefined;
-        if (!['small', 'regular', 'large'].includes(size)) {
-            children_ = (0, utils_1.is)('array', children_) ?
-                children_.filter(Boolean).map((item, index) => (0, utils_1.is)('string', item.type) ?
-                    react_1.default.cloneElement(item, {
-                        key: index
-                    }) :
-                    react_1.default.cloneElement(item, {
-                        key: index,
-                        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size / 1.667 : undefined
-                    })) :
-                react_1.default.cloneElement(children_, {
-                    size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size / 1.667 : undefined
-                });
-            styles.root.width = size;
-            styles.root.height = size;
-            if (!noFontSize) {
-                styles.root.fontSize = size / 1.667;
-                if (!noIconRootFontSize)
-                    styles.iconRoot.fontSize = size;
-            }
-        }
-        else {
-            children_ = (0, utils_1.is)('array', children_) ?
-                children_.filter(Boolean).map((item, index) => (0, utils_1.is)('string', item.type) ?
-                    react_1.default.cloneElement(item, {
-                        key: index
-                    }) :
-                    react_1.default.cloneElement(item, {
-                        key: index,
-                        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (size === 'large' ? 'medium' : size) : undefined
-                    })) :
-                react_1.default.cloneElement(children_, {
-                    size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (size === 'large' ? 'medium' : size) : undefined
-                });
-            if (!noFontSize) {
-                styles.root.fontSize = (0, utils_2.iconSizeToFontSize)(size === 'large' ? 'medium' : size);
-                if (!noIconRootFontSize)
-                    styles.iconRoot.fontSize = size === 'small' ? 30 : size === 'regular' ? 40 : 50;
-            }
-        }
+  },
+  // Disabled
+  disabled: {
+    cursor: 'default',
+    opacity: theme.palette.visual_contrast.default.opacity.disabled
+  },
+  disabled_version_text: {
+    '&.onesy-Surface-root': {
+      color: theme.palette.text.default.primary
     }
-    // fab
-    if (fab) {
-        if (react_1.default.Children.count(children_) === 1 && !(0, utils_1.is)('string', children_))
-            styles.root.minWidth = 'initial';
-        if (size === 'small')
-            styles.Icon.fontSize = 18;
-        if (size === 'regular')
-            styles.Icon.fontSize = 24;
-        if (size === 'large')
-            styles.Icon.fontSize = 30;
-        children_ = react_1.default.Children.toArray(children_).map((item) => react_1.default.isValidElement(item) ? react_1.default.cloneElement(item, { style: styles.Icon }) : item);
+  },
+  disabled_version_outlined: {
+    '&.onesy-Surface-root': {
+      color: theme.palette.text.default.primary
     }
-    if (fontSize !== undefined) {
-        styles.root.fontSize = fontSize;
-        styles.iconRoot.fontSize = 'inherit';
+  },
+  disabled_version_filled: {
+    '&.onesy-Surface-root': {
+      color: theme.palette.text.neutral.primary,
+      background: theme.palette.light ? theme.palette.text.divider : theme.palette.text.neutral.quaternary
+    }
+  }
+}), {
+  name: 'onesy-Button'
+});
+const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _start, _end;
+  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.onesyButton) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Surface = _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.Surface) || _Surface.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 RoundProgress = _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.RoundProgress) || _RoundProgress.default;
+  }, [theme]);
+  const Type = _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.Type) || _Type.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color: color_ = 'primary',
+      version = 'outlined',
+      name,
+      size = 'regular',
+      fullWidth,
+      fontSize,
+      selected,
+      iconSelected,
+      start: start_,
+      startSelected,
+      end: end_,
+      endSelected,
+      elevation = true,
+      backgroundOpacity,
+      align = 'center',
+      loading,
+      loadingLabel,
+      loadingIcon = /*#__PURE__*/_react.default.createElement(RoundProgress, {
+        size: "small"
+      }),
+      loadingIconPosition = 'center',
+      fab,
+      chip,
+      icon,
+      focus: focus_,
+      value,
+      noIconRootFontSize,
+      firstLevelChildren,
+      noFontSize,
+      disabled: disabled_,
+      onFocus: onFocus_,
+      onBlur: onBlur_,
+      IconWrapperComponent = 'span',
+      InteractionProps = {},
+      IconWrapperProps,
+      LabelProps,
+      Component = props.href ? 'a' : 'button',
+      className,
+      style,
+      children: childrenProps
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [focus, setFocus] = _react.default.useState(focus_ !== undefined ? focus_ : false);
+  const refs = {
+    root: _react.default.useRef(undefined),
+    ids: {
+      label: _react.default.useId()
+    }
+  };
+  let color = color_;
+  let start = selected && startSelected || start_;
+  let end = selected && endSelected || end_;
+  const disabled = disabled_ || loading;
+  const TypeProps = {};
+  const children = name !== undefined ? name : childrenProps;
+  if (disabled) color = 'default';
+  const styles = {
+    root: {},
+    background: {},
+    border: {},
+    iconRoot: {},
+    label: {
+      margin: 0
+    },
+    Icon: {
+      fontSize: '1.0625rem'
     }
-    // loading
-    if (loading) {
-        const iconLoading = react_1.default.cloneElement(loadingIcon, { color: 'inherit', style: styles.Icon });
-        if (loadingLabel)
-            children_ = loadingLabel;
-        else if (loadingIconPosition === 'center') {
-            children_ = icon ? react_1.default.cloneElement(loadingIcon, { color: 'inherit', size: size === 'small' ? 18 : size === 'regular' ? 24 : 36 }) : iconLoading;
-            styles.label.lineHeight = 0;
-        }
-        if (loadingIconPosition === 'start')
-            start = iconLoading;
-        else if (loadingIconPosition === 'end')
-            end = iconLoading;
+  };
+
+  // Size
+  // if (size === 'small') {
+  //   if (!noFontSize) styles.Icon.fontSize = '0.9375rem';
+
+  //   TypeProps.version = 'l3';
+  // }
+
+  // if (size === 'large') {
+  //   if (!noFontSize) styles.Icon.fontSize = '1.375rem';
+
+  //   TypeProps.version = 'l1';
+  // }
+
+  // if (fontSize !== undefined) {
+  //   if (!noFontSize) styles.Icon.fontSize = fontSize;
+  // }
+
+  let children_ = children;
+
+  // icon
+  if (icon) {
+    const iconFontSize = fontSize !== undefined ? 'inherit' : undefined;
+    if (!['small', 'regular', 'large'].includes(size)) {
+      children_ = (0, _utils.is)('array', children_) ? children_.filter(Boolean).map((item, index) => (0, _utils.is)('string', item.type) ? /*#__PURE__*/_react.default.cloneElement(item, {
+        key: index
+      }) : /*#__PURE__*/_react.default.cloneElement(item, {
+        key: index,
+        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size / 1.667 : undefined
+      })) : /*#__PURE__*/_react.default.cloneElement(children_, {
+        size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size / 1.667 : undefined
+      });
+      styles.root.width = size;
+      styles.root.height = size;
+      if (!noFontSize) {
+        styles.root.fontSize = size / 1.667;
+        if (!noIconRootFontSize) styles.iconRoot.fontSize = size;
+      }
+    } else {
+      children_ = (0, _utils.is)('array', children_) ? children_.filter(Boolean).map((item, index) => (0, _utils.is)('string', item.type) ? /*#__PURE__*/_react.default.cloneElement(item, {
+        key: index
+      }) : /*#__PURE__*/_react.default.cloneElement(item, {
+        key: index,
+        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size === 'large' ? 'medium' : size : undefined
+      })) : /*#__PURE__*/_react.default.cloneElement(children_, {
+        size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size === 'large' ? 'medium' : size : undefined
+      });
+      if (!noFontSize) {
+        styles.root.fontSize = (0, _utils2.iconSizeToFontSize)(size === 'large' ? 'medium' : size);
+        if (!noIconRootFontSize) styles.iconRoot.fontSize = size === 'small' ? 30 : size === 'regular' ? 40 : 50;
+      }
     }
-    if (disabled) {
-        InteractionProps.wave = false;
-        InteractionProps.border = false;
-        InteractionProps.background = false;
-        delete styles.root.color;
-        delete styles.label.color;
+  }
+
+  // fab
+  if (fab) {
+    if (_react.default.Children.count(children_) === 1 && !(0, _utils.is)('string', children_)) styles.root.minWidth = 'initial';
+    if (size === 'small') styles.Icon.fontSize = 18;
+    if (size === 'regular') styles.Icon.fontSize = 24;
+    if (size === 'large') styles.Icon.fontSize = 30;
+    children_ = _react.default.Children.toArray(children_).map(item => /*#__PURE__*/_react.default.isValidElement(item) ? /*#__PURE__*/_react.default.cloneElement(item, {
+      style: styles.Icon
+    }) : item);
+  }
+  if (fontSize !== undefined) {
+    styles.root.fontSize = fontSize;
+    styles.iconRoot.fontSize = 'inherit';
+  }
+
+  // loading
+  if (loading) {
+    const iconLoading = /*#__PURE__*/_react.default.cloneElement(loadingIcon, {
+      color: 'inherit',
+      style: styles.Icon
+    });
+    if (loadingLabel) children_ = loadingLabel;else if (loadingIconPosition === 'center') {
+      children_ = icon ? /*#__PURE__*/_react.default.cloneElement(loadingIcon, {
+        color: 'inherit',
+        size: size === 'small' ? 18 : size === 'regular' ? 24 : 36
+      }) : iconLoading;
+      styles.label.lineHeight = 0;
     }
-    const onFocus = react_1.default.useCallback((event) => {
-        if (focus_ === undefined && event.target === refs.root.current && !disabled)
-            setFocus(true);
-        if ((0, utils_1.is)('function', onFocus_))
-            onFocus_(event);
-    }, [focus_, onFocus_, disabled]);
-    const onBlur = react_1.default.useCallback((event) => {
-        if (focus_ === undefined && !disabled)
-            setFocus(false);
-        if ((0, utils_1.is)('function', onBlur_))
-            onBlur_(event);
-    }, [focus_, onBlur_, disabled]);
-    const IconElement = (selected && iconSelected) || children_;
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tabIndex: !disabled ? 0 : -1, type: 'button', role: 'button', color: color, tonal: tonal, version: version === 'outlined' ? 'outlined-without-background' : version, elevation: (elevation && !disabled && ['filled', 'tonal'].includes(version)) ? 1 : 0, backgroundOpacity: backgroundOpacity, "aria-labelledby": refs.ids.label, "aria-pressed": selected, "aria-disabled": disabled, disabled: disabled, onFocus: onFocus, onBlur: onBlur, Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Button', theme) && [
-                `onesy-Button-root`,
-                `onesy-Button-version-${version}`,
-                `onesy-Button-size-${size}`,
-                fullWidth && `onesy-Button-full-width`,
-                start && `onesy-Button-start`,
-                end && `onesy-Button-end`,
-                selected && `onesy-Button-selected`,
-                loading && `onesy-Button-loading`,
-                focus && `onesy-Button-focus`,
-                disabled && `onesy-Button-disabled`
-            ],
-            className,
-            classes.root,
-            classes[`size_${size}`],
-            classes[`version_${version}`],
-            classes[`color_${color}`],
-            (elevation && !disabled && ['filled', 'tonal'].includes(version)) && classes.elevation,
-            start && classes.start,
-            end && classes.end,
-            fullWidth && classes.fullWidth,
-            icon && [
-                classes.icon,
-                classes[`icon_size_${size}`]
-            ],
-            fab && [
-                classes.fab,
-                classes[`fab_size_${size}`]
-            ],
-            chip && [
-                classes.chip,
-                classes[`chip_size_${size}`]
-            ],
-            disabled && [
-                classes.disabled,
-                classes[`disabled_version_${version}`]
-            ]
-        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: [(0, jsx_runtime_1.jsx)(Interaction, Object.assign({ border: false, pulse: focus, selected: selected, disabled: disabled }, InteractionProps)), firstLevelChildren, start && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Button', theme) && [
-                        'onesy-Button-icon',
-                        'onesy-Button-start'
-                    ],
-                    classes.Icon,
-                    classes.start,
-                    classes[`start_size_${size}`],
-                    chip && classes[`chip_start_size_${size}`]
-                ]) }, { children: react_1.default.cloneElement(start, {
-                    size: ((_a = start === null || start === void 0 ? void 0 : start.props) === null || _a === void 0 ? void 0 : _a.size) || size || 'regular'
-                }) }))), icon ? ((0, jsx_runtime_1.jsx)(IconWrapperComponent, Object.assign({}, IconWrapperProps, { id: refs.ids.label, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Button', theme) && [
-                        'onesy-Button-icon-root'
-                    ],
-                    IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className,
-                    classes.iconRoot
-                ]), style: Object.assign(Object.assign({}, styles.iconRoot), IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.style) }, { children: IconElement }))) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3' }, TypeProps, { id: refs.ids.label, Component: 'span' }, LabelProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Button', theme) && [
-                        'onesy-Button-label'
-                    ],
-                    LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className,
-                    TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className,
-                    classes.label,
-                    classes[`label_size_${size}`],
-                    classes[`align_${align}`]
-                ]), style: Object.assign(Object.assign(Object.assign({}, styles.label), TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style) }, { children: react_1.default.Children.toArray(children_).map((item_, index) => {
-                    var _a, _b, _c, _d;
-                    const item = (selected && ((_b = (_a = item_.type) === null || _a === void 0 ? void 0 : _a.displayName) === null || _b === void 0 ? void 0 : _b.includes('onesy-Icon')) && iconSelected) ? iconSelected : item_;
-                    if ((0, utils_1.is)('simple', item))
-                        return item;
-                    return react_1.default.cloneElement((selected && ((_d = (_c = item.type) === null || _c === void 0 ? void 0 : _c.displayName) === null || _d === void 0 ? void 0 : _d.includes('onesy-Icon')) && iconSelected) ? iconSelected : item, {
-                        key: index
-                    });
-                }) }))), end && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Button', theme) && [
-                        'onesy-Button-icon',
-                        'onesy-Button-end'
-                    ],
-                    classes.Icon,
-                    classes.end,
-                    classes[`end_size_${size}`],
-                    chip && classes[`chip_end_size_${size}`]
-                ]) }, { children: react_1.default.cloneElement(end, {
-                    size: ((_b = end === null || end === void 0 ? void 0 : end.props) === null || _b === void 0 ? void 0 : _b.size) || size || 'regular'
-                }) })))] })));
+    if (loadingIconPosition === 'start') start = iconLoading;else if (loadingIconPosition === 'end') end = iconLoading;
+  }
+  if (disabled) {
+    InteractionProps.wave = false;
+    InteractionProps.border = false;
+    InteractionProps.background = false;
+    delete styles.root.color;
+    delete styles.label.color;
+  }
+  const onFocus = _react.default.useCallback(event => {
+    if (focus_ === undefined && event.target === refs.root.current && !disabled) setFocus(true);
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
+  }, [focus_, onFocus_, disabled]);
+  const onBlur = _react.default.useCallback(event => {
+    if (focus_ === undefined && !disabled) setFocus(false);
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
+  }, [focus_, onBlur_, disabled]);
+  const IconElement = selected && iconSelected || children_;
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tabIndex: !disabled ? 0 : -1,
+    type: "button",
+    role: "button",
+    color: color,
+    tonal: tonal,
+    version: version === 'outlined' ? 'outlined-without-background' : version,
+    elevation: elevation && !disabled && ['filled', 'tonal'].includes(version) ? 1 : 0,
+    backgroundOpacity: backgroundOpacity,
+    "aria-labelledby": refs.ids.label,
+    "aria-pressed": selected,
+    "aria-disabled": disabled,
+    disabled: disabled,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && [`onesy-Button-root`, `onesy-Button-version-${version}`, `onesy-Button-size-${size}`, fullWidth && `onesy-Button-full-width`, start && `onesy-Button-start`, end && `onesy-Button-end`, selected && `onesy-Button-selected`, loading && `onesy-Button-loading`, focus && `onesy-Button-focus`, disabled && `onesy-Button-disabled`], className, classes.root, classes[`size_${size}`], classes[`version_${version}`], classes[`color_${color}`], elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, start && classes.start, end && classes.end, fullWidth && classes.fullWidth, icon && [classes.icon, classes[`icon_size_${size}`]], fab && [classes.fab, classes[`fab_size_${size}`]], chip && [classes.chip, classes[`chip_size_${size}`]], disabled && [classes.disabled, classes[`disabled_version_${version}`]]]),
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }, other), /*#__PURE__*/_react.default.createElement(Interaction, (0, _extends2.default)({
+    border: false,
+    pulse: focus,
+    selected: selected,
+    disabled: disabled
+  }, InteractionProps)), firstLevelChildren, start && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon', 'onesy-Button-start'], classes.Icon, classes.start, classes[`start_size_${size}`], chip && classes[`chip_start_size_${size}`]])
+  }, /*#__PURE__*/_react.default.cloneElement(start, {
+    size: ((_start = start) === null || _start === void 0 || (_start = _start.props) === null || _start === void 0 ? void 0 : _start.size) || size || 'regular'
+  })), icon ? /*#__PURE__*/_react.default.createElement(IconWrapperComponent, (0, _extends2.default)({}, IconWrapperProps, {
+    id: refs.ids.label,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon-root'], IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className, classes.iconRoot]),
+    style: _objectSpread(_objectSpread({}, styles.iconRoot), IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.style)
+  }), IconElement) : /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
+  }, TypeProps, {
+    id: refs.ids.label,
+    Component: "span"
+  }, LabelProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-label'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, classes.label, classes[`label_size_${size}`], classes[`align_${align}`]]),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styles.label), TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
+  }), _react.default.Children.toArray(children_).map((item_, index) => {
+    var _item_$type, _item$type;
+    const item = selected && (_item_$type = item_.type) !== null && _item_$type !== void 0 && (_item_$type = _item_$type.displayName) !== null && _item_$type !== void 0 && _item_$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
+    if ((0, _utils.is)('simple', item)) return item;
+    return /*#__PURE__*/_react.default.cloneElement(selected && (_item$type = item.type) !== null && _item$type !== void 0 && (_item$type = _item$type.displayName) !== null && _item$type !== void 0 && _item$type.includes('onesy-Icon') && iconSelected ? iconSelected : item, {
+      key: index
+    });
+  })), end && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon', 'onesy-Button-end'], classes.Icon, classes.end, classes[`end_size_${size}`], chip && classes[`chip_end_size_${size}`]])
+  }, /*#__PURE__*/_react.default.cloneElement(end, {
+    size: ((_end = end) === null || _end === void 0 || (_end = _end.props) === null || _end === void 0 ? void 0 : _end.size) || size || 'regular'
+  })));
 });
 Button.displayName = 'onesy-Button';
-exports.default = Button;
+var _default = exports.default = Button;