eddev 0.3.38 → 2.0.0-beta.10

package/dev-ui/components/Launcher.js

@@ -1,94 +0,0 @@
-"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.MenuItem = exports.Launcher = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var icons_1 = require("../icons");
-var panels_1 = require("../panels");
-var theme_1 = require("../theme");
-var Button_1 = require("./atoms/Button");
-function Launcher(props) {
-    return ((0, jsx_runtime_1.jsxs)(LauncherWrapper, { children: [(0, jsx_runtime_1.jsx)(LauncherButton, __assign({ onClick: function (e) {
-                    props.onChange(!props.open, props.panel);
-                } }, { children: props.open ? icons_1.close : icons_1.bolt }), void 0), (0, jsx_runtime_1.jsxs)(Menu, { children: [props.open &&
-                        Object.entries(panels_1.DEV_UI_PANELS).map(function (_a) {
-                            var key = _a[0], panel = _a[1];
-                            return ((0, jsx_runtime_1.jsxs)(exports.MenuItem, __assign({ state: key === props.panel ? "active" : props.panel ? "inactive" : undefined, onClick: function () { return props.onChange(true, props.panel === key ? undefined : key); } }, { children: [panel.icon, panel.label] }), key));
-                        }), props.extras] }, void 0)] }, void 0));
-}
-exports.Launcher = Launcher;
-var LauncherWrapper = (0, theme_1.styled)("div", {
-    position: "fixed",
-    bottom: "5px",
-    left: "5px",
-    zIndex: 100000000,
-    fontFamily: "$body",
-    fontSize: "$sm",
-    pointerEvents: "none",
-    $$height: "$space$buttonHeight",
-    userSelect: "none",
-});
-var LauncherButton = (0, theme_1.styled)("div", {
-    borderRadius: "100px",
-    width: "$$height",
-    height: "$$height",
-    bottom: "5px",
-    left: "5px",
-    background: "$bg",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    pointerEvents: "all",
-    "&:hover": {
-        backgroundColor: "$bgHover",
-    },
-    svg: {
-        fill: "$fg",
-        display: "block",
-        width: "16px",
-        height: "16px",
-    },
-    cursor: "pointer",
-});
-var Menu = (0, theme_1.styled)("div", {
-    position: "absolute",
-    left: "calc($$height + 4px)",
-    bottom: 0,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "flex-start",
-    width: "calc(100vw - 40px)",
-    "&::-webkit-scrollbar": {
-        width: 0,
-        height: 0,
-        background: "transparent",
-    },
-    variants: {
-        open: {
-            true: {
-                opacity: 1,
-                pointerEvents: "all",
-            },
-            false: {
-                opacity: 0,
-            },
-        },
-    },
-});
-exports.MenuItem = (0, theme_1.styled)(Button_1.Button, {
-    marginRight: "4px",
-    defaultVariants: {
-        color: "dark",
-    },
-    flex: "0 0 auto",
-});

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

@@ -1,8 +0,0 @@
-import { PropsWithChildren, ReactNode } from "react";
-declare type Props = PropsWithChildren<{
-    padded?: boolean;
-    title?: string;
-    buttons?: ReactNode;
-}>;
-export declare function PanelWrapper(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dev-ui/components/PanelWrapper.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelWrapper = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var theme_1 = require("../theme");
-function PanelWrapper(props) {
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsxs)(Header, { children: [props.title && (0, jsx_runtime_1.jsx)(Title, { children: props.title }, void 0), " ", (0, jsx_runtime_1.jsx)(Buttons, { children: props.buttons }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Contents, { children: props.children }, void 0)] }, void 0));
-}
-exports.PanelWrapper = PanelWrapper;
-var Wrapper = (0, theme_1.styled)("div", {
-    backgroundColor: "$bg",
-    color: "$fg",
-    borderRadius: "$md",
-    maxWidth: "calc(100vw - 10px)",
-    fontFamily: "$body",
-    fontSize: "$md",
-    margin: "5px",
-});
-var Header = (0, theme_1.styled)("div", {
-    borderBottom: "1px solid $colors$bgHover",
-    padding: "$2",
-    display: "flex",
-});
-var Title = (0, theme_1.styled)("div", {
-    fontSize: "$lg",
-    flex: "1 1 auto",
-});
-var Contents = (0, theme_1.styled)("div", {
-    padding: "$2",
-});
-var Buttons = (0, theme_1.styled)("div", {
-    display: "flex",
-    alignItems: "center",
-    "> *": {
-        marginLeft: "5px",
-    },
-});

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

@@ -1,7 +0,0 @@
-import { ResponsiveAtomCalc } from "../../style";
-declare type Props = {
-    data: ResponsiveAtomCalc[];
-    onToggleLerping?(breakpoint: string, enabled: boolean): void;
-};
-export declare function ResponsiveLerpControl(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dev-ui/components/ResponsiveLerpControl.js

@@ -1,176 +0,0 @@
-"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");
-function ResponsiveLerpControl(props) {
-    var breakpoints = (0, react_1.useMemo)(function () {
-        return props.data.map(function (item) { return item.breakpoint; });
-    }, [props.data]);
-    var ranges = (0, react_1.useMemo)(function () {
-        var ranges = [];
-        var currentRange = undefined;
-        props.data.forEach(function (item, i) {
-            if (!currentRange) {
-                currentRange = {
-                    fromBP: item.breakpoint,
-                    toBP: item.breakpoint,
-                    length: 1,
-                    lerped: item.lerpStart,
-                    isStart: true,
-                    isEnd: false,
-                };
-                ranges.push(currentRange);
-            }
-            else if (item.defined) {
-                currentRange = {
-                    fromBP: item.breakpoint,
-                    toBP: item.breakpoint,
-                    length: 1,
-                    lerped: item.lerpStart,
-                    isStart: false,
-                    isEnd: false,
-                };
-                ranges.push(currentRange);
-            }
-            else {
-                currentRange.toBP = item.breakpoint;
-                currentRange.length += 1;
-            }
-            currentRange.isEnd = i === props.data.length - 1;
-        });
-        return ranges;
-    }, [props.data]);
-    var lerpablePoints = (0, react_1.useMemo)(function () {
-        var points = [];
-        var length = 0;
-        ranges.forEach(function (range) {
-            if (!range.isEnd && !range.isStart) {
-                points.push({ index: length + range.length / 2, bp: range.fromBP, lerping: range.lerped });
-            }
-            length += range.length;
-        });
-        return points;
-    }, [props.data, ranges]);
-    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));
-            }), props.onToggleLerping &&
-                lerpablePoints.map(function (item, i) {
-                    return ((0, jsx_runtime_1.jsx)(LerpButton, __assign({ onClick: function () {
-                            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));
-}
-exports.ResponsiveLerpControl = ResponsiveLerpControl;
-var Outer = (0, theme_1.styled)("div", {
-    width: "100%",
-    $$height: "16px",
-    height: "$$height",
-    display: "flex",
-    alignItems: "stretch",
-    position: "relative",
-});
-var RangeItem = (0, theme_1.styled)("div", {
-    flexGrow: "$$length",
-    position: "relative",
-});
-var 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)",
-    $$segHeight: "8px",
-    $$color1: "#888888",
-    $$color2: "#888888",
-    "&:before, &:after": {
-        position: "absolute",
-        height: "$$segHeight",
-        display: "block",
-        content: " ",
-        width: "2px",
-        top: "50%",
-        backgroundColor: "$$color1",
-        transform: "translateY(-50%)",
-    },
-    "&:after": {
-        right: 0,
-        backgroundColor: "$$color2",
-    },
-    variants: {
-        lerping: {
-            true: {
-                $$color1: "#FEBDF6",
-                $$color2: "#84FEDA",
-            },
-        },
-        hasEnd: {
-            false: {
-                $$color2: "transparent",
-            },
-        },
-        hasStart: {
-            false: {
-                $$color1: "transparent",
-            },
-        },
-    },
-});
-var LerpButton = (0, theme_1.styled)("div", {
-    position: "absolute",
-    left: "calc(100% * $$pos)",
-    top: "50%",
-    transform: "translate(-50%, -50%)",
-    opacity: 0,
-    backgroundColor: "$bg",
-    padding: "2px",
-    cursor: "pointer",
-    svg: {
-        fill: "currentColor",
-        width: "12px",
-        height: "12px",
-        display: "block",
-    },
-    "&:hover": {
-        opacity: 1,
-    },
-    variants: {
-        lerping: {
-            true: {
-                color: "#ff5555",
-            },
-            false: {
-                color: "#ffff55",
-            },
-        },
-    },
-});
-var LerpButtonInner = (0, theme_1.styled)("div", {
-    "&:before": {
-        content: " ",
-        display: "block",
-        position: "absolute",
-        left: "-10px",
-        top: "-5px",
-        right: "-10px",
-        bottom: "-5px",
-    },
-});

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

@@ -1,25 +0,0 @@
-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 = {
-    [token: string]: {
-        [breakpoint: string]: string | [string];
-    };
-};
-declare type Props = {
-    editableRange?: boolean;
-    editableValues?: boolean;
-    showBreakpointName?: boolean;
-    showValues?: boolean;
-    showRange?: boolean;
-    data: TokenData;
-    breakpoints: BreakpointArray;
-    tabIndexStart?: number;
-    related?: boolean;
-    labelWidth: string;
-    modes: ModeType[];
-    onChange(data: TokenData): void;
-};
-export declare function ResponsiveScaleEditor(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dev-ui/components/ResponsiveScaleEditor.js

@@ -1,238 +0,0 @@
-"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"));
-// @ts-ignore
-var _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];
-            if (!row || typeof row !== "object") {
-                row = {
-                    "@initial": row,
-                };
-            }
-            var info = (0, style_1.parseResponsiveObject)(props.breakpoints, row);
-            return {
-                token: key,
-                row: info,
-            };
-        });
-    }, [props.data]);
-    var general = (0, react_1.useMemo)(function () {
-        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;
-            if (item.lerpStart && typeof subvalue === "string") {
-                subvalue = [subvalue];
-            }
-            if (subvalue === undefined) {
-                delete draft[token]["@" + item.breakpoint];
-            }
-            else {
-                draft[token]["@" + item.breakpoint] = subvalue;
-            }
-        }));
-    };
-    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 === null || base === void 0 ? void 0 : base.concreteValue);
-                    }
-                }
-                else if (item.type === "multiplier" && nextType === "px") {
-                    nextValue = item.value * (base === null || base === void 0 ? void 0 : base.concreteValue) + "px";
-                }
-                if (nextValue) {
-                    if (item.lerpStart) {
-                        nextValue = [nextValue];
-                    }
-                    draft[token]["@" + item.breakpoint] = nextValue;
-                }
-            };
-            if (props.related) {
-                for (var 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];
-                if (Array.isArray(subval)) {
-                    subval = subval[0];
-                }
-                values[token]["@" + breakpoint] = lerping ? [subval] : subval;
-            }
-        }));
-    };
-    var onToggleBreakpoint = function (item, enabled) {
-        var breakpoint = item.breakpoint;
-        if (!enabled) {
-            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, 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];
-                    }
-                    if (!value)
-                        value = "1px";
-                    values[token]["@" + breakpoint] = value;
-                }
-            }));
-        }
-    };
-    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: function (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 () {
-                                                onChangeUnits(item.breakpoint, token);
-                                            } }, { children: item.type === "px" ? "px" : "multiplier" }), void 0))] }, i));
-                            })] }), rowIndex));
-                }) }, void 0))] }), void 0));
-}
-exports.ResponsiveScaleEditor = ResponsiveScaleEditor;
-var Wrapper = (0, theme_1.styled)("div", {
-    position: "relative",
-    width: "calc(".concat(exports.RESPONSIVE_COLUMN_WIDTH, " * $$total)"),
-    $$lineColor: "$colors$bgLine",
-});
-var Row = (0, theme_1.styled)("div", {
-    display: "flex",
-    borderBottom: "1px solid $$lineColor",
-    paddingLeft: "$$labelWidth",
-    variants: {
-        heading: {
-            true: {
-                $$lineColor: "transparent",
-            },
-        },
-        labelIndent: {
-            false: {
-                paddingLeft: "0",
-            },
-        },
-        hoverable: {
-            true: {
-                "&:hover": {
-                    backgroundColor: "$colors$bgLine",
-                },
-            },
-        },
-    },
-});
-var Col = (0, theme_1.styled)("div", {
-    position: "relative",
-    width: exports.RESPONSIVE_COLUMN_WIDTH,
-    height: exports.RESPONSIVE_ROW_HEIGHT,
-    boxSizing: "border-box",
-    borderLeft: "1px solid $$lineColor",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingRight: "4px",
-    variants: {
-        autoHeight: {
-            true: {
-                height: "auto",
-            },
-        },
-    },
-});
-var Field = (0, theme_1.styled)("div", {
-    flex: "1 1 auto",
-});
-// const Start = styled("div", {
-//   position: "absolute",
-// })
-// const End = styled("div", {
-//   position: "absolute",
-//   right: 2,
-// })
-var 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", {
-    display: "flex",
-    textAlign: "left",
-    width: "100%",
-    paddingLeft: "4px",
-    paddingBottom: "4px",
-    button: {
-        marginRight: "3px",
-    },
-});
-var ToolbarButton = (0, theme_1.styled)("button", {
-    fontSize: "9px",
-    appearance: "none",
-    border: 0,
-    backgroundColor: "$colors$button",
-    color: "$colors$fg",
-    borderRadius: "4px",
-    padding: "0px 4px",
-    "&:hover": {
-        backgroundColor: "$colors$buttonHover",
-    },
-});

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

@@ -1,47 +0,0 @@
-export declare const Button: import("@stitches/react/types/styled-component").StyledComponent<"button", {
-    state?: "active" | "inactive" | undefined;
-    color?: "default" | "black" | undefined;
-    small?: boolean | "true" | undefined;
-    tiny?: boolean | "true" | undefined;
-}, {}, import("@stitches/react/types/css-util").CSS<{}, {
-    space: {
-        smallButtonHeight: string;
-        buttonHeight: string;
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-    };
-    colors: {
-        bg: string;
-        bgHover: string;
-        bgHoverLight: string;
-        bgLine: string;
-        bgLineStrong: string;
-        button: string;
-        buttonHover: string;
-        fg: string;
-        fgFaded: string;
-    };
-    fontSizes: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    fonts: {
-        body: string;
-        mono: string;
-    };
-    radii: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    transitions: {
-        default: string;
-    };
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;