decentraland-ui2 0.26.1-17074319572.commit-54256a2 → 0.26.1-17079106219.commit-37645ec

package/dist/components/WearablePreview/WearablePreview.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { PreviewMessageType, sendMessage, } from "@dcl/schemas/dist/dapps/preview";
+import equal from "deep-equal";
+import { createController } from "./WearablePreview.controller";
+import { config } from "../../config";
+import { createDebounce } from "../../lib/debounce";
+import { StyledWearablePreview } from "./WearablePreview.styled";
+const debounce = createDebounce();
+const safeEncodeParam = (key, value) => {
+    if (value === undefined || value === null || value === "") {
+        return "";
+    }
+    // Handle arrays
+    if (Array.isArray(value)) {
+        return value.length > 0
+            ? value
+                .map((item) => `${key}=${encodeURIComponent(String(item))}`)
+                .join("&")
+            : "";
+    }
+    // Handle all other values (strings, numbers, booleans, objects, etc.)
+    return `${key}=${encodeURIComponent(String(value))}`;
+};
+const WearablePreview = (props) => {
+    const { dev = false, baseUrl = config.get("WEARABLE_PREVIEW_URL"), unity = false, onLoad = () => { }, onError = () => { }, onUpdate = () => { }, ...restProps } = props;
+    const [state, setState] = useState({
+        isReady: false,
+        pendingOptions: null,
+    });
+    const iframeRef = useRef(null);
+    const lastOptionsRef = useRef(null);
+    const url = useMemo(() => {
+        const { contractAddress, tokenId, itemId, profile, urns, urls, base64s, skin, hair, eyes, bodyShape, emote, camera, projection, zoom, background, offsetX, offsetY, offsetZ, cameraX, cameraY, cameraZ, wheelZoom, wheelPrecision, wheelStart, disableBackground, disableAutoRotate, disableAutoCenter, disableFace, disableDefaultWearables, disableDefaultEmotes, disableFadeEffect, showSceneBoundaries, showThumbnailBoundaries, panning, lockAlpha, lockBeta, lockRadius, peerUrl, nftServerUrl, type, unityMode, } = restProps;
+        const contractParam = safeEncodeParam("contract", contractAddress);
+        const tokenParam = safeEncodeParam("token", tokenId);
+        const itemParam = safeEncodeParam("item", itemId);
+        const profileParam = safeEncodeParam("profile", profile);
+        const urnParams = safeEncodeParam("urn", urns);
+        const urlsParams = safeEncodeParam("url", urls);
+        const base64sParams = safeEncodeParam("base64", base64s);
+        const skinParam = safeEncodeParam("skin", skin);
+        const hairParam = safeEncodeParam("hair", hair);
+        const eyesParam = safeEncodeParam("eyes", eyes);
+        const bodyShapeParam = safeEncodeParam("bodyShape", bodyShape);
+        const emoteParam = safeEncodeParam("emote", emote);
+        const cameraParam = safeEncodeParam("camera", camera);
+        const projectionParam = safeEncodeParam("projection", projection);
+        const zoomParam = safeEncodeParam("zoom", zoom);
+        const backgroundParam = safeEncodeParam("background", background);
+        const offsetXParam = safeEncodeParam("offsetX", offsetX);
+        const offsetYParam = safeEncodeParam("offsetY", offsetY);
+        const offsetZParam = safeEncodeParam("offsetZ", offsetZ);
+        const cameraXParam = safeEncodeParam("cameraX", cameraX);
+        const cameraYParam = safeEncodeParam("cameraY", cameraY);
+        const cameraZParam = safeEncodeParam("cameraZ", cameraZ);
+        const wheelZoomParam = safeEncodeParam("wheelZoom", wheelZoom);
+        const wheelPrecisionParam = safeEncodeParam("wheelPrecision", wheelPrecision);
+        const wheelStartParam = safeEncodeParam("wheelStart", wheelStart);
+        const disableBackgroundParam = safeEncodeParam("disableBackground", disableBackground);
+        const disableAutoRotateParam = safeEncodeParam("disableAutoRotate", disableAutoRotate);
+        const disableAutoCenterParam = safeEncodeParam("disableAutoCenter", disableAutoCenter);
+        const disableFaceParam = safeEncodeParam("disableFace", disableFace);
+        const disableDefaultWearablesParam = safeEncodeParam("disableDefaultWearables", disableDefaultWearables);
+        const disableDefaultEmotesParam = safeEncodeParam("disableDefaultEmotes", disableDefaultEmotes);
+        const disableFadeEffectParam = safeEncodeParam("disableFadeEffect", disableFadeEffect);
+        const showSceneBoundariesParam = safeEncodeParam("showSceneBoundaries", showSceneBoundaries);
+        const showThumbnailBoundariesParam = safeEncodeParam("showThumbnailBoundaries", showThumbnailBoundaries);
+        const peerUrlParam = safeEncodeParam("peerUrl", peerUrl);
+        const nftServerUrlParam = safeEncodeParam("nftServerUrl", nftServerUrl);
+        const typeParam = safeEncodeParam("type", type);
+        const panningParam = safeEncodeParam("panning", panning);
+        const lockAlphaParam = safeEncodeParam("lockAlpha", lockAlpha);
+        const lockBetaParam = safeEncodeParam("lockBeta", lockBeta);
+        const lockRadiusParam = safeEncodeParam("lockRadius", lockRadius);
+        const envParam = safeEncodeParam("env", dev ? "dev" : undefined);
+        const unityParam = safeEncodeParam("unity", unity);
+        const unityModeParam = safeEncodeParam("mode", unityMode);
+        const url = baseUrl +
+            "?" +
+            [
+                contractParam,
+                tokenParam,
+                itemParam,
+                profileParam,
+                urnParams,
+                urlsParams,
+                base64sParams,
+                skinParam,
+                hairParam,
+                eyesParam,
+                bodyShapeParam,
+                emoteParam,
+                cameraParam,
+                projectionParam,
+                zoomParam,
+                backgroundParam,
+                offsetXParam,
+                offsetYParam,
+                offsetZParam,
+                cameraXParam,
+                cameraYParam,
+                cameraZParam,
+                wheelZoomParam,
+                wheelPrecisionParam,
+                wheelStartParam,
+                disableBackgroundParam,
+                disableAutoRotateParam,
+                disableAutoCenterParam,
+                disableFaceParam,
+                disableDefaultWearablesParam,
+                disableDefaultEmotesParam,
+                disableFadeEffectParam,
+                showSceneBoundariesParam,
+                showThumbnailBoundariesParam,
+                peerUrlParam,
+                nftServerUrlParam,
+                typeParam,
+                panningParam,
+                lockAlphaParam,
+                lockBetaParam,
+                lockRadiusParam,
+                envParam,
+                unityParam,
+                unityModeParam,
+            ]
+                .filter((param) => !!param)
+                .join("&");
+        return url;
+    }, [restProps, baseUrl, dev, unity]);
+    const options = useMemo(() => {
+        const opts = {};
+        for (const key in restProps) {
+            if (typeof restProps[key] !== "function") {
+                opts[key] = restProps[key];
+            }
+        }
+        return opts;
+    }, [restProps]);
+    const sendUpdate = useCallback((options) => {
+        // Use ref for lastOptions to avoid re-renders
+        const currentLastOptions = lastOptionsRef.current;
+        // only send update if new options are different
+        if (!currentLastOptions || !equal(options, currentLastOptions)) {
+            // send message to iframe
+            if (iframeRef.current?.contentWindow) {
+                sendMessage(iframeRef.current.contentWindow, PreviewMessageType.UPDATE, {
+                    options,
+                });
+            }
+            // callback
+            onUpdate(options);
+            // Always store in ref to avoid re-renders
+            lastOptionsRef.current = options;
+        }
+    }, [onUpdate]);
+    const handleUpdate = useCallback(() => {
+        if (iframeRef.current) {
+            // SSR check
+            if (typeof window !== "undefined") {
+                if (state.isReady) {
+                    // if the iframe is ready, send the update
+                    sendUpdate(options);
+                }
+                else {
+                    // otherwise store last update in state until it's ready
+                    setState((prev) => ({ ...prev, pendingOptions: options, url }));
+                }
+            }
+        }
+        else {
+            console.warn(`Could not send update, iframe is not referenced`);
+        }
+    }, [options, state.isReady, sendUpdate]);
+    const handleMessage = useCallback((event) => {
+        const { origin } = event;
+        if (origin !== baseUrl || !event.data?.type)
+            return;
+        const type = event.data.type;
+        switch (type) {
+            case PreviewMessageType.LOAD: {
+                const payload = event.data
+                    .payload;
+                onLoad(payload?.renderer);
+                break;
+            }
+            case PreviewMessageType.ERROR: {
+                const payload = event.data
+                    .payload;
+                onError(new Error(payload.message));
+                break;
+            }
+            case PreviewMessageType.READY: {
+                setState((prev) => {
+                    if (prev.isReady)
+                        return prev;
+                    if (prev.pendingOptions !== null) {
+                        sendUpdate(prev.pendingOptions);
+                        return {
+                            ...prev,
+                            isReady: true,
+                            pendingOptions: null,
+                        };
+                    }
+                    return { ...prev, isReady: true };
+                });
+                break;
+            }
+            default:
+            // do nothing
+        }
+    }, [baseUrl, onLoad, onError, sendUpdate]);
+    useEffect(() => {
+        window.addEventListener("message", handleMessage, false);
+        return () => {
+            window.removeEventListener("message", handleMessage, false);
+        };
+    }, [handleMessage]);
+    useEffect(() => {
+        // if there's a blob in the props, it can't be passed via URL, so we send it via postMessage
+        if (props.blob) {
+            handleUpdate();
+        }
+    }, [props.blob, handleUpdate]);
+    useEffect(() => {
+        debounce(handleUpdate, 500);
+    }, [handleUpdate]);
+    if (props.tokenId && props.itemId) {
+        console.warn("You should NOT use `tokenId` and `itemId` props simultaneously");
+    }
+    return (_jsx(StyledWearablePreview, { id: props.id, src: url, ref: iframeRef, allow: "autoplay" }));
+};
+WearablePreview.createController = createController;
+export { WearablePreview };
+//# sourceMappingURL=WearablePreview.js.map

package/dist/components/WearablePreview/WearablePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WearablePreview.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.tsx"],"names":[],"mappings":"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"}

package/dist/components/WearablePreview/WearablePreview.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { WearablePreview } from "./WearablePreview";
+declare const meta: Meta<typeof WearablePreview>;
+export default meta;
+type Story = StoryObj<typeof WearablePreview>;
+export declare const PreviewAnItem: Story;
+export declare const PreviewAToken: Story;
+export declare const UsingAProfile: Story;
+export declare const UsingCustomSkin: Story;
+export declare const UsingCustomHair: Story;
+export declare const WithEmote: Story;
+export declare const UsingStaticCamera: Story;
+export declare const WithoutAutoRotation: Story;
+export declare const WithoutBackground: Story;
+export declare const WithCustomBackgroundColor: Story;
+export declare const TakeScreenshotAndMetrics: Story;
+export declare const DifferentProjections: Story;
+export declare const PreviewFromFile: Story;
+export declare const UnityModes: Story;
+export declare const ConfiguratorWithUsernameControl: Story;

package/dist/components/WearablePreview/WearablePreview.stories.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable import/no-default-export, import/exports-last, import/group-exports */
+/* cspell:words gltf */
+import { useCallback, useRef, useState } from "react";
+import { WearableCategory } from "@dcl/schemas";
+import { PreviewCamera, PreviewEmote, PreviewProjection, } from "@dcl/schemas/dist/dapps/preview";
+import { BodyShape } from "@dcl/schemas/dist/platform/item";
+import { WearablePreview } from "./WearablePreview";
+import { PreviewUnityMode } from "./WearablePreview.types";
+import { WearablePreviewContainer } from "./WearablePreview.stories.styled";
+const getRandomProfile = () => {
+    return `default${Math.floor(Math.random() * 160) + 1}`;
+};
+const meta = {
+    title: "Decentraland UI/Wearable Preview",
+    component: WearablePreview,
+    parameters: {
+        layout: "fullscreen",
+    },
+    argTypes: {
+        contractAddress: { control: "text" },
+        tokenId: { control: "text" },
+        itemId: { control: "text" },
+        profile: { control: "text" },
+        skin: { control: "text" },
+        hair: { control: "text" },
+        eyes: { control: "text" },
+        bodyShape: {
+            control: "select",
+            options: [BodyShape.MALE, BodyShape.FEMALE],
+        },
+        camera: {
+            control: "select",
+            options: [PreviewCamera.INTERACTIVE, PreviewCamera.STATIC],
+        },
+        projection: {
+            control: "select",
+            options: [PreviewProjection.PERSPECTIVE, PreviewProjection.ORTHOGRAPHIC],
+        },
+        emote: {
+            control: "select",
+            options: [
+                PreviewEmote.IDLE,
+                PreviewEmote.CLAP,
+                PreviewEmote.DAB,
+                PreviewEmote.DANCE,
+                PreviewEmote.FASHION,
+                PreviewEmote.LOVE,
+                PreviewEmote.MONEY,
+            ],
+        },
+        disableBackground: { control: "boolean" },
+        disableAutoRotate: { control: "boolean" },
+        disableAutoCenter: { control: "boolean" },
+        disableFace: { control: "boolean" },
+        disableDefaultWearables: { control: "boolean" },
+        disableDefaultEmotes: { control: "boolean" },
+        dev: { control: "boolean" },
+        unity: { control: "boolean" },
+        unityMode: {
+            control: "select",
+            options: [
+                "marketplace",
+                "profile",
+                "authentication",
+                "builder",
+                "configurator",
+            ],
+        },
+    },
+};
+export default meta;
+export const PreviewAnItem = {
+    args: {
+        contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
+        itemId: "5",
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const PreviewAToken = {
+    args: {
+        contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
+        tokenId: "1",
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const UsingAProfile = {
+    args: {
+        profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6",
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const UsingCustomSkin = {
+    args: {
+        contractAddress: "0x994684b980d6faff06ff36b13c243c31d1b3aa0e",
+        itemId: "0",
+        skin: "ff0000",
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const UsingCustomHair = {
+    args: {
+        contractAddress: "0xe3d2c4ec777fb88dd219905cd896f79a592adf30",
+        itemId: "0",
+        hair: "00ff00",
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const WithEmote = {
+    args: {
+        profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6",
+        emote: PreviewEmote.FASHION,
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const UsingStaticCamera = {
+    args: {
+        profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6",
+        camera: PreviewCamera.STATIC,
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const WithoutAutoRotation = {
+    args: {
+        profile: getRandomProfile(),
+        disableAutoRotate: true,
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const WithoutBackground = {
+    args: {
+        profile: getRandomProfile(),
+        disableBackground: true,
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const WithCustomBackgroundColor = {
+    args: {
+        profile: getRandomProfile(),
+        background: "ff0000",
+    },
+    render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
+};
+export const TakeScreenshotAndMetrics = {
+    render: () => {
+        const [screenshot, setScreenshot] = useState("");
+        const [metrics, setMetrics] = useState(null);
+        const ref = useRef(null);
+        const onLoad = useCallback(() => {
+            ref.current = ref.current ?? WearablePreview.createController("some-id");
+        }, []);
+        return (_jsxs("div", { style: { padding: "20px" }, children: [_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { id: "some-id", contractAddress: "0x186c788f9c172934b790b868faf3b78b84e34e89", itemId: "0", disableAutoRotate: true, disableBackground: true, onLoad: onLoad }) }), _jsxs("div", { style: {
+                        display: "flex",
+                        gap: "10px",
+                        justifyContent: "center",
+                        marginTop: "20px",
+                    }, children: [_jsx("button", { onClick: () => ref.current?.scene.getScreenshot(1024, 1024).then(setScreenshot), children: "Take Screenshot" }), _jsx("button", { onClick: () => ref.current?.scene.getMetrics().then(setMetrics), children: "Get Metrics" })] }), screenshot && (_jsx("div", { style: { textAlign: "center", marginTop: "20px" }, children: _jsx("img", { src: screenshot, alt: "Screenshot", style: { maxWidth: "256px" } }) })), metrics && (_jsx("div", { style: {
+                        marginTop: "20px",
+                        padding: "10px",
+                        background: "#f0f0f0",
+                    }, children: _jsx("pre", { children: JSON.stringify(metrics, null, 2) }) }))] }));
+    },
+};
+export const DifferentProjections = {
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            gap: "20px",
+            justifyContent: "center",
+            padding: "20px",
+        }, children: [_jsxs("div", { children: [_jsx("h3", { style: { textAlign: "center" }, children: "Orthographic" }), _jsx("div", { style: { width: "256px", height: "256px" }, children: _jsx(WearablePreview, { contractAddress: "0xf3eb38b1649bdccc8761f3a0526b3173597a0363", itemId: "2", projection: PreviewProjection.ORTHOGRAPHIC, disableAutoRotate: true }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { textAlign: "center" }, children: "Perspective" }), _jsx("div", { style: { width: "256px", height: "256px" }, children: _jsx(WearablePreview, { contractAddress: "0xf3eb38b1649bdccc8761f3a0526b3173597a0363", itemId: "2", projection: PreviewProjection.PERSPECTIVE, disableAutoRotate: true }) })] })] })),
+};
+function toWearableWithBlobs(file) {
+    return {
+        id: "some-id",
+        name: "",
+        description: "",
+        image: "",
+        thumbnail: "",
+        i18n: [],
+        data: {
+            category: WearableCategory.HAT,
+            hides: [],
+            replaces: [],
+            tags: [],
+            representations: [
+                {
+                    bodyShapes: [BodyShape.MALE, BodyShape.FEMALE],
+                    mainFile: "model.glb",
+                    contents: [
+                        {
+                            key: "model.glb",
+                            blob: file,
+                        },
+                    ],
+                    overrideHides: [],
+                    overrideReplaces: [],
+                },
+            ],
+        },
+    };
+}
+export const PreviewFromFile = {
+    render: () => {
+        const inputRef = useRef(null);
+        const [file, setFile] = useState(null);
+        return (_jsx("div", { style: { padding: "20px" }, children: file ? (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { blob: toWearableWithBlobs(file) }) })) : (_jsxs("div", { style: { textAlign: "center", padding: "50px" }, children: [_jsx("input", { type: "file", ref: inputRef, accept: ".glb,.gltf", onChange: () => setFile(inputRef.current?.files?.[0] || null) }), _jsx("p", { children: "Select a .glb or .gltf file to preview" })] })) }));
+    },
+};
+export const UnityModes = {
+    args: {
+        unity: true,
+        unityMode: PreviewUnityMode.Marketplace,
+        contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
+        itemId: "5",
+    },
+    render: (args) => {
+        // Different configurations for each Unity mode
+        const modeConfigs = {
+            marketplace: {
+                contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
+                itemId: "5",
+            },
+            profile: {
+                profile: getRandomProfile(),
+                contractAddress: undefined,
+                itemId: undefined,
+            },
+            builder: {
+                contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
+                itemId: "5",
+                disableBackground: true,
+            },
+            authentication: {
+                profile: getRandomProfile(),
+                contractAddress: undefined,
+                itemId: undefined,
+                disableAutoRotate: true,
+            },
+            configurator: {
+                contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
+                itemId: "5",
+                disableBackground: true,
+                disableAutoRotate: true,
+            },
+        };
+        const config = modeConfigs[args.unityMode] ||
+            modeConfigs.marketplace;
+        return (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args, ...config }) }));
+    },
+};
+export const ConfiguratorWithUsernameControl = {
+    render: () => {
+        const [username, setUsername] = useState("player123");
+        const ref = useRef(null);
+        const updateUsername = useCallback(() => {
+            ref.current?.scene.setUsername(username);
+        }, [username]);
+        return (_jsxs("div", { style: { padding: "20px" }, children: [_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { id: "configurator-id", unity: true, unityMode: PreviewUnityMode.Configurator }) }), _jsxs("div", { style: {
+                        display: "flex",
+                        gap: "10px",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        marginTop: "20px",
+                    }, children: [_jsx("input", { type: "text", value: username, onChange: (e) => setUsername(e.target.value), placeholder: "Enter username", style: {
+                                padding: "8px",
+                                borderRadius: "4px",
+                                border: "1px solid #ccc",
+                            } }), _jsx("button", { onClick: updateUsername, style: {
+                                padding: "8px 16px",
+                                borderRadius: "4px",
+                                border: "none",
+                                backgroundColor: "#007bff",
+                                color: "white",
+                                cursor: "pointer",
+                            }, children: "Update Username" })] })] }));
+    },
+};
+//# sourceMappingURL=WearablePreview.stories.js.map

package/dist/components/WearablePreview/WearablePreview.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WearablePreview.stories.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/WearablePreview/WearablePreview.stories.styled.d.ts

@@ -0,0 +1,5 @@
+declare const WearablePreviewContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export { WearablePreviewContainer };

package/dist/components/WearablePreview/WearablePreview.stories.styled.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+const WearablePreviewContainer = styled("div")({
+    width: "512px",
+    height: "512px",
+    margin: "20px auto",
+});
+export { WearablePreviewContainer };
+//# sourceMappingURL=WearablePreview.stories.styled.js.map

package/dist/components/WearablePreview/WearablePreview.stories.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WearablePreview.stories.styled.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.stories.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7C,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,WAAW;CACpB,CAAC,CAAA;AAEF,OAAO,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/WearablePreview/WearablePreview.styled.d.ts

@@ -0,0 +1,5 @@
+declare const StyledWearablePreview: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, {}>;
+export { StyledWearablePreview };

package/dist/components/WearablePreview/WearablePreview.styled.js

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+const StyledWearablePreview = styled("iframe")({
+    background: "transparent",
+    border: 0,
+    width: "100%",
+    height: "100%",
+});
+export { StyledWearablePreview };
+//# sourceMappingURL=WearablePreview.styled.js.map

package/dist/components/WearablePreview/WearablePreview.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WearablePreview.styled.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,qBAAqB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7C,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC,CAAA;AAEF,OAAO,EAAE,qBAAqB,EAAE,CAAA"}