ag-common 0.0.372 → 0.0.374

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

@@ -7,9 +7,9 @@ exports.Sidebar = void 0;
 const use_1 = require("../../helpers/cookie/use");
 const common_1 = require("../../styles/common");
 const Chevron_1 = require("../Chevron");
-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: relative;
   transition: all 200ms;
   border-right: solid 1px #ccc;
@@ -36,7 +36,7 @@ const Base = styled_components_1.default.div `
     }
   }
 `;
-const ContentBlock = styled_components_1.default.div `
+const ContentBlock = styled_1.default.div `
   left: -18rem;
   transition: left 200ms;
   &[data-open='false'] {
@@ -46,7 +46,7 @@ const ContentBlock = styled_components_1.default.div `
     //width set in style
   }
 `;
-const Content = styled_components_1.default.div `
+const Content = styled_1.default.div `
   display: flex;
   flex-flow: column;
   width: 100%;
@@ -60,7 +60,7 @@ const Content = styled_components_1.default.div `
     border-radius: 1rem;
   }
 `;
-const Hamburger = styled_components_1.default.div `
+const Hamburger = styled_1.default.div `
   position: absolute;
   transition: all 200ms;
   &[data-open='false'] {
@@ -84,7 +84,7 @@ const Hamburger = styled_components_1.default.div `
   border: solid 1px rgba(0, 0, 0, 0.5);
   cursor: pointer;
 `;
-const ChevronStyled = (0, styled_components_1.default)(Chevron_1.Chevron) `
+const ChevronStyled = (0, styled_1.default)(Chevron_1.Chevron) `
   svg {
     fill: #555;
   }

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

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SparkLine = void 0;
 const math_1 = require("../../../common/helpers/math");
 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 `
   width: calc(100% - 2px - 1rem);
   height: 100%;
   border: solid 1px #666;
   border-radius: 0.5rem;
   padding: 0.5rem;
 `;
-const Points = styled_components_1.default.div `
+const Points = styled_1.default.div `
   position: relative;
 
   width: 100%;
   height: 100%;
 `;
-const Point = styled_components_1.default.div `
+const Point = styled_1.default.div `
   position: absolute;
   border-width: 2px;
   border-style: solid;

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
 const groupBy_1 = require("../../../common/helpers/groupBy");
 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: 100%;
 `;
-const TableRow = styled_components_1.default.div `
+const TableRow = styled_1.default.div `
   display: flex;
   border: solid 1px #ccc;
   &[data-header='true'] {
@@ -22,15 +22,15 @@ const TableRow = styled_components_1.default.div `
     border-top: 0;
   }
 `;
-const Group = styled_components_1.default.div `
+const Group = styled_1.default.div `
   display: flex;
   flex-flow: column;
   width: 100%;
 `;
-const GroupTitle = styled_components_1.default.div `
+const GroupTitle = styled_1.default.div `
   font-size: 1.5rem;
 `;
-const GroupWrap = styled_components_1.default.div `
+const GroupWrap = styled_1.default.div `
   display: flex;
   flex-flow: column;
 `;

package/dist/ui/components/TextEdit/CheckboxEdit.js

@@ -31,11 +31,11 @@ const common_1 = require("./common");
 const common_2 = require("../../styles/common");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const FlexRow_1 = require("../FlexRow");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const Save_1 = require("../../icons/Save");
 const Undo_1 = require("../../icons/Undo");
-const Icons = (0, styled_components_1.default)(FlexRow_1.FlexRow) `
+const Icons = (0, styled_1.default)(FlexRow_1.FlexRow) `
   position: absolute;
   top: 0;
   right: -2rem;

package/dist/ui/components/TextEdit/LengthBox.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextEditLengthBox = 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: absolute;
   bottom: 0.5rem;
   right: 0.5rem; */

package/dist/ui/components/TextEdit/RadioGroup.js

@@ -31,8 +31,8 @@ const common_1 = require("./common");
 const FlexColumn_1 = require("../FlexColumn");
 const common_2 = require("../../styles/common");
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Label = styled_components_1.default.label ``;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Label = styled_1.default.label ``;
 const RadioGroup = ({ defaultValue, onSubmit, values, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 renderLabel = (e) => e.toString(), 

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

@@ -1,5 +1,7 @@
 import { IRefTextEdit, ITextEdit } from './types';
-import { StyledComponent } from 'styled-components';
 import React from 'react';
-export declare const ValueReadonly: StyledComponent<"div", any, {}, never>;
+export declare const ValueReadonly: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextEdit: React.ForwardRefExoticComponent<ITextEdit & React.RefAttributes<IRefTextEdit>>;

package/dist/ui/components/TextEdit/TextEdit.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextEdit = exports.ValueReadonly = void 0;
 /* eslint-disable react/display-name */
@@ -30,17 +33,18 @@ const LengthBox_1 = require("./LengthBox");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const common_2 = require("../../styles/common");
 const dom_1 = require("../../helpers/dom");
-const styled_components_1 = __importStar(require("styled-components"));
-const react_1 = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const react_2 = __importStar(require("react"));
 const Pencil_1 = require("../../icons/Pencil");
 const Save_1 = require("../../icons/Save");
 const Undo_1 = require("../../icons/Undo");
-exports.ValueReadonly = styled_components_1.default.div `
+exports.ValueReadonly = styled_1.default.div `
   ${common_1.valueCss};
   word-break: break-word;
   flex-basis: calc(100% - 3rem);
 `;
-const basecss = (0, styled_components_1.css) `
+const basecss = (0, react_1.css) `
   outline: none;
   border: 0;
   word-break: break-word;
@@ -55,19 +59,19 @@ const basecss = (0, styled_components_1.css) `
     color: #bbb;
   }
 `;
-const ValueTextArea = styled_components_1.default.textarea `
+const ValueTextArea = styled_1.default.textarea `
   ${basecss}
   &[data-editing='true'] {
     min-height: 5rem;
   }
 `;
-const ValueTextBox = styled_components_1.default.input `
+const ValueTextBox = styled_1.default.input `
   ${basecss}
 `;
-const ValueBoxEdit = (0, styled_components_1.default)(common_1.ValueBox) `
+const ValueBoxEdit = (0, styled_1.default)(common_1.ValueBox) `
   border: solid 1px #ccc;
 `;
-const Right = styled_components_1.default.div `
+const Right = styled_1.default.div `
   display: flex;
   flex-flow: row;
   align-content: center;
@@ -77,7 +81,7 @@ const Right = styled_components_1.default.div `
     right: 0.5rem;
   }
 `;
-const Icon = styled_components_1.default.div `
+const Icon = styled_1.default.div `
   width: 1.5rem;
   display: flex;
   cursor: pointer;
@@ -85,14 +89,14 @@ const Icon = styled_components_1.default.div `
     filter: saturate(3);
   }
 `;
-exports.TextEdit = (0, react_1.forwardRef)((p, ref) => {
+exports.TextEdit = (0, react_2.forwardRef)((p, ref) => {
     const { defaultValue = '', defaultEditing, disableEdit = false, placeholder, className, singleLine = false, noGrow = false, leftContent, onSubmit, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, allowUndo = true, onEscape, maxLength, onKeyDown, } = p;
-    const divRef = (0, react_1.useRef)(null);
-    const taref = (0, react_1.useRef)(null);
-    const [value, setValue] = (0, react_1.useState)(defaultValue);
-    const [editing, setEditingRaw] = (0, react_1.useState)(!!defaultEditing);
+    const divRef = (0, react_2.useRef)(null);
+    const taref = (0, react_2.useRef)(null);
+    const [value, setValue] = (0, react_2.useState)(defaultValue);
+    const [editing, setEditingRaw] = (0, react_2.useState)(!!defaultEditing);
     const valueChange = value !== defaultValue;
-    (0, react_1.useImperativeHandle)(ref, () => ({
+    (0, react_2.useImperativeHandle)(ref, () => ({
         setValue,
     }));
     (0, useOnClickOutside_1.useOnClickOutside)({
@@ -114,40 +118,34 @@ exports.TextEdit = (0, react_1.forwardRef)((p, ref) => {
             setEditingRaw(false);
         }
     });
-    const setEditing = (0, react_1.useCallback)((b) => {
+    const setEditing = (0, react_2.useCallback)((b) => {
         setEditingRaw(b);
         if (onEditingChange) {
             onEditingChange(b);
         }
     }, [onEditingChange]);
-    (0, react_1.useEffect)(() => {
-        setValue(defaultValue);
-    }, [defaultValue]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if ((defaultEditing === null || defaultEditing === void 0 ? void 0 : defaultEditing.focus) && taref.current) {
             taref.current.focus();
         }
     }, [defaultEditing === null || defaultEditing === void 0 ? void 0 : defaultEditing.focus]);
     if (!editing || disableEdit) {
-        return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "false", onClick: () => onClickNotEditing === null || onClickNotEditing === void 0 ? void 0 : onClickNotEditing(), "data-pointer": onClickNotEditing ? 'true' : 'false', "data-nogrow": noGrow }, (0, dom_1.filterDataProps)(p)),
+        return (react_2.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "false", onClick: () => onClickNotEditing === null || onClickNotEditing === void 0 ? void 0 : onClickNotEditing(), "data-pointer": onClickNotEditing ? 'true' : 'false', "data-nogrow": noGrow }, (0, dom_1.filterDataProps)(p)),
             leftContent || null,
-            react_1.default.createElement(exports.ValueReadonly, { "data-type": "text" }, value || react_1.default.createElement("span", { style: { color: '#ccc' } }, placeholder)),
-            react_1.default.createElement(Right, null, !disableEdit && (react_1.default.createElement(Icon, { style: common_1.iconRight, onClick: (e) => {
+            react_2.default.createElement(exports.ValueReadonly, { "data-type": "text" }, value || react_2.default.createElement("span", { style: { color: '#ccc' } }, placeholder)),
+            react_2.default.createElement(Right, null, !disableEdit && (react_2.default.createElement(Icon, { style: common_1.iconRight, onClick: (e) => {
                     e.stopPropagation();
                     setEditing(true);
                 } },
-                react_1.default.createElement(Pencil_1.Pencil, null))))));
+                react_2.default.createElement(Pencil_1.Pencil, null))))));
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const Comp = singleLine
-        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            ValueTextBox
-        : ValueTextArea;
-    return (react_1.default.createElement(ValueBoxEdit, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "true", 
+    const Comp = !singleLine ? ValueTextArea : ValueTextBox;
+    return (react_2.default.createElement(ValueBoxEdit, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "true", 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref: ref, tabIndex: -1, "data-nogrow": noGrow }, (0, dom_1.filterDataProps)(p)),
         leftContent || null,
-        react_1.default.createElement(Comp, { tabIndex: editing ? 0 : undefined, "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => {
+        react_2.default.createElement(Comp, { tabIndex: editing ? 0 : undefined, "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => {
                 setValue(v.currentTarget.value);
                 if (!allowUndo) {
                     onSubmit(v.currentTarget.value, false);
@@ -164,14 +162,14 @@ exports.TextEdit = (0, react_1.forwardRef)((p, ref) => {
                     onEscape();
                 }
             } }),
-        maxLength && (react_1.default.createElement(Right, { "data-singleline": singleLine },
-            react_1.default.createElement(LengthBox_1.TextEditLengthBox, { min: value.length, max: maxLength }))),
-        allowUndo && (react_1.default.createElement(Right, null,
-            valueChange && (react_1.default.createElement(Icon, { style: common_1.iconLeft, onClick: () => valueChange && onSubmit(value, false) },
-                react_1.default.createElement(Save_1.Save, null))),
-            (valueChange || editing !== !!defaultEditing) && (react_1.default.createElement(Icon, { style: common_1.iconRight, onClick: () => {
+        maxLength && (react_2.default.createElement(Right, { "data-singleline": singleLine },
+            react_2.default.createElement(LengthBox_1.TextEditLengthBox, { min: value.length, max: maxLength }))),
+        allowUndo && (react_2.default.createElement(Right, null,
+            valueChange && (react_2.default.createElement(Icon, { style: common_1.iconLeft, onClick: () => valueChange && onSubmit(value, false) },
+                react_2.default.createElement(Save_1.Save, null))),
+            (valueChange || editing !== !!defaultEditing) && (react_2.default.createElement(Icon, { style: common_1.iconRight, onClick: () => {
                     setEditing(!!defaultEditing);
                     setValue(defaultValue);
                 } },
-                react_1.default.createElement(Undo_1.Undo, null)))))));
+                react_2.default.createElement(Undo_1.Undo, null)))))));
 });

package/dist/ui/components/TextEdit/common.d.ts

@@ -1,7 +1,17 @@
-export declare const ValueBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const valueCss: import("styled-components").FlattenSimpleInterpolation;
-export declare const ValueInputCB: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const IconD: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const ValueBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const valueCss: import("@emotion/react").SerializedStyles;
+export declare const ValueInputCB: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const IconD: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const iconRight: {
     right: string;
 };

package/dist/ui/components/TextEdit/common.js

@@ -1,32 +1,13 @@
 "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 };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconLeft = exports.iconRight = exports.IconD = exports.ValueInputCB = exports.valueCss = exports.ValueBox = void 0;
 const colours_1 = require("../../styles/colours");
-const styled_components_1 = __importStar(require("styled-components"));
-exports.ValueBox = styled_components_1.default.div `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+exports.ValueBox = styled_1.default.div `
   padding: 0.5rem;
 
   display: flex;
@@ -46,7 +27,7 @@ exports.ValueBox = styled_components_1.default.div `
     flex-grow: 0;
   }
 `;
-exports.valueCss = (0, styled_components_1.css) `
+exports.valueCss = (0, react_1.css) `
   width: 100%;
   height: 100%;
   word-break: break-all;
@@ -60,10 +41,10 @@ exports.valueCss = (0, styled_components_1.css) `
     height: 1.5rem;
   }
 `;
-exports.ValueInputCB = styled_components_1.default.input `
+exports.ValueInputCB = styled_1.default.input `
   ${exports.valueCss};
 `;
-exports.IconD = styled_components_1.default.div `
+exports.IconD = styled_1.default.div `
   z-index: 1;
   font-size: 1rem;
   width: 1.5rem;

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

@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextWithButton = void 0;
 const react_1 = __importStar(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;
 `;
-const Input = styled_components_1.default.input `
+const Input = styled_1.default.input `
   flex-grow: 1;
   border: solid 3px #ccc;
   border-right: 0;
@@ -46,7 +46,7 @@ const Input = styled_components_1.default.input `
   }
   outline: 0;
 `;
-const Button = styled_components_1.default.button `
+const Button = styled_1.default.button `
   padding: 2rem;
   padding-top: 1rem;
   padding-bottom: 1rem;

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

@@ -30,9 +30,9 @@ exports.UserProfileImage = exports.UserImage = void 0;
 const log_1 = require("../../../common/helpers/log");
 const array_1 = require("../../../common/helpers/array");
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_1 = __importDefault(require("@emotion/styled"));
 const UserOutline_1 = require("../../icons/UserOutline");
-const Base = styled_components_1.default.div `
+const Base = styled_1.default.div `
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
@@ -40,7 +40,7 @@ const Base = styled_components_1.default.div `
   overflow: hidden;
   position: relative;
 `;
-const Img = styled_components_1.default.img `
+const Img = styled_1.default.img `
   width: 2.5rem;
   height: 2.5rem;
 `;

package/dist/ui/icons/CrossIcon.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrossIcon = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Base = styled_components_1.default.svg `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Base = styled_1.default.svg `
   color: rgb(170, 170, 170);
   margin: auto;
   font-size: 2rem;

package/dist/ui/styles/common.d.ts

@@ -1,16 +1,22 @@
 /// <reference types="react" />
-export declare const HardOutline: import("styled-components").FlattenSimpleInterpolation;
-export declare const NoTextSelect: import("styled-components").FlattenSimpleInterpolation;
-export declare const TextOverflowEllipsis: import("styled-components").FlattenSimpleInterpolation;
-export declare const CssTransparentBlock: import("styled-components").FlattenSimpleInterpolation;
+export declare const HardOutline: import("@emotion/react").SerializedStyles;
+export declare const NoTextSelect: import("@emotion/react").SerializedStyles;
+export declare const TextOverflowEllipsis: import("@emotion/react").SerializedStyles;
+export declare const CssTransparentBlock: import("@emotion/react").SerializedStyles;
 export declare const FadeBottom: ({ height }: {
     height: string;
-}) => import("styled-components").FlattenSimpleInterpolation;
-export declare const Card: import("styled-components").StyledComponent<"div", any, {}, never>;
+}) => import("@emotion/react").SerializedStyles;
+export declare const Card: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const noDrag: {
     draggable: boolean;
     onDragStart: React.DragEventHandler<HTMLDivElement>;
     onTouchStart: React.TouchEventHandler<HTMLDivElement>;
 };
-export declare const FullScreenPage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const bounce: (bounceattr: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const FullScreenPage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const bounce: (bounceattr: string) => import("@emotion/react").SerializedStyles;

package/dist/ui/styles/common.js

@@ -1,55 +1,36 @@
 "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 };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bounce = exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.HardOutline = void 0;
 const colours_1 = require("./colours");
-const styled_components_1 = __importStar(require("styled-components"));
-exports.HardOutline = (0, styled_components_1.css) `
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+exports.HardOutline = (0, react_1.css) `
   filter: drop-shadow(1px 1px 0px var(--outlinecolour))
     drop-shadow(-1px 1px 0px var(--outlinecolour))
     drop-shadow(1px -1px 0px var(--outlinecolour))
     drop-shadow(-1px -1px 0px var(--outlinecolour));
 `;
-exports.NoTextSelect = (0, styled_components_1.css) `
+exports.NoTextSelect = (0, react_1.css) `
   user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
 `;
-exports.TextOverflowEllipsis = (0, styled_components_1.css) `
+exports.TextOverflowEllipsis = (0, react_1.css) `
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-exports.CssTransparentBlock = (0, styled_components_1.css) `
+exports.CssTransparentBlock = (0, react_1.css) `
   background-color: rgba(150, 150, 150, 0.5);
   border-radius: 3px;
   font-weight: 600;
   color: ${colours_1.colours.mainLight};
 `;
-const FadeBottom = ({ height }) => (0, styled_components_1.css) `
+const FadeBottom = ({ height }) => (0, react_1.css) `
   &:after {
     content: '';
     position: absolute;
@@ -79,7 +60,7 @@ const FadeBottom = ({ height }) => (0, styled_components_1.css) `
   }
 `;
 exports.FadeBottom = FadeBottom;
-exports.Card = styled_components_1.default.div `
+exports.Card = styled_1.default.div `
   background-color: white;
   margin: 0.5rem;
 
@@ -100,7 +81,7 @@ exports.noDrag = {
         e.stopPropagation();
     },
 };
-exports.FullScreenPage = styled_components_1.default.div `
+exports.FullScreenPage = styled_1.default.div `
   display: flex;
   width: 100%;
   flex-grow: 1;
@@ -109,7 +90,7 @@ exports.FullScreenPage = styled_components_1.default.div `
   align-content: flex-start;
   align-items: flex-start;
 `;
-const bounce = (bounceattr) => (0, styled_components_1.css) `
+const bounce = (bounceattr) => (0, react_1.css) `
   transition: opacity 0.2s ease,
     transform 0.2s cubic-bezier(0.02, 1.5, 0.74, 1.23);
   transform-origin: 50% 50%;

package/dist/ui/styles/standaloneStyles.d.ts

@@ -1,6 +1,27 @@
-export declare const SOBase: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SOBR: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SOB: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SOP: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SOCenter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SOA: import("styled-components").StyledComponent<"a", any, {}, never>;
+/// <reference types="react" />
+export declare const SOBase: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SOBR: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SOB: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SOP: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SOCenter: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SOA: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;