eddev 0.2.66 → 0.2.67-beta1

package/dev-ui/components/ResponsiveLerpControl.js

@@ -1,30 +1,19 @@
 "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.ResponsiveLerpControl = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var icons_1 = require("../icons");
-var theme_1 = require("../theme");
-var Tooltip_1 = require("./atoms/Tooltip");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("../icons");
+const theme_1 = require("../theme");
+const Tooltip_1 = require("./atoms/Tooltip");
 function ResponsiveLerpControl(props) {
-    var breakpoints = (0, react_1.useMemo)(function () {
-        return props.data.map(function (item) { return item.breakpoint; });
+    const breakpoints = (0, react_1.useMemo)(() => {
+        return props.data.map((item) => item.breakpoint);
     }, [props.data]);
-    var ranges = (0, react_1.useMemo)(function () {
-        var ranges = [];
-        var currentRange = undefined;
-        props.data.forEach(function (item, i) {
+    const ranges = (0, react_1.useMemo)(() => {
+        const ranges = [];
+        let currentRange = undefined;
+        props.data.forEach((item, i) => {
             if (!currentRange) {
                 currentRange = {
                     fromBP: item.breakpoint,
@@ -55,10 +44,10 @@ function ResponsiveLerpControl(props) {
         });
         return ranges;
     }, [props.data]);
-    var lerpablePoints = (0, react_1.useMemo)(function () {
-        var points = [];
-        var length = 0;
-        ranges.forEach(function (range) {
+    const lerpablePoints = (0, react_1.useMemo)(() => {
+        let points = [];
+        let length = 0;
+        ranges.forEach((range) => {
             if (!range.isEnd && !range.isStart) {
                 points.push({ index: length + range.length / 2, bp: range.fromBP, lerping: range.lerped });
             }
@@ -67,19 +56,19 @@ function ResponsiveLerpControl(props) {
         return points;
     }, [props.data, ranges]);
     console.log("Ranges", ranges, lerpablePoints);
-    return ((0, jsx_runtime_1.jsxs)(Outer, { children: [ranges.map(function (item, i) {
-                return ((0, jsx_runtime_1.jsx)(RangeItem, __assign({ css: { $$length: item.length } }, { children: (0, jsx_runtime_1.jsx)(RangeLine, { lerping: item.lerped, hasStart: !item.isStart, hasEnd: !item.isEnd }, void 0) }), i));
+    return ((0, jsx_runtime_1.jsxs)(Outer, { children: [ranges.map((item, i) => {
+                return ((0, jsx_runtime_1.jsx)(RangeItem, { css: { $$length: item.length }, children: (0, jsx_runtime_1.jsx)(RangeLine, { lerping: item.lerped, hasStart: !item.isStart, hasEnd: !item.isEnd }) }, i));
             }), props.onToggleLerping &&
-                lerpablePoints.map(function (item, i) {
-                    return ((0, jsx_runtime_1.jsx)(LerpButton, __assign({ onClick: function () {
+                lerpablePoints.map((item, i) => {
+                    return ((0, jsx_runtime_1.jsx)(LerpButton, { onClick: () => {
                             if (props.onToggleLerping) {
                                 props.onToggleLerping(item.bp, !item.lerping);
                             }
-                        }, lerping: item.lerping, css: { $$pos: item.index / breakpoints.length } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ label: item.lerping ? "Disable Lerping" : "Enable Lerping", nowrap: true, offset: 10 }, { children: (0, jsx_runtime_1.jsx)(LerpButtonInner, { children: item.lerping ? icons_1.close : icons_1.line }, void 0) }), void 0) }), i));
-                })] }, void 0));
+                        }, lerping: item.lerping, css: { $$pos: item.index / breakpoints.length }, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { label: item.lerping ? "Disable Lerping" : "Enable Lerping", nowrap: true, offset: 10, children: (0, jsx_runtime_1.jsx)(LerpButtonInner, { children: item.lerping ? icons_1.close : icons_1.line }) }) }, i));
+                })] }));
 }
 exports.ResponsiveLerpControl = ResponsiveLerpControl;
-var Outer = (0, theme_1.styled)("div", {
+const Outer = (0, theme_1.styled)("div", {
     width: "100%",
     $$height: "16px",
     height: "$$height",
@@ -87,18 +76,18 @@ var Outer = (0, theme_1.styled)("div", {
     alignItems: "stretch",
     position: "relative",
 });
-var RangeItem = (0, theme_1.styled)("div", {
+const RangeItem = (0, theme_1.styled)("div", {
     flexGrow: "$$length",
     position: "relative",
 });
-var RangeLine = (0, theme_1.styled)("div", {
+const RangeLine = (0, theme_1.styled)("div", {
     position: "absolute",
     left: "5px",
     right: "5px",
     top: "50%",
     height: "3px",
     transform: "translateY(-50%)",
-    background: "linear-gradient(to right, $$color1, $$color2)",
+    background: `linear-gradient(to right, $$color1, $$color2)`,
     $$segHeight: "8px",
     $$color1: "#888888",
     $$color2: "#888888",
@@ -135,7 +124,7 @@ var RangeLine = (0, theme_1.styled)("div", {
         },
     },
 });
-var LerpButton = (0, theme_1.styled)("div", {
+const LerpButton = (0, theme_1.styled)("div", {
     position: "absolute",
     left: "calc(100% * $$pos)",
     top: "50%",
@@ -164,7 +153,7 @@ var LerpButton = (0, theme_1.styled)("div", {
         },
     },
 });
-var LerpButtonInner = (0, theme_1.styled)("div", {
+const LerpButtonInner = (0, theme_1.styled)("div", {
     "&:before": {
         content: " ",
         display: "block",

package/dev-ui/components/ResponsiveScaleEditor.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 import { BreakpointArray } from "../../style";
 export declare const RESPONSIVE_COLUMN_WIDTH = "110px";
 export declare const RESPONSIVE_ROW_HEIGHT = "20px";
-declare type ModeType = "px" | "multiplier" | "%" | "number";
-declare type TokenData = {
+type ModeType = "px" | "multiplier" | "%" | "number";
+type TokenData = {
     [token: string]: {
         [breakpoint: string]: string | [string];
     };
 };
-declare type Props = {
+type Props = {
     editableRange?: boolean;
     editableValues?: boolean;
     showBreakpointName?: boolean;
@@ -22,5 +21,5 @@ declare type Props = {
     modes: ModeType[];
     onChange(data: TokenData): void;
 };
-export declare function ResponsiveScaleEditor(props: Props): JSX.Element;
+export declare function ResponsiveScaleEditor(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dev-ui/components/ResponsiveScaleEditor.js

@@ -1,52 +1,40 @@
 "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;
-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"));
+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"));
 // @ts-ignore
-var _theme_1 = require("@theme");
+const _theme_1 = require("@theme");
 exports.RESPONSIVE_COLUMN_WIDTH = "110px";
 exports.RESPONSIVE_ROW_HEIGHT = "20px";
 function ResponsiveScaleEditor(props) {
-    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);
+    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);
             return {
                 token: key,
                 row: info,
             };
         });
     }, [props.data]);
-    var general = (0, react_1.useMemo)(function () {
+    const general = (0, react_1.useMemo)(() => {
         return props.data[0];
     }, [props.data]);
-    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;
+    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;
             if (item.lerpStart && typeof subvalue === "string") {
                 subvalue = [subvalue];
             }
@@ -58,22 +46,22 @@ function ResponsiveScaleEditor(props) {
             }
         }));
     };
-    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;
+    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;
                 if (item.type === "px" && nextType === "multiplier") {
                     if (base) {
-                        nextValue = "x" + item.value / (base === null || base === void 0 ? void 0 : base.concreteValue);
+                        nextValue = "x" + item.value / base?.concreteValue;
                     }
                 }
                 else if (item.type === "multiplier" && nextType === "px") {
-                    nextValue = item.value * (base === null || base === void 0 ? void 0 : base.concreteValue) + "px";
+                    nextValue = item.value * base?.concreteValue + "px";
                 }
                 if (nextValue) {
                     if (item.lerpStart) {
@@ -83,16 +71,16 @@ function ResponsiveScaleEditor(props) {
                 }
             };
             if (props.related) {
-                for (var i = 0; i < rows.length; i++) {
+                for (let i = 0; i < rows.length; i++) {
                     updateToken(i);
                 }
             }
         }));
     };
-    var onToggleLerping = function (breakpoint, lerping) {
-        props.onChange((0, immer_1.default)(values, function (values) {
-            for (var token in values) {
-                var subval = values[token]["@" + breakpoint];
+    const onToggleLerping = (breakpoint, lerping) => {
+        props.onChange((0, immer_1.default)(values, (values) => {
+            for (let token in values) {
+                let subval = values[token]["@" + breakpoint];
                 if (Array.isArray(subval)) {
                     subval = subval[0];
                 }
@@ -100,21 +88,20 @@ function ResponsiveScaleEditor(props) {
             }
         }));
     };
-    var onToggleBreakpoint = function (item, enabled) {
-        var breakpoint = item.breakpoint;
+    const onToggleBreakpoint = (item, enabled) => {
+        const breakpoint = item.breakpoint;
         if (!enabled) {
-            props.onChange((0, immer_1.default)(values, function (values) {
-                for (var token in values) {
+            props.onChange((0, immer_1.default)(values, (values) => {
+                for (let token in values) {
                     delete values[token]["@" + breakpoint];
                 }
             }));
         }
         else {
-            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;
+            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;
                     if (!value) {
                         value = values[token]["@" + item.baseBreakpoint];
                     }
@@ -125,33 +112,32 @@ function ResponsiveScaleEditor(props) {
             }));
         }
     };
-    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)(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)(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: function (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: (value) => {
                                                     onChangeValue(item, value, token);
-                                                }, 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 () {
+                                                }, increment: item.type === "px" ? 1 : 0.1 })) : null }), item.defined && (!props.related || rowIndex === 0) && ((0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => {
                                                 onChangeUnits(item.breakpoint, token);
-                                            } }, { children: item.type === "px" ? "px" : "multiplier" }), void 0))] }, i));
-                            })] }), rowIndex));
-                }) }, void 0))] }), void 0));
+                                            }, children: item.type === "px" ? "px" : "multiplier" }))] }, i));
+                            })] }, rowIndex));
+                }) }))] }));
 }
 exports.ResponsiveScaleEditor = ResponsiveScaleEditor;
-var Wrapper = (0, theme_1.styled)("div", {
+const Wrapper = (0, theme_1.styled)("div", {
     position: "relative",
-    width: "calc(".concat(exports.RESPONSIVE_COLUMN_WIDTH, " * $$total)"),
+    width: `calc(${exports.RESPONSIVE_COLUMN_WIDTH} * $$total)`,
     $$lineColor: "$colors$bgLine",
 });
-var Row = (0, theme_1.styled)("div", {
+const Row = (0, theme_1.styled)("div", {
     display: "flex",
     borderBottom: "1px solid $$lineColor",
     paddingLeft: "$$labelWidth",
@@ -175,7 +161,7 @@ var Row = (0, theme_1.styled)("div", {
         },
     },
 });
-var Col = (0, theme_1.styled)("div", {
+const Col = (0, theme_1.styled)("div", {
     position: "relative",
     width: exports.RESPONSIVE_COLUMN_WIDTH,
     height: exports.RESPONSIVE_ROW_HEIGHT,
@@ -193,7 +179,7 @@ var Col = (0, theme_1.styled)("div", {
         },
     },
 });
-var Field = (0, theme_1.styled)("div", {
+const Field = (0, theme_1.styled)("div", {
     flex: "1 1 auto",
 });
 // const Start = styled("div", {
@@ -203,13 +189,13 @@ var Field = (0, theme_1.styled)("div", {
 //   position: "absolute",
 //   right: 2,
 // })
-var RowLabel = (0, theme_1.styled)("div", {
+const RowLabel = (0, theme_1.styled)("div", {
     width: "$$labelWidth",
     height: exports.RESPONSIVE_ROW_HEIGHT,
     boxSizing: "border-box",
     flex: "0 0 auto",
 });
-var Toolbar = (0, theme_1.styled)("div", {
+const Toolbar = (0, theme_1.styled)("div", {
     display: "flex",
     textAlign: "left",
     width: "100%",
@@ -219,7 +205,7 @@ var Toolbar = (0, theme_1.styled)("div", {
         marginRight: "3px",
     },
 });
-var ToolbarButton = (0, theme_1.styled)("button", {
+const 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;
-var theme_1 = require("../../theme");
+const 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";
-declare type MenuItem = {
+type MenuItem = {
     icon?: ReactNode;
     label: string;
     onClick: () => void;
 };
-declare type Props = PropsWithChildren<{
+type Props = PropsWithChildren<{
     items: MenuItem[];
     mono?: 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/Dropdown.js

@@ -1,14 +1,13 @@
 "use strict";
-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)(MenuWrapper, { css: { $$offset: (typeof props.offset === "number" ? props.offset : 5) + "px" }, mono: props.mono }, void 0), props.children] }, void 0));
+    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] }));
 }
 exports.Tooltip = Tooltip;
-var MenuWrapper = (0, theme_1.styled)("div", {
+const MenuWrapper = (0, theme_1.styled)("div", {
     position: "absolute",
     bottom: "calc(100% + $$offset)",
     left: "50%",
@@ -40,11 +39,11 @@ var MenuWrapper = (0, theme_1.styled)("div", {
         },
     },
 });
-var Wrapper = (0, theme_1.styled)("div", {
+const Wrapper = (0, theme_1.styled)("div", {
     position: "relative",
-    "&:hover": (_a = {},
-        _a[MenuWrapper.toString()] = {
+    "&:hover": {
+        [MenuWrapper.toString()]: {
             opacity: 1,
         },
-        _a),
+    },
 });

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

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

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

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