ag-common 0.0.372 → 0.0.374

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/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/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/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) => {

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

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressBar = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const styles_1 = require("../../styles");
-const Base = styled_components_1.default.div `
+const Base = styled_1.default.div `
   position: relative;
   min-width: 5rem;
   width: 100%;
@@ -15,14 +15,14 @@ const Base = styled_components_1.default.div `
   border-radius: 1rem;
   overflow: hidden;
 `;
-const Bar = styled_components_1.default.div `
+const Bar = styled_1.default.div `
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   transition: width 0.2s ease;
 `;
-const Dot = styled_components_1.default.div `
+const Dot = styled_1.default.div `
   position: absolute;
   top: calc(50% - 0.25rem);
   width: 0.5rem;

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

@@ -32,30 +32,30 @@ const FlexColumn_1 = require("../FlexColumn");
 const FlexRow_1 = require("../FlexRow");
 const Modal_1 = require("../Modal/Modal");
 const TextEdit_1 = require("../TextEdit");
-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 `
   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/RowOrColumn/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowOrColumn = void 0;
 const media_1 = require("../../styles/media");
 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: row wrap;
   flex-grow: 1;

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

@@ -31,17 +31,17 @@ const CrossIcon_1 = require("../../icons/CrossIcon");
 const helpers_1 = require("../../helpers");
 const TextEdit_1 = require("../TextEdit");
 const styles_1 = require("../../styles");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const Magnify_1 = require("../../icons/Magnify");
 const common_1 = require("../../../common");
-const Base = styled_components_1.default.div `
+const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   width: 100%;
 `;
-const SearchBox = styled_components_1.default.div `
+const SearchBox = styled_1.default.div `
   padding: 1rem;
   display: flex;
   flex-flow: row;
@@ -57,12 +57,12 @@ const SearchBox = styled_components_1.default.div `
     width: 100%;
   }
 `;
-const Icon = styled_components_1.default.div `
+const Icon = styled_1.default.div `
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.5rem;
 `;
-const Content = styled_components_1.default.div `
+const Content = styled_1.default.div `
   width: calc(100% - 2rem);
   margin: auto;
   display: flex;
@@ -83,11 +83,11 @@ const Content = styled_components_1.default.div `
     margin-top: 1rem;
   }
 `;
-const Row = styled_components_1.default.div `
+const Row = styled_1.default.div `
   width: 100%;
   cursor: pointer;
 `;
-const CrossIconStyled = (0, styled_components_1.default)(CrossIcon_1.CrossIcon) `
+const CrossIconStyled = (0, styled_1.default)(CrossIcon_1.CrossIcon) `
   position: absolute;
   right: 1rem;
   @media ${styles_1.bigScreen} {

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

@@ -7,9 +7,9 @@ exports.SearchModal = void 0;
 const Base_1 = require("./Base");
 const styles_1 = require("../../styles");
 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 ModalStyled = (0, styled_components_1.default)(Modal_1.Modal) `
+const ModalStyled = (0, styled_1.default)(Modal_1.Modal) `
   display: flex;
   flex-flow: column;
   top: 10rem;