eddev 0.1.46 → 0.1.49

package/components/routing.js

@@ -0,0 +1,363 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteItemContext = exports.Switch = exports.Link = exports.RouterRoot = exports.createRouteItem = exports.Route = exports.useRoute = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+var url_parse_1 = __importDefault(require("url-parse"));
+// const logger = (...args: any[]) => console.log(...args)
+var logger = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+};
+function createRouteContext(opts) {
+    var _a, _b;
+    var subscribers = [];
+    var notify = function (item, status) {
+        subscribers.forEach(function (handler) { return handler(item, status); });
+    };
+    var parentIsSwitch = opts.parent && opts.parent.isSwitch;
+    var ctx = {
+        item: opts.initial,
+        config: opts.config || {},
+        parent: opts.parent,
+        children: [],
+        status: "inactive",
+        currentMatch: false,
+        isSwitch: !!opts.isSwitch,
+        onNavigate: opts.onNavigate,
+        onPreload: opts.onPreload,
+        propagateChange: function (item, matches) {
+            ctx.item = item;
+            ctx.currentMatch = matches;
+            ctx.status = matches ? "active" : "inactive";
+            ctx.children.forEach(function (child) {
+                child.propagateChange(item, child.match(item));
+            });
+            notify(item, ctx.status);
+        },
+        propagateCandidate: function (next, prev) {
+            // if (ctx.status === "leaving") return Promise.resolve();
+            var promises = [Promise.resolve()];
+            var matches = ctx.match(next);
+            logger(ctx.config.debugName, "was", ctx.status, matches);
+            if (ctx.status === "active" && (!matches || matches !== ctx.currentMatch)) {
+                logger(ctx.config.debugName, "is leaving because ", matches, "!=", ctx.currentMatch);
+                ctx.status = "leaving";
+            }
+            logger(ctx.config.debugName, "is now", ctx.status);
+            if (ctx.status === "leaving") {
+                promises.push(this.propagateLeaving(prev, next, false));
+            }
+            else {
+                ctx.children.forEach(function (child) {
+                    promises.push(child.propagateCandidate(next, prev));
+                });
+            }
+            notify(prev, ctx.status);
+            return Promise.all(promises);
+        },
+        propagateLeaving: function (current, next, parentIsLeaving) {
+            ctx.status = parentIsLeaving ? "parent-leaving" : "leaving";
+            logger(ctx.status);
+            var promises = [Promise.resolve()];
+            if (ctx.config.beforeLeave) {
+                var result = ctx.config.beforeLeave(current, next, parentIsLeaving);
+                if (result)
+                    promises.push(result);
+            }
+            ctx.children.forEach(function (child) {
+                var result = child.propagateLeaving(current, next, true);
+                if (result) {
+                    promises.push(result);
+                }
+            });
+            notify(current, ctx.status);
+            return Promise.all(promises);
+        },
+        subscribe: function (handler) {
+            subscribers.push(handler);
+            handler(ctx.item, ctx.status);
+            return function () {
+                var i = subscribers.indexOf(handler);
+                if (i !== -1) {
+                    subscribers.splice(i, 1);
+                }
+            };
+        },
+        getFirstMatch: function (item) {
+            logger("Checking items", this.children, item);
+            for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
+                var child = _a[_i];
+                if (child.matchSelf(item)) {
+                    logger("Matched", child.config.debugName);
+                    return child;
+                }
+            }
+        },
+        match: function (item) {
+            if (parentIsSwitch) {
+                var parent_1 = ctx.parent;
+                return parent_1.getFirstMatch(item) === ctx && this.matchSelf(item);
+            }
+            return this.matchSelf(item);
+        },
+        matchSelf: function (item) {
+            var _a, _b;
+            if ((_a = ctx === null || ctx === void 0 ? void 0 : ctx.config) === null || _a === void 0 ? void 0 : _a.match) {
+                return (_b = ctx === null || ctx === void 0 ? void 0 : ctx.config) === null || _b === void 0 ? void 0 : _b.match(item);
+            }
+            else {
+                return true;
+            }
+        },
+        update: function () { },
+        dispose: (_a = opts.dispose) !== null && _a !== void 0 ? _a : (function () { }),
+        fork: function (config, opts) {
+            if (opts === void 0) { opts = {}; }
+            var child = createRouteContext({
+                initial: ctx.item,
+                config: config,
+                parent: ctx,
+                isSwitch: opts.isSwitch,
+                onNavigate: ctx.onNavigate,
+                onPreload: ctx.onPreload,
+                dispose: function () {
+                    var i = ctx.children.indexOf(child);
+                    if (i !== -1)
+                        ctx.children.splice(i, 1);
+                },
+            });
+            ctx.children.push(child);
+            if (ctx.isSwitch) {
+            }
+            return child;
+        },
+    };
+    logger("Initting", ctx.config.debugName, opts.initial);
+    if (parentIsSwitch) {
+        logger("Parent is switch");
+        if (!((_b = opts.parent) === null || _b === void 0 ? void 0 : _b.getFirstMatch(opts.initial))) {
+            logger("FFFF", ctx.config.match, ctx.match(opts.initial));
+            ctx.currentMatch = ctx.matchSelf(opts.initial);
+            ctx.status = ctx.currentMatch ? "active" : "inactive";
+        }
+    }
+    else {
+        ctx.currentMatch = ctx.matchSelf(opts.initial);
+        ctx.status = ctx.currentMatch ? "active" : "inactive";
+    }
+    subscribers.push(function (item, status) {
+        if (ctx.config.onChange) {
+            ctx.config.onChange(item, status);
+        }
+    });
+    // notify(ctx.item, ctx.status);
+    return ctx;
+}
+var RouterContext = (0, react_1.createContext)(undefined);
+function useForkedRouter(conf, opts) {
+    var parent = (0, react_1.useContext)(RouterContext);
+    var ctx = (0, react_1.useMemo)(function () {
+        return parent.fork(conf, opts);
+    }, [parent]);
+    // useEffect(() => {
+    //   if (onChange) {
+    //     return ctx.subscribe(onChange);
+    //   }
+    // }, [ctx, onChange]);
+    Object.assign(ctx.config, conf);
+    // ctx.config.match = conf.match;
+    // ctx.config.beforeLeave = conf.beforeLeave;
+    // ctx.config.beforeLeave = conf.beforeLeave;
+    (0, react_1.useEffect)(function () {
+        return function () { return ctx.dispose(); };
+    }, [ctx]);
+    return ctx;
+}
+function useRoute() {
+    var router = (0, react_1.useContext)(RouterContext);
+    var _a = (0, react_1.useState)(router.item), route = _a[0], setRoute = _a[1];
+    (0, react_1.useEffect)(function () {
+        return router.subscribe(function (item, status) {
+            setRoute(item);
+        });
+    }, [router]);
+    return route;
+}
+exports.useRoute = useRoute;
+function Route(props) {
+    var ctx = useForkedRouter({
+        match: props.match,
+        beforeLeave: props.beforeLeave,
+        debugName: props.debugName,
+        onChange: props.onChange,
+    });
+    logger("Intial route for", props.debugName, ctx.status, ctx.currentMatch);
+    var _a = (0, react_1.useState)(ctx.status), status = _a[0], setStatus = _a[1];
+    (0, react_1.useEffect)(function () {
+        return ctx.subscribe(function (item, status) {
+            setStatus(status);
+        });
+    }, [ctx]);
+    if (status === "inactive")
+        return null;
+    return (0, jsx_runtime_1.jsx)(RouterContext.Provider, __assign({ value: ctx }, { children: props.children }), void 0);
+}
+exports.Route = Route;
+function createRouteItem(url, data) {
+    var parsed = (0, url_parse_1.default)(url, true);
+    return __assign(__assign({}, parsed), { data: data });
+}
+exports.createRouteItem = createRouteItem;
+function RouterRoot(props) {
+    var _this = this;
+    var onNavigateRef = (0, react_1.useRef)(props.onNavigateRequest);
+    var onPreNavigateRef = (0, react_1.useRef)(props.onPreload);
+    var ctx = (0, react_1.useMemo)(function () {
+        return createRouteContext({
+            initial: createRouteItem(props.url, props.data),
+            config: {
+                debugName: "ROOT",
+            },
+            onNavigate: function (path) { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    // User has clicked a link
+                    if (onNavigateRef.current) {
+                        onNavigateRef.current(path);
+                    }
+                    return [2 /*return*/];
+                });
+            }); },
+            onPreload: function (path) {
+                if (onPreNavigateRef.current) {
+                    onPreNavigateRef.current(path);
+                }
+            },
+        });
+    }, []);
+    onNavigateRef.current = props.onNavigateRequest;
+    onPreNavigateRef.current = props.onPreload;
+    (0, react_1.useEffect)(function () {
+        var cancelled = false;
+        var item = createRouteItem(props.url, props.data);
+        if (item.href !== ctx.item.href || item.data !== ctx.item.data) {
+            ctx.propagateCandidate(item, ctx.item).then(function () {
+                if (!cancelled) {
+                    ctx.propagateChange(item, true);
+                }
+            });
+            return function () {
+                cancelled = true;
+            };
+        }
+    }, [props.url, props.data]);
+    return (0, jsx_runtime_1.jsx)(RouterContext.Provider, __assign({ value: ctx }, { children: props.children }), void 0);
+}
+exports.RouterRoot = RouterRoot;
+exports.Link = (0, react_1.forwardRef)(function (props, ref) {
+    var localRef = (0, react_1.useRef)();
+    var router = (0, react_1.useContext)(RouterContext);
+    (0, react_1.useEffect)(function () {
+        if (props.preload && localRef.current) {
+            router === null || router === void 0 ? void 0 : router.onPreload(localRef.current.href);
+        }
+    }, [props.preload]);
+    return ((0, jsx_runtime_1.jsx)("a", __assign({ ref: (0, react_merge_refs_1.default)([localRef, ref]) }, props, { onMouseEnter: function (e) {
+            if (props.onMouseOver) {
+                props.onMouseOver(e);
+            }
+            router === null || router === void 0 ? void 0 : router.onPreload(e.currentTarget.href);
+        }, onClick: function (e) {
+            if (process.admin) {
+                e.preventDefault();
+                return;
+            }
+            if (props.onClick) {
+                props.onClick(e);
+            }
+            if (!e.isDefaultPrevented() && router && !e.ctrlKey && !e.metaKey) {
+                var url = (0, url_parse_1.default)(e.currentTarget.href, true);
+                if (url.origin === document.location.origin) {
+                    router.onNavigate(e.currentTarget.href);
+                    e.preventDefault();
+                }
+            }
+        } }), void 0));
+});
+function Switch(_a) {
+    var children = _a.children;
+    var ctx = useForkedRouter({
+        debugName: "SWITCH",
+        match: function () {
+            return true;
+        },
+        beforeLeave: function () {
+            return undefined;
+        },
+    }, { isSwitch: true });
+    return (0, jsx_runtime_1.jsx)(RouterContext.Provider, __assign({ value: ctx }, { children: children }), void 0);
+}
+exports.Switch = Switch;
+function RouteItemContext(props) {
+    var ctx = useForkedRouter({
+        match: function () { return true; },
+        beforeLeave: undefined,
+        debugName: undefined,
+        onChange: undefined,
+    });
+    return (0, jsx_runtime_1.jsx)(RouterContext.Provider, __assign({ value: ctx }, { children: props.children }), void 0);
+}
+exports.RouteItemContext = RouteItemContext;

package/gravityforms/useGravityForm.js

@@ -96,7 +96,6 @@ function useGravityForm(opts) {
             submit: function (state) {
                 dispatch({ type: "submitting" });
                 submit(form, state).then(function (result) {
-                    console.log("RESULT", result);
                     if (cancelled)
                         return;
                     if (result.success) {
@@ -126,7 +125,11 @@ function prepareValuesPayload(form, state, data) {
     for (var _i = 0, _a = form.fields; _i < _a.length; _i++) {
         var field = _a[_i];
         var value = state.values[field.id];
-        data["input_" + field.id] = value;
+        var key = "input_" + field.id;
+        if (field.type === "consent") {
+            key += "_1";
+        }
+        data[key] = value;
     }
     return data;
 }
@@ -137,7 +140,6 @@ function submit(form, state) {
             switch (_a.label) {
                 case 0:
                     _a.trys.push([0, 3, , 4]);
-                    console.log("Submitting", { form: form, state: state });
                     url = "/wp-json/ed/v1/gf/submit";
                     params = {
                         formID: form.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.1.46",
+  "version": "0.1.49",
   "main": "./index.js",
   "license": "MIT",
   "bin": {

package/utils/remoteProps.d.ts

@@ -0,0 +1,12 @@
+import URLParse from "url-parse";
+export interface RouteData {
+    view: string;
+    viewType: "react" | "html";
+    viewData: any;
+    appData: any;
+}
+export declare function parseURL(url: string): URLParse<string>;
+export declare function setInitialProps(url: string, data: RouteData): void;
+export declare function isSameOrigin(url: string): boolean;
+export declare function fetchProps(url: string): Promise<RouteData>;
+export declare function hasCachedProps(url: string): boolean;

package/utils/remoteProps.js

@@ -0,0 +1,95 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasCachedProps = exports.fetchProps = exports.isSameOrigin = exports.setInitialProps = exports.parseURL = void 0;
+var url_parse_1 = __importDefault(require("url-parse"));
+var qs_1 = __importDefault(require("qs"));
+var cache = {};
+function parseURL(url) {
+    return (0, url_parse_1.default)(url, qs_1.default.parse);
+}
+exports.parseURL = parseURL;
+function getRouteCacheKey(url) {
+    var parsed = parseURL(url);
+    return parsed.pathname;
+}
+function setInitialProps(url, data) {
+    var cacheKey = getRouteCacheKey(url);
+    cache[cacheKey] = data;
+}
+exports.setInitialProps = setInitialProps;
+function isSameOrigin(url) {
+    var parsed = parseURL(url);
+    return parsed.origin === document.location.origin;
+}
+exports.isSameOrigin = isSameOrigin;
+function fetchProps(url) {
+    return __awaiter(this, void 0, void 0, function () {
+        var parsed, cacheKey, requestUrl, response, data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    parsed = parseURL(url);
+                    cacheKey = getRouteCacheKey(url);
+                    // Cached value?
+                    if (cache[cacheKey])
+                        return [2 /*return*/, Promise.resolve(cache[cacheKey])];
+                    parsed.query["_props"] = "1";
+                    requestUrl = parsed.toString();
+                    return [4 /*yield*/, fetch(requestUrl)];
+                case 1:
+                    response = _a.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _a.sent();
+                    cache[cacheKey] = data;
+                    return [2 /*return*/, data];
+            }
+        });
+    });
+}
+exports.fetchProps = fetchProps;
+function hasCachedProps(url) {
+    var cacheKey = getRouteCacheKey(url);
+    // Cached value?
+    return !!cache[cacheKey];
+}
+exports.hasCachedProps = hasCachedProps;

package/fields/ImageWell.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    previewSize: string;
-    value: number;
-    onChange: (value: number | null) => void;
-};
-export declare function ImageWell(props: Props): JSX.Element;
-export {};

package/fields/ImageWell.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageWell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@stitches/react");
-var react_2 = require("react");
-function ImageWell(props) {
-    var _a = (0, react_2.useState)(null), selectedImage = _a[0], setSelectedImage = _a[1];
-    var _b = (0, react_2.useState)(false), imageIsLoading = _b[0], setImageIsLoading = _b[1];
-    (0, react_2.useEffect)(function () {
-        if (props.value) {
-            var cancelled = false;
-            setImageIsLoading(true);
-            fetch("/wp-json/ed/v1/media/" + Number(props.value))
-                .then(function (response) { return response.json(); })
-                .then(function (image) {
-                setImageIsLoading(false);
-                setSelectedImage(image);
-            });
-        }
-    }, [props.value]);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [imageIsLoading ? ((0, jsx_runtime_1.jsx)(Loading, { children: (0, jsx_runtime_1.jsx)(Spinner, {}, void 0) }, void 0)) : selectedImage ? ((0, jsx_runtime_1.jsx)(ImageContainer, { children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage.sizes[props.previewSize] || selectedImage.sizes["thumbnail"] }, void 0) }, void 0)) : null, (0, jsx_runtime_1.jsx)(Toolbar, { children: selectedImage || imageIsLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button, { children: "Remove" }, void 0), (0, jsx_runtime_1.jsx)(Button, { children: "Edit" }, void 0), (0, jsx_runtime_1.jsx)(Button, { children: "View" }, void 0)] }, void 0)) : null }, void 0)] }, void 0));
-}
-exports.ImageWell = ImageWell;
-var Wrapper = (0, react_1.styled)("div", {
-    position: "relative",
-    display: "block",
-    width: "100%",
-    border: "1px solid #aaaaaa",
-});
-var ImageContainer = (0, react_1.styled)("div", {
-    padding: "4px",
-    img: {
-        maxWidth: "100%",
-    },
-});
-var spin = (0, react_1.keyframes)({
-    from: {
-        transform: "rotate(0deg)",
-    },
-    to: {
-        transform: "rotate(360deg)",
-    },
-});
-var Spinner = (0, react_1.styled)("div", {
-    display: "block",
-    width: "32px",
-    height: "32px",
-    border: "4px solid transparent",
-    borderTop: "currentColor",
-    animation: "".concat(spin, " 1s linear infinite"),
-});
-var Loading = (0, react_1.styled)("div", {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: "8px",
-});
-var Toolbar = (0, react_1.styled)("div", {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    padding: "4px",
-});