@onesy/ui-react 1.0.0

package/Space/Space.js

@@ -0,0 +1,1003 @@
+"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 IconMaterialCheckCircleW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCheckCircleW100"));
+const IconMaterialUngroupW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialUngroupW100"));
+const IconMaterialAdGroupW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialAdGroupW100"));
+const IconMaterialContentCopyW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialContentCopyW100"));
+const IconMaterialFlipToFrontW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFlipToFrontW100"));
+const IconMaterialFlipToBackW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFlipToBackW100"));
+const IconMaterialKeyboardArrowDownW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialKeyboardArrowDownW100"));
+const IconMaterialKeyboardArrowUpW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialKeyboardArrowUpW100"));
+const IconMaterialSettingsW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialSettingsW100"));
+const IconMaterialKeyboardArrowLeftW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialKeyboardArrowLeftW100"));
+const IconMaterialMenuOpenW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialMenuOpenW100"));
+const IconMaterialAddW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialAddW100"));
+const IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
+const Icon_1 = __importDefault(require("../Icon"));
+const Line_1 = __importDefault(require("../Line"));
+const Checkbox_1 = __importDefault(require("../Checkbox"));
+const ColorTextField_1 = __importDefault(require("../ColorTextField"));
+const Divider_1 = __importDefault(require("../Divider"));
+const Fab_1 = __importDefault(require("../Fab"));
+const Form_1 = __importDefault(require("../Form"));
+const FormRow_1 = __importDefault(require("../FormRow"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Label_1 = __importDefault(require("../Label"));
+const List_1 = __importDefault(require("../List"));
+const ListItem_1 = __importDefault(require("../ListItem"));
+const NavigationDrawer_1 = __importDefault(require("../NavigationDrawer"));
+const NumericTextField_1 = __importDefault(require("../NumericTextField"));
+const Select_1 = __importDefault(require("../Select"));
+const Slider_1 = __importDefault(require("../Slider"));
+const SmartTextField_1 = __importDefault(require("../SmartTextField"));
+const Switch_1 = __importDefault(require("../Switch"));
+const TextField_1 = __importDefault(require("../TextField"));
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const Type_1 = __importDefault(require("../Type"));
+const Surface_1 = __importDefault(require("../Surface"));
+const HTMLCanvas_1 = __importDefault(require("../HTMLCanvas"));
+const utils_2 = require("../utils");
+// items
+// furniture
+// table
+// oval
+const IconFurnitureTableOvalSeat4Version1 = react_1.default.forwardRef((props, ref) => {
+    const { color = '#F5EED6' } = props, other = __rest(props, ["color"]);
+    const styles = {
+        table: {
+            color
+        },
+        chair: {
+            fill: (0, utils_1.lighten)(color, 0.4)
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Icon_1.default, Object.assign({ ref: ref, name: 'FurnitureTableOvalSeat41', short_name: 'FurnitureTableOvalSeat41', viewBox: '0 0 321 321' }, other, { children: [(0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M288.424 160.654L288.224 167.754L287.634 174.834L286.644 181.874L285.274 188.844L283.514 195.724L281.034 203.464L278.864 209.144L275.984 215.644L272.754 221.974L269.174 228.104L265.254 234.034L261.014 239.734L256.464 245.194L251.614 250.394L246.484 255.314L241.094 259.934L235.454 264.254L229.574 268.254L223.494 271.924L217.214 275.244L210.754 278.214L203.434 281.074L197.394 283.044L190.544 284.904L183.584 286.374L176.564 287.454L169.494 288.144L162.394 288.444L155.294 288.344L148.204 287.854L141.154 286.964L134.164 285.684L127.254 284.024L117.804 281.074L107.234 276.774L100.864 273.624L94.6744 270.124L88.6944 266.294L82.9344 262.134L77.4144 257.664L72.1544 252.884L67.1644 247.824L62.4644 242.494L58.0644 236.914L53.9844 231.104L50.2344 225.064L46.8244 218.834L43.7644 212.414L40.1944 203.464L36.7944 192.294L35.2244 185.364L34.0444 178.354L33.2544 171.294L32.8644 164.204V157.094L33.2544 150.004L34.0444 142.944L35.2244 135.934L36.7944 129.004L40.1944 117.834L43.7644 108.884L46.8244 102.474L50.2344 96.2341L53.9844 90.2041L58.0644 84.3841L62.4644 78.8042L67.1644 73.4742L72.1544 68.4141L77.4144 63.6441L82.9344 59.1641L88.6944 55.0042L94.6744 51.1741L100.864 47.6741L107.234 44.5341L117.804 40.2341L127.254 37.2741L134.164 35.6142L141.154 34.3342L148.204 33.4541L155.294 32.9541L162.394 32.8541L169.494 33.1541L176.564 33.8441L183.584 34.9241L190.544 36.3941L197.394 38.2542L203.434 40.2341L210.754 43.0941L217.214 46.0542L223.494 49.3841L229.574 53.0441L235.454 57.0441L241.094 61.3642L246.484 65.9941L251.614 70.9141L256.464 76.1041L261.014 81.5641L265.254 87.2641L269.174 93.1942L272.754 99.3342L275.984 105.654L278.864 112.154L281.034 117.834L283.514 125.574L285.274 132.454L286.644 139.434L287.634 146.464L288.224 153.544L288.424 160.654Z" }, styles.table)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M100.044 18.9641C88.8856 10.6124 75.0903 6.56285 61.1878 7.55784C47.2853 8.55282 34.2073 14.5257 24.3517 24.3814C14.496 34.2371 8.52305 47.3151 7.52807 61.2176C6.53308 75.1201 10.5827 88.9154 18.9344 100.074L13.8144 103.904C4.54858 91.5146 0.057821 76.201 1.16506 60.7696C2.27229 45.3382 8.90336 30.8226 19.8431 19.8828C30.7828 8.94313 45.2984 2.31206 60.7298 1.20482C76.1613 0.0975854 91.4749 4.58834 103.864 13.8541L100.044 18.9641Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M302.304 100.074C310.656 88.9154 314.706 75.1201 313.711 61.2176C312.716 47.3151 306.743 34.2371 296.887 24.3814C287.031 14.5257 273.953 8.55282 260.051 7.55784C246.148 6.56285 232.353 10.6124 221.194 18.9641L217.364 13.8441C229.754 4.56366 245.074 0.0613957 260.514 1.16328C275.954 2.26517 290.48 8.89732 301.425 19.8431C312.371 30.7888 319.003 45.3142 320.105 60.7546C321.207 76.195 316.705 91.515 307.424 103.904L302.304 100.074Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M18.9344 221.224C10.5827 232.383 6.53308 246.178 7.52807 260.081C8.52305 273.983 14.496 287.061 24.3517 296.917C34.2073 306.773 47.2853 312.745 61.1878 313.74C75.0903 314.735 88.8856 310.686 100.044 302.334L103.864 307.454C91.4749 316.72 76.1613 321.211 60.7298 320.103C45.2984 318.996 30.7828 312.365 19.8431 301.425C8.90336 290.486 2.27229 275.97 1.16506 260.539C0.057821 245.107 4.54858 229.794 13.8144 217.404L18.9344 221.224Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M221.194 302.334C232.353 310.686 246.148 314.735 260.051 313.74C273.953 312.745 287.031 306.773 296.887 296.917C306.743 287.061 312.716 273.983 313.711 260.081C314.706 246.178 310.656 232.383 302.304 221.224L307.424 217.404C316.697 229.794 321.192 245.111 320.087 260.547C318.982 275.983 312.349 290.503 301.406 301.445C290.463 312.387 275.942 319.018 260.506 320.122C245.07 321.225 229.753 316.728 217.364 307.454L221.194 302.334Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M281.034 203.464L278.864 209.144L275.984 215.644L272.754 221.974L269.174 228.104L265.254 234.034L261.014 239.734L256.464 245.194L251.614 250.394L246.484 255.314L241.094 259.934L235.454 264.254L229.574 268.254L223.494 271.924L217.214 275.244L210.754 278.214L203.434 281.074L225.024 297.214C234.953 304.637 247.223 308.234 259.588 307.346C271.953 306.458 283.583 301.144 292.349 292.379C301.115 283.613 306.428 271.982 307.316 259.618C308.204 247.253 304.607 234.983 297.184 225.054L281.034 203.464Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M203.434 40.2341L210.754 43.0941L217.214 46.0542L223.494 49.3841L229.574 53.0441L235.454 57.0441L241.094 61.3642L246.484 65.9941L251.614 70.9141L256.464 76.1041L261.014 81.5641L265.254 87.2641L269.174 93.1942L272.754 99.3342L275.984 105.654L278.864 112.154L281.034 117.834L297.184 96.2441C304.607 86.3158 308.204 74.0452 307.316 61.6805C306.428 49.3159 301.115 37.6853 292.349 28.9197C283.583 20.154 271.953 14.8404 259.588 13.9523C247.223 13.0642 234.953 16.6612 225.024 24.0842L203.434 40.2341Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M117.804 281.074L107.234 276.774L100.864 273.624L94.6744 270.124L88.6944 266.294L82.9344 262.134L77.4144 257.664L72.1544 252.884L67.1644 247.824L62.4644 242.494L58.0644 236.914L53.9844 231.104L50.2344 225.064L46.8244 218.834L43.7644 212.414L40.1944 203.464L24.0544 225.054C16.6314 234.983 13.0345 247.253 13.9225 259.618C14.8106 271.982 20.1243 283.613 28.8899 292.379C37.6555 301.144 49.2862 306.458 61.6508 307.346C74.0154 308.234 86.286 304.637 96.2144 297.214L117.804 281.074Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M40.1944 117.834L43.7644 108.884L46.8244 102.474L50.2344 96.2341L53.9844 90.2041L58.0644 84.3841L62.4644 78.8042L67.1644 73.4742L72.1544 68.4141L77.4144 63.6441L82.9344 59.1641L88.6944 55.0042L94.6744 51.1741L100.864 47.6741L107.234 44.5341L117.804 40.2341L96.2144 24.0841C86.286 16.6612 74.0154 13.0642 61.6508 13.9523C49.2862 14.8404 37.6555 20.154 28.8899 28.9197C20.1243 37.6853 14.8106 49.3159 13.9225 61.6805C13.0345 74.0452 16.6314 86.3158 24.0544 96.2441L40.1944 117.834Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", { d: "M281.034 203.464L283.514 195.724L285.274 188.844L286.644 181.874L287.634 174.834L288.224 167.754L288.424 160.654L288.224 153.544L287.634 146.464L286.644 139.434L285.274 132.454L283.514 125.574L281.034 117.834M281.034 203.464L278.864 209.144L275.984 215.644L272.754 221.974L269.174 228.104L265.254 234.034L261.014 239.734L256.464 245.194L251.614 250.394L246.484 255.314L241.094 259.934L235.454 264.254L229.574 268.254L223.494 271.924L217.214 275.244L210.754 278.214L203.434 281.074M281.034 203.464L297.184 225.054C304.607 234.983 308.204 247.253 307.316 259.618C306.428 271.982 301.115 283.613 292.349 292.379C283.583 301.144 271.953 306.458 259.588 307.346C247.223 308.234 234.953 304.637 225.024 297.214L203.434 281.074M203.434 281.074L197.394 283.044L190.544 284.904L183.584 286.374L176.564 287.454L169.494 288.144L162.394 288.444L155.294 288.344L148.204 287.854L141.154 286.964L134.164 285.684L127.254 284.024L117.804 281.074M117.804 281.074L107.234 276.774L100.864 273.624L94.6744 270.124L88.6944 266.294L82.9344 262.134L77.4144 257.664L72.1544 252.884L67.1644 247.824L62.4644 242.494L58.0644 236.914L53.9844 231.104L50.2344 225.064L46.8244 218.834L43.7644 212.414L40.1944 203.464M117.804 281.074L96.2144 297.214C86.286 304.637 74.0154 308.234 61.6508 307.346C49.2862 306.458 37.6555 301.144 28.8899 292.379C20.1243 283.613 14.8106 271.982 13.9225 259.618C13.0345 247.253 16.6314 234.983 24.0544 225.054L40.1944 203.464M40.1944 203.464L36.7944 192.294L35.2244 185.364L34.0444 178.354L33.2544 171.294L32.8644 164.204V157.094L33.2544 150.004L34.0444 142.944L35.2244 135.934L36.7944 129.004L40.1944 117.834M40.1944 117.834L43.7644 108.884L46.8244 102.474L50.2344 96.2341L53.9844 90.2041L58.0644 84.3841L62.4644 78.8042L67.1644 73.4742L72.1544 68.4141L77.4144 63.6441L82.9344 59.1641L88.6944 55.0042L94.6744 51.1741L100.864 47.6741L107.234 44.5341L117.804 40.2341M40.1944 117.834L24.0544 96.2441C16.6314 86.3158 13.0345 74.0452 13.9225 61.6805C14.8106 49.3159 20.1243 37.6853 28.8899 28.9197C37.6555 20.154 49.2862 14.8404 61.6508 13.9523C74.0154 13.0642 86.286 16.6612 96.2144 24.0841M117.804 40.2341L127.254 37.2741L134.164 35.6142L141.154 34.3342L148.204 33.4541L155.294 32.9541L162.394 32.8541L169.494 33.1541L176.564 33.8441L183.584 34.9241L190.544 36.3941L197.394 38.2542L203.434 40.2341M117.804 40.2341C109.373 33.9272 104.646 30.3911 96.2144 24.0841M117.804 40.2341L96.2144 24.0841M203.434 40.2341L210.754 43.0941L217.214 46.0542L223.494 49.3841L229.574 53.0441L235.454 57.0441L241.094 61.3642L246.484 65.9941L251.614 70.9141L256.464 76.1041L261.014 81.5641L265.254 87.2641L269.174 93.1942L272.754 99.3342L275.984 105.654L278.864 112.154L281.034 117.834M203.434 40.2341L225.024 24.0842C234.953 16.6612 247.223 13.0642 259.588 13.9523C271.953 14.8404 283.583 20.154 292.349 28.9197C301.115 37.6853 306.428 49.3159 307.316 61.6805C308.204 74.0452 304.607 86.3158 297.184 96.2441L281.034 117.834M302.304 100.074C310.656 88.9154 314.706 75.1201 313.711 61.2176C312.716 47.3151 306.743 34.2371 296.887 24.3814C287.031 14.5257 273.953 8.55282 260.051 7.55784C246.148 6.56285 232.353 10.6124 221.194 18.9641L217.364 13.8441C229.754 4.56366 245.074 0.0613957 260.514 1.16328C275.954 2.26517 290.48 8.89732 301.425 19.8431C312.371 30.7888 319.003 45.3142 320.105 60.7546C321.207 76.195 316.705 91.515 307.424 103.904L302.304 100.074ZM100.044 18.9641C88.8856 10.6124 75.0903 6.56285 61.1878 7.55784C47.2853 8.55282 34.2073 14.5257 24.3517 24.3814C14.496 34.2371 8.52305 47.3151 7.52807 61.2176C6.53308 75.1201 10.5827 88.9154 18.9344 100.074L13.8144 103.904C4.54858 91.5146 0.057821 76.201 1.16506 60.7696C2.27229 45.3382 8.90336 30.8226 19.8431 19.8828C30.7828 8.94313 45.2984 2.31206 60.7298 1.20482C76.1613 0.0975854 91.4749 4.58834 103.864 13.8541L100.044 18.9641ZM221.194 302.334C232.353 310.686 246.148 314.735 260.051 313.74C273.953 312.745 287.031 306.773 296.887 296.917C306.743 287.061 312.716 273.983 313.711 260.081C314.706 246.178 310.656 232.383 302.304 221.224L307.424 217.404C316.697 229.794 321.192 245.111 320.087 260.547C318.982 275.983 312.349 290.503 301.406 301.445C290.463 312.387 275.942 319.018 260.506 320.122C245.07 321.225 229.753 316.728 217.364 307.454L221.194 302.334ZM18.9344 221.224C10.5827 232.383 6.53308 246.178 7.52807 260.081C8.52305 273.983 14.496 287.061 24.3517 296.917C34.2073 306.773 47.2853 312.745 61.1878 313.74C75.0903 314.735 88.8856 310.686 100.044 302.334L103.864 307.454C91.4749 316.72 76.1613 321.211 60.7298 320.103C45.2984 318.996 30.7828 312.365 19.8431 301.425C8.90336 290.486 2.27229 275.97 1.16506 260.539C0.057821 245.107 4.54858 229.794 13.8144 217.404L18.9344 221.224Z", fill: "none", stroke: "black" })] })));
+});
+// rectangle
+const IconFurnitureTableRectangleSeat6Version1 = react_1.default.forwardRef((props, ref) => {
+    const { color = '#F5EED6' } = props, other = __rest(props, ["color"]);
+    const styles = {
+        table: {
+            color
+        },
+        chair: {
+            fill: (0, utils_1.lighten)(color, 0.4)
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Icon_1.default, Object.assign({ ref: ref, name: 'FurnitureTableRectangleSeat6Version1', short_name: 'FurnitureTableRectangleSeat6Version1', viewBox: '0 0 402 287' }, other, { children: [(0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M91.598 62.5698H62.5364V107.031V179.709V224.17H91.598H164.247H237.753H310.402H339.464V179.709V107.031V62.5609L237.753 62.5641L164.247 62.5665L91.598 62.5698Z" }, styles.table)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M237.111 4.85146L242.877 16.3969H305.269L311.044 4.85146H237.111Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M237.111 1V4.85146H311.044V1H237.111Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M164.889 4.85146V1H90.9563V4.85146H164.889Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M159.114 16.3969L164.889 4.85146H90.9563L96.7223 16.3969H159.114Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M385.618 112.157L339.464 107.031V179.709L385.618 174.574V112.157Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M397.15 106.389L385.618 112.157V174.574L397.15 180.342V106.389Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M401 106.389H397.15V180.342H401V106.389Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M16.3819 112.157L4.84101 106.389V180.351L16.3819 174.574V112.157Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M4.84101 106.389H1V180.351H4.84101V106.389Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M62.5364 107.031L16.3819 112.157V174.574L62.5364 179.709V107.031Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M159.123 270.343L164.247 224.17H91.598L96.7223 270.343H159.123Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M164.889 281.88L159.123 270.343H96.7223L90.9563 281.88H164.889Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M164.889 285.731V281.88H90.9563V285.731H164.889Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M237.753 224.17L242.877 270.343H305.269L310.402 224.17H237.753Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M242.877 270.343L237.111 281.88H311.044L305.269 270.343H242.877Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M237.111 281.88V285.731H311.044V281.88H237.111Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M96.7223 16.3969L91.598 62.5698L164.247 62.5665L159.114 16.3969H96.7223Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", Object.assign({ d: "M242.877 16.3913L237.753 62.5641L310.402 62.5609L305.269 16.3913H242.877Z" }, styles.chair)), (0, jsx_runtime_1.jsx)("path", { d: "M339.464 107.031L385.618 112.157M339.464 107.031V179.709M339.464 107.031V62.5609M385.618 112.157L397.15 106.389M385.618 112.157V174.574M397.15 106.389H401V180.342H397.15M397.15 106.389V180.342M397.15 180.342L385.618 174.574M385.618 174.574L339.464 179.709M339.464 179.709V224.17M164.247 224.17L159.123 270.343M164.247 224.17H91.598M164.247 224.17H237.753M159.123 270.343L164.889 281.88M159.123 270.343H96.7223M164.889 281.88V285.731H90.9563V281.88M164.889 281.88H90.9563M90.9563 281.88L96.7223 270.343M96.7223 270.343L91.598 224.17M91.598 224.17H62.5364M62.5364 107.031L16.3819 112.157M62.5364 107.031V62.5698M62.5364 107.031V179.709M16.3819 112.157L4.84101 106.389M16.3819 112.157V174.574M4.84101 106.389H1V180.351H4.84101M4.84101 106.389V180.351M4.84101 180.351L16.3819 174.574M16.3819 174.574L62.5364 179.709M62.5364 179.709V224.17M164.247 62.5698L164.247 62.5665M159.114 16.3969L164.889 4.85146M159.114 16.3969H96.7223M159.114 16.3969L164.247 62.5665M164.889 4.85146V1H90.9563V4.85146M164.889 4.85146H90.9563M90.9563 4.85146L96.7223 16.3969M96.7223 16.3969L91.598 62.5698M91.598 62.5698H62.5364M91.598 62.5698L164.247 62.5665M237.753 224.17L242.877 270.343M237.753 224.17H310.402M242.877 270.343L237.111 281.88M242.877 270.343H305.269M237.111 281.88V285.731H311.044V281.88M237.111 281.88H311.044M311.044 281.88L305.269 270.343M305.269 270.343L310.402 224.17M310.402 224.17H339.464M62.5364 62.5698V224.17M62.5364 62.5698L164.247 62.5665M339.464 62.5609V224.17M339.464 62.5609L237.753 62.5641M339.464 224.17H62.5364M237.753 62.5698L237.753 62.5641M242.877 16.3969L237.111 4.85146M242.877 16.3969H305.269M242.877 16.3969L237.753 62.5641M237.111 4.85146V1H311.044V4.85146M237.111 4.85146H311.044M311.044 4.85146L305.269 16.3969M305.269 16.3969L310.402 62.5609M310.402 62.5609L237.753 62.5641M310.402 62.5609L305.269 16.3913H242.877L237.753 62.5641M237.753 62.5641L164.247 62.5665", fill: "none", stroke: "black" })] })));
+});
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        border: '1px solid #ccc'
+    },
+    actionsStart: {
+        position: 'absolute',
+        top: '12px',
+        left: '12px',
+        zIndex: 14
+    },
+    actionsEnd: {
+        position: 'absolute',
+        bottom: '12px',
+        right: '12px',
+        zIndex: 14
+    },
+    item: {
+        position: 'absolute',
+        width: 'auto'
+    },
+    itemSelected: {
+        outline: `3px solid ${theme.methods.palette.color.alpha(theme.palette.color.info.main, 0.7)}`
+    },
+    metaName: {
+        position: 'absolute',
+        top: '-26px',
+        background: theme.palette.background.default.primary,
+        padding: '0px 4px',
+        borderRadius: 2,
+        transformOrigin: 'bottom left',
+        whiteSpace: 'nowrap',
+        cursor: 'default',
+        userSelect: 'none'
+    },
+    meteSize: {
+        position: 'absolute',
+        bottom: '-26px',
+        background: theme.palette.background.default.primary,
+        padding: '0px 4px',
+        borderRadius: 2,
+        transformOrigin: 'top left',
+        whiteSpace: 'nowrap',
+        cursor: 'default',
+        userSelect: 'none'
+    },
+    navigation: {
+        width: '100vw',
+        maxWidth: 270
+    },
+    navigationHeader: {
+        padding: '8px 16px'
+    },
+    navigationHeaderItemOpen: {
+        padding: '8px 8px'
+    },
+    menu: {
+        height: '100vw',
+        maxHeight: 340
+    },
+    menuHeader: {
+        padding: '8px 16px'
+    },
+    menuMain: {
+        padding: '0px 16px'
+    },
+    list: {
+        height: 0,
+        flex: '1 1 auto',
+        overflow: 'hidden auto'
+    },
+    mainSidebar: {
+        padding: '0px 16px',
+        flex: '1 1 auto',
+        height: 0,
+        overflow: 'hidden auto',
+        userSelect: 'none'
+    },
+    navigationDrawerNavigation: {
+        '& .onesy-Modal-surface': {
+            boxShadow: '4px 0px 24px rgba(0, 0, 0, 0.04)'
+        }
+    },
+    navigationDrawerMenu: {
+        '& .onesy-Modal-surface': {
+            boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.04)'
+        }
+    },
+    main: {
+        minHeight: 154,
+        overflowY: 'hidden',
+        overflowX: 'auto'
+    },
+    element: {
+        width: 114,
+        overflow: 'hidden',
+        cursor: 'pointer',
+        userSelect: 'none',
+        transition: theme.methods.transitions.make('transform'),
+        '& > .onesy-thumb': {
+            boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.07)',
+            borderRadius: 24,
+            width: 114,
+            height: 'auto'
+        },
+        '& > p': {},
+        '&:active': {
+            transform: 'scale(0.94)'
+        }
+    },
+    elementImage: {
+        width: 114,
+        height: 114
+    },
+    accordion: {
+        '&.onesy-Accordion-root': {
+            '& .onesy-Accordion-wrapper-header': {
+                paddingInline: 16
+            },
+            '& .onesy-Accordion-header': {
+                '& .onesy-Type-root': Object.assign({}, theme.typography.values.l2)
+            },
+            '& .onesy-Accordion-main': {
+                '& > *': {
+                    margin: 0,
+                    gap: 0,
+                    paddingInlineStart: 16
+                }
+            }
+        }
+    },
+    select: {
+        '& .onesy-Select-input': {
+            borderRadius: 0
+        }
+    },
+    disabled: {
+        pointerEvents: 'none',
+        opacity: 0.54,
+        cursor: 'default'
+    }
+}), { name: 'onesy-Space' });
+// info
+// 1. icons (freecads.com)
+const Space = react_1.default.forwardRef((props_, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    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.onesySpace) === 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 Checkbox = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Checkbox) || Checkbox_1.default; }, [theme]);
+    const ColorTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ColorTextField) || ColorTextField_1.default; }, [theme]);
+    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
+    const Fab = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fab) || Fab_1.default; }, [theme]);
+    const Form = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Form) || Form_1.default; }, [theme]);
+    const FormRow = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.FormRow) || FormRow_1.default; }, [theme]);
+    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
+    const Label = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Label) || Label_1.default; }, [theme]);
+    const List = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.List) || List_1.default; }, [theme]);
+    const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
+    const NavigationDrawer = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.NavigationDrawer) || NavigationDrawer_1.default; }, [theme]);
+    const NumericTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.NumericTextField) || NumericTextField_1.default; }, [theme]);
+    const Select = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Select) || Select_1.default; }, [theme]);
+    const Slider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slider) || Slider_1.default; }, [theme]);
+    const SmartTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SmartTextField) || SmartTextField_1.default; }, [theme]);
+    const Switch = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Switch) || Switch_1.default; }, [theme]);
+    const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
+    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_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 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 HTMLCanvas = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.HTMLCanvas) || HTMLCanvas_1.default; }, [theme]);
+    const { size = 'regular', minSize = 0.0001, maxSize = 240000, unitDefault = 'px', floors = [
+        { name: 'Floor 1', value: 'floor-1', url: '/assets/svg/space/floor/floor-1.svg' },
+        { name: 'Floor 2', value: 'floor-2', url: '/assets/svg/space/floor/floor-2.svg' },
+        { name: 'Floor 3', value: 'floor-3', url: '/assets/svg/space/floor/floor-3.svg' },
+        { name: 'Floor 4', value: 'floor-4', url: '/assets/svg/space/floor/floor-4.svg' }
+    ], defaults = {
+        color: {
+            table: '#F5EED6'
+        }
+    }, disabled, IconAdd = IconMaterialAddW100_1.default, IconMenu = IconMaterialMenuOpenW100_1.default, IconCloseNavigation = IconMaterialCloseW100_1.default, IconCloseMenu = IconMaterialKeyboardArrowDownW100_1.default, IconArrowBack = IconMaterialKeyboardArrowLeftW100_1.default, IconSettings = IconMaterialSettingsW100_1.default, IconArrowUp = IconMaterialKeyboardArrowUpW100_1.default, IconArrowDown = IconMaterialKeyboardArrowDownW100_1.default, IconToFront = IconMaterialFlipToFrontW100_1.default, IconToBack = IconMaterialFlipToBackW100_1.default, IconMakeCopy = IconMaterialContentCopyW100_1.default, IconGroup = IconMaterialAdGroupW100_1.default, IconUngroup = IconMaterialUngroupW100_1.default, IconGroupSelect = IconMaterialCheckCircleW100_1.default, Component = Line, className } = props, other = __rest(props, ["size", "minSize", "maxSize", "unitDefault", "floors", "defaults", "disabled", "IconAdd", "IconMenu", "IconCloseNavigation", "IconCloseMenu", "IconArrowBack", "IconSettings", "IconArrowUp", "IconArrowDown", "IconToFront", "IconToBack", "IconMakeCopy", "IconGroup", "IconUngroup", "IconGroupSelect", "Component", "className"]);
+    const { classes } = useStyle();
+    const [openNavigation, setOpenNavigation] = react_1.default.useState(false);
+    const [openMenu, setOpenMenu] = react_1.default.useState(false);
+    const [items, setItems] = react_1.default.useState([]);
+    const [elementSearch, setElementSearch] = react_1.default.useState('');
+    const [selected, setSelected] = react_1.default.useState();
+    const [selectedGroup, setSelectedGroup] = react_1.default.useState();
+    const [positions, setPositions] = react_1.default.useState({});
+    const [itemOpen, setItemOpen] = react_1.default.useState();
+    const [keepAspectRatio, setKeepAspectRatio] = react_1.default.useState(true);
+    const [openOptions, setOpenOptions] = react_1.default.useState(false);
+    const [unit, setUnit] = react_1.default.useState(unitDefault || 'px');
+    const [guidelines, setGuidelines] = react_1.default.useState('dots');
+    const [itemsSelected, setItemsSelected] = react_1.default.useState({});
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        container: react_1.default.useRef(undefined),
+        items: react_1.default.useRef(items),
+        unit: react_1.default.useRef(unit),
+        itemOpen: react_1.default.useRef(itemOpen),
+        itemsSelected: react_1.default.useRef(itemsSelected),
+        positions: react_1.default.useRef(positions),
+        selected: react_1.default.useRef(selected),
+        selectedGroup: react_1.default.useRef(selectedGroup),
+        mouseDown: react_1.default.useRef(undefined),
+        keyDown: react_1.default.useRef(undefined),
+        previousMouseEvent: react_1.default.useRef(undefined),
+        methods: react_1.default.useRef({}),
+        keepAspectRatio: react_1.default.useRef(keepAspectRatio),
+        units: react_1.default.useRef({
+            px: 1,
+            m: 40
+        }),
+        groupCounter: react_1.default.useRef(1),
+        minSize: react_1.default.useRef(minSize),
+        maxSize: react_1.default.useRef(maxSize),
+        floors: react_1.default.useRef(floors),
+        defaults: react_1.default.useRef(defaults),
+        disabled: react_1.default.useRef(disabled)
+    };
+    refs.items.current = items;
+    refs.unit.current = unit;
+    refs.itemOpen.current = itemOpen;
+    refs.itemsSelected.current = itemsSelected;
+    refs.positions.current = positions;
+    refs.selected.current = selected;
+    refs.selectedGroup.current = selectedGroup;
+    refs.keepAspectRatio.current = keepAspectRatio;
+    refs.minSize.current = minSize;
+    refs.maxSize.current = maxSize;
+    refs.floors.current = floors;
+    refs.defaults.current = defaults;
+    refs.disabled.current = disabled;
+    const onItemsResolve = react_1.default.useCallback((items_) => {
+        // sort
+        items_.sort((a, b) => a.order - b.order);
+        return items_;
+    }, []);
+    const onGroupSelect = react_1.default.useCallback((item, event) => {
+        event.stopPropagation();
+        setSelectedGroup(item === refs.selectedGroup.current ? null : item);
+        // reset
+        setSelected(null);
+    }, []);
+    const onItemSelect = react_1.default.useCallback((item) => {
+        const itemsSelectedNew = Object.assign({}, refs.itemsSelected.current);
+        const exists = itemsSelectedNew[item.id];
+        if (exists)
+            delete itemsSelectedNew[item.id];
+        else
+            itemsSelectedNew[item.id] = item;
+        setItemsSelected(itemsSelectedNew);
+    }, []);
+    const onItemsGroup = react_1.default.useCallback(() => {
+        let itemsNew = [...refs.items.current];
+        const group = `Group ${refs.groupCounter.current++}`;
+        let minOrder = Number.MAX_SAFE_INTEGER;
+        const itemsGroup = [];
+        const ordersGroup = [];
+        itemsNew.forEach(item => {
+            if (refs.itemsSelected.current[item.id]) {
+                item.group = group;
+                itemsGroup.push(item);
+                ordersGroup.push(item.order);
+                minOrder = Math.min(minOrder, item.order);
+            }
+        });
+        const start = itemsNew.filter((item_) => item_.order < minOrder);
+        const end = itemsNew.filter((item_) => item_.order > minOrder && !ordersGroup.includes(item_.order));
+        itemsNew = [...start, ...itemsGroup, ...end].map((item_, index) => {
+            item_.order = index + 1;
+            return item_;
+        });
+        setItems(onItemsResolve(itemsNew));
+        setItemsSelected([]);
+    }, []);
+    const onItemsUngroup = react_1.default.useCallback((group) => {
+        const itemsNew = [...refs.items.current];
+        itemsNew.forEach(item => {
+            if (item.group === group)
+                delete item.group;
+        });
+        setItems(itemsNew);
+    }, []);
+    const onItemMakeCopy = react_1.default.useCallback((item = refs.itemOpen.current) => {
+        const itemNew = Object.assign(Object.assign({}, (0, utils_1.copy)(item)), { id: (0, utils_1.getID)(), name: `${item.name} copy` });
+        itemNew.props['data-element'] = true;
+        itemNew.props['data-id'] = itemNew.id;
+        itemNew.props['data-name'] = itemNew.name;
+        itemNew.props.style.left -= itemNew.props.style.width + 40;
+        const itemsNew = [...refs.items.current];
+        itemsNew.push(itemNew);
+        setItems(onItemsResolve(itemsNew));
+    }, []);
+    const onItemMove = react_1.default.useCallback((item, orderPrevious, orderNew, event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        const itemsPrevious = refs.items.current;
+        let itemsNew = [];
+        let itemNew = itemsPrevious.find((item_) => item_.order === orderNew);
+        const up = orderNew < orderPrevious;
+        if (itemNew.group || item.isGroup) {
+            const partTo = itemNew.group ? itemsPrevious.filter((item_) => item_.group === itemNew.group) : [itemNew];
+            const partFrom = item.isGroup ? itemsPrevious.filter((item_) => item_.group === item.group) : [item];
+            if (up)
+                itemsNew.push(...partFrom, ...partTo);
+            else
+                itemsNew.push(...partTo, ...partFrom);
+            // start, end order
+            const orderSmallest = Math.min(...itemsNew.map((item_) => item_.order));
+            const orderLargest = Math.max(...itemsNew.map((item_) => item_.order));
+            const start = itemsPrevious.filter((item_) => item_.order < orderSmallest);
+            const end = itemsPrevious.filter((item_) => item_.order > orderLargest);
+            itemsNew = [...start, ...itemsNew, ...end].map((item_, index) => {
+                item_.order = index + 1;
+                return item_;
+            });
+        }
+        else {
+            let itemPrevious;
+            itemsPrevious.forEach((item_) => {
+                if (item_.order === orderPrevious)
+                    itemPrevious = item_;
+                if (item_.order === orderNew)
+                    itemNew = item_;
+            });
+            itemPrevious.order = orderNew;
+            itemNew.order = orderPrevious;
+            itemsNew = [...itemsPrevious];
+        }
+        setItems(onItemsResolve(itemsNew));
+    }, []);
+    const onUpdateGuidelines = react_1.default.useCallback((valueNew) => {
+        setGuidelines(valueNew);
+    }, []);
+    const onUpdateUnit = react_1.default.useCallback((valueNew) => {
+        setUnit(valueNew);
+    }, []);
+    const onOpenOpenOptions = react_1.default.useCallback(() => {
+        setItemOpen(false);
+        setOpenOptions(true);
+    }, []);
+    const onCloseOpenOptions = react_1.default.useCallback(() => {
+        setOpenOptions(false);
+    }, []);
+    const onChangeKeepAspectRatio = react_1.default.useCallback((valueNew) => {
+        setKeepAspectRatio(valueNew);
+    }, []);
+    const getUnitValue = react_1.default.useCallback((valueNew_) => {
+        if (['', ' ', '+', '-', 'e', 'e+', 'e-', undefined, null].includes(valueNew_))
+            return valueNew_;
+        let valueNew = +valueNew_;
+        const unit_ = refs.unit.current;
+        if (!valueNew)
+            valueNew = (0, utils_1.clamp)(+valueNew_, refs.minSize.current, refs.maxSize.current);
+        valueNew = unit_ === 'px' ? +valueNew : +valueNew / refs.units.current.m;
+        valueNew = (0, utils_1.clamp)(+valueNew % 1 > 0 ? +(valueNew).toFixed(4) : valueNew, refs.minSize.current, refs.maxSize.current);
+        if ((String(valueNew_).startsWith('-0') || String(valueNew_).includes('.')) && (0, utils_1.clamp)(+valueNew_, refs.minSize.current, refs.maxSize.current) === +valueNew_)
+            return valueNew_;
+        return !valueNew ? (0, utils_1.clamp)(+valueNew, refs.minSize.current, refs.maxSize.current) : valueNew;
+    }, []);
+    const toUnitValue = react_1.default.useCallback((valueNew_, raw = false) => {
+        if (['', ' ', '+', '-', 'e', 'e+', 'e-', undefined, null].includes(valueNew_))
+            return valueNew_;
+        let valueNew = valueNew_;
+        const unit_ = refs.unit.current;
+        if (!valueNew)
+            valueNew = (0, utils_1.clamp)(+valueNew_, refs.minSize.current, refs.maxSize.current);
+        valueNew = unit_ === 'px' ? +valueNew : +valueNew * refs.units.current.m;
+        valueNew = (0, utils_1.clamp)(+valueNew % 1 > 0 ? +(valueNew).toFixed(4) : valueNew, refs.minSize.current, refs.maxSize.current);
+        if (raw && (String(valueNew_).startsWith('-0') || String(valueNew_).includes('.')) && (0, utils_1.clamp)(+valueNew_, refs.minSize.current, refs.maxSize.current) === +valueNew_)
+            return valueNew_;
+        return valueNew;
+    }, []);
+    const onItemCenter = react_1.default.useCallback((item) => {
+        const root = refs.root.current;
+        const positions_ = refs.positions.current;
+        const style_ = item.props.style;
+        const { left, top, width, height } = style_;
+        const valueNew = Object.assign(Object.assign({}, refs.positions.current), { left: (left * positions_.zoom * -1) + (root.clientWidth / 2) - ((width * positions_.zoom) / 2), top: (top * positions_.zoom * -1) + (root.clientHeight / 2) - ((height * positions_.zoom) / 2) });
+        refs.methods.current.updatePositions(valueNew);
+    }, []);
+    const onItemOpen = react_1.default.useCallback((item) => {
+        setSelected(item === null || item === void 0 ? void 0 : item.id);
+        setItemOpen(item);
+        // center
+        onItemCenter(item);
+        // reset
+        setSelectedGroup(null);
+    }, []);
+    const onItemClose = react_1.default.useCallback(() => {
+        setItemOpen(null);
+    }, []);
+    const onElementSearch = react_1.default.useCallback((value) => {
+        setElementSearch(value);
+    }, []);
+    const onElementSearchClear = react_1.default.useCallback(() => {
+        setElementSearch('');
+    }, []);
+    const onItemRemove = react_1.default.useCallback((id) => {
+        var _a;
+        const item = refs.items.current.find((item_) => item_.id === id);
+        if (item)
+            setItems((previous) => onItemsResolve(previous.filter((item_) => !(item_.id === id || (refs.selectedGroup.current && refs.selectedGroup.current === item.group && item.group && item_.group === item.group)))));
+        if (((_a = refs.itemOpen.current) === null || _a === void 0 ? void 0 : _a.id) === id) {
+            setItemOpen(null);
+        }
+    }, []);
+    const onKeyUp = react_1.default.useCallback(() => {
+        refs.keyDown.current = null;
+        refs.previousMouseEvent.current = undefined;
+    }, []);
+    const onKeyDown = react_1.default.useCallback((event) => {
+        var _a;
+        if (event.key === 'Backspace') {
+            const activeElement = (_a = window.document.activeElement) === null || _a === void 0 ? void 0 : _a.nodeName;
+            if (refs.selected.current &&
+                !(activeElement && ['input', 'h4'].includes(activeElement.toLowerCase())))
+                onItemRemove(refs.selected.current);
+        }
+        refs.keyDown.current = event.key;
+    }, []);
+    const onMouseUp = react_1.default.useCallback(() => {
+        refs.mouseDown.current = null;
+        refs.previousMouseEvent.current = undefined;
+    }, []);
+    const onMouseDown = react_1.default.useCallback((event) => {
+        const target = event.target;
+        const element = target.closest('[data-element]');
+        if (element) {
+            const item = refs.items.current.find((item_) => item_.id === element.dataset.id);
+            if (item) {
+                refs.mouseDown.current = {
+                    id: item.id,
+                    item,
+                    element
+                };
+            }
+        }
+    }, []);
+    const onTouchStart = react_1.default.useCallback((event) => {
+        const target = event.target;
+        const element = target.closest('[data-element]');
+        if (element) {
+            refs.mouseDown.current = {
+                id: element.dataset.id,
+                element
+            };
+        }
+    }, []);
+    const onMoveItem = react_1.default.useCallback((x, y) => {
+        const mouseDown = refs.mouseDown.current;
+        if (mouseDown) {
+            setItems((previous) => {
+                const id = mouseDown.id;
+                const item = previous.find((item_) => item_.id === id);
+                let updated = 0;
+                const itemsNew = [...previous].map((item_) => {
+                    if ((item_.id === id || (refs.selectedGroup.current && refs.selectedGroup.current === item.group && item.group && item_.group === item.group))) {
+                        item_.props.style.left += x;
+                        item_.props.style.top += y;
+                        updated++;
+                    }
+                    return item_;
+                });
+                if (!!updated)
+                    return itemsNew;
+                return previous;
+            });
+        }
+    }, []);
+    const onMove = react_1.default.useCallback((x_, y_, event) => {
+        if (refs.mouseDown.current && refs.previousMouseEvent.current && !refs.disabled.current) {
+            const { clientX: xPrevious, clientY: yPrevious } = refs.previousMouseEvent.current;
+            const zoomAdjusted = (1 / refs.positions.current.zoom);
+            const x = (x_ - xPrevious) * zoomAdjusted;
+            const y = (y_ - yPrevious) * zoomAdjusted;
+            onMoveItem(x, y);
+        }
+    }, []);
+    const onMouseMove = react_1.default.useCallback((event) => {
+        if (!refs.keyDown.current && refs.mouseDown.current && !refs.disabled.current) {
+            const { clientY, clientX } = event;
+            onMove(clientX, clientY, event);
+            refs.previousMouseEvent.current = event;
+        }
+    }, []);
+    const onTouchMove = react_1.default.useCallback((event) => {
+        if (!refs.keyDown.current && refs.mouseDown.current && !refs.disabled.current) {
+            const { clientY, clientX } = event.touches[0];
+            onMove(clientX, clientY, event);
+            refs.previousMouseEvent.current = event;
+            // Normalize for use as a mouseDown value
+            refs.previousMouseEvent.current.clientY = clientY;
+            refs.previousMouseEvent.current.clientX = clientX;
+        }
+    }, []);
+    react_1.default.useEffect(() => {
+        var _a;
+        onElementSearchClear();
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        rootDocument === null || rootDocument === void 0 ? void 0 : rootDocument.addEventListener('keyup', onKeyUp);
+        rootDocument === null || rootDocument === void 0 ? void 0 : rootDocument.addEventListener('keydown', onKeyDown);
+        rootDocument.addEventListener('mousemove', onMouseMove);
+        rootDocument.addEventListener('touchmove', onTouchMove, { passive: true });
+        rootDocument.addEventListener('mouseup', onMouseUp);
+        rootDocument.addEventListener('touchend', onMouseUp);
+        return () => {
+            rootDocument.removeEventListener('keyup', onKeyUp);
+            rootDocument.removeEventListener('keydown', onKeyDown);
+            rootDocument.removeEventListener('mousemove', onMouseMove);
+            rootDocument.removeEventListener('touchmove', onTouchMove);
+            rootDocument.removeEventListener('mouseup', onMouseUp);
+            rootDocument.removeEventListener('touchend', onMouseUp);
+        };
+    }, []);
+    const onOpenNavigation = react_1.default.useCallback(() => {
+        setOpenOptions(false);
+        setItemOpen(false);
+        setOpenNavigation(true);
+    }, []);
+    const onCloseNavigation = react_1.default.useCallback(() => {
+        setOpenNavigation(false);
+        setTimeout(() => {
+            setItemOpen(null);
+        }, 140);
+    }, []);
+    const onOpenMenu = react_1.default.useCallback(() => {
+        setOpenMenu(true);
+    }, []);
+    const onCloseMenu = react_1.default.useCallback(() => {
+        setOpenMenu(false);
+    }, []);
+    const onChangeHTMLCanvas = react_1.default.useCallback((valueNew) => {
+        setPositions(valueNew);
+        refs.positions.current = valueNew;
+    }, []);
+    const onClickSpace = react_1.default.useCallback((event) => {
+        const target = event.target;
+        const element = target.closest('[data-element]');
+        if (element) {
+            const id = element.dataset.id;
+            if (refs.selected.current !== id) {
+                const item = refs.items.current.find((item_) => item_.id === id);
+                setSelected(id);
+                if (refs.itemOpen.current)
+                    setItemOpen(item);
+                // reset
+                if (item.group !== refs.selectedGroup.current)
+                    setSelectedGroup(null);
+            }
+        }
+        else {
+            setSelected(null);
+            setSelectedGroup(null);
+        }
+    }, []);
+    const onItemClick = react_1.default.useCallback((item, event) => {
+        if (event.detail === 2) {
+            setSelected(item.id);
+            setItemOpen(item);
+            setOpenNavigation(true);
+            setOpenMenu(false);
+            // reset
+            if (item.group !== refs.selectedGroup.current)
+                setSelectedGroup(null);
+        }
+    }, []);
+    const onItemUpdate = react_1.default.useCallback((valueNew, item = refs.itemOpen.current) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const itemsNew = [...refs.items.current];
+        const index = itemsNew.findIndex(item_ => item_.id === item.id);
+        if (index > -1) {
+            const itemToUpdate = itemsNew[index];
+            const ratio = itemToUpdate.props.style.width / itemToUpdate.props.style.height;
+            if (valueNew.name !== undefined)
+                itemToUpdate.name = valueNew.name;
+            if (valueNew.id_custom !== undefined)
+                itemToUpdate.id_custom = valueNew.id_custom;
+            if (valueNew.selectable !== undefined)
+                itemToUpdate.selectable = valueNew.selectable;
+            if (valueNew.description !== undefined)
+                itemToUpdate.description = valueNew.description;
+            if (valueNew.width !== undefined)
+                itemToUpdate.width = valueNew.width;
+            if (valueNew.height !== undefined)
+                itemToUpdate.height = valueNew.height;
+            if (valueNew.backgroundImage !== undefined)
+                itemToUpdate.backgroundImage = valueNew.backgroundImage;
+            if (((_a = valueNew.props) === null || _a === void 0 ? void 0 : _a.color) !== undefined)
+                itemToUpdate.props.color = valueNew.props.color;
+            const backgroundImage = valueNew.backgroundImage !== undefined ? valueNew.backgroundImage : item.backgroundImage !== undefined ? item.backgroundImage : null;
+            if (backgroundImage) {
+                itemToUpdate.props.style.backgroundImage = `url(/assets/svg/space/floor/${backgroundImage}.svg)`;
+                itemToUpdate.props.style.backgroundSize = 70;
+            }
+            else {
+                itemToUpdate.props.style.backgroundImage = itemToUpdate.props.style.backgroundSize = null;
+            }
+            if (valueNew.rotate !== undefined)
+                itemToUpdate.rotate = valueNew.rotate;
+            itemToUpdate.props.style.transform = `rotate(${valueNew.rotate !== undefined ? valueNew.rotate : item.rotate !== undefined ? item.rotate : 0}deg)`;
+            itemToUpdate.props.style = Object.assign(Object.assign({}, itemToUpdate.props.style), (_b = valueNew.props) === null || _b === void 0 ? void 0 : _b.style);
+            if (!['icon'].includes(item.type) && refs.keepAspectRatio.current) {
+                if ((_d = (_c = valueNew.props) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.width) {
+                    let valueHeight = ((_f = (_e = valueNew.props) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.width) / ratio;
+                    valueHeight = (0, utils_1.clamp)(+valueHeight, refs.minSize.current, refs.maxSize.current);
+                    itemToUpdate.props.style.height = itemToUpdate.height = valueHeight % 1 > 0 ? +(valueHeight).toFixed(4) : valueHeight;
+                    if (Number.isNaN(itemToUpdate.props.style.height))
+                        itemToUpdate.props.style.height = itemToUpdate.height = (_h = (_g = valueNew.props) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.width;
+                }
+                if ((_k = (_j = valueNew.props) === null || _j === void 0 ? void 0 : _j.style) === null || _k === void 0 ? void 0 : _k.height) {
+                    let valueWidth = ((_m = (_l = valueNew.props) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.height) * ratio;
+                    valueWidth = (0, utils_1.clamp)(+valueWidth, refs.minSize.current, refs.maxSize.current);
+                    itemToUpdate.props.style.width = itemToUpdate.width = valueWidth % 1 > 0 ? +(valueWidth).toFixed(4) : valueWidth;
+                    if (Number.isNaN(itemToUpdate.props.style.width))
+                        itemToUpdate.props.style.width = itemToUpdate.width = (_p = (_o = valueNew.props) === null || _o === void 0 ? void 0 : _o.style) === null || _p === void 0 ? void 0 : _p.height;
+                }
+            }
+            setItems(onItemsResolve(itemsNew));
+        }
+    }, []);
+    const optionsMenu = react_1.default.useMemo(() => {
+        var _a, _b, _c, _d;
+        return [
+            // 1) furniture
+            // 1.1) table
+            // 1.1.1) oval
+            {
+                version: 'table-oval-seat-4-1',
+                type: 'icon',
+                name: 'Table oval seat 4, 1',
+                tags: ['inside', 'furniture', 'oval', 'table', 'seats-4'],
+                props: {
+                    color: (_b = (_a = refs.defaults.current) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.table,
+                    style: {
+                        width: 120,
+                        height: 'auto'
+                    }
+                }
+            },
+            // 1.1.2) rectangle
+            {
+                version: 'table-rectangle-seat-6-1',
+                type: 'icon',
+                name: 'Table rectangle seat 6, 1',
+                tags: ['inside', 'furniture', 'rectangle', 'table', 'seats-6'],
+                props: {
+                    color: (_d = (_c = refs.defaults.current) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d.table,
+                    style: {
+                        width: 160,
+                        height: 'auto'
+                    }
+                }
+            },
+            // simple
+            // shape
+            // rectangle
+            {
+                version: 'rectangle',
+                type: 'shape',
+                name: 'Rectangle',
+                tags: ['simple', 'rectangle'],
+                props: {
+                    style: {
+                        width: 240,
+                        height: 240,
+                        borderWidth: 1.5,
+                        borderStyle: 'solid',
+                        borderColor: 'rgb(255, 195, 66)',
+                        backgroundColor: 'rgba(245, 245, 220, 0.54)'
+                    }
+                }
+            },
+            // oval
+            {
+                version: 'oval',
+                type: 'shape',
+                name: 'Oval',
+                tags: ['simple', 'oval'],
+                props: {
+                    style: {
+                        width: 240,
+                        height: 240,
+                        borderWidth: 1.5,
+                        borderStyle: 'solid',
+                        borderColor: 'rgb(255, 195, 66)',
+                        backgroundColor: 'rgba(245, 245, 220, 0.54)',
+                        borderRadius: 240000
+                    }
+                }
+            }
+        ];
+    }, []);
+    const elementsMenu = react_1.default.useMemo(() => {
+        const valueNew = [...optionsMenu].filter(item => item.name.toLowerCase().includes(elementSearch.toLowerCase()));
+        return valueNew;
+    }, [optionsMenu, elementSearch]);
+    const getElement = react_1.default.useCallback((item) => {
+        var _a, _b;
+        const otherElementProps = {
+            onMouseDown,
+            onTouchStart,
+            onClick: (event) => onItemClick(item, event)
+        };
+        const positions_ = refs.positions.current;
+        const textZoomAdjusted = 1 / positions_.zoom;
+        const isSelected = selected === item.id || (refs.selectedGroup.current && (refs.selectedGroup.current === item.group));
+        const textOtherProps = {
+            style: {
+                transform: `scale(${textZoomAdjusted})`,
+                // transform: `scale(${textZoomAdjusted}) rotate(-${item.rotate}deg)`
+            }
+        };
+        const rootStyle = Object.assign({}, (_a = item.props) === null || _a === void 0 ? void 0 : _a.style);
+        let rootElement = null;
+        const styleIcon = {
+            transform: 'unset'
+        };
+        if (item.version === 'table-oval-seat-4-1') {
+            rootElement = ((0, jsx_runtime_1.jsx)(IconFurnitureTableOvalSeat4Version1, { color: item.props.color, style: Object.assign(Object.assign({}, item.props.style), styleIcon) }));
+        }
+        if (item.version === 'table-rectangle-seat-6-1') {
+            rootElement = ((0, jsx_runtime_1.jsx)(IconFurnitureTableRectangleSeat6Version1, { color: item.props.color, style: Object.assign(Object.assign({}, item.props.style), styleIcon) }));
+        }
+        if (['icon'].includes(item.type)) {
+            delete rootStyle.width;
+            delete rootStyle.height;
+        }
+        const widthText = `${item.props.style.width % 1 > 0 ? getUnitValue(item.props.style.width) : (0, utils_1.numberWithCommas)(getUnitValue(item.props.style.width))}${refs.unit.current}`;
+        const heightText = `${item.props.style.height % 1 > 0 ? getUnitValue(item.props.style.height) : (0, utils_1.numberWithCommas)(getUnitValue(item.props.style.height))}${refs.unit.current}`;
+        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({}, item.props, otherElementProps, { className: (0, style_react_1.classNames)([
+                (_b = item.props) === null || _b === void 0 ? void 0 : _b.className,
+                isSelected && classes.itemSelected
+            ]), style: Object.assign({}, rootStyle) }, { children: [rootElement, isSelected && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', align: 'center', color: 'info', className: classes.metaName }, textOtherProps, { dangerouslySetInnerHTML: {
+                                __html: (0, utils_1.textToInnerHTML)(item.name)
+                            } })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3', align: 'center', color: 'info', className: classes.meteSize }, textOtherProps, { children: [['shape'].includes(item.type) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [widthText, " x ", heightText] }), ['icon'].includes(item.type) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Width: ", widthText] })] }))] })] }), item.id));
+    }, [selected, onMouseDown, onTouchStart]);
+    const getThumbnail = react_1.default.useCallback((item) => {
+        let element = null;
+        if (['rectangle', 'oval'].includes(item.version)) {
+            element = ((0, jsx_runtime_1.jsx)(Line, { style: Object.assign(Object.assign({}, item.props.style), { width: '100%', height: '100%' }) }));
+        }
+        const styleIcon = {
+            maxWidth: '100%',
+            maxHeight: '100%',
+            height: '100%',
+            width: '100%'
+        };
+        if (item.version === 'table-oval-seat-4-1') {
+            element = ((0, jsx_runtime_1.jsx)(IconFurnitureTableOvalSeat4Version1, { style: Object.assign(Object.assign({}, item.props.style), styleIcon) }));
+        }
+        if (item.version === 'table-rectangle-seat-6-1') {
+            element = ((0, jsx_runtime_1.jsx)(IconFurnitureTableRectangleSeat6Version1, { style: Object.assign(Object.assign({}, item.props.style), styleIcon) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: classes.elementImage }, { children: element })));
+    }, []);
+    const onAdd = react_1.default.useCallback((item) => {
+        const itemToAdd = (0, utils_1.copy)(item);
+        itemToAdd.name = `${itemToAdd.name} ${refs.items.current.length ? refs.items.current.length + 1 : ''}`.trim();
+        const { zoom = 1, left = 0, top = 0 } = refs.positions.current;
+        setItems((previous) => {
+            var _a, _b;
+            const id = (0, utils_1.getID)();
+            const width = itemToAdd.props.style.width;
+            const height = itemToAdd.props.style.height;
+            const object = Object.assign(Object.assign({ id }, itemToAdd), { width,
+                height, rotate: 0, order: (((_a = previous[previous.length - 1]) === null || _a === void 0 ? void 0 : _a.order) || 0) + 1, props: Object.assign(Object.assign({}, itemToAdd.props), { 'data-onesy': true, 'data-element': true, 'data-id': id, 'data-name': itemToAdd.name, className: (0, style_react_1.classNames)([
+                        (_b = itemToAdd.props) === null || _b === void 0 ? void 0 : _b.className,
+                        classes.item
+                    ]), style: Object.assign(Object.assign({}, itemToAdd.props.style), { width,
+                        height, left: Math.abs(left) / zoom, top: Math.abs(top) / zoom }) }) });
+            return onItemsResolve([
+                ...previous,
+                object
+            ]);
+        });
+    }, []);
+    const optionsBackgroundImage = react_1.default.useMemo(() => {
+        const options = refs.floors.current;
+        return options.map(item => (Object.assign(Object.assign({}, item), { name: ((0, jsx_runtime_1.jsx)("div", { style: {
+                    width: 20,
+                    height: 20,
+                    backgroundImage: `url(${item.url})`,
+                    bacgkroundSize: '17px'
+                } })) })));
+    }, []);
+    const onStopPropagation = react_1.default.useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    const indexItemOpen = itemOpen && items.findIndex((item_) => item_ === itemOpen);
+    const formRowProps = {
+        fullWidth: true,
+        MainProps: {
+            gap: 1.5
+        }
+    };
+    const itemsPrepared = react_1.default.useMemo(() => {
+        const result = {
+            '': {
+                index: Number.MAX_SAFE_INTEGER,
+                items: []
+            }
+        };
+        items.forEach((item) => {
+            const group = item.group || '';
+            if (!result[group])
+                result[group] = {
+                    index: Number.MAX_SAFE_INTEGER,
+                    items: []
+                };
+            result[group].items.push(item);
+        });
+        Object.values(result).forEach((item) => {
+            item.index = Math.min(...item.items.map((item_) => item_.index));
+            item.items.sort((a, b) => b.index - a.index);
+        });
+        const mainItems = [...result[''].items];
+        Object.keys(result).forEach(key => {
+            if (key) {
+                mainItems.push(Object.assign({ isGroup: true, group: key, order: result[key].items[0].order }, result[key]));
+            }
+        });
+        mainItems.sort((a, b) => a.order - b.order);
+        return mainItems;
+    }, [items, selectedGroup, selected]);
+    const itemOpenType = itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.type;
+    const elements = {
+        list: ((0, jsx_runtime_1.jsx)(List, Object.assign({ size: 'small', paddingVertical: 'none', noBackground: true, className: classes.list }, { children: itemsPrepared.map((item, index) => {
+                const groupSelected = refs.selectedGroup.current === item.group;
+                const someSelected = groupSelected || (item.isGroup && item.items.some((item_) => item_.id === refs.selected.current));
+                let orderStart = index;
+                let orderEnd = index;
+                if (item.isGroup) {
+                    orderStart = item.items[0].order;
+                    orderEnd = item.items[item.items.length - 1].order;
+                }
+                return item.isGroup ? ((0, jsx_runtime_1.jsx)(Form, Object.assign({ name: item.group, openDefault: someSelected, end: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Move in front' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: (event) => onItemMove(item, orderEnd, orderEnd + 1, event), size: 'small', disabled: orderEnd >= items.length }, { children: (0, jsx_runtime_1.jsx)(IconArrowDown, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Move behind' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: (event) => onItemMove(item, orderStart, orderStart - 1, event), size: 'small', disabled: orderStart <= 1 }, { children: (0, jsx_runtime_1.jsx)(IconArrowUp, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Ungroup' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', onClick: () => onItemsUngroup(item.group) }, { children: (0, jsx_runtime_1.jsx)(IconUngroup, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `${groupSelected ? 'Unselect' : 'Select'} group` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', onClick: (event) => onGroupSelect(item.group, event), color: groupSelected ? 'success' : 'default', selected: groupSelected }, { children: (0, jsx_runtime_1.jsx)(IconGroupSelect, {}) })) }))] }))), AccordionProps: {
+                        noExpandButton: true
+                    }, size: 'small', wrapper: true, accordion: true, className: classes.accordion }, { children: item.items.map((itemGroup, indexItemGroup) => {
+                        return ((0, jsx_runtime_1.jsx)(ListItem, { primary: ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', dangerouslySetInnerHTML: {
+                                    __html: (0, utils_1.textToInnerHTML)(itemGroup.name)
+                                } })), end: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Move in front' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: (event) => onItemMove(itemGroup, itemGroup.order, itemGroup.order + 1, event), size: 'small', disabled: indexItemGroup >= item.items.length - 1 }, { children: (0, jsx_runtime_1.jsx)(IconArrowDown, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Move behind' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: (event) => onItemMove(itemGroup, itemGroup.order, itemGroup.order - 1, event), size: 'small', disabled: !indexItemGroup }, { children: (0, jsx_runtime_1.jsx)(IconArrowUp, {}) })) }))] }))), onClick: () => onItemOpen(itemGroup), selected: itemGroup.id === refs.selected.current, size: 'small', button: true, noBackground: true }, itemGroup.id));
+                    }) }), index)) : ((0, jsx_runtime_1.jsx)(ListItem, { start: !item.group && !item.isGroup && ((0, jsx_runtime_1.jsx)(Checkbox, { value: !!itemsSelected[item.id], onChange: () => onItemSelect(item), onClick: onStopPropagation, size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', dangerouslySetInnerHTML: {
+                            __html: (0, utils_1.textToInnerHTML)(item.name)
+                        } })), end: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Move in front' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: (event) => onItemMove(item, item.order, item.order + 1, event), size: 'small', disabled: index >= items.length - 1 }, { children: (0, jsx_runtime_1.jsx)(IconArrowDown, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Move behind' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: (event) => onItemMove(item, item.order, item.order - 1, event), size: 'small', disabled: !index }, { children: (0, jsx_runtime_1.jsx)(IconArrowUp, {}) })) }))] }))), onClick: () => onItemOpen(item), selected: item.id === refs.selected.current, size: 'small', button: true, noBackground: true }, item.id));
+            }) }))),
+        itemOpen: itemOpen && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, flex: true, fullWidth: true, className: (0, style_react_1.classNames)([
+                classes.mainSidebar
+            ]) }, { children: (0, jsx_runtime_1.jsxs)(FormRow, Object.assign({ name: (0, utils_1.cleanValue)(itemOpen.version, { capitalize: true }), fullWidth: true, end: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Make a copy' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => onItemMakeCopy() }, { children: (0, jsx_runtime_1.jsx)(IconMakeCopy, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Move to front' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => onItemMove(itemOpen, itemOpen.order, items.length), disabled: indexItemOpen >= items.length - 1 }, { children: (0, jsx_runtime_1.jsx)(IconToFront, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Move to back' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => onItemMove(itemOpen, itemOpen.order, 1), disabled: !indexItemOpen }, { children: (0, jsx_runtime_1.jsx)(IconToBack, {}) })) }))] }))), MainProps: {
+                    gap: 1.5,
+                    style: {
+                        paddingBottom: 40
+                    }
+                } }, { children: [(0, jsx_runtime_1.jsxs)(FormRow, Object.assign({}, formRowProps, { children: [itemOpen.group && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', priority: 'secondary' }, { children: itemOpen.group }))), (0, jsx_runtime_1.jsxs)(Label, Object.assign({ value: itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.selectable, onChange: (valueNew) => onItemUpdate({ selectable: valueNew }) }, { children: [(0, jsx_runtime_1.jsx)(Checkbox, {}), "Selectable"] })), (0, jsx_runtime_1.jsx)(TextField, { name: 'Custom ID', value: (itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.id_custom) || '', onChange: (valueNew) => onItemUpdate({ id_custom: valueNew }), size: 'small', fullWidth: true }), (0, jsx_runtime_1.jsx)(SmartTextField, { name: 'Description', valueDefault: (0, utils_1.textToInnerHTML)(itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.description) || '', onChange: (valueNew) => onItemUpdate({ description: valueNew }), minRows: 4, multiline: true, edit: true, style: {
+                                    marginTop: 0
+                                } })] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(FormRow, Object.assign({ name: 'Size' }, formRowProps, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, { name: 'Width', value: getUnitValue(itemOpen.width), onChange: (valueNew) => onItemUpdate({ width: toUnitValue(valueNew, true), props: { style: { width: toUnitValue(valueNew) } } }), min: minSize, max: maxSize, sufix: refs.unit.current, size: 'small' }), ['shape'].includes(itemOpenType) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, { name: 'Height', value: getUnitValue(itemOpen.height), onChange: (valueNew) => onItemUpdate({ height: toUnitValue(valueNew, true), props: { style: { height: toUnitValue(valueNew) } } }), min: minSize, max: maxSize, sufix: refs.unit.current, size: 'small' }), (0, jsx_runtime_1.jsxs)(Label, Object.assign({ value: keepAspectRatio, onChange: onChangeKeepAspectRatio, size: 'small' }, { children: [(0, jsx_runtime_1.jsx)(Switch, {}), "Keep aspect ratio"] }))] })] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)(FormRow, Object.assign({ name: 'Rotate', description: `${(itemOpen.rotate || 0).toFixed(0)} deg`, style: {
+                            paddingBottom: 16
+                        } }, formRowProps, { children: (0, jsx_runtime_1.jsx)(Slider, { value: itemOpen.rotate || 0, onChange: (valueNew) => onItemUpdate({ rotate: valueNew }), min: 0, max: 360, marks: [
+                                { value: 0, label: '0' },
+                                { value: 360, label: '360' }
+                            ], labels: true, tooltip: true, style: {
+                                maxWidth: 'unset',
+                                width: 'calc(100% - 8px)',
+                                margin: '12px 4px 16px'
+                            } }) })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(FormRow, Object.assign({ name: 'Style', size: 'regular' }, formRowProps, { MainProps: {
+                            gap: 2.5
+                        } }, { children: [['icon'].includes(itemOpenType) && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(FormRow, Object.assign({ name: 'Color', size: 'small' }, formRowProps, { children: (0, jsx_runtime_1.jsx)(ColorTextField, { name: 'Color', value: (_a = itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.props) === null || _a === void 0 ? void 0 : _a.color, onChange: (valueNew) => onItemUpdate({ props: { color: valueNew } }) }) })) }), ['shape'].includes(itemOpenType) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormRow, Object.assign({ name: 'Background', size: 'small' }, formRowProps, { children: [(0, jsx_runtime_1.jsx)(Select, Object.assign({ name: 'Texture', value: itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.backgroundImage, onChange: (valueNew) => onItemUpdate({ backgroundImage: valueNew }), fullWidth: true, className: classes.select }, { children: optionsBackgroundImage.map(item => ((0, jsx_runtime_1.jsx)(ListItem, { primary: item.name, value: item.value, button: true, size: 'small' }, item.value))) })), (0, jsx_runtime_1.jsx)(ColorTextField, { name: 'Color', value: (_c = (_b = itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.props) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.backgroundColor, onChange: (valueNew) => onItemUpdate({ props: { style: { backgroundColor: valueNew } } }), opacity: true })] })), (0, jsx_runtime_1.jsxs)(FormRow, Object.assign({ name: 'Border', size: 'small' }, formRowProps, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, { name: 'Width', value: getUnitValue((_e = (_d = itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.props) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.borderWidth), onChange: (valueNew) => onItemUpdate({ props: { style: { borderWidth: toUnitValue(valueNew) } } }), min: 0, max: 1e4, sufix: refs.unit.current, size: 'small' }), (0, jsx_runtime_1.jsx)(Select, { name: 'Style', value: (_g = (_f = itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.props) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.borderStyle, onChange: (valueNew) => onItemUpdate({ props: { style: { borderStyle: valueNew } } }), options: ['solid', 'dashed', 'dotted', 'double', 'groove', 'inset', 'outset', 'ridge', 'none'].map(item => ({
+                                                    name: (0, utils_1.cleanValue)(item, { capitalize: true }),
+                                                    value: item
+                                                })), fullWidth: true }), (0, jsx_runtime_1.jsx)(ColorTextField, { name: 'Color', value: (_j = (_h = itemOpen === null || itemOpen === void 0 ? void 0 : itemOpen.props) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.borderColor, onChange: (valueNew) => onItemUpdate({ props: { style: { borderColor: valueNew } } }), opacity: true })] }))] })] }))] })) }))),
+        options: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ flex: true, fullWidth: true, className: (0, style_react_1.classNames)([
+                classes.mainSidebar
+            ]) }, { children: [(0, jsx_runtime_1.jsx)(FormRow, Object.assign({ name: 'Unit', description: 'Unit that equals some amount of pixels on the screen' }, formRowProps, { children: (0, jsx_runtime_1.jsxs)(Select, Object.assign({ name: 'Unit', value: unit, onChange: onUpdateUnit, fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(ListItem, { primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: "Pixels" }))), secondary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "1 pixel equals 1 pixel" }))), value: 'px', button: true }), (0, jsx_runtime_1.jsx)(ListItem, { primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: "Meters" }))), secondary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "1 meter equals 40 pixels" }))), value: 'm', button: true })] })) })), (0, jsx_runtime_1.jsx)(FormRow, Object.assign({ name: 'Guidelines' }, formRowProps, { children: (0, jsx_runtime_1.jsx)(Select, { name: 'Guidelines', value: guidelines, onChange: onUpdateGuidelines, options: [
+                            { name: 'Dots', value: 'dots' },
+                            { name: 'Lines', value: 'lines' }
+                        ], fullWidth: true }) }))] })))
+    };
+    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                ref.current = item;
+            }
+            refs.root.current = item;
+        }, color: 'default', gap: 0, align: 'unset', justify: 'unset', flex: true, fullWidth: true, Component: Component, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Space', theme) && [
+                'onesy-Space-root'
+            ],
+            className,
+            classes.root,
+            disabled && classes.disabled
+        ]) }, other, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', justify: 'flex-start', className: classes.actionsStart }, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Open navigation' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'filled', color: 'default', elevation: false, size: size, onClick: onOpenNavigation }, { children: (0, jsx_runtime_1.jsx)(IconMenu, {}) })) })) })), (0, jsx_runtime_1.jsx)(HTMLCanvas, Object.assign({ size: size, onChange: onChangeHTMLCanvas, guidelines: guidelines, showGuidelinesDefault: true, methods: refs.methods.current, ContainerProps: {
+                    ref: refs.container,
+                    onClick: onClickSpace
+                } }, { children: items.map((item) => getElement(item)) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', justify: 'flex-end', className: classes.actionsEnd }, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Add room' }, { children: (0, jsx_runtime_1.jsx)(Fab, Object.assign({ tonal: true, color: 'primary', size: size, onClick: onOpenMenu }, { children: (0, jsx_runtime_1.jsx)(IconAdd, {}) })) })) })), (0, jsx_runtime_1.jsx)(NavigationDrawer, Object.assign({ open: openNavigation, onClose: onCloseNavigation, position: 'absolute', direction: 'left', background: false, className: classes.navigationDrawerNavigation }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, flex: true, fullWidth: true, className: classes.navigation }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'space-between', className: (0, style_react_1.classNames)([
+                                classes.navigationHeader
+                            ]), fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center' }, { children: [(itemOpen || openOptions) && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Back' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: size, onClick: itemOpen ? onItemClose : onCloseOpenOptions }, { children: (0, jsx_runtime_1.jsx)(IconArrowBack, {}) })) }))), itemOpen ? ((0, jsx_runtime_1.jsx)(SmartTextField, { placeholder: 'Name', value: (0, utils_1.textToInnerHTML)(itemOpen.name), onChange: (valueNew) => onItemUpdate({ name: valueNew }), additional: {
+                                                version: 't3'
+                                            }, style: {
+                                                whiteSpace: 'normal'
+                                            } })) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't3' }, { children: openOptions ? 'Options' : 'Navigation' })))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.25, direction: 'row', align: 'center' }, { children: [!(itemOpen || openOptions) && Object.keys(itemsSelected).length > 1 && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Group' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: size, onClick: onItemsGroup }, { children: (0, jsx_runtime_1.jsx)(IconGroup, {}) })) }))), !(itemOpen || openOptions) && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Settings' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: size, onClick: onOpenOpenOptions }, { children: (0, jsx_runtime_1.jsx)(IconSettings, {}) })) }))), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Close' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: size, onClick: onCloseNavigation }, { children: (0, jsx_runtime_1.jsx)(IconCloseNavigation, {}) })) }))] }))] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ flex: true, fullWidth: true }, { children: itemOpen ? elements.itemOpen : openOptions ? elements.options : elements.list }))] })) })), (0, jsx_runtime_1.jsx)(NavigationDrawer, Object.assign({ open: openMenu, onClose: onCloseMenu, position: 'absolute', direction: 'bottom', background: false, className: classes.navigationDrawerMenu }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, fullWidth: true, className: classes.menu }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', className: classes.menuHeader, fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't3' }, { children: "Menu" })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Close' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: size, onClick: onCloseMenu }, { children: (0, jsx_runtime_1.jsx)(IconCloseMenu, {}) })) }))] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ fullWidth: true, className: classes.menuMain }, { children: (0, jsx_runtime_1.jsx)(FormRow, Object.assign({ gap: 3.5, start: ((0, jsx_runtime_1.jsx)(TextField, { placeholder: 'Search', value: elementSearch, onChange: onElementSearch, clear: true })), className: classes.elements, HeaderProps: {
+                                    align: 'center',
+                                    style: {
+                                        marginBottom: -4
+                                    }
+                                }, MainProps: {
+                                    direction: 'row',
+                                    align: 'flex-start',
+                                    className: classes.main
+                                }, fullWidth: true }, { children: elementsMenu === null || elementsMenu === void 0 ? void 0 : elementsMenu.map((item, index) => ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.4, align: 'center', onClick: () => onAdd(item), className: classes.element }, { children: [getThumbnail(item), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', align: 'center' }, { children: item.name }))] }), index))) })) }))] })) }))] })));
+});
+Space.displayName = 'onesy-Space';
+exports.default = Space;