eddev 0.2.67-beta1 → 0.3.0-beta1

package/dev-ui/components/ResponsiveScaleEditor.js

@@ -1,40 +1,52 @@
 "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 });
 exports.ResponsiveScaleEditor = exports.RESPONSIVE_ROW_HEIGHT = exports.RESPONSIVE_COLUMN_WIDTH = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("../../style");
-const theme_1 = require("../theme");
-const NumberField_1 = require("./atoms/NumberField");
-const ResponsiveLerpControl_1 = require("./ResponsiveLerpControl");
-const Text_1 = require("./atoms/Text");
-const ToggleButton_1 = require("./atoms/ToggleButton");
-const Tooltip_1 = require("./atoms/Tooltip");
-const react_1 = require("react");
-const immer_1 = __importDefault(require("immer"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../../style");
+var theme_1 = require("../theme");
+var NumberField_1 = require("./atoms/NumberField");
+var ResponsiveLerpControl_1 = require("./ResponsiveLerpControl");
+var Text_1 = require("./atoms/Text");
+var ToggleButton_1 = require("./atoms/ToggleButton");
+var Tooltip_1 = require("./atoms/Tooltip");
+var react_1 = require("react");
+var immer_1 = __importDefault(require("immer"));
 // @ts-ignore
-const _theme_1 = require("@theme");
+var _theme_1 = require("@theme");
 exports.RESPONSIVE_COLUMN_WIDTH = "110px";
 exports.RESPONSIVE_ROW_HEIGHT = "20px";
 function ResponsiveScaleEditor(props) {
-    const values = props.data;
-    const rows = (0, react_1.useMemo)(() => {
-        return Object.entries(props.data).map(([key, row]) => {
-            const info = (0, style_1.parseResponsiveObject)(props.breakpoints, row);
+    var values = props.data;
+    var rows = (0, react_1.useMemo)(function () {
+        return Object.entries(props.data).map(function (_a) {
+            var key = _a[0], row = _a[1];
+            var info = (0, style_1.parseResponsiveObject)(props.breakpoints, row);
             return {
                 token: key,
                 row: info,
             };
         });
     }, [props.data]);
-    const general = (0, react_1.useMemo)(() => {
+    var general = (0, react_1.useMemo)(function () {
         return props.data[0];
     }, [props.data]);
-    const onChangeValue = (item, value, token) => {
-        props.onChange((0, immer_1.default)(values, (draft) => {
-            let subvalue = item.type === "px" ? value + "px" : item.type === "multiplier" ? "x" + value : undefined;
+    var onChangeValue = function (item, value, token) {
+        props.onChange((0, immer_1.default)(values, function (draft) {
+            var subvalue = item.type === "px" ? value + "px" : item.type === "multiplier" ? "x" + value : undefined;
             if (item.lerpStart && typeof subvalue === "string") {
                 subvalue = [subvalue];
             }
@@ -46,22 +58,22 @@ function ResponsiveScaleEditor(props) {
             }
         }));
     };
-    const onChangeUnits = (breakpoint, token) => {
-        const sampleValue = rows.find((r) => r.token === token).row.find((item) => item.breakpoint === breakpoint);
-        const nextType = props.modes[(props.modes.indexOf(sampleValue.type) + 1) % props.modes.length];
-        props.onChange((0, immer_1.default)(values, (draft) => {
-            const updateToken = (rowIndex) => {
-                const token = rows[rowIndex].token;
-                const item = rows[rowIndex].row.find((i) => i.breakpoint === breakpoint);
-                const base = rows[rowIndex].row.find((i) => i.breakpoint === item.lastBreakpoint);
-                let nextValue;
+    var onChangeUnits = function (breakpoint, token) {
+        var sampleValue = rows.find(function (r) { return r.token === token; }).row.find(function (item) { return item.breakpoint === breakpoint; });
+        var nextType = props.modes[(props.modes.indexOf(sampleValue.type) + 1) % props.modes.length];
+        props.onChange((0, immer_1.default)(values, function (draft) {
+            var updateToken = function (rowIndex) {
+                var token = rows[rowIndex].token;
+                var item = rows[rowIndex].row.find(function (i) { return i.breakpoint === breakpoint; });
+                var base = rows[rowIndex].row.find(function (i) { return i.breakpoint === item.lastBreakpoint; });
+                var nextValue;
                 if (item.type === "px" && nextType === "multiplier") {
                     if (base) {
-                        nextValue = "x" + item.value / base?.concreteValue;
+                        nextValue = "x" + item.value / (base === null || base === void 0 ? void 0 : base.concreteValue);
                     }
                 }
                 else if (item.type === "multiplier" && nextType === "px") {
-                    nextValue = item.value * base?.concreteValue + "px";
+                    nextValue = item.value * (base === null || base === void 0 ? void 0 : base.concreteValue) + "px";
                 }
                 if (nextValue) {
                     if (item.lerpStart) {
@@ -71,16 +83,16 @@ function ResponsiveScaleEditor(props) {
                 }
             };
             if (props.related) {
-                for (let i = 0; i < rows.length; i++) {
+                for (var i = 0; i < rows.length; i++) {
                     updateToken(i);
                 }
             }
         }));
     };
-    const onToggleLerping = (breakpoint, lerping) => {
-        props.onChange((0, immer_1.default)(values, (values) => {
-            for (let token in values) {
-                let subval = values[token]["@" + breakpoint];
+    var onToggleLerping = function (breakpoint, lerping) {
+        props.onChange((0, immer_1.default)(values, function (values) {
+            for (var token in values) {
+                var subval = values[token]["@" + breakpoint];
                 if (Array.isArray(subval)) {
                     subval = subval[0];
                 }
@@ -88,20 +100,21 @@ function ResponsiveScaleEditor(props) {
             }
         }));
     };
-    const onToggleBreakpoint = (item, enabled) => {
-        const breakpoint = item.breakpoint;
+    var onToggleBreakpoint = function (item, enabled) {
+        var breakpoint = item.breakpoint;
         if (!enabled) {
-            props.onChange((0, immer_1.default)(values, (values) => {
-                for (let token in values) {
+            props.onChange((0, immer_1.default)(values, function (values) {
+                for (var token in values) {
                     delete values[token]["@" + breakpoint];
                 }
             }));
         }
         else {
-            props.onChange((0, immer_1.default)(values, (values) => {
-                for (let token in values) {
-                    const original = _theme_1.originalConfig.responsive.space[token]?.["@" + breakpoint];
-                    let value = original;
+            props.onChange((0, immer_1.default)(values, function (values) {
+                var _a;
+                for (var token in values) {
+                    var original = (_a = _theme_1.originalConfig.responsive.space[token]) === null || _a === void 0 ? void 0 : _a["@" + breakpoint];
+                    var value = original;
                     if (!value) {
                         value = values[token]["@" + item.baseBreakpoint];
                     }
@@ -112,32 +125,33 @@ function ResponsiveScaleEditor(props) {
             }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { css: { $$total: props.breakpoints.length, $$labelWidth: props.labelWidth }, children: [props.showBreakpointName && ((0, jsx_runtime_1.jsx)(Row, { heading: true, children: rows[0].row.map((item, i) => {
-                    const bp = props.breakpoints[i];
-                    return ((0, jsx_runtime_1.jsx)(Col, { css: { textAlign: "center" }, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { label: `${bp.min} to ${bp.max || "∞"}`, mono: true, nowrap: true, children: (0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { checked: item.defined, onChange: (checked) => {
-                                    onToggleBreakpoint?.(item, checked);
-                                }, label: (0, jsx_runtime_1.jsx)(Text_1.Text, { as: "span", variant: "monoBold", children: item.breakpoint }) }) }) }, i));
-                }) })), props.showRange && ((0, jsx_runtime_1.jsx)(Row, { heading: true, children: (0, jsx_runtime_1.jsx)(ResponsiveLerpControl_1.ResponsiveLerpControl, { onToggleLerping: onToggleLerping, data: rows[0].row }) })), props.showValues && ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: rows.map(({ token, row }, rowIndex) => {
-                    return ((0, jsx_runtime_1.jsxs)(Row, { hoverable: true, labelIndent: false, children: [(0, jsx_runtime_1.jsx)(RowLabel, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "monoBold", children: token }) }), row.map((item, i) => {
-                                const tabIndex = 500 + (props.tabIndexStart || 0) + i * 100;
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ css: { $$total: props.breakpoints.length, $$labelWidth: props.labelWidth } }, { children: [props.showBreakpointName && ((0, jsx_runtime_1.jsx)(Row, __assign({ heading: true }, { children: rows[0].row.map(function (item, i) {
+                    var bp = props.breakpoints[i];
+                    return ((0, jsx_runtime_1.jsx)(Col, __assign({ css: { textAlign: "center" } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ label: "".concat(bp.min, " to ").concat(bp.max || "∞"), mono: true, nowrap: true }, { children: (0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { checked: item.defined, onChange: function (checked) {
+                                    onToggleBreakpoint === null || onToggleBreakpoint === void 0 ? void 0 : onToggleBreakpoint(item, checked);
+                                }, label: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ as: "span", variant: "monoBold" }, { children: item.breakpoint }), void 0) }, void 0) }), void 0) }), i));
+                }) }), void 0)), props.showRange && ((0, jsx_runtime_1.jsx)(Row, __assign({ heading: true }, { children: (0, jsx_runtime_1.jsx)(ResponsiveLerpControl_1.ResponsiveLerpControl, { onToggleLerping: onToggleLerping, data: rows[0].row }, void 0) }), void 0)), props.showValues && ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: rows.map(function (_a, rowIndex) {
+                    var token = _a.token, row = _a.row;
+                    return ((0, jsx_runtime_1.jsxs)(Row, __assign({ hoverable: true, labelIndent: false }, { children: [(0, jsx_runtime_1.jsx)(RowLabel, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: token }), void 0) }, void 0), row.map(function (item, i) {
+                                var tabIndex = 500 + (props.tabIndexStart || 0) + i * 100;
                                 return ((0, jsx_runtime_1.jsxs)(Col, { children: [(0, jsx_runtime_1.jsx)(Field, { children: item.type === "multiplier" ||
                                                 item.type === "number" ||
                                                 item.type === "px" ||
-                                                item.type === "percent" ? ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { tabIndex: tabIndex, prefix: item.type === "multiplier" ? "x" : "", suffix: item.type === "px" ? "px" : item.type === "percent" ? "%" : "", value: item.value, onChange: (value) => {
+                                                item.type === "percent" ? ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { tabIndex: tabIndex, prefix: item.type === "multiplier" ? "x" : "", suffix: item.type === "px" ? "px" : item.type === "percent" ? "%" : "", value: item.value, onChange: function (value) {
                                                     onChangeValue(item, value, token);
-                                                }, increment: item.type === "px" ? 1 : 0.1 })) : null }), item.defined && (!props.related || rowIndex === 0) && ((0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => {
+                                                }, increment: item.type === "px" ? 1 : 0.1 }, void 0)) : null }, void 0), item.defined && (!props.related || rowIndex === 0) && ((0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function () {
                                                 onChangeUnits(item.breakpoint, token);
-                                            }, children: item.type === "px" ? "px" : "multiplier" }))] }, i));
-                            })] }, rowIndex));
-                }) }))] }));
+                                            } }, { children: item.type === "px" ? "px" : "multiplier" }), void 0))] }, i));
+                            })] }), rowIndex));
+                }) }, void 0))] }), void 0));
 }
 exports.ResponsiveScaleEditor = ResponsiveScaleEditor;
-const Wrapper = (0, theme_1.styled)("div", {
+var Wrapper = (0, theme_1.styled)("div", {
     position: "relative",
-    width: `calc(${exports.RESPONSIVE_COLUMN_WIDTH} * $$total)`,
+    width: "calc(".concat(exports.RESPONSIVE_COLUMN_WIDTH, " * $$total)"),
     $$lineColor: "$colors$bgLine",
 });
-const Row = (0, theme_1.styled)("div", {
+var Row = (0, theme_1.styled)("div", {
     display: "flex",
     borderBottom: "1px solid $$lineColor",
     paddingLeft: "$$labelWidth",
@@ -161,7 +175,7 @@ const Row = (0, theme_1.styled)("div", {
         },
     },
 });
-const Col = (0, theme_1.styled)("div", {
+var Col = (0, theme_1.styled)("div", {
     position: "relative",
     width: exports.RESPONSIVE_COLUMN_WIDTH,
     height: exports.RESPONSIVE_ROW_HEIGHT,
@@ -179,7 +193,7 @@ const Col = (0, theme_1.styled)("div", {
         },
     },
 });
-const Field = (0, theme_1.styled)("div", {
+var Field = (0, theme_1.styled)("div", {
     flex: "1 1 auto",
 });
 // const Start = styled("div", {
@@ -189,13 +203,13 @@ const Field = (0, theme_1.styled)("div", {
 //   position: "absolute",
 //   right: 2,
 // })
-const RowLabel = (0, theme_1.styled)("div", {
+var RowLabel = (0, theme_1.styled)("div", {
     width: "$$labelWidth",
     height: exports.RESPONSIVE_ROW_HEIGHT,
     boxSizing: "border-box",
     flex: "0 0 auto",
 });
-const Toolbar = (0, theme_1.styled)("div", {
+var Toolbar = (0, theme_1.styled)("div", {
     display: "flex",
     textAlign: "left",
     width: "100%",
@@ -205,7 +219,7 @@ const Toolbar = (0, theme_1.styled)("div", {
         marginRight: "3px",
     },
 });
-const ToolbarButton = (0, theme_1.styled)("button", {
+var ToolbarButton = (0, theme_1.styled)("button", {
     fontSize: "9px",
     appearance: "none",
     border: 0,

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-const theme_1 = require("../../theme");
+var theme_1 = require("../../theme");
 exports.Button = (0, theme_1.styled)("button", {
     appearance: "none",
     border: "0px",

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

@@ -1,13 +1,13 @@
 import { PropsWithChildren, ReactNode } from "react";
-type MenuItem = {
+declare type MenuItem = {
     icon?: ReactNode;
     label: string;
     onClick: () => void;
 };
-type Props = PropsWithChildren<{
+declare type Props = PropsWithChildren<{
     items: MenuItem[];
     mono?: boolean;
     offset?: number;
 }>;
-export declare function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip(props: Props): JSX.Element;
 export {};

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

@@ -1,13 +1,14 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_1 = require("../../theme");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var theme_1 = require("../../theme");
 function Tooltip(props) {
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(MenuWrapper, { css: { $$offset: (typeof props.offset === "number" ? props.offset : 5) + "px" }, mono: props.mono }), props.children] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(MenuWrapper, { css: { $$offset: (typeof props.offset === "number" ? props.offset : 5) + "px" }, mono: props.mono }, void 0), props.children] }, void 0));
 }
 exports.Tooltip = Tooltip;
-const MenuWrapper = (0, theme_1.styled)("div", {
+var MenuWrapper = (0, theme_1.styled)("div", {
     position: "absolute",
     bottom: "calc(100% + $$offset)",
     left: "50%",
@@ -39,11 +40,11 @@ const MenuWrapper = (0, theme_1.styled)("div", {
         },
     },
 });
-const Wrapper = (0, theme_1.styled)("div", {
+var Wrapper = (0, theme_1.styled)("div", {
     position: "relative",
-    "&:hover": {
-        [MenuWrapper.toString()]: {
+    "&:hover": (_a = {},
+        _a[MenuWrapper.toString()] = {
             opacity: 1,
         },
-    },
+        _a),
 });

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

@@ -1,4 +1,4 @@
-type Props = {
+declare type Props = {
     prefix?: string;
     suffix?: string;
     value: number;
@@ -7,5 +7,5 @@ type Props = {
     increment: number;
     tabIndex?: number;
 };
-export declare function NumberField(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function NumberField(props: Props): JSX.Element;
 export {};

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

@@ -1,25 +1,37 @@
 "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.NumberField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const theme_1 = require("../../theme");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var theme_1 = require("../../theme");
 function NumberField(props) {
-    const ref = (0, react_1.useRef)(null);
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const [value, setValue] = (0, react_1.useState)(props.value);
-    const focusAll = () => {
-        const range = document.createRange();
+    var ref = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(false), focused = _a[0], setFocused = _a[1];
+    var _b = (0, react_1.useState)(props.value), value = _b[0], setValue = _b[1];
+    var focusAll = function () {
+        var range = document.createRange();
         range.selectNodeContents(ref.current);
-        const sel = window.getSelection();
-        sel?.removeAllRanges();
-        sel?.addRange(range);
+        var sel = window.getSelection();
+        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+        sel === null || sel === void 0 ? void 0 : sel.addRange(range);
     };
-    const normalize = (value) => {
+    var normalize = function (value) {
         return parseFloat(Math.max(0, value).toFixed(4));
     };
-    const setValueForced = (value, changed = false) => {
-        const v = normalize(value);
+    var setValueForced = function (value, changed) {
+        if (changed === void 0) { changed = false; }
+        var v = normalize(value);
         setValue(v);
         if (ref.current) {
             if (ref.current.innerHTML !== v.toString()) {
@@ -30,25 +42,26 @@ function NumberField(props) {
             props.onChange(value);
         }
     };
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useEffect)(function () {
         setValueForced(props.value, false);
     }, [props.value]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useEffect)(function () {
         if (!focused) {
             setValueForced(value);
         }
     }, [value, focused]);
-    return ((0, jsx_runtime_1.jsxs)(Field, { focused: focused, onMouseDown: (e) => {
-            ref.current?.focus();
+    return ((0, jsx_runtime_1.jsxs)(Field, __assign({ focused: focused, onMouseDown: function (e) {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
             if (!focused) {
                 focusAll();
                 e.preventDefault();
             }
-        }, children: [props.prefix && (0, jsx_runtime_1.jsx)(Extra, { children: props.prefix }), (0, jsx_runtime_1.jsx)(Input, { ref: ref, contentEditable: !!props.onChange, tabIndex: props.tabIndex, onFocus: () => {
+        } }, { children: [props.prefix && (0, jsx_runtime_1.jsx)(Extra, { children: props.prefix }, void 0), (0, jsx_runtime_1.jsx)(Input, { ref: ref, contentEditable: !!props.onChange, tabIndex: props.tabIndex, onFocus: function () {
                     setFocused(true);
                     focusAll();
-                }, onBlur: () => setFocused(false), onInput: (e) => {
-                    let value = parseFloat(e.currentTarget.innerText.replace(/[^0-9\.]/g, "")) || 0;
+                }, onBlur: function () { return setFocused(false); }, onInput: function (e) {
+                    var value = parseFloat(e.currentTarget.innerText.replace(/[^0-9\.]/g, "")) || 0;
                     setValue(value);
                     props.onChange(value);
                 }, 
@@ -56,23 +69,23 @@ function NumberField(props) {
                 //   console.log(e.clipboardData.getData("text/plain"))
                 //   e.preventDefault()
                 // }}
-                onKeyDown: (e) => {
-                    const increment = props.increment * (e.shiftKey ? 10 : 1);
+                onKeyDown: function (e) {
+                    var increment = props.increment * (e.shiftKey ? 10 : 1);
                     if (e.key === "ArrowUp") {
                         setValueForced(value + increment, true);
-                        setTimeout(() => focusAll(), 1);
+                        setTimeout(function () { return focusAll(); }, 1);
                     }
                     else if (e.key === "ArrowDown") {
                         setValueForced(value - increment, true);
-                        setTimeout(() => focusAll(), 1);
+                        setTimeout(function () { return focusAll(); }, 1);
                     }
                     else if (e.key === "Enter") {
                         e.preventDefault();
                     }
-                } }), props.suffix && (0, jsx_runtime_1.jsx)(Extra, { children: props.suffix })] }));
+                } }, void 0), props.suffix && (0, jsx_runtime_1.jsx)(Extra, { children: props.suffix }, void 0)] }), void 0));
 }
 exports.NumberField = NumberField;
-const Field = (0, theme_1.styled)("div", {
+var Field = (0, theme_1.styled)("div", {
     display: "inline-flex",
     fontFamily: "$mono",
     fontSize: "$sm",
@@ -86,13 +99,13 @@ const Field = (0, theme_1.styled)("div", {
         },
     },
 });
-const Input = (0, theme_1.styled)("span", {
+var Input = (0, theme_1.styled)("span", {
     outline: "0px",
     "&::selection": {
         background: "white",
         color: "black",
     },
 });
-const Extra = (0, theme_1.styled)("span", {
+var Extra = (0, theme_1.styled)("span", {
     opacity: 0.7,
 });

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spacer = void 0;
-const theme_1 = require("../../theme");
+var theme_1 = require("../../theme");
 exports.Spacer = (0, theme_1.styled)("div", {
     display: "block",
     width: "$spaces$1",

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
-const theme_1 = require("../../theme");
+var theme_1 = require("../../theme");
 exports.Text = (0, theme_1.styled)("div", {
     variants: {
         variant: {

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

@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
-type Props = {
+declare type Props = {
     checked: boolean;
     label: ReactNode;
     onChange: (value: boolean) => void;
 };
-export declare function ToggleButton(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleButton(props: Props): JSX.Element;
 export {};

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

@@ -1,14 +1,25 @@
 "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;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("../../icons");
-const theme_1 = require("../../theme");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_1 = require("../../icons");
+var theme_1 = require("../../theme");
 function ToggleButton(props) {
-    return ((0, jsx_runtime_1.jsxs)(ToggleButtonStyle, { onClick: () => props.onChange(!props.checked), children: [props.checked ? icons_1.checkFilled : icons_1.checkEmpty, props.label] }));
+    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));
 }
 exports.ToggleButton = ToggleButton;
-const ToggleButtonStyle = (0, theme_1.styled)("button", {
+var 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";
-type Props = PropsWithChildren<{
+declare type Props = PropsWithChildren<{
     label: ReactNode;
     mono?: boolean;
     nowrap?: boolean;
     offset?: number;
 }>;
-export declare function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip(props: Props): JSX.Element;
 export {};

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

@@ -1,13 +1,25 @@
 "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;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_1 = require("../../theme");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var theme_1 = require("../../theme");
 function Tooltip(props) {
-    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] }));
+    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));
 }
 exports.Tooltip = Tooltip;
-const TooltipStyle = (0, theme_1.styled)("div", {
+var TooltipStyle = (0, theme_1.styled)("div", {
     position: "absolute",
     bottom: "calc(100% + $$offset)",
     left: "50%",
@@ -44,11 +56,11 @@ const TooltipStyle = (0, theme_1.styled)("div", {
         },
     },
 });
-const Wrapper = (0, theme_1.styled)("div", {
+var Wrapper = (0, theme_1.styled)("div", {
     position: "relative",
-    "&:hover": {
-        [TooltipStyle.toString()]: {
+    "&:hover": (_a = {},
+        _a[TooltipStyle.toString()] = {
             opacity: 1,
         },
-    },
+        _a),
 });

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

@@ -1 +1 @@
-export declare function AppDataDebugger(): import("react/jsx-runtime").JSX.Element;
+export declare function AppDataDebugger(): JSX.Element;

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

@@ -1,17 +1,28 @@
 "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;
-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");
+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");
 function AppDataDebugger() {
-    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 }) }) }));
+    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));
 }
 exports.AppDataDebugger = AppDataDebugger;
-const Wrapper = (0, theme_1.styled)("div", {
+var Wrapper = (0, theme_1.styled)("div", {
     width: "500px",
     maxHeight: "calc(100vh - 100px)",
     overflowY: "auto",

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

@@ -1 +1 @@
-export declare function ColorEditor(): import("react/jsx-runtime").JSX.Element;
+export declare function ColorEditor(): JSX.Element;