eddev 0.2.2-beta.7 → 0.2.2

package/{fields → admin}/components/ImageWell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     previewSize: string;
     aspects: string[];

package/admin/defineWidget.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType } from "react";
+declare type WidgetProps = {
+    element: HTMLElement;
+    dataset: DOMStringMap;
+};
+export declare function defineWidget(name: string, component: ComponentType<WidgetProps>): {
+    name: string;
+    component: ComponentType<WidgetProps>;
+};
+export {};

package/admin/defineWidget.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineWidget = void 0;
+function defineWidget(name, component) {
+    return {
+        name: name,
+        component: component,
+    };
+}
+exports.defineWidget = defineWidget;

package/admin/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./defineField";
+export * from "./defineWidget";
+export * from "./components/ImageWell";

package/{fields → admin}/index.js

@@ -10,5 +10,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./defineFIeld"), exports);
+__exportStar(require("./defineField"), exports);
+__exportStar(require("./defineWidget"), exports);
 __exportStar(require("./components/ImageWell"), exports);

package/admin/runWidgets.d.ts

@@ -0,0 +1 @@
+export declare function runWidgets(): void;

package/admin/runWidgets.js

@@ -0,0 +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.runWidgets = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore
+var widgets_1 = __importDefault(require("@manifest/widgets"));
+var react_dom_1 = __importDefault(require("react-dom"));
+function runWidgets() {
+    var elements = document.querySelectorAll("[data-widget]");
+    console.log("Running widgets", elements, widgets_1.default);
+    elements.forEach(function (el) {
+        if (el instanceof HTMLElement) {
+            var data = el.dataset;
+            var name_1 = data["widget"];
+            var type = widgets_1.default.find(function (item) { return item.name === name_1; });
+            if (type) {
+                var props = {
+                    element: el,
+                    dataset: data,
+                };
+                react_dom_1.default.render((0, jsx_runtime_1.jsx)(type.component, __assign({}, props), void 0), el);
+            }
+        }
+    });
+}
+exports.runWidgets = runWidgets;

package/build/get-webpack-config.js

@@ -79,6 +79,7 @@ var manifest_blocks_1 = require("./manifests/manifest-blocks");
 var manifest_fields_1 = require("./manifests/manifest-fields");
 var manifest_views_1 = require("./manifests/manifest-views");
 var get_config_1 = require("../config/get-config");
+var manifest_widgets_1 = require("./manifests/manifest-widgets");
 function getWebpackConfig(opts) {
     return __awaiter(this, void 0, void 0, function () {
         var compiling, config, ALIAS, ENTRY, PLUGINS, RULES, DEFINES, VIRTUAL_MODULES, EXTERNALS, virtualModules, isServerless, isBrowser, isSSR, isDev, entryDir, distSuffix, outputFolder, loadableManifestFile, writeVirtualModule, manifestLoaders, rpcExists, buildID;
@@ -283,6 +284,23 @@ function getWebpackConfig(opts) {
                     else {
                         writeVirtualModule(ALIAS["@manifest/fields"], "\n        export default {}\n      ");
                     }
+                    // Field manifest
+                    ALIAS["@manifest/widgets"] = path_1.default.resolve(opts.baseDirectory, "_widgets_manifest.js");
+                    if (opts.isAdmin) {
+                        manifestLoaders.push((0, manifest_widgets_1.createWidgetManifestGenerator)({
+                            baseDirectory: opts.baseDirectory,
+                            isAdmin: true,
+                            isDev: isDev,
+                            isServerless: isServerless,
+                            watch: isDev,
+                            onGenerate: function (manifest) {
+                                writeVirtualModule(ALIAS["@manifest/widgets"], manifest);
+                            },
+                        }));
+                    }
+                    else {
+                        writeVirtualModule(ALIAS["@manifest/widgets"], "\n          export default {}\n        ");
+                    }
                     // Block manifest
                     ALIAS["@manifest/blocks"] = path_1.default.resolve(opts.baseDirectory, "_blocks_manifest.js");
                     manifestLoaders.push((0, manifest_blocks_1.createBlockManifestGenerator)({

package/build/manifests/manifest-widgets.d.ts

@@ -0,0 +1,12 @@
+declare type Options = {
+    baseDirectory: string;
+    isAdmin: boolean;
+    isDev: boolean;
+    isServerless: boolean;
+    onGenerate: (value: string) => void;
+    watch: boolean;
+};
+export declare function createWidgetManifestGenerator(opts: Options): Promise<{
+    close(): void;
+}>;
+export {};

package/build/manifests/manifest-widgets.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWidgetManifestGenerator = void 0;
+var manifest_1 = require("./manifest");
+var path_1 = __importDefault(require("path"));
+var change_case_1 = require("change-case");
+function createWidgetManifestGenerator(opts) {
+    return (0, manifest_1.createManifestGenerator)({
+        glob: path_1.default.join(opts.baseDirectory, "/backend/widgets/*.tsx"),
+        onGenerate: opts.onGenerate,
+        watch: opts.watch,
+        generate: function (fileNames) {
+            if (opts.isAdmin) {
+                var files = fileNames
+                    .filter(function (file) { return !file.includes("/_app"); })
+                    .map(function (file) {
+                    var relative = path_1.default.relative(opts.baseDirectory, file);
+                    var name = path_1.default.basename(file).replace(/\.(jsx|tsx|ts|js)$/i, "");
+                    var module = JSON.stringify("./" + relative);
+                    var componentName = "Widget" + (0, change_case_1.pascalCase)(name);
+                    return { relative: relative, name: name, module: module, componentName: componentName };
+                });
+                return "\n          ".concat(files.map(function (_a) {
+                    var componentName = _a.componentName, module = _a.module;
+                    return "import ".concat(componentName, " from ").concat(module);
+                }).join("\n"), "\n\n          export default [\n            ").concat(files
+                    .map(function (_a) {
+                    var relative = _a.relative, componentName = _a.componentName, module = _a.module, name = _a.name;
+                    return componentName;
+                })
+                    .join(",\n"), "\n          ]\n        ");
+            }
+            else {
+                return "export default {}";
+            }
+        },
+    });
+}
+exports.createWidgetManifestGenerator = createWidgetManifestGenerator;

package/cli/display/components/BundleDisplay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CompilerState } from "../../../build/state/compiler-state";
 import { Observable } from "../../../utils/Observable";
 export declare function BundleDisplay(props: {

package/cli/display/components/CodegenDisplay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CodegenState } from "../../../build/state/codegen-state";
 import { Observable } from "../../../utils/Observable";
 export declare function CodegenDisplay(props: {

package/cli/display/components/DevCLIDisplay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CodegenState } from "../../../build/state/codegen-state";
 import { CompilerState } from "../../../build/state/compiler-state";
 import { ServerlessState } from "../../../build/state/serverless-state";

package/cli/display/components/ServerlessDisplay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ServerlessState } from "../../../build/state/serverless-state";
 import { Observable } from "../../../utils/Observable";
 export declare function ServerlessDisplay(props: {

package/cli/display/components/StatusIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     icon: "loading" | "tick" | "error" | "none";
 };

package/components/AdminBar.d.ts

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     lerpStart?: boolean;
     lerps?: boolean;

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

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

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function DevUI(): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ResponsiveAtomCalc } from "../../style";
 declare type Props = {
     data: ResponsiveAtomCalc[];

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BreakpointArray } from "../../style";
 export declare const RESPONSIVE_COLUMN_WIDTH = "110px";
 export declare const RESPONSIVE_ROW_HEIGHT = "20px";

package/dev-ui/components/ResponsiveScaleEditor.js

@@ -69,7 +69,6 @@ function ResponsiveScaleEditor(props) {
                 var nextValue;
                 if (item.type === "px" && nextType === "multiplier") {
                     if (base) {
-                        console.log(item.value, base.concreteValue);
                         nextValue = "x" + item.value / (base === null || base === void 0 ? void 0 : base.concreteValue);
                     }
                 }
@@ -112,8 +111,9 @@ function ResponsiveScaleEditor(props) {
         }
         else {
             props.onChange((0, immer_1.default)(values, function (values) {
+                var _a;
                 for (var token in values) {
-                    var original = _theme_1.originalConfig.responsive.space[token]["@" + breakpoint];
+                    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];
@@ -125,7 +125,7 @@ function ResponsiveScaleEditor(props) {
             }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ css: { $$total: props.data.length, $$labelWidth: props.labelWidth } }, { children: [props.showBreakpointName && ((0, jsx_runtime_1.jsx)(Row, __assign({ heading: true }, { children: rows[0].row.map(function (item, i) {
+    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);

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     prefix?: string;
     suffix?: string;

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

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

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

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

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

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

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

@@ -24,6 +24,7 @@ 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");
 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);
@@ -49,9 +50,15 @@ function TypographyEditor() {
                         // })
                     } }, { 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.jsx)(Details, { children: (0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: function (e) {
-                                    setPreviewText(e.currentTarget.value);
-                                } }, void 0) }, void 0)] }, index));
+                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));
 }
 exports.TypographyEditor = TypographyEditor;

package/dev-ui/icons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const bolt: JSX.Element;
 export declare const typography: JSX.Element;
 export declare const ruler: JSX.Element;

package/dev-ui/loader.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function DevUILoader(): JSX.Element | null;

package/entry/Root.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare function Root(): JSX.Element;
 declare const _default: typeof Root | import("next").NextComponentType<import("next").NextPageContext, {}, {}>;
 export default _default;

package/entry/entry.admin.dev.js

@@ -3,9 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var installGutenbergHooks_1 = require("../blocks/installGutenbergHooks");
 // @ts-ignore
 var _theme_1 = require("@theme");
-var installFieldTypes_1 = require("../fields/installFieldTypes");
+var installFieldTypes_1 = require("../admin/installFieldTypes");
+var runWidgets_1 = require("../admin/runWidgets");
 (0, installGutenbergHooks_1.installEDGutenbergHooks)();
 (0, installFieldTypes_1.installFieldTypes)();
+window.onload = runWidgets_1.runWidgets;
+// @ts-ignore
+// if (import.meta.webpackHot) {
+//   console.log("HEY", require.resolve("@manifest/widgets"))
+//   // @ts-ignore
+//   import.meta.webpackHot.accept([require.resolve("@manifest/widgets")], () => {
+//     const runWidgets = require("../admin/runWidgets").runWidgets
+//     console.log("HELLO")
+//     runWidgets()
+//   })
+// }
 if (_theme_1.editorGlobalStyles) {
     (0, _theme_1.editorGlobalStyles)();
 }

package/entry/entry.admin.prod.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var installGutenbergHooks_1 = require("../blocks/installGutenbergHooks");
 // @ts-ignore
 var _theme_1 = require("@theme");
-var installFieldTypes_1 = require("../fields/installFieldTypes");
+var installFieldTypes_1 = require("../admin/installFieldTypes");
+var runWidgets_1 = require("../admin/runWidgets");
 (0, installGutenbergHooks_1.installEDGutenbergHooks)();
 (0, installFieldTypes_1.installFieldTypes)();
+window.onload = runWidgets_1.runWidgets;
 if (_theme_1.editorGlobalStyles) {
     (0, _theme_1.editorGlobalStyles)();
 }

package/entry/entry.monolith.dev.js

@@ -9,17 +9,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * It also assumes that it's being run from a theme directory in WordPress, and
  * that it's not being run in the Admin panel, but the user may be logged in.
  */
-var react_dom_1 = __importDefault(require("react-dom"));
+var client_1 = __importDefault(require("react-dom/client"));
 var BrowserRouter_1 = require("../components/BrowserRouter");
 var Root_1 = __importDefault(require("./Root"));
 // @ts-ignore
 if (!window.wp)
     window.wp = {};
 // @ts-ignore
-if (react_dom_1.default.createRoot) {
-    // @ts-ignore
-    react_dom_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0));
-}
-else {
-    react_dom_1.default.render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0), document.getElementById("root"));
-}
+client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0));

package/entry/entry.monolith.prod.js

@@ -9,15 +9,10 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * It also assumes that it's being run from a theme directory in WordPress, and
  * that it's not being run in the Admin panel, but the user may be logged in.
  */
-// @ts-ignore
-var react_dom_1 = __importDefault(require("react-dom"));
+var client_1 = __importDefault(require("react-dom/client"));
 var BrowserRouter_1 = require("../components/BrowserRouter");
 var Root_1 = __importDefault(require("./Root"));
 // @ts-ignore
-if (react_dom_1.default.createRoot) {
-    // @ts-ignore
-    react_dom_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0));
-}
-else {
-    react_dom_1.default.render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0), document.getElementById("root"));
-}
+// if (ReactDOM.createRoot) {
+// @ts-ignore
+client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.2.2-beta.7",
+  "version": "0.2.2",
   "main": "./index.js",
   "license": "MIT",
   "bin": {
@@ -87,7 +87,7 @@
     "rimraf": "^3.0.2",
     "swr": "^1.0.1",
     "to-icon": "^1.1.4",
-    "typescript": "^4.5.5",
+    "typescript": "4.5.5",
     "url-parse": "^1.5.3",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.5.0",
@@ -103,7 +103,7 @@
     "@trpc/next": "^9.19.0",
     "@trpc/react": "^9.19.0",
     "@trpc/server": "^9.19.0",
-    "react": "^18.0.0-rc.0",
-    "react-dom": "^18.0.0-rc.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

package/serverless-template/package.json

@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.0.0-rc.3",
+    "react-dom": "^18.0.0-rc.3",
     "@trpc/next": "^9.19.0",
     "@trpc/server": "^9.19.0"
   },

package/style/createStitches.js

@@ -78,11 +78,11 @@ function parseTypography(theme, breakpoints, typography) {
             return value;
         }
     };
-    var _loop_1 = function (name_1) {
+    for (var name_1 in typography) {
         var style = typography[name_1];
         var variant = {};
         typeVariants[name_1] = variant;
-        var _loop_2 = function (key) {
+        for (var key in style) {
             var value = style[key];
             var varName = "--type-".concat(name_1, "-").concat(key);
             variant[key] = "var(".concat(varName, ")");
@@ -93,36 +93,37 @@ function parseTypography(theme, breakpoints, typography) {
             }
             else if (value && typeof value === "object") {
                 // A responsive object value
-                var entries_1 = Object.entries(value);
-                entries_1.forEach(function (_a, i) {
-                    var _b;
-                    var bpName = _a[0], responsiveValue = _a[1];
-                    if (Array.isArray(responsiveValue)) {
-                        responsiveValue = responsiveValue[0];
-                        // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
-                        var minSize = (_b = breakpoints.find(function (bp) { return "@" + bp.key === bpName; })) === null || _b === void 0 ? void 0 : _b.min;
-                        var nextBreakpoint = breakpoints.find(function (bp) { var _a; return "@" + bp.key === ((_a = entries_1[i + 1]) === null || _a === void 0 ? void 0 : _a[0]); });
-                        if (!nextBreakpoint)
-                            throw new Error("Cannot create responsive '".concat(key, "' for '").concat(name_1, "' at breakpoint '").concat(bpName, "', since it is the last-defined breakpoint. Your last size should be a string/number/token."));
-                        var maxSize = nextBreakpoint.min;
-                        var responsiveValue2 = value["@" + nextBreakpoint.key];
-                        if (Array.isArray(responsiveValue2))
-                            responsiveValue2 = responsiveValue2[0];
-                        var size1 = resolveValue(tokenPrefix, responsiveValue);
-                        var size2 = resolveValue(tokenPrefix, responsiveValue2);
-                        responsiveValue = "calc(".concat(size1, " + (100vw - ").concat(minSize, ") / (").concat(unitless(maxSize), " - ").concat(unitless(minSize), ") * (").concat(unitless(size2), " - ").concat(unitless(size1), "))");
-                    }
-                    globals[bpName][varName] = responsiveValue;
-                });
+                var unit = key === "lineHeight" ? "%" : "px";
+                var _a = getResponsiveObjectStyles(breakpoints, value, varName, unit), tokenGlobals = _a[0], initial = _a[1];
+                for (var key_1 in tokenGlobals) {
+                    globals[key_1] = __assign(__assign({}, globals[key_1]), tokenGlobals[key_1]);
+                }
+                // const entries = Object.entries(value)
+                // entries.forEach(([bpName, responsiveValue], i) => {
+                //   if (Array.isArray(responsiveValue)) {
+                //     responsiveValue = responsiveValue[0]
+                //     // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
+                //     const minSize = breakpoints.find((bp) => "@" + bp.key === bpName)?.min
+                //     const nextBreakpoint = breakpoints.find((bp) => "@" + bp.key === entries[i + 1]?.[0])
+                //     if (!nextBreakpoint)
+                //       throw new Error(
+                //         `Cannot create responsive '${key}' for '${name}' at breakpoint '${bpName}', since it is the last-defined breakpoint. Your last size should be a string/number/token.`
+                //       )
+                //     const maxSize = nextBreakpoint.min
+                //     let responsiveValue2 = (value as any)["@" + nextBreakpoint.key]
+                //     if (Array.isArray(responsiveValue2)) responsiveValue2 = responsiveValue2[0]
+                //     let size1 = resolveValue(tokenPrefix, responsiveValue)
+                //     let size2 = resolveValue(tokenPrefix, responsiveValue2)
+                //     responsiveValue = `calc(${size1} + (100vw - ${minSize}) / (${unitless(maxSize)} - ${unitless(
+                //       minSize
+                //     )}) * (${unitless(size2)} - ${unitless(size1)}))`
+                //   }
+                //   globals[bpName][varName] = responsiveValue
+                // })
             }
-        };
-        for (var key in style) {
-            _loop_2(key);
         }
-    };
-    for (var name_1 in typography) {
-        _loop_1(name_1);
     }
+    // debugger
     return { globalTypography: globals, typeVariants: typeVariants };
 }
 function parseGrid(theme, media, grid) {

package/fields/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./defineFIeld";
-export * from "./components/ImageWell";