ag-common 0.0.371 → 0.0.373

package/dist/api/helpers/dynamo.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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) {
@@ -8,20 +31,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDynamoUpdates = exports.wipeTable = exports.getDynamoTtlMinutes = exports.getDynamoTtlDays = exports.queryDynamo = exports.getItemsDynamo = exports.getItemDynamo = exports.scan = exports.batchDelete = exports.batchWrite = exports.putDynamo = exports.setDynamo = exports.dynamoDb = void 0;
 const log_1 = require("../../common/helpers/log");
 const array_1 = require("../../common/helpers/array");
 const sleep_1 = require("../../common/helpers/sleep");
 const async_1 = require("../../common/helpers/async");
-const dynamodb_1 = __importDefault(require("aws-sdk/clients/dynamodb"));
+const dynamodb_1 = __importStar(require("aws-sdk/clients/dynamodb"));
 // eslint-disable-next-line import/no-mutable-exports
-exports.dynamoDb = new dynamodb_1.default.DocumentClient();
+exports.dynamoDb = new dynamodb_1.DocumentClient();
 const setDynamo = (region) => {
-    exports.dynamoDb = new dynamodb_1.default.DocumentClient({ region });
+    exports.dynamoDb = new dynamodb_1.DocumentClient({ region });
 };
 exports.setDynamo = setDynamo;
 const putDynamo = (item, tableName) => __awaiter(void 0, void 0, void 0, function* () {
@@ -207,7 +227,8 @@ const getItemsDynamo = ({ tableName, items, }) => __awaiter(void 0, void 0, void
     try {
         const res = yield dbRaw.batchGetItem(params).promise();
         (0, log_1.debug)(`got dynamo getitems=${JSON.stringify(res, null, 2)}`);
-        let ret = ((_f = (_e = res.Responses) === null || _e === void 0 ? void 0 : _e[tableName]) === null || _f === void 0 ? void 0 : _f.map((s) => dynamodb_1.default.Converter.unmarshall(s))) || [];
+        let ret = ((_f = (_e = res.Responses) === null || _e === void 0 ? void 0 : _e[tableName]) === null || _f === void 0 ? void 0 : _f.map((s) => dynamodb_1.Converter.unmarshall(s))) ||
+            [];
         return ret;
     }
     catch (e) {

package/dist/ui/components/BorderGradient/index.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,9 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BorderGradient = void 0;
 const colours_1 = require("../../styles/colours");
 const object_1 = require("../../../common/helpers/object");
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
-const BGcss = (0, styled_components_1.css) `
+const react_2 = require("@emotion/react");
+const BGcss = (0, react_2.css) `
   display: flex;
   border: 0;
   padding: 3px;
@@ -46,13 +24,13 @@ const BGcss = (0, styled_components_1.css) `
     }
   }
 `;
-const BGLink = styled_components_1.default.div `
+const BGLink = styled_1.default.div `
   ${BGcss};
 `;
-const BGALink = styled_components_1.default.a `
+const BGALink = styled_1.default.a `
   ${BGcss};
 `;
-const Padding = styled_components_1.default.div `
+const Padding = styled_1.default.div `
   justify-content: center;
   align-items: center;
   display: flex;
@@ -60,7 +38,7 @@ const Padding = styled_components_1.default.div `
   border: 0;
   flex-grow: 1;
 `;
-const FeatureBoxFill = (0, styled_components_1.default)(Padding) `
+const FeatureBoxFill = (0, styled_1.default)(Padding) `
   background-image: linear-gradient(to bottom right, var(--left), var(--right));
   color: ${colours_1.colours.mainLight};
   flex-grow: 1;

package/dist/ui/components/Button/index.d.ts

@@ -1,5 +1,5 @@
 import { KeyboardEventHandler, MouseEventHandler } from 'react';
-export declare const ButtonBase: import("styled-components").FlattenSimpleInterpolation;
+export declare const ButtonBase: import("@emotion/react").SerializedStyles;
 export interface IButton {
     title?: string;
     invert?: boolean;

package/dist/ui/components/Button/index.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,8 +7,9 @@ exports.Button = exports.ButtonBase = void 0;
 /* eslint-disable react/destructuring-assignment */
 const colours_1 = require("../../styles/colours");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-exports.ButtonBase = (0, styled_components_1.css) `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+exports.ButtonBase = (0, react_2.css) `
   text-decoration: none;
   display: flex;
   justify-content: center;
@@ -74,10 +52,10 @@ exports.ButtonBase = (0, styled_components_1.css) `
     }
   }
 `;
-const BaseButton = styled_components_1.default.button `
+const BaseButton = styled_1.default.button `
   ${exports.ButtonBase}
 `;
-const BaseA = styled_components_1.default.a `
+const BaseA = styled_1.default.a `
   ${exports.ButtonBase}
 `;
 const Button = (props) => {

package/dist/ui/components/Chevron/index.js

@@ -5,16 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chevron = void 0;
 const Icon_1 = require("../Icon");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const ChevronRight_1 = require("../../icons/ChevronRight");
-const Base = styled_components_1.default.span `
+const Base = styled_1.default.span `
   font-size: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
 `;
-const IconStyled = (0, styled_components_1.default)(Icon_1.Icon) `
+const IconStyled = (0, styled_1.default)(Icon_1.Icon) `
   cursor: pointer;
   margin: 0;
   padding: 0;

package/dist/ui/components/Close/index.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Close = void 0;
 const dom_1 = require("../../helpers/dom");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
-const Base = styled_components_1.default.div `
+const Base = styled_1.default.div `
   position: absolute;
   z-index: 1;
   width: 32px;

package/dist/ui/components/Confirm/Dialog.js

@@ -15,8 +15,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmDialog = void 0;
 const Modal_1 = require("./Modal");
 const log_1 = require("../../../common/helpers/log");
-const react_dom_1 = __importDefault(require("react-dom"));
 const react_1 = __importDefault(require("react"));
+const client_1 = require("react-dom/client");
 /**
  * opens a dialog programatically
  * @param param0
@@ -32,16 +32,17 @@ const ConfirmDialog = ({ bottomText, topText, }) => __awaiter(void 0, void 0, vo
         }
         const wrapper = document.body.appendChild(document.createElement('div'));
         wrapper.id = idName;
+        const root = (0, client_1.createRoot)(wrapper);
         const onSubmit = (v) => {
             try {
                 res(v);
             }
             finally {
-                react_dom_1.default.unmountComponentAtNode(wrapper);
+                root.unmount();
                 wrapper.remove();
             }
         };
-        react_dom_1.default.render(react_1.default.createElement(Modal_1.ConfirmModal, { bottomText: bottomText, topText: topText, onSubmit: onSubmit }), wrapper);
+        root.render(react_1.default.createElement(Modal_1.ConfirmModal, { bottomText: bottomText, topText: topText, onSubmit: onSubmit }));
     });
 });
 exports.ConfirmDialog = ConfirmDialog;

package/dist/ui/components/Confirm/Modal.js

@@ -8,30 +8,30 @@ const Button_1 = require("../Button");
 const FlexColumn_1 = require("../FlexColumn");
 const FlexRow_1 = require("../FlexRow");
 const Modal_1 = require("../Modal/Modal");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
-const Base = styled_components_1.default.div `
+const Base = styled_1.default.div `
   width: 95vw;
   max-width: 30rem;
   height: 50vh;
   max-height: 15rem;
   padding: 1rem;
 `;
-const Content = (0, styled_components_1.default)(FlexColumn_1.FlexColumn) `
+const Content = (0, styled_1.default)(FlexColumn_1.FlexColumn) `
   height: 100%;
 `;
-const TopText = styled_components_1.default.div `
+const TopText = styled_1.default.div `
   font-weight: bold;
   border-bottom: solid 1px #ccc;
   padding-bottom: 0.25rem;
   font-size: 1.5rem;
   margin-bottom: 1rem;
 `;
-const BottomText = styled_components_1.default.div `
+const BottomText = styled_1.default.div `
   padding-bottom: 0.25rem;
   font-size: 1.1rem;
 `;
-const Bottom = (0, styled_components_1.default)(FlexRow_1.FlexRow) `
+const Bottom = (0, styled_1.default)(FlexRow_1.FlexRow) `
   margin-top: auto;
   justify-content: flex-end;
   > button:first-child {

package/dist/ui/components/DropdownList/Base.js

@@ -32,9 +32,9 @@ const common_1 = require("../../styles/common");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const colours_1 = require("../../styles/colours");
 const KebabDots_1 = require("../KebabDots");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
-const Base = styled_components_1.default.div `
+const Base = styled_1.default.div `
   display: flex;
   flex-flow: row;
   position: relative;
@@ -43,7 +43,7 @@ const Base = styled_components_1.default.div `
   cursor: pointer;
   flex-grow: 0;
 `;
-const DropItems = styled_components_1.default.div `
+const DropItems = styled_1.default.div `
   flex-flow: column;
   z-index: 5;
   display: none;
@@ -58,7 +58,7 @@ const DropItems = styled_components_1.default.div `
   }
   ${(0, common_1.bounce)('data-bounced')}
 `;
-const ListItemStyle = styled_components_1.default.div `
+const ListItemStyle = styled_1.default.div `
   z-index: 1;
   font-weight: 500;
   padding-left: 0.5rem;

package/dist/ui/components/DropdownList/Dialog.js

@@ -15,7 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownListDialog = void 0;
 const index_1 = require("./index");
 const react_1 = __importDefault(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
+const client_1 = require("react-dom/client");
 const DropdownListDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
     return new Promise((res) => {
         const id = 'ag-common-ddld';
@@ -28,11 +28,12 @@ const DropdownListDialog = (p) => __awaiter(void 0, void 0, void 0, function* ()
         wrapper.style.position = 'absolute';
         wrapper.style.top = `${p.position.y}px`;
         wrapper.style.left = `${p.position.x}px`;
-        react_dom_1.default.render(react_1.default.createElement(index_1.DropdownList, Object.assign({}, p, { open: true, onChange: (v, i) => {
-                react_dom_1.default.unmountComponentAtNode(wrapper);
+        const root = (0, client_1.createRoot)(wrapper);
+        root.render(react_1.default.createElement(index_1.DropdownList, Object.assign({}, p, { open: true, onChange: (v, i) => {
+                root.unmount();
                 wrapper.remove();
                 res(!v ? undefined : [v, i]);
-            } }), "\u00A0"), wrapper);
+            } }), "\u00A0"));
     });
 });
 exports.DropdownListDialog = DropdownListDialog;

package/dist/ui/components/FlexColumn/index.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexColumn = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Base = styled_components_1.default.div `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Base = styled_1.default.div `
   position: relative;
   display: flex;
   flex-flow: column;

package/dist/ui/components/FlexRow/index.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexRow = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Base = styled_components_1.default.div `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Base = styled_1.default.div `
   position: relative;
   overflow: hidden;
   display: flex;

package/dist/ui/components/Icon/index.d.ts

@@ -20,5 +20,8 @@ export interface IIcon {
     tabIndex?: number;
     className?: string;
 }
-export declare const IconF: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const IconF: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const Icon: (pr: IIcon) => JSX.Element;

package/dist/ui/components/Icon/index.js

@@ -7,8 +7,8 @@ exports.Icon = exports.IconF = void 0;
 const common_1 = require("../../styles/common");
 const object_1 = require("../../../common/helpers/object");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.IconF = styled_components_1.default.span `
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.IconF = styled_1.default.span `
   transition: all 200ms;
   display: flex;
   justify-content: center;

package/dist/ui/components/Image/index.js

@@ -16,9 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const media_1 = require("../../styles/media");
-const Base = styled_components_1.default.img `
+const Base = styled_1.default.img `
   object-fit: contain;
   min-height: 5rem;
   min-width: 5rem;

package/dist/ui/components/KebabDots/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.KebabDots = void 0;
 const Icon_1 = require("../Icon");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const HorizontalDots_1 = require("../../icons/HorizontalDots");
-const IconStyled = (0, styled_components_1.default)(Icon_1.Icon) `
+const IconStyled = (0, styled_1.default)(Icon_1.Icon) `
   position: absolute;
 `;
 const KebabDots = ({ onClick }) => (react_1.default.createElement(IconStyled, { width: "2rem", height: "2rem", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), "data-icon": "kebab" }, HorizontalDots_1.HorizontalDots));

package/dist/ui/components/Loader/index.js

@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
-const Base = styled_components_1.default.div `
+const Base = styled_1.default.div `
   border: 16px solid #f3f3f3; /* Light grey */
   border-top: 16px solid #3498db; /* Blue */
   border-radius: 50%;
@@ -46,7 +46,7 @@ const Base = styled_components_1.default.div `
     }
   }
 `;
-const LoadingBack = styled_components_1.default.div `
+const LoadingBack = styled_1.default.div `
   position: absolute;
   top: 0;
   left: 0;

package/dist/ui/components/Modal/Dialog.js

@@ -15,17 +15,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalDialog = void 0;
 const Modal_1 = require("./Modal");
 const react_1 = __importDefault(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
+const client_1 = require("react-dom/client");
 const ModalDialog = (content) => __awaiter(void 0, void 0, void 0, function* () {
     return new Promise((res) => {
         const wrapper = document.body.appendChild(document.createElement('div'));
-        react_dom_1.default.render(react_1.default.createElement(Modal_1.Modal, { open: true, setOpen: (o) => {
+        const root = (0, client_1.createRoot)(wrapper);
+        root.render(react_1.default.createElement(Modal_1.Modal, { open: true, setOpen: (o) => {
                 if (!o) {
-                    react_dom_1.default.unmountComponentAtNode(wrapper);
+                    root.unmount();
                     wrapper.remove();
                 }
                 res('ok');
-            }, topPosition: "center", position: "center" }, content), wrapper);
+            }, topPosition: "center", position: "center" }, content));
     });
 });
 exports.ModalDialog = ModalDialog;

package/dist/ui/components/Modal/Modal.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
 import { IModal } from './types';
-export declare const ModalItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+import React from 'react';
+export declare const ModalItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Modal: ({ open, setOpen, children, position, topPosition, showCloseButton, closeOnMoveMouseOutside, className, closeOnClickOutside, }: IModal) => JSX.Element;

package/dist/ui/components/Modal/Modal.js

@@ -31,8 +31,8 @@ const Close_1 = require("../Close");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const styles_1 = require("../../styles");
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const FixedBackground = styled_components_1.default.div `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const FixedBackground = styled_1.default.div `
   position: fixed;
   top: 0;
   left: 0;
@@ -44,7 +44,7 @@ const FixedBackground = styled_components_1.default.div `
   justify-content: center;
   align-items: center;
 `;
-const ModalBase = styled_components_1.default.div `
+const ModalBase = styled_1.default.div `
   display: flex;
   position: absolute;
   z-index: 1;
@@ -68,7 +68,7 @@ const ModalBase = styled_components_1.default.div `
   }
   ${(0, styles_1.bounce)('data-bounced')}
 `;
-exports.ModalItem = styled_components_1.default.div `
+exports.ModalItem = styled_1.default.div `
   display: flex;
   padding: 1rem;
 
@@ -76,7 +76,7 @@ exports.ModalItem = styled_components_1.default.div `
     background-color: #eee;
   }
 `;
-const CloseStyled = (0, styled_components_1.default)(Close_1.Close) `
+const CloseStyled = (0, styled_1.default)(Close_1.Close) `
   z-index: 1;
 `;
 const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'top', showCloseButton = true, closeOnMoveMouseOutside = false, className, closeOnClickOutside = true, }) => {

package/dist/ui/components/OpenApiCodeBlock/OpenApiCodeBlock.js

@@ -9,8 +9,8 @@ const curl_1 = require("./curl");
 const fetch_1 = require("./fetch");
 const FlexRow_1 = require("../FlexRow");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Base = styled_components_1.default.div `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
   width: calc(100% - 4rem);
@@ -19,23 +19,23 @@ const Base = styled_components_1.default.div `
   margin: 1rem;
   padding: 1rem;
 `;
-const Verb = styled_components_1.default.div `
+const Verb = styled_1.default.div `
   background-color: #333;
   color: white;
   margin-right: 0.5rem;
   padding: 0.25rem;
   font-size: 0.8rem;
 `;
-const ApiName = styled_components_1.default.div `
+const ApiName = styled_1.default.div `
   font-weight: bold;
   font-size: 1.5rem;
 `;
-const BlockTitle = styled_components_1.default.div `
+const BlockTitle = styled_1.default.div `
   color: #333;
   font-size: 1.2rem;
   margin-top: 2rem;
 `;
-const Block = styled_components_1.default.div `
+const Block = styled_1.default.div `
   background-color: rgba(0, 0, 0, 0.1);
   padding: 1rem;
   margin-top: 0.5rem;

package/dist/ui/components/OpenApiCodeBlock/curl/index.js

@@ -9,8 +9,8 @@ const common_1 = require("../helpers/common");
 const common_2 = require("../../../../common");
 const joinJsx_1 = require("../helpers/joinJsx");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Base = styled_components_1.default.div `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Base = styled_1.default.div `
   white-space: pre;
 `;
 const Curl = ({ ops, p, }) => {

package/dist/ui/components/OpenApiCodeBlock/fetch/helpers/req.js

@@ -8,10 +8,10 @@ const common_1 = require("../../helpers/common");
 const joinJsx_1 = require("../../helpers/joinJsx");
 const common_2 = require("../../../../../common");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const rb = react_1.default.createElement(react_1.default.Fragment, null, "}");
 const lb = react_1.default.createElement(react_1.default.Fragment, null, "{");
-const Lpad = styled_components_1.default.div `
+const Lpad = styled_1.default.div `
   padding-left: 0.5rem;
 `;
 const getRequestOptions = (p, ops) => {

package/dist/ui/components/OpenApiCodeBlock/fetch/index.js

@@ -7,8 +7,8 @@ exports.Fetch = void 0;
 const getFetchLines_1 = require("./helpers/getFetchLines");
 const call_1 = require("./helpers/call");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Base = styled_components_1.default.div `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Base = styled_1.default.div `
   white-space: pre;
 `;
 const Fetch = ({ ops, p, }) => {

package/dist/ui/components/OpenApiCodeBlock/helpers/common.d.ts

@@ -1,6 +1,13 @@
+/// <reference types="react" />
 import { IOpenApi, IOpenApiCodeBlock, IOpenApiOperation, IOpenApiOperationBlock } from '../types';
-export declare const Highlight: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Highlight2: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Highlight: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Highlight2: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const getOperation: <TDefaultApi>(p: IOpenApiCodeBlock<TDefaultApi>) => IOpenApiOperationBlock;
 export declare const getBodyJson: <TDefaultApi>(p: IOpenApiCodeBlock<TDefaultApi>) => {
     nice: string;

package/dist/ui/components/OpenApiCodeBlock/helpers/common.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSecurity = exports.getBodyJson = exports.getOperation = exports.Highlight2 = exports.Highlight = void 0;
 const common_1 = require("../../../../common");
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.Highlight = styled_components_1.default.span `
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Highlight = styled_1.default.span `
   color: green;
 `;
-exports.Highlight2 = styled_components_1.default.span `
+exports.Highlight2 = styled_1.default.span `
   color: indianred;
 `;
 const getApiUrl = (p) => {