@threekit-tools/treble 0.0.94 → 0.0.95-next-01

package/dist/components/TotalPrice/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
 interface IPrice {
     price?: string;
     className?: string;
 }
 export declare const TotalPriceComponent: {
-    (props: IPrice): React.JSX.Element;
+    (props: IPrice): JSX.Element;
     propTypes: {
         price: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
@@ -15,5 +15,5 @@ export declare const TotalPriceComponent: {
         className: string;
     };
 };
-export declare const TotalPrice: (props: IPrice) => React.JSX.Element | null;
+export declare const TotalPrice: (props: IPrice) => JSX.Element | null;
 export default TotalPrice;

package/dist/components/TrebleApp/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { ThreekitProviderProps } from '../ThreekitProvider';
 interface TrebleAppProps extends Omit<ThreekitProviderProps, 'children'> {
     productId?: string;
 }
-export declare const Products: () => React.JSX.Element | null;
-export default function TrebleApp(props: TrebleAppProps): React.JSX.Element | null;
+export declare const Products: () => JSX.Element | null;
+export default function TrebleApp(props: TrebleAppProps): JSX.Element | null;
 export {};

package/dist/components/TurntableAnimation/index.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/components/Upload/index.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
+/// <reference types="react" />
 import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
 export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
     onChange: (file: File | undefined) => Promise<void>;
 }
 export declare const Upload: {
-    (props: IUpload): React.JSX.Element;
+    (props: IUpload): JSX.Element;
     componentName: string;
     compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
-declare const _default: (props: IUpload) => React.JSX.Element | null;
+declare const _default: (props: IUpload) => JSX.Element | null;
 export default _default;

package/dist/components/Upload/index.js

@@ -37,7 +37,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/components/UploadArea/index.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
+/// <reference types="react" />
 import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
 export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
     onChange: (file: File) => Promise<void>;
 }
 export declare const UploadArea: {
-    (props: IUpload): React.JSX.Element;
+    (props: IUpload): JSX.Element;
     componentName: string;
     compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
-declare const _default: (props: IUpload) => React.JSX.Element | null;
+declare const _default: (props: IUpload) => JSX.Element | null;
 export default _default;

package/dist/components/UploadArea/index.js

@@ -37,7 +37,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/components/Wishlist/WishlistItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { IMetadata } from '../../types';
 interface WishlistItemProps {
     thumbnail?: string;
@@ -7,5 +7,5 @@ interface WishlistItemProps {
     onShare: () => void;
     onDelete: () => void;
 }
-export declare const WishlistItem: (props: WishlistItemProps) => React.JSX.Element;
+export declare const WishlistItem: (props: WishlistItemProps) => JSX.Element;
 export default WishlistItem;

package/dist/components/Wishlist/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
 import { BUTTON_SHAPES, BUTTON_TYPES } from '../Button';
 interface WidgetButtonProps {
@@ -14,10 +14,10 @@ interface WishlistProps {
     shape?: BUTTON_SHAPES;
     className?: string;
 }
-export declare const AddWishlistButton: (props: WidgetButtonProps) => React.JSX.Element;
-export declare const WishlistButton: (props: WidgetButtonProps) => React.JSX.Element;
+export declare const AddWishlistButton: (props: WidgetButtonProps) => JSX.Element;
+export declare const WishlistButton: (props: WidgetButtonProps) => JSX.Element;
 export declare const Wishlist: {
-    (props: WishlistProps): React.JSX.Element | null;
+    (props: WishlistProps): JSX.Element | null;
     propTypes: {
         className: PropTypes.Requireable<string>;
     };

package/dist/components/Wishlist/index.js

@@ -37,7 +37,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/components/Zoom/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
 import { BUTTON_SHAPES, BUTTON_TYPES } from '../Button';
 interface ZoomComponentProps {
@@ -10,10 +10,10 @@ interface ZoomComponentProps {
 interface ZoomProps extends ZoomComponentProps {
     orientation?: string;
 }
-export declare const ZoomOutComponent: (props: ZoomComponentProps) => React.JSX.Element | null;
-export declare const ZoomInComponent: (props: ZoomComponentProps) => React.JSX.Element | null;
+export declare const ZoomOutComponent: (props: ZoomComponentProps) => JSX.Element | null;
+export declare const ZoomInComponent: (props: ZoomComponentProps) => JSX.Element | null;
 export declare const Zoom: {
-    (props: ZoomProps): React.JSX.Element;
+    (props: ZoomProps): JSX.Element;
     propTypes: {
         step: PropTypes.Requireable<number>;
         orientation: PropTypes.Requireable<string>;
@@ -30,7 +30,7 @@ export declare const Zoom: {
     };
     componentName: string;
     Icon: import("../../icons/types").IIcon;
-    ZoomOut: (props: ZoomComponentProps) => React.JSX.Element | null;
-    ZoomIn: (props: ZoomComponentProps) => React.JSX.Element | null;
+    ZoomOut: (props: ZoomComponentProps) => JSX.Element | null;
+    ZoomIn: (props: ZoomComponentProps) => JSX.Element | null;
 };
 export default Zoom;

package/dist/components/containers/formInputContainer.d.ts

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { RawAttributeValue } from '../../hooks/useAttribute';
 import { IHydratedAttribute, IHydratedAttributeAssetValue } from '../../types';
 export interface IOptionShared {
@@ -50,5 +50,5 @@ export declare const hydrateAttributeForComponent: (attribute: IHydratedAttribut
         value: string;
     }[] | IHydratedAttributeAssetValue[] | undefined;
 };
-declare function formComponentContainer<P extends IFormContainerProps>(FormComponent: IFormComponent<Omit<P, 'options'>>): (props: P) => React.JSX.Element | null;
+declare function formComponentContainer<P extends IFormContainerProps>(FormComponent: IFormComponent<Omit<P, 'options'>>): (props: P) => JSX.Element | null;
 export default formComponentContainer;

package/dist/components/formComponents.d.ts

@@ -4,21 +4,21 @@ export declare const FORM_COMPONENT_TYPES: {
 };
 export declare const formComponents: {
     [x: string]: {
-        [x: string]: ((props: import("./Cards").ICards) => import("react").JSX.Element | null) | ((props: import("./TextInput").ITextInput) => import("react").JSX.Element | null) | ((props: import("./Tiles").ITiles) => import("react").JSX.Element | null);
+        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./TextInput").ITextInput) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
     } | {
-        [x: string]: (props: import("./Upload").IUpload) => import("react").JSX.Element | null;
+        [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
     };
     Asset: {
-        [x: string]: ((props: import("./Cards").ICards) => import("react").JSX.Element | null) | ((props: import("./Tiles").ITiles) => import("react").JSX.Element | null);
+        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
     };
     String: {
-        [x: string]: ((props: import("./Cards").ICards) => import("react").JSX.Element | null) | ((props: import("./TextInput").ITextInput) => import("react").JSX.Element | null) | ((props: import("./Tiles").ITiles) => import("react").JSX.Element | null);
+        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./TextInput").ITextInput) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
     };
     upload: {
-        [x: string]: (props: import("./Upload").IUpload) => import("react").JSX.Element | null;
+        [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
     };
     Boolean: {
-        [x: string]: (props: import("./Switch").ISwitch) => import("react").JSX.Element | null;
+        [x: string]: (props: import("./Switch").ISwitch) => JSX.Element | null;
     };
 };
 export default formComponents;

package/dist/components/message/index.d.ts

@@ -10,7 +10,7 @@ interface MessageComponentProps {
     icon: string;
 }
 export declare const MessageComponent: {
-    (props: MessageComponentProps): React.JSX.Element | null;
+    (props: MessageComponentProps): JSX.Element | null;
     propTypes: {
         content: PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<string>;

package/dist/constants.d.ts

@@ -1,12 +1,12 @@
 export declare const TREBLE_DEBUG: boolean;
 export declare const DEFAULT_CLASS_NAME = "threekit-react";
 export declare const CLASS_NAME_PREFIX = "tk";
-export declare const INPUT_COMPONENT_CLASS_NAME = "threekit-react tk-input";
-export declare const WIDGET_CLASS_NAME = "threekit-react tk-widget";
-export declare const LAYOUT_CLASS_NAME = "threekit-react tk-layout";
-export declare const TOOL_CLASS_NAME = "threekit-react tk-tool";
-export declare const DISPLAY_CLASS_NAME = "threekit-react tk-display";
-export declare const FORM_CLASS_NAME = "threekit-react tk-form";
+export declare const INPUT_COMPONENT_CLASS_NAME: string;
+export declare const WIDGET_CLASS_NAME: string;
+export declare const LAYOUT_CLASS_NAME: string;
+export declare const TOOL_CLASS_NAME: string;
+export declare const DISPLAY_CLASS_NAME: string;
+export declare const FORM_CLASS_NAME: string;
 export declare const IS_TREBLE_SCRIPTS: boolean;
 export declare const TK_PRODUCT_ID_PARAM_KEY = "tkProduct";
 export declare const TK_SAVED_CONFIG_PARAM_KEY = "tkConfigId";

package/dist/hooks/useAttribute/index.d.ts

@@ -1,10 +1,10 @@
 import { IHydratedAttribute, IConfigurationColor } from '../../types';
-export type RawAttributeValue = string | number | boolean | IConfigurationColor | File | undefined;
-type UseAttributeError = [undefined, undefined];
-type UseAttributeSuccess = [
+export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File | undefined;
+declare type UseAttributeError = [undefined, undefined];
+declare type UseAttributeSuccess = [
     IHydratedAttribute,
     (val: RawAttributeValue) => Promise<void>
 ];
-type UseAttributeHook = UseAttributeError | UseAttributeSuccess;
+declare type UseAttributeHook = UseAttributeError | UseAttributeSuccess;
 declare const useAttribute: (attributeName?: string) => UseAttributeHook;
 export default useAttribute;

package/dist/hooks/useAttribute/index.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/hooks/useConfigurationLoader/index.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/hooks/useConfigurator/index.d.ts

@@ -1,9 +1,9 @@
 import { ISetConfiguration, IHydratedAttribute } from '../../types';
-type UseConfiguratorError = [undefined, undefined];
-type UseConfiguratorSuccess = [
+declare type UseConfiguratorError = [undefined, undefined];
+declare type UseConfiguratorSuccess = [
     Record<string, IHydratedAttribute>,
     (configuration: ISetConfiguration) => void
 ];
-type UseConfiguratorHook = UseConfiguratorError | UseConfiguratorSuccess;
+declare type UseConfiguratorHook = UseConfiguratorError | UseConfiguratorSuccess;
 declare const useConfigurator: () => UseConfiguratorHook;
 export default useConfigurator;

package/dist/hooks/useDevTools/index.d.ts

@@ -1,3 +1,3 @@
-type UseDevToolsHook = [boolean, (val: boolean) => void];
+declare type UseDevToolsHook = [boolean, (val: boolean) => void];
 export declare const useDevTools: () => UseDevToolsHook;
 export default useDevTools;

package/dist/hooks/useNestedConfigurator/index.d.ts

@@ -1,6 +1,6 @@
 import { IHydratedAttribute, IMetadata, ISetConfiguration } from '../../types';
-type UseNestedConfiguratorError = [undefined, undefined, undefined, undefined];
-type UseNestedConfiguratorSuccess = [
+declare type UseNestedConfiguratorError = [undefined, undefined, undefined, undefined];
+declare type UseNestedConfiguratorSuccess = [
     Record<string, IHydratedAttribute>,
     (val: ISetConfiguration) => Promise<void>,
     IMetadata,

package/dist/hooks/useNestedConfigurator/index.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -57,8 +57,7 @@ var useNestedConfigurator = function (address) {
                 return;
             if (playerLoading)
                 return;
-            configurator.current =
-                window.threekit.treble.getNestedConfigurator(address);
+            configurator.current = window.threekit.configurator.getNestedConfigurator([address].flat());
             if (!configurator.current)
                 return;
             var updatedAttrs = configurator.current.getDisplayAttributes();
@@ -90,7 +89,7 @@ var useNestedConfigurator = function (address) {
         var _a;
         return Object.assign(output, (_a = {}, _a[attr.name] = attr, _a));
     }, {});
-    var preppedAttributes = (0, utils_1.hydrateAttribute)([attributeObj, translations], handleSelect);
+    var preppedAttributes = (0, utils_1.hydrateAttribute)([attributeObj, translations], handleSelect, configurator.current.getResolvedConfiguration());
     var price = priceConfig
         ? configurator.current.getPrice(priceConfig.id, priceConfig.currency)
         : undefined;

package/dist/hooks/usePlayer/index.d.ts

@@ -1,3 +1,3 @@
-type UsePlayer = [undefined] | [(node: null | HTMLDivElement) => void];
+declare type UsePlayer = [undefined] | [(node: null | HTMLDivElement) => void];
 declare const usePlayer: () => UsePlayer;
 export default usePlayer;

package/dist/hooks/usePlayerPortal/index.d.ts

@@ -1,3 +1,3 @@
-type UsePlayerPortal = [undefined, undefined] | [(toEl: string) => void, () => void];
+declare type UsePlayerPortal = [undefined, undefined] | [(toEl: string) => void, () => void];
 declare const usePlayerPortal: () => UsePlayerPortal;
 export default usePlayerPortal;

package/dist/hooks/useProductCache/index.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/hooks/useResetProduct/index.d.ts

@@ -1,3 +1,3 @@
-type UseShareHook = undefined | (() => Promise<void>);
+declare type UseShareHook = undefined | (() => Promise<void>);
 declare const useResetProduct: () => UseShareHook;
 export default useResetProduct;

package/dist/hooks/useResetProduct/index.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/hooks/useShare/index.d.ts

@@ -1,3 +1,3 @@
-type UseShareHook = undefined | ((msg: string | undefined) => Promise<undefined | string>);
+declare type UseShareHook = undefined | ((msg: string | undefined) => Promise<undefined | string>);
 declare const useShare: () => UseShareHook;
 export default useShare;

package/dist/hooks/useShare/index.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/hooks/useSingleAnimation/index.js

@@ -25,7 +25,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/hooks/useSpaces/SpacesLayout.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { ICoordinate2D } from './types';
+interface ISpacesLayout {
+    loops?: Array<ICoordinate2D[]>;
+    size?: number;
+    color?: string;
+    padding?: number;
+    strokeWidth?: number;
+}
+export default function SpacesLayout(props: ISpacesLayout): JSX.Element;
+export {};

package/dist/hooks/useSpaces/SpacesLayout.js

@@ -0,0 +1,74 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+function SpacesLayout(props) {
+    var loops = props.loops;
+    var size = props.size || 20;
+    var padding = props.padding || 2;
+    var strokeWidth = props.strokeWidth || 2;
+    if (!(loops === null || loops === void 0 ? void 0 : loops.length))
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    var _a = loops.reduce(function (output, loop, i) {
+        loop.forEach(function (_a, j) {
+            var x = _a[0], y = _a[1];
+            if (!i && !j) {
+                output = {
+                    xMin: x,
+                    yMin: y,
+                    xMax: x,
+                    yMax: y,
+                };
+            }
+            else {
+                if (x < output.xMin)
+                    output.xMin = x;
+                else if (x > output.xMax)
+                    output.xMax = x;
+                if (y < output.yMin)
+                    output.yMin = y;
+                else if (y > output.yMax)
+                    output.yMax = y;
+            }
+        });
+        return output;
+    }, {
+        xMin: 0,
+        yMin: 0,
+        xMax: 0,
+        yMax: 0,
+    }), xMin = _a.xMin, yMin = _a.yMin, xMax = _a.xMax, yMax = _a.yMax;
+    var xSpan = xMax - xMin;
+    var ySpan = yMax - yMin;
+    var xCenter = xMin + xSpan / 2;
+    var yCenter = yMin + ySpan / 2;
+    var scaleFactor = (size - 2 * padding) / Math.max(xSpan, ySpan);
+    var translate = [
+        xCenter * scaleFactor - size / 2,
+        yCenter * scaleFactor - size / 2,
+    ];
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props), loops.map(function (loop, i) {
+        var path = loop
+            .map(function (point, i) {
+            var x = point[0] * scaleFactor - translate[0];
+            var y = point[1] * scaleFactor - translate[1];
+            return (!i ? 'M ' : 'L ') + x + ' ' + y;
+        })
+            .join(' ') + ' Z';
+        return (react_1.default.createElement("path", { key: "path-".concat(i), d: path, stroke: props.color, strokeWidth: strokeWidth }));
+    })));
+}
+exports.default = SpacesLayout;