ag-common 0.0.651 → 0.0.653

package/dist/common/helpers/email.d.ts

@@ -1,4 +1,4 @@
-export declare const isEmailValid: (email: string) => boolean;
+export declare const isEmailValid: (email: string | undefined) => boolean;
 export declare const getEmailErrors: (email: string, event: {
     creatorId: string;
 }) => string | undefined;

package/dist/ui/components/BarChart/Base.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import { type IVarStyles } from '../../styles/common';
 import type { IBarChartData } from './types';
-export declare const BarChart: ({ data: dataRaw }: {
+export declare const BarChart: ({ data: dataRaw, style: sRaw, }: {
     data: IBarChartData[];
+    style?: Partial<IVarStyles>;
 }) => React.JSX.Element;

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

@@ -7,6 +7,7 @@ exports.BarChart = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const useTooltip_1 = require("../../helpers/useTooltip");
+const common_1 = require("../../styles/common");
 const Item_1 = require("./Item");
 const Legend_1 = require("./Legend");
 const TooltipContent_1 = require("./TooltipContent");
@@ -17,7 +18,6 @@ const BarChartBase = styled_1.default.div `
   height: 100%;
   margin-top: 0.5rem;
   position: relative;
-  background-color: var(--main-bg);
 `;
 const ItemStyled = (0, styled_1.default)(Item_1.Item) `
   margin-bottom: 0.75rem;
@@ -26,21 +26,22 @@ const ItemStyled = (0, styled_1.default)(Item_1.Item) `
     margin-bottom: 0;
   }
 `;
-const BarChart = ({ data: dataRaw }) => {
+const BarChart = ({ data: dataRaw, style: sRaw, }) => {
+    const style = (0, common_1.getVarStyles)(sRaw);
     const UT = (0, useTooltip_1.useTooltip)();
     const maxWidth = Math.max(...dataRaw.map((a) => a.total));
-    return (react_1.default.createElement(BarChartBase, { "data-type": "bcb" },
-        react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p))),
-        dataRaw.map((data) => (react_1.default.createElement(ItemStyled, { key: data.name, data: data, maxWidth: maxWidth, onMouseLeave: () => UT.setPos(undefined), onMouseMove: (element) => {
+    return (react_1.default.createElement(BarChartBase, { "data-type": "bcb", style: style },
+        react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p, { style: style }))),
+        dataRaw.map((data) => (react_1.default.createElement(ItemStyled, { style: style, key: data.name, data: data, maxWidth: maxWidth, onMouseLeave: () => UT.setPos(undefined), onMouseMove: (element) => {
                 var _a, _b;
                 const selectedKey = (_b = (_a = document
                     .elementFromPoint(element.pageX, element.pageY)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-barchartitem-key')) !== null && _b !== void 0 ? _b : '';
                 UT.setPos({
                     element,
                     parent: element.currentTarget.closest("[data-type='bcb']"),
-                    data: { data, selectedKey },
+                    data: { selectedKey, data },
                 });
             } }))),
-        react_1.default.createElement(Legend_1.Legend, { data: dataRaw, maxWidth: maxWidth })));
+        react_1.default.createElement(Legend_1.Legend, { data: dataRaw, maxWidth: maxWidth, style: style })));
 };
 exports.BarChart = BarChart;

package/dist/ui/components/BarChart/Item.d.ts

@@ -1,10 +1,12 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
+import type { IVarStyles } from '../../styles';
 import type { IBarChartData } from './types';
-export declare const Item: ({ data, className, onMouseMove, onMouseLeave, maxWidth, }: {
+export declare const Item: ({ data, className, onMouseMove, onMouseLeave, maxWidth, style, }: {
     data: IBarChartData;
     className?: string | undefined;
     onMouseMove?: MouseEventHandler<HTMLDivElement> | undefined;
     onMouseLeave?: MouseEventHandler<HTMLDivElement> | undefined;
     maxWidth: number;
+    style: IVarStyles;
 }) => React.JSX.Element;

package/dist/ui/components/BarChart/Item.js

@@ -18,11 +18,12 @@ const Base = styled_1.default.div `
 const Title = styled_1.default.div `
   position: absolute;
   left: 0.25rem;
-  color: var(--main-fg);
-  ${(0, styles_1.HardOutline)('var(--main-bg)')};
 `;
-const Item = ({ data, className, onMouseMove, onMouseLeave, maxWidth, }) => (react_1.default.createElement(Base, { className: className, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave },
-    react_1.default.createElement(Title, null, data.name),
+const Item = ({ data, className, onMouseMove, onMouseLeave, maxWidth, style, }) => (react_1.default.createElement(Base, { className: className, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, style: style },
+    react_1.default.createElement(Title, { style: {
+            color: style.color,
+            filter: (0, styles_1.HardOutlineFilter)(style.backgroundColor),
+        } }, data.name),
     data.values.map((v) => (react_1.default.createElement("div", { "data-barchartitem-key": v.name, key: v.name, style: {
             height: '100%',
             width: `${(v.value / maxWidth) * 100}%`,

package/dist/ui/components/BarChart/Legend.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { IVarStyles } from '../../styles/common';
 import type { IBarChartData } from './types';
-export declare const Legend: ({ data, maxWidth, }: {
+export declare const Legend: ({ data, maxWidth, style, }: {
     data: IBarChartData[];
     maxWidth: number;
+    style: IVarStyles;
 }) => React.JSX.Element;

package/dist/ui/components/BarChart/Legend.js

@@ -26,7 +26,6 @@ const Line = styled_1.default.div `
   height: 2px;
   left: 0;
   right: 0;
-  background-color: var(--main-fg);
 `;
 const Numbers = styled_1.default.div `
   width: 100%;
@@ -35,9 +34,6 @@ const Numbers = styled_1.default.div `
   flex-flow: row;
   justify-content: space-between;
   z-index: 1;
-  > span {
-    background-color: var(--main-bg);
-  }
 `;
 const Items = styled_1.default.div `
   width: 100%;
@@ -59,7 +55,7 @@ const Col = styled_1.default.div `
   border-radius: 50%;
   margin-right: 0.25rem;
 `;
-const Legend = ({ data, maxWidth, }) => {
+const Legend = ({ data, maxWidth, style, }) => {
     const items = [0];
     if (maxWidth > 10) {
         items.push(Math.floor(maxWidth * 0.25));
@@ -73,10 +69,13 @@ const Legend = ({ data, maxWidth, }) => {
             name: v.name,
         }));
     })), (s) => s.name).sort((a, b) => (a.name < b.name ? -1 : 1));
-    return (react_1.default.createElement(Base, null,
+    return (react_1.default.createElement(Base, { style: style },
         react_1.default.createElement(Bar, null,
-            react_1.default.createElement(Line, null),
-            react_1.default.createElement(Numbers, null, items.map((i) => (react_1.default.createElement("span", { key: i }, i))))),
+            react_1.default.createElement(Line, { style: { background: style.backgroundColor, color: style.color } }),
+            react_1.default.createElement(Numbers, null, items.map((i) => (react_1.default.createElement("span", { style: {
+                    backgroundColor: style.backgroundColor,
+                    color: style.color,
+                }, key: i }, i))))),
         keys.length > 1 && (react_1.default.createElement(Items, null, keys.map((k) => (react_1.default.createElement(Item, { key: k.name },
             react_1.default.createElement(Col, { style: { backgroundColor: k.colour } }),
             k.name)))))));

package/dist/ui/components/BarChart/TooltipContent.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { IVarStyles } from '../../styles/common';
 import type { IBarChartData } from './types';
-export declare const TooltipContent: ({ data, selectedKey, }: {
+export declare const TooltipContent: ({ data, selectedKey, style, }: {
     data: IBarChartData;
     selectedKey?: string | undefined;
+    style: IVarStyles;
 }) => React.JSX.Element;

package/dist/ui/components/BarChart/TooltipContent.js

@@ -8,8 +8,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const getLegendItems_1 = require("./getLegendItems");
 const Base = styled_1.default.div `
-  background-color: var(--main-bg);
-  border: solid 1px var(--main-bg-mid);
   padding: 0.5rem;
 `;
 const Title = styled_1.default.div `
@@ -34,9 +32,9 @@ const Total = styled_1.default.span `
     text-decoration: underline;
   }
 `;
-const TooltipContent = ({ data, selectedKey, }) => {
+const TooltipContent = ({ data, selectedKey, style, }) => {
     const { part, rest, restTotal } = (0, getLegendItems_1.getLegendItems)({ data, selectedKey });
-    return (react_1.default.createElement(Base, null,
+    return (react_1.default.createElement(Base, { style: Object.assign(Object.assign({}, style), { border: `solid 1px ${style.borderColor}` }) },
         react_1.default.createElement(Title, null, data.name),
         react_1.default.createElement(Row, null,
             react_1.default.createElement("span", null, "total"),

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

@@ -10,6 +10,7 @@ const react_1 = __importDefault(require("react"));
 const array_1 = require("../../../common/helpers/array");
 const math_1 = require("../../../common/helpers/math");
 const useTooltip_1 = require("../../helpers/useTooltip");
+const common_1 = require("../../styles/common");
 const FlexRow_1 = require("../FlexRow");
 const dateHelpers_1 = require("./dateHelpers");
 const getLegendItems_1 = require("./getLegendItems");
@@ -31,14 +32,13 @@ const Base = styled_1.default.div `
 `;
 const Svg = styled_1.default.svg `
   padding: 2px;
-  border-left: solid 1px var(--main-fg);
-  border-top: solid 1px var(--main-fg);
   width: calc(100% - 5px);
   height: calc(100% - 5px);
 `;
 const LineChart = (p) => {
     var _a;
     const UT = (0, useTooltip_1.useTooltip)();
+    const style = (0, common_1.getVarStyles)(p.style);
     const { points, xTime } = (0, interpolate_1.interpolate)(p.data);
     let tt = p.tooltipTitle;
     if (!tt && xTime) {
@@ -57,7 +57,10 @@ const LineChart = (p) => {
     const lt2 = lt;
     const tt2 = tt;
     const legendItems = (0, getLegendItems_1.getLegendItems)(Object.assign(Object.assign({ colours: p.colours, data: p.data, tt: tt2, lt: lt2 }, (_a = UT.pos) === null || _a === void 0 ? void 0 : _a.data), { fixed: false }));
-    const SvgC = (react_1.default.createElement(Svg, { transform: "scale(-1,1) scale(-1,-1)", strokeWidth: '3px', fillOpacity: 1, preserveAspectRatio: "none", onMouseMove: (element) => {
+    const SvgC = (react_1.default.createElement(Svg, { style: {
+            borderLeft: `solid 1px ${style.borderColor}`,
+            borderTop: `solid 1px ${style.borderColor}`,
+        }, transform: "scale(-1,1) scale(-1,-1)", strokeWidth: '3px', fillOpacity: 1, preserveAspectRatio: "none", onMouseMove: (element) => {
             const parent = element.currentTarget.closest("[data-type='lcb']");
             const bb = parent === null || parent === void 0 ? void 0 : parent.getBoundingClientRect();
             if (!bb) {
@@ -96,11 +99,11 @@ const LineChart = (p) => {
                 p2.x1 === p2.x2) && (react_1.default.createElement("circle", { cx: `${p2.x2}%`, cy: `${p2.y2}%`, r: "8px", fill: p.colours[p2.name] })),
             p2.x1 !== p2.x2 && (react_1.default.createElement("line", { strokeOpacity: legendItems.part.find((f) => f.name === p2.name) ? 1 : 0.3, x1: `${p2.x1}%`, x2: `${p2.x2}%`, y1: `${p2.y1}%`, y2: `${p2.y2}%`, style: { stroke: p.colours[p2.name] } }))));
     })));
-    return (react_1.default.createElement(Base, { className: p.className, "data-type": "lcb", onMouseLeave: () => UT.setPos(undefined) },
+    return (react_1.default.createElement(Base, { className: p.className, "data-type": "lcb", onMouseLeave: () => UT.setPos(undefined), style: style },
         react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p2) => (react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p2, { colours: p.colours, data: p.data, lt: lt2, tt: tt2, legendItems: legendItems })))),
         react_1.default.createElement(FlexRow_1.FlexRow, { noWrap: true },
-            react_1.default.createElement(LegendY_1.LegendY, { data: p.data }),
+            react_1.default.createElement(LegendY_1.LegendY, { data: p.data, style: style }),
             SvgC),
-        react_1.default.createElement(LegendX_1.LegendX, { data: p.data, colours: p.colours, lt: lt, tt: tt })));
+        react_1.default.createElement(LegendX_1.LegendX, { data: p.data, colours: p.colours, lt: lt, tt: tt, style: style })));
 };
 exports.LineChart = LineChart;

package/dist/ui/components/LineChart/LegendX.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import type { IVarStyles } from '../../styles/common';
 import type { ILineChartItemRaw } from './types';
-export declare const LegendX: ({ data, lt, tt, colours, }: {
+export declare const LegendX: ({ data, lt, tt, colours, style, }: {
     data: ILineChartItemRaw[];
     colours: Record<string, string>;
     lt: (a: number) => string;
     tt: (a: number) => string;
+    style: IVarStyles;
 }) => React.JSX.Element;

package/dist/ui/components/LineChart/LegendX.js

@@ -12,7 +12,6 @@ const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
   width: 100%;
-  color: var(--main-fg);
 `;
 const Bar = styled_1.default.div `
   width: 100%;
@@ -27,7 +26,6 @@ const Line = styled_1.default.div `
   height: 2px;
   left: 0;
   right: 0;
-  background-color: var(--main-fg);
 `;
 const Numbers = styled_1.default.div `
   width: 100%;
@@ -35,10 +33,6 @@ const Numbers = styled_1.default.div `
   flex-flow: row;
   justify-content: space-between;
   z-index: 1;
-
-  > span {
-    background-color: var(--main-bg);
-  }
 `;
 const Items = styled_1.default.div `
   width: 100%;
@@ -66,7 +60,7 @@ const Col = styled_1.default.div `
   border-radius: 50%;
   margin-right: 0.25rem;
 `;
-const LegendX = ({ data, lt, tt, colours, }) => {
+const LegendX = ({ data, lt, tt, colours, style, }) => {
     const legendItems = (0, getLegendItems_1.getLegendItems)({
         data,
         colours,
@@ -90,12 +84,12 @@ const LegendX = ({ data, lt, tt, colours, }) => {
     itemsRaw.push(maxX);
     const items = itemsRaw.map((d) => { var _a; return (_a = lt(d)) !== null && _a !== void 0 ? _a : d; });
     const ch = maxY.toString().length + 1;
-    return (react_1.default.createElement(Base, { style: { marginLeft: 'auto', width: `calc(100% - ${ch}ch)` } },
+    return (react_1.default.createElement(Base, { style: Object.assign(Object.assign({}, style), { marginLeft: 'auto', width: `calc(100% - ${ch}ch)` }) },
         react_1.default.createElement(Bar, null,
-            react_1.default.createElement(Line, null),
-            react_1.default.createElement(Numbers, null, items.map((i, i2) => (
-            // eslint-disable-next-line react/no-array-index-key
-            react_1.default.createElement("span", { key: i + i2 }, i))))),
+            react_1.default.createElement(Line, { style: { backgroundColor: style.color } }),
+            react_1.default.createElement(Numbers, null, items.map((i, i2) => (react_1.default.createElement("span", { 
+                // eslint-disable-next-line react/no-array-index-key
+                key: i + i2, style: { backgroundColor: style.backgroundColor } }, i))))),
         legendItems.length > 1 && (react_1.default.createElement(Items, null, legendItems.map((k) => (react_1.default.createElement(Item, { key: k.name },
             react_1.default.createElement(Col, { style: { backgroundColor: k.colour } }),
             k.name)))))));

package/dist/ui/components/LineChart/LegendY.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { IVarStyles } from '../../styles/common';
 import type { ILineChartItemRaw } from './types';
-export declare const LegendY: ({ data }: {
+export declare const LegendY: ({ data, style, }: {
     data: ILineChartItemRaw[];
+    style: IVarStyles;
 }) => React.JSX.Element;

package/dist/ui/components/LineChart/LegendY.js

@@ -18,12 +18,10 @@ const Numbers = styled_1.default.div `
   justify-content: space-between;
   z-index: 1;
   > span {
-    color: var(--main-fg);
-    background-color: var(--main-bg);
     text-align: right;
   }
 `;
-const LegendY = ({ data }) => {
+const LegendY = ({ data, style, }) => {
     const ys = data.map((a) => a.y);
     const minY = Math.min(...ys);
     const maxY = Math.max(...ys);
@@ -35,9 +33,12 @@ const LegendY = ({ data }) => {
     }
     items.push(maxY);
     const ch = maxY.toString().length;
-    return (react_1.default.createElement(Base, { style: { maxWidth: `${ch}ch`, paddingRight: '1ch' } },
-        react_1.default.createElement(Numbers, null, items.map((i, i2) => (
-        // eslint-disable-next-line react/no-array-index-key
-        react_1.default.createElement("span", { key: i + i2 }, i))))));
+    return (react_1.default.createElement(Base, { style: Object.assign(Object.assign({}, style), { maxWidth: `${ch}ch`, paddingRight: '1ch' }) },
+        react_1.default.createElement(Numbers, null, items.map((i, i2) => (react_1.default.createElement("span", { 
+            // eslint-disable-next-line react/no-array-index-key
+            key: i + i2, style: {
+                color: style.color,
+                backgroundColor: style.backgroundColor,
+            } }, i))))));
 };
 exports.LegendY = LegendY;

package/dist/ui/components/LineChart/TooltipContent.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { IVarStyles } from '../../styles/common';
 import type { ILegendItems } from './getLegendItems';
 import type { ILineChartTooltip } from './types';
 export declare const TooltipContent: (p: ILineChartTooltip & {
     legendItems: ILegendItems;
-}) => React.JSX.Element;
+}, style: IVarStyles) => React.JSX.Element;

package/dist/ui/components/LineChart/TooltipContent.js

@@ -7,8 +7,6 @@ exports.TooltipContent = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const Base = styled_1.default.div `
-  background-color: var(--main-bg);
-  border: solid 1px var(--main-bg-mid);
   padding: 0.5rem;
 `;
 const Title = styled_1.default.div `
@@ -33,10 +31,10 @@ const Total = styled_1.default.span `
     text-decoration: underline;
   }
 `;
-const TooltipContent = (p) => {
+const TooltipContent = (p, style) => {
     var _a, _b, _c, _d;
     const name = (_d = (_a = p.tt) === null || _a === void 0 ? void 0 : _a.call(p, (_c = (_b = p.selectedXs) === null || _b === void 0 ? void 0 : _b[0].x) !== null && _c !== void 0 ? _c : 0)) !== null && _d !== void 0 ? _d : '';
-    return (react_1.default.createElement(Base, null,
+    return (react_1.default.createElement(Base, { style: Object.assign(Object.assign({}, style), { border: `solid 1px ${style.borderColor}` }) },
         react_1.default.createElement(Title, null, name),
         react_1.default.createElement(Row, null,
             react_1.default.createElement("span", null, "total"),

package/dist/ui/components/LineChart/types.d.ts

@@ -1,3 +1,4 @@
+import type { IVarStyles } from '../../styles/common';
 export type ILineChartItemRaw = {
     x: number;
     y: number;
@@ -23,4 +24,5 @@ export interface ILineChart {
     colours: Record<string, string>;
     tooltipTitle?: (a: number) => string;
     legendTitle?: (a: number) => string;
+    style: Partial<IVarStyles>;
 }

package/dist/ui/icons/Checkmark.js

@@ -7,7 +7,7 @@ exports.Checkmark = void 0;
 const react_1 = __importDefault(require("react"));
 const Checkmark = ({ style, }) => {
     var _a;
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: Object.assign({}, style) },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: style },
         react_1.default.createElement("path", { fill: "none", stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : '#000', strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 12.333 10.461 15 16 9m5 3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
 };
 exports.Checkmark = Checkmark;

package/dist/ui/icons/Circle.js

@@ -7,7 +7,7 @@ exports.Circle = void 0;
 const react_1 = __importDefault(require("react"));
 const Circle = ({ style, dotted = false, }) => {
     var _a;
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: Object.assign({}, style) },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: style },
         react_1.default.createElement("path", { fill: "none", stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : '#000', strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: !dotted ? '' : '4 4', strokeWidth: "2", d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
 };
 exports.Circle = Circle;

package/dist/ui/icons/Computer.js

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Computer = void 0;
 const react_1 = __importDefault(require("react"));
-const Computer = ({ style, }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", style: Object.assign({}, style) },
+const Computer = ({ style, }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", style: style },
     react_1.default.createElement("path", { fillRule: "evenodd", d: "M2 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-6v1h2a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2v-1H5a3 3 0 0 1-3-3V6Zm3-1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H5Z", clipRule: "evenodd" })));
 exports.Computer = Computer;

package/dist/ui/icons/Magnify.js

@@ -7,7 +7,7 @@ exports.Magnify = void 0;
 const react_1 = __importDefault(require("react"));
 const Magnify = ({ style, }) => {
     var _a;
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490", style: Object.assign({}, style) },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490", style: style },
         react_1.default.createElement("path", { fill: "none", stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : 'black', strokeWidth: "36", strokeLinecap: "round", d: "M280 278a153 153 0 1 0-2 2l170 170m-91-117 110 110-26 26-110-110" })));
 };
 exports.Magnify = Magnify;

package/dist/ui/icons/Moon.js

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Moon = void 0;
 const react_1 = __importDefault(require("react"));
-const Moon = ({ style, }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 35 35", style: Object.assign({}, style) },
+const Moon = ({ style, }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 35 35", style: style },
     react_1.default.createElement("path", { d: "M18.44 34.68a18.22 18.22 0 0 1-2.94-.24 18.18 18.18 0 0 1-15-20.86A18.06 18.06 0 0 1 9.59.63a2.42 2.42 0 0 1 2.61.16 2.39 2.39 0 0 1 1 2.41l-1.3-.1 1.23.22A15.66 15.66 0 0 0 23.34 21a15.82 15.82 0 0 0 8.47.53A2.44 2.44 0 0 1 34.47 25a18.18 18.18 0 0 1-16.03 9.68ZM10.67 2.89a15.67 15.67 0 0 0-5 22.77A15.66 15.66 0 0 0 32.18 24a18.49 18.49 0 0 1-9.65-.64A18.18 18.18 0 0 1 10.67 2.89Z" })));
 exports.Moon = Moon;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { CSSProperties } from 'react';
 /** function that returns css that gives a text outline drop shadow.
  * @param outlineColour default='white'
  * @param sizePx default = 1px
@@ -23,3 +23,12 @@ export declare const Card: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export interface IVarStyles {
+    /** default var(--main-fg) */
+    color: string;
+    /** default var(--main-bg) */
+    backgroundColor: string;
+    /** default var(--main-bg-mid) */
+    borderColor: string;
+}
+export declare const getVarStyles: (raw?: Partial<IVarStyles & CSSProperties>) => IVarStyles;

package/dist/ui/styles/common.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = exports.bounce = exports.noDrag = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.HardOutlineFilter = exports.HardOutline = void 0;
+exports.getVarStyles = exports.Card = exports.bounce = exports.noDrag = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.HardOutlineFilter = exports.HardOutline = void 0;
 const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const colours_1 = require("./colours");
@@ -77,3 +77,8 @@ exports.Card = styled_1.default.div `
   padding: 1rem;
   border: solid 2px ${colours_1.colours.lighter};
 `;
+const getVarStyles = (raw) => {
+    var _a, _b, _c;
+    return (Object.assign(Object.assign({}, raw), { color: (_a = raw === null || raw === void 0 ? void 0 : raw.color) !== null && _a !== void 0 ? _a : 'var(--main-fg)', backgroundColor: (_b = raw === null || raw === void 0 ? void 0 : raw.backgroundColor) !== null && _b !== void 0 ? _b : 'var(--main-bg)', borderColor: (_c = raw === null || raw === void 0 ? void 0 : raw.borderColor) !== null && _c !== void 0 ? _c : 'var(--main-bg-mid)' }));
+};
+exports.getVarStyles = getVarStyles;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.651",
+  "version": "0.0.653",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",