eddev 0.2.65 → 0.2.67-beta1

package/dev-ui/components/atoms/ToggleButton.js

@@ -1,25 +1,14 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var icons_1 = require("../../icons");
-var theme_1 = require("../../theme");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("../../icons");
+const theme_1 = require("../../theme");
 function ToggleButton(props) {
-    return ((0, jsx_runtime_1.jsxs)(ToggleButtonStyle, __assign({ onClick: function () { return props.onChange(!props.checked); } }, { children: [props.checked ? icons_1.checkFilled : icons_1.checkEmpty, props.label] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(ToggleButtonStyle, { onClick: () => props.onChange(!props.checked), children: [props.checked ? icons_1.checkFilled : icons_1.checkEmpty, props.label] }));
 }
 exports.ToggleButton = ToggleButton;
-var ToggleButtonStyle = (0, theme_1.styled)("button", {
+const ToggleButtonStyle = (0, theme_1.styled)("button", {
     appearance: "none",
     background: "transparent",
     border: "0px",

package/dev-ui/components/atoms/Tooltip.d.ts

@@ -1,9 +1,9 @@
 import { PropsWithChildren, ReactNode } from "react";
-declare type Props = PropsWithChildren<{
+type Props = PropsWithChildren<{
     label: ReactNode;
     mono?: boolean;
     nowrap?: boolean;
     offset?: number;
 }>;
-export declare function Tooltip(props: Props): JSX.Element;
+export declare function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dev-ui/components/atoms/Tooltip.js

@@ -1,25 +1,13 @@
 "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 _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var theme_1 = require("../../theme");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_1 = require("../../theme");
 function Tooltip(props) {
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(TooltipStyle, __assign({ css: { $$offset: (typeof props.offset === "number" ? props.offset : 5) + "px" }, nowrap: props.nowrap, mono: props.mono }, { children: props.label }), void 0), props.children] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(TooltipStyle, { css: { $$offset: (typeof props.offset === "number" ? props.offset : 5) + "px" }, nowrap: props.nowrap, mono: props.mono, children: props.label }), props.children] }));
 }
 exports.Tooltip = Tooltip;
-var TooltipStyle = (0, theme_1.styled)("div", {
+const TooltipStyle = (0, theme_1.styled)("div", {
     position: "absolute",
     bottom: "calc(100% + $$offset)",
     left: "50%",
@@ -56,11 +44,11 @@ var TooltipStyle = (0, theme_1.styled)("div", {
         },
     },
 });
-var Wrapper = (0, theme_1.styled)("div", {
+const Wrapper = (0, theme_1.styled)("div", {
     position: "relative",
-    "&:hover": (_a = {},
-        _a[TooltipStyle.toString()] = {
+    "&:hover": {
+        [TooltipStyle.toString()]: {
             opacity: 1,
         },
-        _a),
+    },
 });

package/dev-ui/components/panels/AppDataDebugger.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function AppDataDebugger(): JSX.Element;
+export declare function AppDataDebugger(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/AppDataDebugger.js

@@ -1,28 +1,17 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppDataDebugger = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_inspector_1 = require("react-inspector");
-var hooks_1 = require("../../../hooks");
-var theme_1 = require("../../theme");
-var PanelWrapper_1 = require("../PanelWrapper");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_inspector_1 = require("react-inspector");
+const hooks_1 = require("../../../hooks");
+const theme_1 = require("../../theme");
+const PanelWrapper_1 = require("../PanelWrapper");
 function AppDataDebugger() {
-    var data = (0, hooks_1.useAppData)();
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "App Data" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { theme: "chromeDark", data: data, expandLevel: 3 }, void 0) }, void 0) }), void 0));
+    const data = (0, hooks_1.useAppData)();
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "App Data", children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { theme: "chromeDark", data: data, expandLevel: 3 }) }) }));
 }
 exports.AppDataDebugger = AppDataDebugger;
-var Wrapper = (0, theme_1.styled)("div", {
+const Wrapper = (0, theme_1.styled)("div", {
     width: "500px",
     maxHeight: "calc(100vh - 100px)",
     overflowY: "auto",

package/dev-ui/components/panels/ColorEditor.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function ColorEditor(): JSX.Element;
+export declare function ColorEditor(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/ColorEditor.js

@@ -1,27 +1,16 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorEditor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
-var _theme_1 = require("@theme");
-var react_1 = require("react");
-var PanelWrapper_1 = require("../PanelWrapper");
-var useStylesheet_1 = require("../../hooks/useStylesheet");
-var Button_1 = require("../atoms/Button");
-var icons_1 = require("../../icons");
-var Spacer_1 = require("../atoms/Spacer");
-var theme_1 = require("../../theme");
+const _theme_1 = require("@theme");
+const react_1 = require("react");
+const PanelWrapper_1 = require("../PanelWrapper");
+const useStylesheet_1 = require("../../hooks/useStylesheet");
+const Button_1 = require("../atoms/Button");
+const icons_1 = require("../../icons");
+const Spacer_1 = require("../atoms/Spacer");
+const theme_1 = require("../../theme");
 function colorsToJSON(values) {
     return JSON.stringify(values, null, 2);
     // return (
@@ -40,12 +29,15 @@ function colorsToJSON(values) {
     // )
 }
 function colorsToCSS(values) {
-    return "\n    body {\n      ".concat(Object.entries(values)
-        .map(function (_a) {
-        var token = _a[0], value = _a[1];
-        return "--colors-".concat(token, ": ").concat(value, ";");
+    return `
+    body {
+      ${Object.entries(values)
+        .map(([token, value]) => {
+        return `--colors-${token}: ${value};`;
     })
-        .join("\n"), "\n    }\n  ");
+        .join("\n")}
+    }
+  `;
     // const parsedBreakpoints = parseBreakpoints(originalConfig.breakpoints, originalConfig.media)
     // const { globalResponsive } = parseResponsiveTokens(
     //   {
@@ -70,40 +62,41 @@ function colorsToCSS(values) {
     // return rules.join("\n")
 }
 function ColorEditor() {
-    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.theme.colors; }), values = _a[0], setValues = _a[1];
+    const [values, setValues] = (0, react_1.useState)(() => _theme_1.originalConfig.theme.colors);
     console.log("COLOR", values, _theme_1.originalConfig);
-    var stylesheet = (0, useStylesheet_1.useStylesheet)("colors");
-    (0, react_1.useEffect)(function () {
+    const stylesheet = (0, useStylesheet_1.useStylesheet)("colors");
+    (0, react_1.useEffect)(() => {
         stylesheet.set(colorsToCSS(values));
     }, [values]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Colour Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Colour Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
                             navigator.clipboard.writeText(colorsToJSON(values));
-                        } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                            navigator.clipboard.readText().then(function (text) {
+                        }, children: [icons_1.copy, "Copy"] }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
+                            navigator.clipboard.readText().then((text) => {
                                 try {
-                                    var data = JSON.parse(text);
+                                    const data = JSON.parse(text);
                                     setValues(data);
                                 }
                                 catch (err) {
                                     alert("Error decoding pasted content: " + err.message + ". You pasted:\n" + text);
                                 }
                             });
-                        } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                        }, children: [icons_1.paste, "Paste"] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
                             setValues(_theme_1.originalConfig.theme.colors);
-                        } }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: Object.entries(values).map(function (_a) {
-                var token = _a[0], value = _a[1];
-                return ((0, jsx_runtime_1.jsxs)(ColorRow, { children: [(0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["$", token] }), void 0), (0, jsx_runtime_1.jsx)(Cell, __assign({ mono: true, small: true }, { children: value }), void 0), (0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: function (e) {
-                                    var _a;
-                                    setValues(__assign(__assign({}, values), (_a = {}, _a[token] = e.target.value, _a)));
-                                } }, void 0) }, void 0)] }, void 0));
-            }) }), void 0) }, void 0));
+                        }, children: [icons_1.trash, " Reset"] })] }), children: Object.entries(values).map(([token, value]) => {
+                return ((0, jsx_runtime_1.jsxs)(ColorRow, { children: [(0, jsx_runtime_1.jsxs)(Cell, { mono: true, children: ["$", token] }), (0, jsx_runtime_1.jsx)(Cell, { mono: true, small: true, children: value }), (0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: (e) => {
+                                    setValues({
+                                        ...values,
+                                        [token]: e.target.value,
+                                    });
+                                } }) })] }));
+            }) }) }));
 }
 exports.ColorEditor = ColorEditor;
-var ColorRow = (0, theme_1.styled)("div", {
+const ColorRow = (0, theme_1.styled)("div", {
     display: "flex",
     borderBottom: "1px solid $$lineColor",
 });
-var Cell = (0, theme_1.styled)("div", {
+const Cell = (0, theme_1.styled)("div", {
     flex: "0 0 150px",
     variants: {
         mono: {

package/dev-ui/components/panels/PageDataDebugger.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function PageDataDebugger(): JSX.Element;
+export declare function PageDataDebugger(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/PageDataDebugger.js

@@ -1,29 +1,17 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageDataDebugger = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_inspector_1 = require("react-inspector");
-var routing_1 = require("../../../routing");
-var theme_1 = require("../../theme");
-var PanelWrapper_1 = require("../PanelWrapper");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_inspector_1 = require("react-inspector");
+const routing_1 = require("../../../routing");
+const theme_1 = require("../../theme");
+const PanelWrapper_1 = require("../PanelWrapper");
 function PageDataDebugger() {
-    var _a;
-    var route = (0, routing_1.useRoute)();
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Page Data" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { theme: "chromeDark", data: (_a = route.data) === null || _a === void 0 ? void 0 : _a.viewData.data, expandLevel: 3 }, void 0) }, void 0) }), void 0));
+    const route = (0, routing_1.useRoute)();
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Page Data", children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { theme: "chromeDark", data: route.data?.viewData?.data, expandLevel: 3 }) }) }));
 }
 exports.PageDataDebugger = PageDataDebugger;
-var Wrapper = (0, theme_1.styled)("div", {
+const Wrapper = (0, theme_1.styled)("div", {
     width: "500px",
     maxHeight: "calc(100vh - 100px)",
     overflowY: "auto",

package/dev-ui/components/panels/QueryDebugger.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function QueryDebugger(): JSX.Element;
+export declare function QueryDebugger(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/QueryDebugger.js

@@ -1,33 +1,21 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QueryDebugger = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@stitches/react");
-var react_2 = require("react");
-var useQueryDebug_1 = require("../../../hooks/useQueryDebug");
-var PanelWrapper_1 = require("../PanelWrapper");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@stitches/react");
+const react_2 = require("react");
+const useQueryDebug_1 = require("../../../hooks/useQueryDebug");
+const PanelWrapper_1 = require("../PanelWrapper");
 function QueryDebugger() {
-    var data = (0, useQueryDebug_1.useQueryDebugData)();
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Query Debugger" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: data ? (0, jsx_runtime_1.jsx)(Item, { item: data, depth: 0 }, void 0) : (0, jsx_runtime_1.jsx)("div", { children: "No data" }, void 0) }, void 0) }), void 0));
+    const data = (0, useQueryDebug_1.useQueryDebugData)();
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Query Debugger", children: (0, jsx_runtime_1.jsx)(Wrapper, { children: data ? (0, jsx_runtime_1.jsx)(Item, { item: data, depth: 0 }) : (0, jsx_runtime_1.jsx)("div", { children: "No data" }) }) }));
 }
 exports.QueryDebugger = QueryDebugger;
-var Item = function (_a) {
-    var item = _a.item, depth = _a.depth;
-    var _b = (0, react_2.useState)(depth < 3), expanded = _b[0], setExpanded = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(ItemStyle, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "query-item-heading" }, { children: ["\u2022 ", (0, jsx_runtime_1.jsx)("strong", { children: item.label }, void 0), " ", (0, jsx_runtime_1.jsx)("code", { children: item.file }, void 0), " (", Number(item.duration).toFixed(1), "s)"] }), void 0), item.errors && item.errors.length ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "query-errors" }, { children: item.errors.map(function (err, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "query-error-item" }, { children: ["\u2022 ", err] }), i)); }) }), void 0)) : null, item.children && item.children.length ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "query-children" }, { children: item.children.map(function (child, i) { return ((0, jsx_runtime_1.jsx)(Item, { item: child, depth: depth + 1 }, i)); }) }), void 0)) : null] }, void 0));
+const Item = ({ item, depth }) => {
+    const [expanded, setExpanded] = (0, react_2.useState)(depth < 3);
+    return ((0, jsx_runtime_1.jsxs)(ItemStyle, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "query-item-heading", children: ["\u2022 ", (0, jsx_runtime_1.jsx)("strong", { children: item.label }), " ", (0, jsx_runtime_1.jsx)("code", { children: item.file }), " (", Number(item.duration).toFixed(1), "s)"] }), item.errors && item.errors.length ? ((0, jsx_runtime_1.jsx)("div", { className: "query-errors", children: item.errors.map((err, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "query-error-item", children: ["\u2022 ", err] }, i))) })) : null, item.children && item.children.length ? ((0, jsx_runtime_1.jsx)("div", { className: "query-children", children: item.children.map((child, i) => ((0, jsx_runtime_1.jsx)(Item, { item: child, depth: depth + 1 }, i))) })) : null] }));
 };
-var ItemStyle = (0, react_1.styled)("div", {
+const ItemStyle = (0, react_1.styled)("div", {
     fontSize: "12px",
     ".query-children": {
         paddingLeft: "30px",
@@ -40,7 +28,7 @@ var ItemStyle = (0, react_1.styled)("div", {
         },
     },
 });
-var Wrapper = (0, react_1.styled)("div", {
+const Wrapper = (0, react_1.styled)("div", {
     maxHeight: 500,
     overflowY: "auto",
 });

package/dev-ui/components/panels/SpacingEditor.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function SpacingEditor(): JSX.Element;
+export declare function SpacingEditor(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/SpacingEditor.js

@@ -1,56 +1,42 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpacingEditor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
-var _theme_1 = require("@theme");
-var react_1 = require("react");
-var style_1 = require("../../../style");
-var PanelWrapper_1 = require("../PanelWrapper");
-var ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
-var useStylesheet_1 = require("../../hooks/useStylesheet");
-var Button_1 = require("../atoms/Button");
-var icons_1 = require("../../icons");
-var Spacer_1 = require("../atoms/Spacer");
+const _theme_1 = require("@theme");
+const react_1 = require("react");
+const style_1 = require("../../../style");
+const PanelWrapper_1 = require("../PanelWrapper");
+const ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
+const useStylesheet_1 = require("../../hooks/useStylesheet");
+const Button_1 = require("../atoms/Button");
+const icons_1 = require("../../icons");
+const Spacer_1 = require("../atoms/Spacer");
 function spaceToJSON(space) {
     return ("{\n" +
         Object.entries(space)
-            .map(function (_a) {
-            var token = _a[0], values = _a[1];
-            var tokenStr = Object.entries(values)
-                .map(function (_a) {
-                var breakpoint = _a[0], value = _a[1];
-                return "\"".concat(breakpoint, "\": ").concat(JSON.stringify(value));
+            .map(([token, values]) => {
+            const tokenStr = Object.entries(values)
+                .map(([breakpoint, value]) => {
+                return `\"${breakpoint}\": ${JSON.stringify(value)}`;
             })
                 .join(", ");
-            return "  \"".concat(token, "\": { ").concat(tokenStr, " }");
+            return `  \"${token}\": { ${tokenStr} }`;
         })
             .join(",\n") +
         "\n}");
 }
 function spaceToCSS(space) {
-    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    var globalResponsive = (0, style_1.parseResponsiveTokens)({
+    const parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    const { globalResponsive } = (0, style_1.parseResponsiveTokens)({
         space: space,
-    }, parsedBreakpoints).globalResponsive;
-    var rules = [];
-    Object.entries(globalResponsive).forEach(function (_a) {
-        var breakpoint = _a[0], values = _a[1];
-        var rule = "";
-        var media = _theme_1.originalConfig.media[breakpoint.replace("@", "")];
-        var variables = [];
-        for (var key in values) {
+    }, parsedBreakpoints);
+    const rules = [];
+    Object.entries(globalResponsive).forEach(([breakpoint, values]) => {
+        let rule = "";
+        let media = _theme_1.originalConfig.media[breakpoint.replace("@", "")];
+        let variables = [];
+        for (let key in values) {
             variables.push(key + ": " + values[key]);
         }
         if (media) {
@@ -63,26 +49,26 @@ function spaceToCSS(space) {
     return rules.join("\n");
 }
 function SpacingEditor() {
-    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.responsive.space; }), values = _a[0], setValues = _a[1];
-    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    var stylesheet = (0, useStylesheet_1.useStylesheet)("spacing");
-    (0, react_1.useEffect)(function () {
+    const [values, setValues] = (0, react_1.useState)(() => _theme_1.originalConfig.responsive.space);
+    const parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    const stylesheet = (0, useStylesheet_1.useStylesheet)("spacing");
+    (0, react_1.useEffect)(() => {
         stylesheet.set(spaceToCSS(values));
     }, [values]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Spacing Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Spacing Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
                             navigator.clipboard.writeText(spaceToJSON(values));
-                        } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
-                            navigator.clipboard.readText().then(function (text) {
+                        }, children: [icons_1.copy, "Copy"] }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
+                            navigator.clipboard.readText().then((text) => {
                                 try {
-                                    var data = JSON.parse(text);
+                                    const data = JSON.parse(text);
                                     setValues(data);
                                 }
                                 catch (err) {
                                     alert("Error decoding pasted content: " + err.message + ". You pasted:\n" + text);
                                 }
                             });
-                        } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                        }, children: [icons_1.paste, "Paste"] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
                             setValues(_theme_1.originalConfig.responsive.space);
-                        } }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: values, showBreakpointName: true, showRange: true, showValues: true, related: true, labelWidth: "30px", onChange: setValues, modes: ["px", "multiplier"] }, void 0) }), void 0) }, void 0));
+                        }, children: [icons_1.trash, " Reset"] })] }), children: (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: values, showBreakpointName: true, showRange: true, showValues: true, related: true, labelWidth: "30px", onChange: setValues, modes: ["px", "multiplier"] }) }) }));
 }
 exports.SpacingEditor = SpacingEditor;

package/dev-ui/components/panels/TypographyEditor.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function TypographyEditor(): JSX.Element;
+export declare function TypographyEditor(): import("react/jsx-runtime").JSX.Element;

package/dev-ui/components/panels/TypographyEditor.js

@@ -1,35 +1,24 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TypographyEditor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
-var _theme_1 = require("@theme");
-var react_1 = require("react");
-var style_1 = require("../../../style");
-var usePersistState_1 = require("../../hooks/usePersistState");
-var icons_1 = require("../../icons");
-var theme_1 = require("../../theme");
-var Button_1 = require("../atoms/Button");
-var Spacer_1 = require("../atoms/Spacer");
-var Text_1 = require("../atoms/Text");
-var PanelWrapper_1 = require("../PanelWrapper");
-var ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
+const _theme_1 = require("@theme");
+const react_1 = require("react");
+const style_1 = require("../../../style");
+const usePersistState_1 = require("../../hooks/usePersistState");
+const icons_1 = require("../../icons");
+const theme_1 = require("../../theme");
+const Button_1 = require("../atoms/Button");
+const Spacer_1 = require("../atoms/Spacer");
+const Text_1 = require("../atoms/Text");
+const PanelWrapper_1 = require("../PanelWrapper");
+const ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
 function TypographyEditor() {
-    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.typography; }), values = _a[0], setValues = _a[1];
-    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    var _b = (0, usePersistState_1.usePersistState)("preview_text", "The quick brown fox jumps over the lazy dog"), previewText = _b[0], setPreviewText = _b[1];
-    var reset = function () {
+    const [values, setValues] = (0, react_1.useState)(() => _theme_1.originalConfig.typography);
+    const parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    const [previewText, setPreviewText] = (0, usePersistState_1.usePersistState)("preview_text", "The quick brown fox jumps over the lazy dog");
+    const reset = () => {
         setValues(_theme_1.originalConfig.typography);
         setPreviewText("The quick brown fox jumps over the lazy dog");
     };
@@ -37,9 +26,9 @@ function TypographyEditor() {
     // useEffect(() => {
     //   stylesheet.set(spaceToCSS(values))
     // }, [values])
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Typography", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Typography", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
                         // navigator.clipboard.writeText(spaceToJSON(values))
-                    } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                    }, children: [icons_1.copy, "Copy"] }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
                         // navigator.clipboard.readText().then((text) => {
                         //   try {
                         //     const data = JSON.parse(text)
@@ -48,38 +37,41 @@ function TypographyEditor() {
                         //     alert("Error decoding pasted content: " + (err as any).message + ". You pasted:\n" + text)
                         //   }
                         // })
-                    } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: reset }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: Object.entries(values).map(function (_a, index) {
-                var name = _a[0], settings = _a[1];
-                return ((0, jsx_runtime_1.jsxs)(TypographyItem, { children: [(0, jsx_runtime_1.jsx)(Meta, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: name }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)(Details, { children: [(0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: function (e) {
-                                        setPreviewText(e.currentTarget.value);
-                                    } }, void 0), (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: {
-                                        fontSize: settings.fontSize,
-                                        lineHeight: settings.lineHeight,
-                                    }, showBreakpointName: true, showRange: true, showValues: true, labelWidth: "80px", onChange: function (data) {
-                                        var _a;
-                                        setValues(__assign(__assign({}, values), (_a = {}, _a[name] = __assign(__assign({}, settings), { fontSize: data.fontSize, lineHeight: data.lineHeight }), _a)));
-                                    }, modes: ["px", "multiplier"] }, void 0)] }, void 0)] }, index));
-            }) }, void 0) }), void 0));
+                    }, children: [icons_1.paste, "Paste"] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: reset, children: [icons_1.trash, " Reset"] })] }), children: (0, jsx_runtime_1.jsx)(Wrapper, { children: Object.entries(values).map(([name, settings], index) => ((0, jsx_runtime_1.jsxs)(TypographyItem, { children: [(0, jsx_runtime_1.jsx)(Meta, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "monoBold", children: name }) }), (0, jsx_runtime_1.jsxs)(Details, { children: [(0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: (e) => {
+                                    setPreviewText(e.currentTarget.value);
+                                } }), (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: {
+                                    fontSize: settings.fontSize,
+                                    lineHeight: settings.lineHeight,
+                                }, showBreakpointName: true, showRange: true, showValues: true, labelWidth: "80px", onChange: (data) => {
+                                    setValues({
+                                        ...values,
+                                        [name]: {
+                                            ...settings,
+                                            fontSize: data.fontSize,
+                                            lineHeight: data.lineHeight,
+                                        },
+                                    });
+                                }, modes: ["px", "multiplier"] })] })] }, index))) }) }));
 }
 exports.TypographyEditor = TypographyEditor;
-var TypographyItem = (0, theme_1.styled)("div", {
+const TypographyItem = (0, theme_1.styled)("div", {
     borderBottom: "1px solid $colors$bgLineStrong",
     display: "flex",
     paddingTop: "4px",
     paddingBottom: "4px",
 });
-var Meta = (0, theme_1.styled)("div", {
+const Meta = (0, theme_1.styled)("div", {
     width: "200px",
     flex: "0 0 auto",
 });
-var Wrapper = (0, theme_1.styled)("div", {
+const Wrapper = (0, theme_1.styled)("div", {
     maxHeight: "500px",
     overflowY: "auto",
 });
-var Details = (0, theme_1.styled)("div", {
+const Details = (0, theme_1.styled)("div", {
     flex: "1 1 auto",
 });
-var Preview = (0, _theme_1.styled)("input", {
+const Preview = (0, _theme_1.styled)("input", {
     appearance: "none",
     backgroundColor: "transparent",
     borderLeft: 0,