@onesy/ui-react 1.0.171 → 1.0.173

package/Drawing/Drawing.js

@@ -5,7 +5,6 @@ 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"));
@@ -31,11 +30,12 @@ var _Append = _interopRequireDefault(require("../Append"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _ClickListener = _interopRequireDefault(require("../ClickListener"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "version", "render", "updates", "actions", "exclude", "downloadName", "downloadType", "downloadQuality", "viewBox", "strokeColor", "strokeWidth", "svgRef", "valueDefault", "value", "onChange", "onMouseDown", "onClear", "onDownload", "IconClear", "IconDownload", "IconSize", "IconStrokeColor", "IconProps", "SizeProps", "AppendProps", "ToolbarProps", "ToolbarUpdatesProps", "ToolbarActionsProps", "ToggleButtonProps", "ToggleButtonsProps", "DividerProps", "SelectProps", "ListItemProps", "TooltipProps", "PaletteProps", "IconButtonProps", "ColorTextFieldProps", "Component", "className"],
-  _excluded2 = ["open", "label", "children"],
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "version", "render", "updates", "actions", "exclude", "downloadName", "downloadType", "downloadQuality", "viewBox", "strokeColor", "strokeWidth", "svgRef", "valueDefault", "value", "onChange", "onMouseDown", "onClear", "onDownload", "IconClear", "IconDownload", "IconSize", "IconStrokeColor", "IconProps", "SizeProps", "AppendProps", "ToolbarProps", "ToolbarUpdatesProps", "ToolbarActionsProps", "ToggleButtonProps", "ToggleButtonsProps", "DividerProps", "SelectProps", "ListItemProps", "TooltipProps", "PaletteProps", "IconButtonProps", "ColorTextFieldProps", "Component", "className"],
+  _excluded2 = ["ref", "open", "label", "children"],
   _excluded3 = ["open", "element", "anchorElement", "onClose", "children"],
   _excluded4 = ["color"],
-  _excluded5 = ["version", "onUpdate", "onClose"];
+  _excluded5 = ["ref", "version", "onUpdate", "onClose"];
 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 => ({
@@ -122,7 +122,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Drawing'
 });
-const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+const Drawing = props__ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10, _theme$elements11, _theme$elements12, _theme$elements13;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -143,6 +143,7 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const Fade = (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Fade) || _Fade.default;
   const ClickListener = (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.ClickListener) || _ClickListener.default;
   const {
+      ref,
       tonal = true,
       color = 'default',
       version = 'filled',
@@ -425,19 +426,22 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const IconProps = _objectSpread({
     size: 'small'
   }, IconProps_);
-  const WrapperToggleButton = /*#__PURE__*/_react.default.forwardRef((props_, ref_) => {
+  const WrapperToggleButton = props_ => {
     const {
+        ref: ref_,
         open: open_,
         label,
         children
       } = props_,
       other_ = (0, _objectWithoutProperties2.default)(props_, _excluded2);
-    return /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
       ref: ref_,
       open: open_ !== undefined ? open_ : undefined,
       name: label
-    }, TooltipProps), /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, other_), children.props)));
-  });
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, other_), children.props))
+    }));
+  };
   const WrapperAppend = props__0 => {
     const {
         open: open__0,
@@ -447,38 +451,44 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         children: children_0
       } = props__0,
       other__0 = (0, _objectWithoutProperties2.default)(props__0, _excluded3);
-    return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Append, _objectSpread(_objectSpread({
       open: open__0,
-      element: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Fade, {
-        in: open__0,
-        add: true
-      }, /*#__PURE__*/_react.default.cloneElement(element))),
+      element: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+          in: open__0,
+          add: true,
+          children: /*#__PURE__*/_react.default.cloneElement(element)
+        })
+      }),
       anchorElement: anchorElement,
       portal: true,
       alignment: "center",
       position: "bottom"
-    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(children_0, _objectSpread(_objectSpread({}, other__0), children_0.props)));
+    }, AppendProps), {}, {
+      children: /*#__PURE__*/_react.default.cloneElement(children_0, _objectSpread(_objectSpread({}, other__0), children_0.props))
+    }));
   };
   const PaletteItem = props__1 => {
     const {
         color: color_
       } = props__1,
       other__1 = (0, _objectWithoutProperties2.default)(props__1, _excluded4);
-    return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread({
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-palette-item'], classes.paletteItem]),
       style: {
         background: color_
       }
     }, other__1));
   };
-  const Palette = /*#__PURE__*/_react.default.forwardRef((props__2, ref__0) => {
+  const Palette = props__2 => {
     const {
+        ref: ref__0,
         version: version_,
         onUpdate,
         onClose: onClose_0
       } = props__2,
       other__2 = (0, _objectWithoutProperties2.default)(props__2, _excluded5);
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
       ref: ref__0,
       gap: 1,
       direction: "column",
@@ -486,129 +496,142 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-palette'], classes.palette])
-    }, other__2), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0.5
-    }, /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0.5,
-      direction: "row",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react.default.createElement(PaletteItem, {
-      color: "#000000",
-      onClick: () => {
-        onUpdate('#000000');
-        onClose_0();
-      }
-    }), /*#__PURE__*/_react.default.createElement(PaletteItem, {
-      color: "#ffffff",
-      onClick: () => {
-        onUpdate('#ffffff');
-        onClose_0();
-      }
-    })), Object.keys(_styleReact.colors).filter(item_0 => !['black', 'white'].includes(item_0)).map((item_1, index) => /*#__PURE__*/_react.default.createElement(Line, {
-      key: index,
-      gap: 0.5,
-      direction: "row",
-      style: {
-        width: '100%'
-      }
-    }, Object.keys(_styleReact.colors[item_1]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
-      key: index_,
-      color: _styleReact.colors[item_1][item_],
-      onClick: () => {
-        onUpdate(_styleReact.colors[item_1][item_]);
-        onClose_0();
-      }
-    }))))), /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0.5,
-      direction: "row",
-      align: "center",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react.default.createElement(ColorTextField, (0, _extends2.default)({
-      tonal: tonal,
-      color: color,
-      name: l('Custom color'),
-      version: "outlined",
-      size: "small",
-      value: refs.inputValues.current[version_],
-      onChange: valueNew_1 => updateInputValues(version_, valueNew_1)
-    }, ColorTextFieldProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-text-field-color'], ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className, classes.textFieldColor])
-    })), /*#__PURE__*/_react.default.createElement(Button, {
-      tonal: tonal,
-      color: "inherit",
-      version: "text",
-      size: "small",
-      onClick: () => {
-        onUpdate(refs.inputValues.current[version_]);
-        onClose_0();
-      }
-    }, l('Apply'))));
-  });
+    }, other__2), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 0.5,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0.5,
+          direction: "row",
+          style: {
+            width: '100%'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PaletteItem, {
+            color: "#000000",
+            onClick: () => {
+              onUpdate('#000000');
+              onClose_0();
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PaletteItem, {
+            color: "#ffffff",
+            onClick: () => {
+              onUpdate('#ffffff');
+              onClose_0();
+            }
+          })]
+        }), Object.keys(_styleReact.colors).filter(item_0 => !['black', 'white'].includes(item_0)).map((item_1, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          gap: 0.5,
+          direction: "row",
+          style: {
+            width: '100%'
+          },
+          children: Object.keys(_styleReact.colors[item_1]).map((item_, index_) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PaletteItem, {
+            color: _styleReact.colors[item_1][item_],
+            onClick: () => {
+              onUpdate(_styleReact.colors[item_1][item_]);
+              onClose_0();
+            }
+          }, index_))
+        }, index))]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 0.5,
+        direction: "row",
+        align: "center",
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColorTextField, _objectSpread(_objectSpread({
+          tonal: tonal,
+          color: color,
+          name: l('Custom color'),
+          version: "outlined",
+          size: "small",
+          value: refs.inputValues.current[version_],
+          onChange: valueNew_1 => updateInputValues(version_, valueNew_1)
+        }, ColorTextFieldProps), {}, {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-text-field-color'], ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className, classes.textFieldColor])
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+          tonal: tonal,
+          color: "inherit",
+          version: "text",
+          size: "small",
+          onClick: () => {
+            onUpdate(refs.inputValues.current[version_]);
+            onClose_0();
+          },
+          children: l('Apply')
+        })]
+      })]
+    }));
+  };
   const valueNew_ = ((0, _utils.is)('array', value) ? value : [value]).filter(Boolean);
   const valueNewActive = mouseDown && valueNew_[valueNew_.length - 1];
   const circleStrokeWidth = +(valueNewActive ? valueNewActive.strokeWidth : refs.inputValues.current.strokeWidth);
   const stroke_width = [{
-    label: /*#__PURE__*/_react.default.createElement(Line, {
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
       direction: "row",
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        width: 14,
-        height: 1,
-        background: theme.palette.text.default.primary
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b2"
-    }, "1")),
+      align: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 14,
+          height: 1,
+          background: theme.palette.text.default.primary
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "b2",
+        children: "1"
+      })]
+    }),
     value: 1
   }, {
-    label: /*#__PURE__*/_react.default.createElement(Line, {
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
       direction: "row",
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        width: 14,
-        height: 2,
-        background: theme.palette.text.default.primary
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b2"
-    }, "2")),
+      align: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 14,
+          height: 2,
+          background: theme.palette.text.default.primary
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "b2",
+        children: "2"
+      })]
+    }),
     value: 2
   }, {
-    label: /*#__PURE__*/_react.default.createElement(Line, {
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
       direction: "row",
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        width: 14,
-        height: 4,
-        background: theme.palette.text.default.primary
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b2"
-    }, "4")),
+      align: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 14,
+          height: 4,
+          background: theme.palette.text.default.primary
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "b2",
+        children: "4"
+      })]
+    }),
     value: 4
   }, {
-    label: /*#__PURE__*/_react.default.createElement(Line, {
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
       direction: "row",
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        width: 14,
-        height: 8,
-        background: theme.palette.text.default.primary
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b2"
-    }, "8")),
+      align: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 14,
+          height: 8,
+          background: theme.palette.text.default.primary
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "b2",
+        children: "8"
+      })]
+    }),
     value: 8
   }];
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     ref: item_2 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
@@ -620,195 +643,229 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     version: version,
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-root', updates && `onesy-Drawing-updates`, actions && `onesy-Drawing-actions`], className, classes.root])
-  }, other), (updates || actions_) && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    tonal: tonal,
-    color: color,
-    version: version,
-    gap: 0,
-    direction: "column",
-    align: "unset",
-    justify: "unset",
-    Component: Surface
-  }, ToolbarProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-toolbars'], ToolbarProps === null || ToolbarProps === void 0 ? void 0 : ToolbarProps.className, classes.toolbars])
-  }), updates_ && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 2,
-    direction: "row",
-    align: "center",
-    justify: "flex-start"
-  }, ToolbarUpdatesProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-toolbar'], ToolbarUpdatesProps === null || ToolbarUpdatesProps === void 0 ? void 0 : ToolbarUpdatesProps.className, classes.toolbar, classes.toolbar_updates])
-  }), includes('stroke-width') && /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "flex-start"
-  }, includes('stroke-width') && /*#__PURE__*/_react.default.createElement(Select, (0, _extends2.default)({
-    name: l('Stroke Width'),
-    valueDefault: stroke_width.find(item_3 => String(item_3.value).includes('1')).value,
-    value: inputValues['strokeWidth'],
-    onChange: valueNew_2 => updateInputValues('strokeWidth', valueNew_2)
-  }, SelectProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-select'], SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.className, classes.select]),
-    style: {
-      minWidth: '90px'
-    }
-  }), stroke_width.map(item_4 => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-    key: item_4.value,
-    primary: item_4.label,
-    value: item_4.value,
-    button: true
-  }, ListItemProps))))), includes('stroke-color') && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, includes('stroke-color') && /*#__PURE__*/_react.default.createElement(WrapperAppend, {
-    open: refs.open.current.strokeColor,
-    anchorElement: refs.elements.strokeColor.current,
-    element: /*#__PURE__*/_react.default.createElement(ClickListener, {
-      onClickOutside: () => updateOpen('strokeColor', false),
-      include: [refs.elements.strokeColor, refs.elements.strokeColor.current]
-    }, /*#__PURE__*/_react.default.createElement(Palette, (0, _extends2.default)({
-      onClose: () => updateOpen('strokeColor', false),
-      onUpdate: valueNew_3 => updateInputValues('strokeColor', valueNew_3)
-    }, PaletteProps)))
-  }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-    name: l('Stroke Color'),
-    open: refs.open.current.strokeColor ? false : undefined
-  }, (0, _utils.is)('function', render) ? render('stroke-color', ToggleButtonProps, refs.value.current) : /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-    ref: refs.elements.strokeColor
-  }, ToggleButtonProps, {
-    selected: refs.open.current.strokeColor,
-    onClick: () => updateOpen('strokeColor', !refs.open.current.strokeColor)
-  }), /*#__PURE__*/_react.default.createElement(IconStrokeColor, IconProps))))), includes('size') && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, includes('size') && /*#__PURE__*/_react.default.createElement(WrapperAppend, {
-    open: refs.open.current.size,
-    anchorElement: refs.elements.size.current,
-    element: /*#__PURE__*/_react.default.createElement(ClickListener, {
-      onClickOutside: () => updateOpen('size', false),
-      include: [refs.elements.size]
-    }, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      gap: 1,
-      tonal: tonal,
-      color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
-      Component: Surface,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-modal'], classes.modal])
-    }, SizeProps), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "row",
-      align: "center",
-      justify: "center"
-    }, /*#__PURE__*/_react.default.createElement(NumericTextField, {
-      name: l('Width'),
-      tonal: tonal,
-      color: color,
-      size: "small",
-      version: "outlined",
-      min: 1,
-      increment: false,
-      decrement: false,
-      value: refs.inputValues.current.widthInput,
-      onChange: valueNew_4 => updateInputValues('widthInput', !valueNew_4 ? 1 : valueNew_4)
-    }), "\xD7", /*#__PURE__*/_react.default.createElement(NumericTextField, {
-      name: l('Height'),
+  }, other), {}, {
+    children: [(updates || actions_) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
-      size: "small",
-      version: "outlined",
-      min: 1,
-      increment: false,
-      decrement: false,
-      value: refs.inputValues.current.heightInput,
-      onChange: valueNew_5 => updateInputValues('heightInput', !valueNew_5 ? 1 : valueNew_5)
-    })), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "row",
-      align: "center",
-      justify: "flex-end",
+      version: version,
+      gap: 0,
+      direction: "column",
+      align: "unset",
+      justify: "unset",
+      Component: Surface
+    }, ToolbarProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-toolbars'], ToolbarProps === null || ToolbarProps === void 0 ? void 0 : ToolbarProps.className, classes.toolbars]),
+      children: [updates_ && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+        gap: 2,
+        direction: "row",
+        align: "center",
+        justify: "flex-start"
+      }, ToolbarUpdatesProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-toolbar'], ToolbarUpdatesProps === null || ToolbarUpdatesProps === void 0 ? void 0 : ToolbarUpdatesProps.className, classes.toolbar, classes.toolbar_updates]),
+        children: [includes('stroke-width') && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          justify: "flex-start",
+          children: includes('stroke-width') && /*#__PURE__*/(0, _jsxRuntime.jsx)(Select, _objectSpread(_objectSpread({
+            name: l('Stroke Width'),
+            valueDefault: stroke_width.find(item_3 => String(item_3.value).includes('1')).value,
+            value: inputValues['strokeWidth'],
+            onChange: valueNew_2 => updateInputValues('strokeWidth', valueNew_2)
+          }, SelectProps), {}, {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-select'], SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.className, classes.select]),
+            style: {
+              minWidth: '90px'
+            },
+            children: stroke_width.map(item_4 => /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
+              primary: item_4.label,
+              value: item_4.value,
+              button: true
+            }, ListItemProps), item_4.value))
+          }))
+        }), includes('stroke-color') && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+          children: includes('stroke-color') && /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperAppend, {
+            open: refs.open.current.strokeColor,
+            anchorElement: refs.elements.strokeColor.current,
+            element: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
+              onClickOutside: () => updateOpen('strokeColor', false),
+              include: [refs.elements.strokeColor, refs.elements.strokeColor.current],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Palette, _objectSpread({
+                onClose: () => updateOpen('strokeColor', false),
+                onUpdate: valueNew_3 => updateInputValues('strokeColor', valueNew_3)
+              }, PaletteProps))
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+              name: l('Stroke Color'),
+              open: refs.open.current.strokeColor ? false : undefined,
+              children: (0, _utils.is)('function', render) ? render('stroke-color', ToggleButtonProps, refs.value.current) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+                ref: refs.elements.strokeColor
+              }, ToggleButtonProps), {}, {
+                selected: refs.open.current.strokeColor,
+                onClick: () => updateOpen('strokeColor', !refs.open.current.strokeColor),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconStrokeColor, _objectSpread({}, IconProps))
+              }))
+            })
+          })
+        })), includes('size') && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+          children: includes('size') && /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperAppend, {
+            open: refs.open.current.size,
+            anchorElement: refs.elements.size.current,
+            element: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
+              onClickOutside: () => updateOpen('size', false),
+              include: [refs.elements.size],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+                gap: 1,
+                tonal: tonal,
+                color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
+                Component: Surface,
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-modal'], classes.modal])
+              }, SizeProps), {}, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+                  gap: 1,
+                  direction: "row",
+                  align: "center",
+                  justify: "center",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
+                    name: l('Width'),
+                    tonal: tonal,
+                    color: color,
+                    size: "small",
+                    version: "outlined",
+                    min: 1,
+                    increment: false,
+                    decrement: false,
+                    value: refs.inputValues.current.widthInput,
+                    onChange: valueNew_4 => updateInputValues('widthInput', !valueNew_4 ? 1 : valueNew_4)
+                  }), "\xD7", /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
+                    name: l('Height'),
+                    tonal: tonal,
+                    color: color,
+                    size: "small",
+                    version: "outlined",
+                    min: 1,
+                    increment: false,
+                    decrement: false,
+                    value: refs.inputValues.current.heightInput,
+                    onChange: valueNew_5 => updateInputValues('heightInput', !valueNew_5 ? 1 : valueNew_5)
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+                  gap: 1,
+                  direction: "row",
+                  align: "center",
+                  justify: "flex-end",
+                  style: {
+                    width: '100%'
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+                    tonal: tonal,
+                    color: "inherit",
+                    version: "text",
+                    size: "small",
+                    onClick: () => {
+                      var _refs$inputValues$cur;
+                      const viewBox_ = (_refs$inputValues$cur = refs.inputValues.current.viewBox) === null || _refs$inputValues$cur === void 0 ? void 0 : _refs$inputValues$cur.split(' ');
+                      if (viewBox_) {
+                        viewBox_[2] = refs.inputValues.current.widthInput;
+                        viewBox_[3] = refs.inputValues.current.heightInput;
+                      }
+                      updateInputValues('viewBox', viewBox_.join(' '));
+                      updateInputValues('width', refs.inputValues.current.widthInput);
+                      updateInputValues('height', refs.inputValues.current.heightInput);
+                      updateOpen('size', false);
+                    },
+                    children: "Update"
+                  })
+                })]
+              }))
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+              name: l('Size'),
+              open: refs.open.current.size ? false : undefined,
+              children: (0, _utils.is)('function', render) ? render('size', ToggleButtonProps, refs.value.current) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+                ref: refs.elements.size
+              }, ToggleButtonProps), {}, {
+                selected: refs.open.current.size,
+                onClick: () => updateOpen('size', !refs.open.current.size),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSize, _objectSpread({}, IconProps))
+              }))
+            })
+          })
+        }))]
+      })), updates_ && actions_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({}, DividerProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes.divider_middle])
+      })), actions_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+        gap: 2,
+        direction: "row",
+        align: "center",
+        justify: "flex-start"
+      }, ToolbarActionsProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-toolbar'], ToolbarActionsProps === null || ToolbarActionsProps === void 0 ? void 0 : ToolbarActionsProps.className, classes.toolbar, classes.toolbar_actions]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          direction: "row",
+          align: "center",
+          justify: "space-between",
+          style: {
+            width: '100%'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+            gap: 2,
+            direction: "row",
+            align: "center",
+            justify: "flex-start",
+            children: includes('clear') && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+              children: includes('clear') && /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+                name: l('Clear'),
+                children: (0, _utils.is)('function', render) ? render('clear', ToggleButtonProps, refs.value.current) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+                  onClick: onClear,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconClear, _objectSpread({}, IconProps))
+                }))
+              })
+            }))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+            gap: 2,
+            direction: "row",
+            align: "center",
+            justify: "flex-start",
+            children: includes('download') && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+              children: includes('download') && /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+                name: l('Download'),
+                children: (0, _utils.is)('function', render) ? render('download', ToggleButtonProps, refs.value.current) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+                  loading: loading,
+                  onClick: onDownload,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDownload, _objectSpread({}, IconProps))
+                }))
+              })
+            }))
+          })]
+        })
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({}, DividerProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes.divider_end])
+      }))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      ref: item_5 => {
+        if (svgRef) svgRef.current = item_5;
+        refs.svg.current = item_5;
+      },
+      viewBox: refs.inputValues.current.viewBox,
+      onMouseDown: onMouseDown,
+      onTouchStart: onMouseDown,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-svg'], classes.svg]),
       style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react.default.createElement(Button, {
-      tonal: tonal,
-      color: "inherit",
-      version: "text",
-      size: "small",
-      onClick: () => {
-        var _refs$inputValues$cur;
-        const viewBox_ = (_refs$inputValues$cur = refs.inputValues.current.viewBox) === null || _refs$inputValues$cur === void 0 ? void 0 : _refs$inputValues$cur.split(' ');
-        if (viewBox_) {
-          viewBox_[2] = refs.inputValues.current.widthInput;
-          viewBox_[3] = refs.inputValues.current.heightInput;
-        }
-        updateInputValues('viewBox', viewBox_.join(' '));
-        updateInputValues('width', refs.inputValues.current.widthInput);
-        updateInputValues('height', refs.inputValues.current.heightInput);
-        updateOpen('size', false);
-      }
-    }, "Update"))))
-  }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-    name: l('Size'),
-    open: refs.open.current.size ? false : undefined
-  }, (0, _utils.is)('function', render) ? render('size', ToggleButtonProps, refs.value.current) : /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-    ref: refs.elements.size
-  }, ToggleButtonProps, {
-    selected: refs.open.current.size,
-    onClick: () => updateOpen('size', !refs.open.current.size)
-  }), /*#__PURE__*/_react.default.createElement(IconSize, IconProps)))))), updates_ && actions_ && /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({}, DividerProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes.divider_middle])
-  })), actions_ && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 2,
-    direction: "row",
-    align: "center",
-    justify: "flex-start"
-  }, ToolbarActionsProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-toolbar'], ToolbarActionsProps === null || ToolbarActionsProps === void 0 ? void 0 : ToolbarActionsProps.className, classes.toolbar, classes.toolbar_actions])
-  }), /*#__PURE__*/_react.default.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 2,
-    direction: "row",
-    align: "center",
-    justify: "flex-start"
-  }, includes('clear') && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, includes('clear') && /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-    name: l('Clear')
-  }, (0, _utils.is)('function', render) ? render('clear', ToggleButtonProps, refs.value.current) : /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-    onClick: onClear
-  }), /*#__PURE__*/_react.default.createElement(IconClear, IconProps))))), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 2,
-    direction: "row",
-    align: "center",
-    justify: "flex-start"
-  }, includes('download') && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, includes('download') && /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-    name: l('Download')
-  }, (0, _utils.is)('function', render) ? render('download', ToggleButtonProps, refs.value.current) : /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-    loading: loading,
-    onClick: onDownload
-  }), /*#__PURE__*/_react.default.createElement(IconDownload, IconProps))))))), /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({}, DividerProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes.divider_end])
-  }))), /*#__PURE__*/_react.default.createElement("svg", {
-    ref: item_5 => {
-      if (svgRef) svgRef.current = item_5;
-      refs.svg.current = item_5;
-    },
-    viewBox: refs.inputValues.current.viewBox,
-    onMouseDown: onMouseDown,
-    onTouchStart: onMouseDown,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-svg'], classes.svg]),
-    style: {
-      width: refs.inputValues.current.width,
-      height: refs.inputValues.current.height
-    }
-  }, valueNew_.map((item_6, index_0) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
-    key: index_0,
-    fill: "none"
-  }, item_6))), /*#__PURE__*/_react.default.createElement("circle", {
-    className: "onesy-Drawing-pointer",
-    cx: move === null || move === void 0 ? void 0 : move.x,
-    cy: move === null || move === void 0 ? void 0 : move.y,
-    r: circleStrokeWidth + 1,
-    fill: refs.inputValues.current.strokeColor
-  })));
-});
+        width: refs.inputValues.current.width,
+        height: refs.inputValues.current.height
+      },
+      children: [valueNew_.map((item_6, index_0) => /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread({
+        fill: "none"
+      }, item_6), index_0)), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        className: "onesy-Drawing-pointer",
+        cx: move === null || move === void 0 ? void 0 : move.x,
+        cy: move === null || move === void 0 ? void 0 : move.y,
+        r: circleStrokeWidth + 1,
+        fill: refs.inputValues.current.strokeColor
+      })]
+    })]
+  }));
+};
 Drawing.displayName = 'onesy-Drawing';
 var _default = exports.default = Drawing;