@onesy/ui-react 1.0.129 → 1.0.131

package/Buttons/Buttons.js

@@ -1,306 +1,379 @@
 "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 });
-exports.IconDoneAnimated = exports.IconMaterialDone = void 0;
-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 Transition_1 = __importDefault(require("../Transition"));
-const Line_1 = __importDefault(require("../Line"));
-const utils_2 = require("../utils");
-const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
-const Icon_1 = __importDefault(require("../Icon"));
-exports.IconMaterialDone = react_1.default.forwardRef((props, ref) => {
-    const { className } = props, other = __rest(props, ["className"]);
-    return ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ ref: ref, name: 'DoneSharp', short_name: 'Done' }, other, { children: (0, jsx_runtime_1.jsx)("path", { className: className, fill: 'none', d: 'M4.5 11.5L9.5 16.5L19.5 6.5' }) })));
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        borderRadius: theme.methods.shape.radius.value('xl', 'px'),
-        maxWidth: '100%'
-    },
-    orientation_horizontal_size_small: {
-        '&:not(.onesy-ToggleButtons-root) > *': {
-            height: '28px'
-        }
-    },
-    orientation_horizontal_size_regular: {
-        '&:not(.onesy-ToggleButtons-root) > *': {
-            height: '42px'
-        }
-    },
-    orientation_horizontal_size_large: {
-        '&:not(.onesy-ToggleButtons-root) > *': {
-            height: '63px'
-        }
-    },
-    orientation_horizontal: {
-        overflow: 'auto hidden'
-    },
-    orientation_vertical: {
-        flexDirection: 'column',
-        '& > *': {
-            width: '100% !important'
-        }
-    },
-    // Size
-    size_small: { borderRadius: `${theme.shape.radius.unit * 2}px` },
-    size_regular: { borderRadius: `${theme.shape.radius.unit * 2.5}px` },
-    size_large: { borderRadius: `${theme.shape.radius.unit * 3.5}px` },
-    // Size
-    chip_size_small: { borderRadius: `${theme.shape.radius.unit - (theme.shape.radius.unit / 4)}px` },
-    chip_size_regular: { borderRadius: `${theme.shape.radius.unit}px` },
-    chip_size_large: { borderRadius: `${theme.shape.radius.unit + (theme.shape.radius.unit / 4)}px` },
-    // Shadows
-    elevation: {
-        boxShadow: theme.shadows.values.neutral[1],
-        transition: theme.methods.transitions.make('box-shadow'),
-        '&:hover': {
-            boxShadow: theme.shadows.values.neutral[3]
-        }
-    },
-    start_orientation_horizontal: {
-        '&:not(:first-of-type)': {
-            borderStartStartRadius: '0px',
-            borderEndStartRadius: '0px',
-            '&$outlined': {
-                marginInlineStart: '-1px'
-            },
-            '&$border:not($outlined)': {
-                borderInlineStart: '1px solid currentColor'
-            }
-        }
-    },
-    end_orientation_horizontal: {
-        '&:not(:last-of-type)': {
-            borderStartEndRadius: '0px',
-            borderEndEndRadius: '0px'
-        }
-    },
-    start_orientation_vertical: {
-        '&:not(:first-of-type)': {
-            borderStartStartRadius: '0px',
-            borderStartEndRadius: '0px',
-            '&$outlined': {
-                marginBlockStart: '-1px'
-            },
-            '&$border:not($outlined)': {
-                borderBlockStart: '1px solid currentColor'
-            }
-        }
-    },
-    end_orientation_vertical: {
-        '&:not(:last-of-type)': {
-            borderEndEndRadius: '0px',
-            borderEndStartRadius: '0px'
-        }
-    },
-    path: {
-        strokeWidth: '1.5px',
-        strokeDasharray: '30',
-        strokeDashoffset: '30',
-        stroke: 'currentcolor',
-        transition: theme.methods.transitions.make('stroke-dashoffset', { duration: 'xxs', timing_function: 'accelerated' })
-    },
-    pathIn: {
-        strokeDashoffset: '0',
-        transition: theme.methods.transitions.make('stroke-dashoffset', { duration: 'xxs', delay: 45, timing_function: 'accelerated' })
-    },
-    fullWidth: {
-        width: '100%'
+exports.default = exports.IconMaterialDone = exports.IconDoneAnimated = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Transition = _interopRequireDefault(require("../Transition"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _utils2 = require("../utils");
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+const _excluded = ["className"],
+  _excluded2 = ["in", "simple", "onExited", "fullWidth", "noExitAnimation", "add", "className", "style"],
+  _excluded3 = ["tonal", "color", "version", "colorSelected", "size", "value", "valueDefault", "onChange", "select", "unselect", "orientation", "noCheckIcon", "elevation", "border", "chip", "fullWidth", "disabled", "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) { (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 IconMaterialDone = exports.IconMaterialDone = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
+    ref: ref,
+    name: "DoneSharp",
+    short_name: "Done"
+  }, other), /*#__PURE__*/_react.default.createElement("path", {
+    className: className,
+    fill: "none",
+    d: "M4.5 11.5L9.5 16.5L19.5 6.5"
+  }));
+});
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    borderRadius: theme.methods.shape.radius.value('xl', 'px'),
+    maxWidth: '100%'
+  },
+  orientation_horizontal_size_small: {
+    '&:not(.onesy-ToggleButtons-root) > *': {
+      height: '28px'
+    }
+  },
+  orientation_horizontal_size_regular: {
+    '&:not(.onesy-ToggleButtons-root) > *': {
+      height: '42px'
+    }
+  },
+  orientation_horizontal_size_large: {
+    '&:not(.onesy-ToggleButtons-root) > *': {
+      height: '63px'
+    }
+  },
+  orientation_horizontal: {
+    overflow: 'auto hidden'
+  },
+  orientation_vertical: {
+    flexDirection: 'column',
+    '& > *': {
+      width: '100% !important'
+    }
+  },
+  // Size
+  size_small: {
+    borderRadius: `${theme.shape.radius.unit * 2}px`
+  },
+  size_regular: {
+    borderRadius: `${theme.shape.radius.unit * 2.5}px`
+  },
+  size_large: {
+    borderRadius: `${theme.shape.radius.unit * 3.5}px`
+  },
+  // Size
+  chip_size_small: {
+    borderRadius: `${theme.shape.radius.unit - theme.shape.radius.unit / 4}px`
+  },
+  chip_size_regular: {
+    borderRadius: `${theme.shape.radius.unit}px`
+  },
+  chip_size_large: {
+    borderRadius: `${theme.shape.radius.unit + theme.shape.radius.unit / 4}px`
+  },
+  // Shadows
+  elevation: {
+    boxShadow: theme.shadows.values.neutral[1],
+    transition: theme.methods.transitions.make('box-shadow'),
+    '&:hover': {
+      boxShadow: theme.shadows.values.neutral[3]
+    }
+  },
+  start_orientation_horizontal: {
+    '&:not(:first-of-type)': {
+      borderStartStartRadius: '0px',
+      borderEndStartRadius: '0px',
+      '&$outlined': {
+        marginInlineStart: '-1px'
+      },
+      '&$border:not($outlined)': {
+        borderInlineStart: '1px solid currentColor'
+      }
+    }
+  },
+  end_orientation_horizontal: {
+    '&:not(:last-of-type)': {
+      borderStartEndRadius: '0px',
+      borderEndEndRadius: '0px'
+    }
+  },
+  start_orientation_vertical: {
+    '&:not(:first-of-type)': {
+      borderStartStartRadius: '0px',
+      borderStartEndRadius: '0px',
+      '&$outlined': {
+        marginBlockStart: '-1px'
+      },
+      '&$border:not($outlined)': {
+        borderBlockStart: '1px solid currentColor'
+      }
+    }
+  },
+  end_orientation_vertical: {
+    '&:not(:last-of-type)': {
+      borderEndEndRadius: '0px',
+      borderEndStartRadius: '0px'
+    }
+  },
+  path: {
+    strokeWidth: '1.5px',
+    strokeDasharray: '30',
+    strokeDashoffset: '30',
+    stroke: 'currentcolor',
+    transition: theme.methods.transitions.make('stroke-dashoffset', {
+      duration: 'xxs',
+      timing_function: 'accelerated'
+    })
+  },
+  pathIn: {
+    strokeDashoffset: '0',
+    transition: theme.methods.transitions.make('stroke-dashoffset', {
+      duration: 'xxs',
+      delay: 45,
+      timing_function: 'accelerated'
+    })
+  },
+  fullWidth: {
+    width: '100%'
+  },
+  selected: {
+    zIndex: '1'
+  },
+  disabled: {}
+}), {
+  name: 'onesy-Buttons'
+});
+const IconDoneAnimated = props => {
+  const {
+    classes
+  } = useStyle();
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const Transition = _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.Transition) || _Transition.default;
+  }, [theme]);
+  const {
+      in: inProp,
+      simple,
+      onExited,
+      fullWidth,
+      noExitAnimation,
+      add,
+      className,
+      style
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  const styles = props.simple ? {} : {
+    adding: {
+      width: style === null || style === void 0 ? void 0 : style.fontSize
     },
-    selected: {
-        zIndex: '1'
+    added: {
+      width: style === null || style === void 0 ? void 0 : style.fontSize
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(Transition, {
+    in: inProp,
+    onExited: () => {
+      if ((0, _utils.is)('function', onExited) && !simple) onExited();
     },
-    disabled: {}
-}), { name: 'onesy-Buttons' });
-const IconDoneAnimated = (props) => {
-    const { classes } = useStyle();
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_1.default; }, [theme]);
-    const { in: inProp, simple, onExited, fullWidth, noExitAnimation, add, className, style } = props, other = __rest(props, ["in", "simple", "onExited", "fullWidth", "noExitAnimation", "add", "className", "style"]);
-    const styles = props.simple ? {} : {
-        adding: {
-            width: style === null || style === void 0 ? void 0 : style.fontSize
-        },
-        added: {
-            width: style === null || style === void 0 ? void 0 : style.fontSize
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ in: inProp, onExited: () => {
-            if ((0, utils_1.is)('function', onExited) && !simple)
-                onExited();
-        }, add: add, enterOnAdd: false }, { children: (status) => react_1.default.cloneElement((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: style }, { children: (0, jsx_runtime_1.jsx)(exports.IconMaterialDone, Object.assign({ className: (0, style_react_1.classNames)([
-                    classes.path,
-                    (['adding', 'added', 'enter', 'entering', 'entered'].includes(status) || noExitAnimation) && classes.pathIn
-                ]), size: 'inherit' }, other)) })), {
-            style: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'inline-flex', overflow: 'hidden' }, (!simple ? { width: 0 } : {})), { transition: theme.methods.transitions.make('width', { duration: 'xs', timing_function: 'accelerated' }) }), styles[status]), style)
-        }) })));
+    add: add,
+    enterOnAdd: false
+  }, status => /*#__PURE__*/_react.default.cloneElement(/*#__PURE__*/_react.default.createElement("span", {
+    className: className,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(IconMaterialDone, (0, _extends2.default)({
+    className: (0, _styleReact.classNames)([classes.path, (['adding', 'added', 'enter', 'entering', 'entered'].includes(status) || noExitAnimation) && classes.pathIn]),
+    size: "inherit"
+  }, other))), {
+    style: _objectSpread(_objectSpread(_objectSpread({
+      display: 'inline-flex',
+      overflow: 'hidden'
+    }, !simple ? {
+      width: 0
+    } : {}), {}, {
+      transition: theme.methods.transitions.make('width', {
+        duration: 'xs',
+        timing_function: 'accelerated'
+      })
+    }, styles[status]), style)
+  }));
 };
 exports.IconDoneAnimated = IconDoneAnimated;
-const Buttons = react_1.default.forwardRef((props_, ref) => {
-    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.onesyButtons) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version = 'outlined', colorSelected = props.color, size = 'regular', value, valueDefault, onChange, select, unselect = true, orientation: orientation_, noCheckIcon, elevation = true, border = true, chip, fullWidth, disabled, className, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "colorSelected", "size", "value", "valueDefault", "onChange", "select", "unselect", "orientation", "noCheckIcon", "elevation", "border", "chip", "fullWidth", "disabled", "className", "children"]);
-    const { classes } = useStyle();
-    const [init, setInit] = react_1.default.useState(false);
-    const [preSelected, setPreSelected] = react_1.default.useState([]);
-    const [selected, setSelected] = react_1.default.useState(() => {
-        const valueNew = valueDefault !== undefined ? valueDefault : value;
-        return valueNew !== undefined ? (0, utils_1.is)('array', valueNew) ? valueNew : [valueNew] : [];
+const Buttons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  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.onesyButtons) === 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$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Line) || _Line.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'outlined',
+      colorSelected = props.color,
+      size = 'regular',
+      value,
+      valueDefault,
+      onChange,
+      select,
+      unselect = true,
+      orientation: orientation_,
+      noCheckIcon,
+      elevation = true,
+      border = true,
+      chip,
+      fullWidth,
+      disabled,
+      className,
+      children: children_
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded3);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = _react.default.useState(false);
+  const [preSelected, setPreSelected] = _react.default.useState([]);
+  const [selected, setSelected] = _react.default.useState(() => {
+    const valueNew = valueDefault !== undefined ? valueDefault : value;
+    return valueNew !== undefined ? (0, _utils.is)('array', valueNew) ? valueNew : [valueNew] : [];
+  });
+  const refs = {
+    root: _react.default.useRef(undefined),
+    noCheckIcon: _react.default.useRef(noCheckIcon)
+  };
+  const keys = _react.default.useMemo(() => {
+    const result = [];
+    const items = [orientation_];
+    items.forEach(item => {
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
     });
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        noCheckIcon: react_1.default.useRef(noCheckIcon)
-    };
-    const keys = react_1.default.useMemo(() => {
-        const result = [];
-        const items = [orientation_];
-        items.forEach(item => {
-            if ((0, utils_1.is)('object', item))
-                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
-        });
-        return (0, utils_1.unique)(result);
-    }, [orientation_]);
-    const breakpoints = {};
-    keys.forEach(key => {
-        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
+    return (0, _utils.unique)(result);
+  }, [orientation_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+      element: refs.root.current
     });
-    const orientation = (0, utils_2.valueBreakpoints)(orientation_, 'horizontal', breakpoints, theme);
-    refs.noCheckIcon.current = noCheckIcon;
-    react_1.default.useEffect(() => {
-        setInit(true);
-    }, []);
-    react_1.default.useEffect(() => {
-        if (init && value !== selected)
-            setSelected((0, utils_1.is)('array', value) ? value : [value]);
-    }, [value]);
-    const onSelect = (itemProps, start = false) => {
-        let valueNew;
-        if (start) {
-            if (selected.includes(itemProps.value)) {
-                valueNew = selected.filter(item => item !== itemProps.value);
-            }
-            else {
-                if (select === 'single')
-                    valueNew = [itemProps.value];
-                if (select === 'multiple')
-                    valueNew = (0, utils_1.unique)([...selected, itemProps.value]);
-            }
+  });
+  const orientation = (0, _utils2.valueBreakpoints)(orientation_, 'horizontal', breakpoints, theme);
+  refs.noCheckIcon.current = noCheckIcon;
+  _react.default.useEffect(() => {
+    setInit(true);
+  }, []);
+  _react.default.useEffect(() => {
+    if (init && value !== selected) setSelected((0, _utils.is)('array', value) ? value : [value]);
+  }, [value]);
+  const onSelect = (itemProps, start = false) => {
+    let valueNew;
+    if (start) {
+      if (selected.includes(itemProps.value)) {
+        valueNew = selected.filter(item => item !== itemProps.value);
+      } else {
+        if (select === 'single') valueNew = [itemProps.value];
+        if (select === 'multiple') valueNew = (0, _utils.unique)([...selected, itemProps.value]);
+      }
+    } else {
+      // Unselect
+      if (selected.includes(itemProps.value) && (unselect || select === 'multiple' && selected.length > 1)) {
+        if (!refs.noCheckIcon.current) {
+          setPreSelected(items => items.filter(item => item !== itemProps.value));
+        } else {
+          valueNew = selected.filter(item => item !== itemProps.value);
         }
-        else {
-            // Unselect
-            if (selected.includes(itemProps.value) &&
-                (unselect ||
-                    (select === 'multiple' && selected.length > 1))) {
-                if (!refs.noCheckIcon.current) {
-                    setPreSelected(items => items.filter(item => item !== itemProps.value));
-                }
-                else {
-                    valueNew = selected.filter(item => item !== itemProps.value);
-                }
-            }
-            else {
-                if (select === 'single') {
-                    if (!refs.noCheckIcon.current) {
-                        setPreSelected([itemProps.value]);
-                        valueNew = [...selected, itemProps.value];
-                    }
-                    else
-                        valueNew = [itemProps.value];
-                }
-                if (select === 'multiple') {
-                    if (!refs.noCheckIcon.current) {
-                        setPreSelected(items => (0, utils_1.unique)([...items, itemProps.value]));
-                        valueNew = (0, utils_1.unique)([...selected, itemProps.value]);
-                    }
-                    else
-                        valueNew = (0, utils_1.unique)([...selected, itemProps.value]);
-                }
-            }
+      } else {
+        if (select === 'single') {
+          if (!refs.noCheckIcon.current) {
+            setPreSelected([itemProps.value]);
+            valueNew = [...selected, itemProps.value];
+          } else valueNew = [itemProps.value];
         }
-        if (valueNew !== undefined) {
-            // Update inner or controlled
-            if (!props.hasOwnProperty('value'))
-                setSelected(valueNew);
-            if ((0, utils_1.is)('function', onChange))
-                onChange(valueNew);
+        if (select === 'multiple') {
+          if (!refs.noCheckIcon.current) {
+            setPreSelected(items => (0, _utils.unique)([...items, itemProps.value]));
+            valueNew = (0, _utils.unique)([...selected, itemProps.value]);
+          } else valueNew = (0, _utils.unique)([...selected, itemProps.value]);
         }
-    };
-    const updateSelected = (itemProps) => {
-        const valueNew = selected.filter(item => item !== itemProps.value);
-        // Update inner or controlled
-        if (!props.hasOwnProperty('value'))
-            setSelected(valueNew);
-        if ((0, utils_1.is)('function', onChange))
-            onChange(valueNew);
-    };
-    const children = react_1.default.Children
-        .toArray(children_)
-        // Clamp array to max of 5 values
-        // .slice(0, 5)
-        .map((item, index) => {
-        var _a, _b, _c, _d, _e, _f;
-        return react_1.default.cloneElement(item, Object.assign(Object.assign(Object.assign({ key: index, className: (0, style_react_1.classNames)([
-                item.className,
-                classes.item,
-                classes[version],
-                classes[`start_orientation_${orientation}`],
-                classes[`end_orientation_${orientation}`],
-                selected.includes(item.props.value) && classes.selected,
-                border && classes.border
-            ]), onClick: () => {
-                onSelect(item.props, !!item.props.start);
-                // Invoke items on click method
-                if ((0, utils_1.is)('function', item.props.onClick))
-                    item.props.onClick();
-            } }, (!refs.noCheckIcon.current && item.props.start && selected.includes(item.props.value) ? {
-            start: ((0, jsx_runtime_1.jsx)(exports.IconDoneAnimated, { simple: true, in: true, add: true }))
-        } : {})), (!refs.noCheckIcon.current && (!item.props.start && (selected.includes(item.props.value) || preSelected.includes(item.props.value))) ? {
-            start: ((0, jsx_runtime_1.jsx)(exports.IconDoneAnimated, { in: (item.props.start ? selected : preSelected).includes(index), onExited: () => updateSelected(item.props), add: true }))
-        } : {})), { version: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.version) !== undefined ? item.props.version : version, color: selected.includes(item.props.value) ? colorSelected || (((_b = item.props) === null || _b === void 0 ? void 0 : _b.color) !== undefined ? item.props.color : color) : (((_c = item.props) === null || _c === void 0 ? void 0 : _c.color) !== undefined ? item.props.color : color), size: ((_d = item.props) === null || _d === void 0 ? void 0 : _d.size) !== undefined ? item.props.size : size, tonal: ((_e = item.props) === null || _e === void 0 ? void 0 : _e.tonal) !== undefined ? item.props.tonal : tonal, elevation: false, selected: item.props.selected !== undefined ? item.props.selected : selected.includes(item.props.value), disabled: ((_f = item.props) === null || _f === void 0 ? void 0 : _f.disabled) !== undefined ? item.props.disabled : disabled }));
-    });
-    return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, gap: 0, direction: 'row', display: 'inline-flex', className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Buttons', theme) && [
-                'onesy-Buttons-root',
-                `onesy-Buttons-version-${version}`,
-                `onesy-Buttons-size-${size}`,
-                disabled && `onesy-Buttons-disabled`,
-            ],
-            className,
-            classes.root,
-            classes[`size_${size}`],
-            chip && classes[`chip_size_${size}`],
-            classes[`orientation_${orientation}`],
-            classes[`orientation_${orientation}_size_${size}`],
-            fullWidth && classes.fullWidth,
-            elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation,
-            disabled && classes.disabled
-        ]) }, other, { children: children })));
+      }
+    }
+    if (valueNew !== undefined) {
+      // Update inner or controlled
+      if (!props.hasOwnProperty('value')) setSelected(valueNew);
+      if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+    }
+  };
+  const updateSelected = itemProps => {
+    const valueNew = selected.filter(item => item !== itemProps.value);
+
+    // Update inner or controlled
+    if (!props.hasOwnProperty('value')) setSelected(valueNew);
+    if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+  };
+  const children = _react.default.Children.toArray(children_)
+  // Clamp array to max of 5 values
+  // .slice(0, 5)
+  .map((item, index) => {
+    var _item$props, _item$props2, _item$props3, _item$props4, _item$props5, _item$props6;
+    return /*#__PURE__*/_react.default.cloneElement(item, _objectSpread(_objectSpread(_objectSpread({
+      key: index,
+      className: (0, _styleReact.classNames)([item.className, classes.item, classes[version], classes[`start_orientation_${orientation}`], classes[`end_orientation_${orientation}`], selected.includes(item.props.value) && classes.selected, border && classes.border]),
+      onClick: () => {
+        onSelect(item.props, !!item.props.start);
+
+        // Invoke items on click method
+        if ((0, _utils.is)('function', item.props.onClick)) item.props.onClick();
+      }
+    }, !refs.noCheckIcon.current && item.props.start && selected.includes(item.props.value) ? {
+      start: /*#__PURE__*/_react.default.createElement(IconDoneAnimated, {
+        simple: true,
+        in: true,
+        add: true
+      })
+    } : {}), !refs.noCheckIcon.current && !item.props.start && (selected.includes(item.props.value) || preSelected.includes(item.props.value)) ? {
+      start: /*#__PURE__*/_react.default.createElement(IconDoneAnimated, {
+        in: (item.props.start ? selected : preSelected).includes(item.props.value),
+        onExited: () => updateSelected(item.props),
+        add: true
+      })
+    } : {}), {}, {
+      version: ((_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.version) !== undefined ? item.props.version : version,
+      color: selected.includes(item.props.value) ? colorSelected || (((_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.color) !== undefined ? item.props.color : color) : ((_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.color) !== undefined ? item.props.color : color,
+      size: ((_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.size) !== undefined ? item.props.size : size,
+      tonal: ((_item$props5 = item.props) === null || _item$props5 === void 0 ? void 0 : _item$props5.tonal) !== undefined ? item.props.tonal : tonal,
+      elevation: false,
+      selected: item.props.selected !== undefined ? item.props.selected : selected.includes(item.props.value),
+      disabled: ((_item$props6 = item.props) === null || _item$props6 === void 0 ? void 0 : _item$props6.disabled) !== undefined ? item.props.disabled : disabled
+    }));
+  });
+  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    gap: 0,
+    direction: "row",
+    display: "inline-flex",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Buttons', theme) && ['onesy-Buttons-root', `onesy-Buttons-version-${version}`, `onesy-Buttons-size-${size}`, disabled && `onesy-Buttons-disabled`], className, classes.root, classes[`size_${size}`], chip && classes[`chip_size_${size}`], classes[`orientation_${orientation}`], classes[`orientation_${orientation}_size_${size}`], fullWidth && classes.fullWidth, elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, disabled && classes.disabled])
+  }, other), children);
 });
 Buttons.displayName = 'onesy-Buttons';
-exports.default = Buttons;
+var _default = exports.default = Buttons;