ag-common 0.0.552 → 0.0.554

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

@@ -1,11 +1,12 @@
 import React from 'react';
-export declare const Accordion: ({ title, children, open, setOpen, chevronColour, className, }: {
+export interface IAccordion {
     children: string | JSX.Element | JSX.Element[];
     title: string;
     /** controlled component if provided */
-    open?: boolean | undefined;
+    open?: boolean;
     /** called when openness changes */
-    setOpen?: ((open: boolean) => void) | undefined;
-    chevronColour?: string | undefined;
-    className?: string | undefined;
-}) => React.JSX.Element;
+    setOpen?: (open: boolean) => void;
+    chevronColour?: string;
+    className?: string;
+}
+export declare const Accordion: ({ title, children, open, setOpen, chevronColour, className, }: IAccordion) => React.JSX.Element;

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

@@ -9,7 +9,7 @@ export interface IBorderGradient {
     radius?: string;
     left?: string;
     right?: string;
-    children: JSX.Element | (JSX.Element | string | number | undefined)[];
+    children: React.ReactNode;
     padding?: string;
     onClick?: (e: IOnClick) => void;
     href?: string;

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

@@ -11,6 +11,7 @@ const react_2 = __importDefault(require("react"));
 const object_1 = require("../../../common/helpers/object");
 const colours_1 = require("../../styles/colours");
 const BGcss = (0, react_1.css) `
+  max-height: calc(100% - 6px);
   display: flex;
   border: 0;
   padding: 3px;

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

@@ -37,7 +37,5 @@ const Base = styled_1.default.div `
     transform: rotate(-45deg);
   }
 `;
-const Close = (p) => {
-    return (react_1.default.createElement(Base, Object.assign({}, (0, dom_1.filterDataProps)(p), { className: p.className, onClick: (e) => { var _a; return (_a = p.onClick) === null || _a === void 0 ? void 0 : _a.call(p, e); } })));
-};
+const Close = (p) => (react_1.default.createElement(Base, Object.assign({}, (0, dom_1.filterDataProps)(p), { className: p.className, onClick: (e) => { var _a; return (_a = p.onClick) === null || _a === void 0 ? void 0 : _a.call(p, e); } })));
 exports.Close = Close;

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

@@ -43,6 +43,7 @@ const Base = styled_1.default.div `
   justify-content: space-between;
   cursor: pointer;
   flex-grow: 0;
+  max-height: 100%;
 `;
 const DropItems = styled_1.default.div `
   flex-flow: column;
@@ -65,6 +66,7 @@ const ListItemStyle = styled_1.default.div `
   padding-left: 0.5rem;
   flex-grow: 1;
   padding: 1rem;
+  height: calc(100% - 2rem);
   cursor: pointer;
   display: flex;
   overflow: hidden;
@@ -120,6 +122,8 @@ function DropdownList(p) {
         const maxLen = 20;
         const newStyle = {
             minWidth: `calc(${maxLen}ch + 2rem)`,
+            filter: `drop-shadow(1px 1px 0.5rem ${shadow})`,
+            maxHeight,
         };
         const minPx = (0, dom_1.convertRemToPixels)(2 + maxLen / 2);
         const offsetLeft = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0;
@@ -138,8 +142,6 @@ function DropdownList(p) {
         else {
             newStyle.top = '0';
         }
-        newStyle.filter = `drop-shadow(1px 1px 0.5rem ${shadow})`;
-        newStyle.maxHeight = maxHeight;
         if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
             setStyle(newStyle);
         }

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

@@ -12,21 +12,19 @@ const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
   flex-grow: 1;
+  width: 100%;
+  height: 100%;
   &[data-center='true'] {
     justify-content: center;
     align-items: center;
   }
   &[data-nogrow='true'] {
     flex-grow: 0;
-  }
-  overflow: visible;
-  &[data-enableoverflow='false'] {
-    overflow: hidden;
-    max-width: 100%;
+    width: unset;
   }
 `;
 const FlexColumn = (props) => {
-    var _a, _b, _c;
-    return (react_1.default.createElement(Base, Object.assign({ title: props.title, "data-nogrow": (_a = props.noGrow) !== null && _a !== void 0 ? _a : false, "data-center": (_b = props.center) !== null && _b !== void 0 ? _b : false, "data-enableoverflow": (_c = props.enableOverflow) !== null && _c !== void 0 ? _c : false }, props), props.children));
+    var _a, _b;
+    return (react_1.default.createElement(Base, Object.assign({ "data-nogrow": (_a = props.noGrow) !== null && _a !== void 0 ? _a : false, "data-center": (_b = props.center) !== null && _b !== void 0 ? _b : false }, props), props.children));
 };
 exports.FlexColumn = FlexColumn;

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

@@ -30,13 +30,9 @@ const Base = styled_1.default.div `
     justify-content: center;
     align-items: center;
   }
-
-  &[data-enableoverflow='true'] {
-    overflow: visible;
-  }
 `;
 const FlexRow = (props) => {
-    var _a, _b, _c, _d;
-    return (react_1.default.createElement(Base, Object.assign({ title: props.title, "data-nowrap": (_a = props.noWrap) !== null && _a !== void 0 ? _a : false, "data-nogrow": (_b = props.noGrow) !== null && _b !== void 0 ? _b : false, "data-center": (_c = props.center) !== null && _c !== void 0 ? _c : false, "data-enableoverflow": (_d = props.enableOverflow) !== null && _d !== void 0 ? _d : false }, props), props.children));
+    var _a, _b, _c;
+    return (react_1.default.createElement(Base, Object.assign({ "data-nowrap": (_a = props.noWrap) !== null && _a !== void 0 ? _a : false, "data-nogrow": (_b = props.noGrow) !== null && _b !== void 0 ? _b : false, "data-center": (_c = props.center) !== null && _c !== void 0 ? _c : false }, props), props.children));
 };
 exports.FlexRow = FlexRow;

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

@@ -16,6 +16,10 @@ exports.IconF = styled_1.default.span `
   align-items: center;
   font-size: 2rem;
   cursor: inherit;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: unset;
   &[data-chnd='true'] {
     cursor: pointer;
     &:hover {
@@ -53,7 +57,7 @@ const Icon = (pr) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { className, children, disabled, onClick } = pr;
     const CHND = pr.canHover && !pr.disabled;
-    const style = (0, object_1.removeUndefValuesFromObject)(Object.assign(Object.assign({}, ((_a = pr === null || pr === void 0 ? void 0 : pr.style) !== null && _a !== void 0 ? _a : {})), { '--fill': (_c = (_b = pr.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : null, width: ((_d = pr.style) === null || _d === void 0 ? void 0 : _d.width) || '100%', height: ((_e = pr.style) === null || _e === void 0 ? void 0 : _e.height) || '100%', padding: ((_f = pr.style) === null || _f === void 0 ? void 0 : _f.padding) || '0', margin: ((_g = pr.style) === null || _g === void 0 ? void 0 : _g.margin) || 'unset', transform: !pr.rotate ? null : `rotate(${pr.rotate || 0}deg)`, filter: !pr.disabled ? null : 'grayscale(1)', '--outlinecolour': pr.outline || null }));
-    return (react_1.default.createElement(exports.IconF, Object.assign({}, pr, { className: className, onClick: (e) => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e)), style: style, "data-chnd": CHND, "data-hasoutline": pr.outline, "data-hasfill": !!((_h = pr.style) === null || _h === void 0 ? void 0 : _h.fill) }), children));
+    const style = (0, object_1.removeUndefValuesFromObject)(Object.assign(Object.assign({}, ((_a = pr === null || pr === void 0 ? void 0 : pr.style) !== null && _a !== void 0 ? _a : {})), { '--fill': (_c = (_b = pr.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : null, width: (_d = pr.style) === null || _d === void 0 ? void 0 : _d.width, height: (_e = pr.style) === null || _e === void 0 ? void 0 : _e.height, padding: (_f = pr.style) === null || _f === void 0 ? void 0 : _f.padding, margin: (_g = pr.style) === null || _g === void 0 ? void 0 : _g.margin, transform: !pr.rotate ? null : `rotate(${pr.rotate || 0}deg)`, filter: !pr.disabled ? null : 'grayscale(1)', '--outlinecolour': pr.outline || null }));
+    return (react_1.default.createElement(exports.IconF, Object.assign({}, pr, { className: className, onClick: (e) => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e)), style: style, "data-chnd": CHND, "data-hasoutline": pr.outline, "data-hasfill": !!((_h = pr.style) === null || _h === void 0 ? void 0 : _h.fill), "data-type": "iconbox" }), children));
 };
 exports.Icon = Icon;

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

@@ -14,11 +14,12 @@ const common_1 = require("./helpers/common");
 const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
-  width: calc(100% - 4rem);
+  width: calc(100% - 2rem);
   flex-grow: 1;
   border: solid 1px #333;
-  margin: 1rem;
   padding: 1rem;
+  overflow-y: auto;
+  max-height: calc(100% - 2rem);
 `;
 const Verb = styled_1.default.div `
   background-color: #333;
@@ -49,7 +50,7 @@ const OpenApiCodeBlock = (p) => {
     }
     const { verb, operation, path } = ops;
     return (react_1.default.createElement(Base, null,
-        react_1.default.createElement(FlexRow_1.FlexRow, { center: true },
+        react_1.default.createElement(FlexRow_1.FlexRow, { center: true, noGrow: true },
             react_1.default.createElement(Verb, null, verb),
             react_1.default.createElement(ApiName, null, (_a = operation.description) !== null && _a !== void 0 ? _a : path)),
         react_1.default.createElement(BlockTitle, null, "Definition"),

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

@@ -8,7 +8,6 @@ exports.getSecurity = exports.getBodyJson = exports.getOperation = exports.Highl
 const styled_1 = __importDefault(require("@emotion/styled"));
 exports.Highlight = styled_1.default.span `
   color: green;
-  text-transform: capitalize;
 `;
 exports.Highlight2 = styled_1.default.span `
   color: indianred;
@@ -29,7 +28,7 @@ const getApiUrl = (p) => {
 const getFunctionName = (p) => {
     let ret = p.funcF.toString();
     const i1 = ret.indexOf('.') + 1;
-    const i2 = indexOfNumber(ret, '(', 1);
+    const i2 = ret.indexOf('(', i1);
     ret = ret.substring(i1, i2);
     return ret;
 };

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

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+export interface IRadioGroup<T> {
+    /**
+     * can overload the render of the label. defaults to toString
+     */
+    renderLabel?: (a: T, selected: boolean) => JSX.Element;
+    defaultIndex: number;
+    onSubmit: (val: T, index: number) => void;
+    values: T[];
+    className?: string;
+    style?: CSSProperties;
+    /** default horiz */
+    mode?: 'vert' | 'horiz';
+}
+export declare const RadioGroup: <T>(p: IRadioGroup<T>) => React.JSX.Element;

package/dist/ui/components/{TextEdit/RadioGroup.js → RadioGroup/Base.js}

@@ -31,25 +31,42 @@ exports.RadioGroup = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const common_1 = require("../../styles/common");
-const FlexColumn_1 = require("../FlexColumn");
-const common_2 = require("./common");
-const Label = styled_1.default.label ``;
-const RadioGroup = ({ defaultValue, onSubmit, values, 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-renderLabel = (e) => e.toString(), 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-renderValue = (e) => e.toString(), }) => {
-    const [value, setValue] = (0, react_1.useState)(renderValue(defaultValue));
-    (0, react_1.useEffect)(() => {
-        const rv = renderValue(defaultValue);
-        if (value !== rv) {
-            setValue(rv);
-        }
-    }, [defaultValue, renderValue, value]);
-    return (react_1.default.createElement(common_2.ValueBox, Object.assign({}, common_1.noDrag), values.map((v) => (
+const Base = styled_1.default.div `
+  display: flex;
+  flex-flow: row;
+  &[data-mode='vert'] {
+    flex-flow: column;
+  }
+  border-radius: 2rem;
+  overflow: hidden;
+  justify-content: space-between;
+`;
+const Label = styled_1.default.label `
+  text-align: center;
+  overflow: hidden;
+
+  &[data-selected='true'] {
+    cursor: default;
+  }
+  &[data-selected='false'] {
+    cursor: pointer;
+  }
+`;
+const RadioGroup = (p) => {
+    var _a, _b;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    react_1.default.createElement(FlexColumn_1.FlexColumn, { key: v.toString() },
-        react_1.default.createElement(Label, null, renderLabel(v)),
-        react_1.default.createElement("input", { type: "radio", key: renderValue(v), value: renderValue(v), checked: renderValue(v) === value, onChange: () => onSubmit(v) }))))));
+    const { renderLabel = (x) => x.toString() } = p;
+    const [index, setIndex] = (0, react_1.useState)((_a = p.defaultIndex) !== null && _a !== void 0 ? _a : 0);
+    return (react_1.default.createElement(Base, Object.assign({}, common_1.noDrag, { className: p.className, style: p.style, "data-mode": (_b = p.mode) !== null && _b !== void 0 ? _b : 'horiz' }), p.values.map((v, i) => (react_1.default.createElement(Label
+    // eslint-disable-next-line react/no-array-index-key
+    , { 
+        // eslint-disable-next-line react/no-array-index-key
+        key: i.toString(), "data-selected": index === i, onClick: () => {
+            if (index === i) {
+                return;
+            }
+            setIndex(i);
+            p.onSubmit(v, i);
+        } }, renderLabel(v, index === i))))));
 };
 exports.RadioGroup = RadioGroup;

package/dist/ui/components/RadioGroup/DarkMode.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare enum TDarkMode {
+    'dark' = 0,
+    'light' = 1,
+    'system' = 2
+}
+export interface IDarkMode {
+    /** default system */
+    default?: TDarkMode;
+    onSubmit: (p: TDarkMode) => void;
+    /** default horiz */
+    mode?: 'vert' | 'horiz';
+    /** default 2.5rem */
+    iconSize?: string;
+    className?: string;
+}
+export declare const DarkMode: (p: IDarkMode) => React.JSX.Element;

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

@@ -0,0 +1,98 @@
+"use strict";
+'use client';
+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.DarkMode = exports.TDarkMode = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importStar(require("react"));
+const icons_1 = require("../../icons");
+const FlexColumn_1 = require("../FlexColumn");
+const Icon_1 = require("../Icon");
+const Base_1 = require("./Base");
+var TDarkMode;
+(function (TDarkMode) {
+    TDarkMode[TDarkMode["dark"] = 0] = "dark";
+    TDarkMode[TDarkMode["light"] = 1] = "light";
+    TDarkMode[TDarkMode["system"] = 2] = "system";
+})(TDarkMode || (exports.TDarkMode = TDarkMode = {}));
+const IconStyled = (0, styled_1.default)(Icon_1.Icon) `
+  > svg {
+    height: 60%;
+  }
+`;
+const Label = (0, styled_1.default)(FlexColumn_1.FlexColumn) `
+  border-radius: 50%;
+  overflow: hidden;
+  &[data-selected='true'] {
+    background-color: white;
+  }
+`;
+const getColours = (p, vert) => {
+    const deg = vert ? '180deg' : '90deg';
+    switch (p) {
+        case TDarkMode.dark: {
+            const d1 = 'rgba(173,128,227,1)';
+            const d2 = 'rgba(106,44,181,1)';
+            return [d1, `linear-gradient(${deg}, ${d1} 0%, ${d2} 76%)`];
+        }
+        case TDarkMode.light: {
+            const l1 = 'rgba(255,169,54,1)';
+            const l2 = 'rgba(255,189,100,1)';
+            return [l1, `linear-gradient(${deg}, ${l1} 0%, ${l2} 76%)`];
+        }
+        case TDarkMode.system: {
+            return ['green', 'green'];
+        }
+    }
+};
+const v = [
+    { mode: TDarkMode.dark, icon: icons_1.Moon },
+    { mode: TDarkMode.system, icon: icons_1.Computer },
+    { mode: TDarkMode.light, icon: icons_1.Sun },
+];
+const DarkMode = (p) => {
+    const { iconSize = '2.5rem' } = p;
+    let defaultIndex = v.findIndex((v2) => v2.mode === p.default);
+    if (defaultIndex === -1) {
+        defaultIndex = 1;
+    }
+    const [index, setIndex] = (0, react_1.useState)(defaultIndex);
+    const [fill, background] = getColours(v[index].mode, p.mode === 'vert');
+    const twCalc = `calc(${iconSize} + ${iconSize} + ${iconSize} + 20px)`;
+    return (react_1.default.createElement(Base_1.RadioGroup, { className: p.className, mode: p.mode, values: v, defaultIndex: index, onSubmit: (v, i) => {
+            setIndex(i);
+            p.onSubmit(v.mode);
+        }, style: Object.assign({ background, border: `solid 2px ${fill}`, width: twCalc, height: iconSize }, (p.mode === 'vert' && {
+            width: iconSize,
+            height: twCalc,
+        })), renderLabel: (v, selected) => {
+            return (react_1.default.createElement(Label, { "data-selected": selected, style: { width: iconSize, height: iconSize } },
+                react_1.default.createElement(IconStyled, null, v.icon({ style: { fill: selected ? fill : 'white' } }))));
+        } }));
+};
+exports.DarkMode = DarkMode;

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

@@ -0,0 +1,2 @@
+export * from './Base';
+export * from './DarkMode';

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

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Base"), exports);
+__exportStar(require("./DarkMode"), exports);

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import React from 'react';
 export interface IRowOrColumn {
     noGrow?: boolean;
@@ -6,8 +6,8 @@ export interface IRowOrColumn {
     noWrap?: boolean;
     children: ReactNode;
     className?: string;
-    title?: string;
-    enableOverflow?: boolean;
+    break?: 'small' | 'vsmall';
+    style?: CSSProperties;
 }
 export type IFlexColumn = IRowOrColumn;
 export type IFlexRow = IRowOrColumn;

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

@@ -10,7 +10,7 @@ const react_1 = __importDefault(require("react"));
 const media_1 = require("../../styles/media");
 const Base = styled_1.default.div `
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row;
   flex-grow: 1;
   width: 100%;
   @media ${media_1.bigScreen} {
@@ -18,10 +18,16 @@ const Base = styled_1.default.div `
       flex-flow: row;
     }
   }
+  &[data-break='small'] {
+    @media ${media_1.smallScreen} {
+      flex-flow: column;
+    }
+  }
 
-  @media ${media_1.smallScreen} {
-    flex-flow: column;
-    overflow: unset;
+  &[data-break='vsmall'] {
+    @media ${media_1.vSmallScreen} {
+      flex-flow: column;
+    }
   }
 
   &[data-center='true'] {
@@ -32,12 +38,9 @@ const Base = styled_1.default.div `
     flex-grow: 0;
     width: auto;
   }
-  &[data-enableoverflow='true'] {
-    overflow: visible;
-  }
 `;
 const RowOrColumn = (props) => {
     var _a, _b, _c, _d;
-    return (react_1.default.createElement(Base, Object.assign({ title: props.title, "data-nogrow": (_a = props.noGrow) !== null && _a !== void 0 ? _a : false, "data-center": (_b = props.center) !== null && _b !== void 0 ? _b : false, "data-nowrap": (_c = props.noWrap) !== null && _c !== void 0 ? _c : false, "data-enableoverflow": (_d = props.enableOverflow) !== null && _d !== void 0 ? _d : false }, props), props.children));
+    return (react_1.default.createElement(Base, Object.assign({ "data-nogrow": (_a = props.noGrow) !== null && _a !== void 0 ? _a : false, "data-center": (_b = props.center) !== null && _b !== void 0 ? _b : false, "data-nowrap": (_c = props.noWrap) !== null && _c !== void 0 ? _c : false }, props, { "data-break": (_d = props.break) !== null && _d !== void 0 ? _d : 'small' }), props.children));
 };
 exports.RowOrColumn = RowOrColumn;

package/dist/ui/components/Search/Dialog.d.ts

@@ -4,4 +4,4 @@ import type { ISearchDialog, TSearchModalRes } from './types';
  * @param p
  * @returns
  */
-export declare const SearchDialog: <T>(p: ISearchDialog<T>) => Promise<TSearchModalRes<T>>;
+export declare const SearchDialog: <T>(p: ISearchDialog<T>) => Promise<TSearchModalRes<T> | undefined>;

package/dist/ui/components/Search/Inline.d.ts

@@ -1,8 +1,3 @@
 import React from 'react';
-import type { IRefTextEdit } from '../TextEdit/types';
-import type { ISearchInline, TSearchModalRes } from './types';
-export declare const SearchInline: <T>(p: ISearchInline<T> & {
-    onSelectItem?: ((v: TSearchModalRes<T>) => void) | undefined;
-    onSearchTextChange?: ((v: string) => void) | undefined;
-    textBoxRef?: React.RefObject<IRefTextEdit> | undefined;
-}) => React.JSX.Element;
+import type { ISearchDialog } from './types';
+export declare const SearchInline: <T>(p: ISearchDialog<T>) => React.JSX.Element;

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

@@ -1,10 +1,127 @@
 "use strict";
+'use client';
+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.SearchInline = void 0;
-const react_1 = __importDefault(require("react"));
-const Base_1 = require("./Base");
-const SearchInline = (p) => react_1.default.createElement(Base_1.SearchBase, Object.assign({}, p));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importStar(require("react"));
+const array_1 = require("../../../common/helpers/array");
+const styles_1 = require("../../styles");
+const SearchBox_1 = require("./SearchBox");
+const Base = styled_1.default.div `
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+  width: 100%;
+  height: calc(100% - 1rem);
+  @media ${styles_1.smallScreen} {
+    height: calc(100% - 0.5rem);
+  }
+`;
+const Content = styled_1.default.div `
+  width: calc(100% - 2rem);
+  margin: auto;
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: center;
+  max-height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  flex-grow: 1;
+  &[data-hasitems='true'] {
+    padding-bottom: 0.5rem;
+  }
+  @media ${styles_1.smallScreen} {
+    margin: 0;
+    width: calc(100% - 0.5rem);
+  }
+`;
+const RowCount = styled_1.default.div `
+  width: 100%;
+  text-align: center;
+  width: fit-content;
+  text-decoration-color: currentcolor;
+  text-decoration: underline;
+
+  &[data-top='true'] {
+    padding-bottom: 0.5rem;
+  }
+  &[data-top='false'] {
+    padding-top: 0.5rem;
+  }
+`;
+const SearchInline = (p) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { maxDisplayItems = 1000 } = p;
+    const rowCountOptDisplay = (_b = (_a = p === null || p === void 0 ? void 0 : p.rowCountOpt) === null || _a === void 0 ? void 0 : _a.display) !== null && _b !== void 0 ? _b : 'bottom';
+    const [searchText, setSearchText] = (0, react_1.useState)((_c = p.defaultValue) !== null && _c !== void 0 ? _c : '');
+    (0, react_1.useImperativeHandle)(p.textBoxRef, () => ({
+        setValue: (v) => {
+            var _a, _b;
+            const value = (_a = textBoxRef === null || textBoxRef === void 0 ? void 0 : textBoxRef.current) === null || _a === void 0 ? void 0 : _a.getValue();
+            if (v === value) {
+                return;
+            }
+            (_b = textBoxRef === null || textBoxRef === void 0 ? void 0 : textBoxRef.current) === null || _b === void 0 ? void 0 : _b.setValue(v);
+            setSearchText(v);
+        },
+        focus: () => { var _a; return (_a = textBoxRef === null || textBoxRef === void 0 ? void 0 : textBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        getValue: () => { var _a; return (_a = textBoxRef === null || textBoxRef === void 0 ? void 0 : textBoxRef.current) === null || _a === void 0 ? void 0 : _a.getValue(); },
+    }));
+    const textBoxRef = (0, react_1.useRef)(null);
+    const resWrap = (foundItem, target) => {
+        var _a, _b;
+        if (!foundItem) {
+            (_a = p.onSelectItem) === null || _a === void 0 ? void 0 : _a.call(p, undefined);
+        }
+        else {
+            (_b = p.onSelectItem) === null || _b === void 0 ? void 0 : _b.call(p, { foundItem, searchText, target });
+        }
+    };
+    const filteredItemsRaw = p.displayItems.filter((i) => p.willDisplayItem(searchText, i));
+    const { part: filteredItems } = (0, array_1.take)(filteredItemsRaw, maxDisplayItems < 0 ? filteredItemsRaw.length : maxDisplayItems);
+    const outdiff = filteredItems.length !== p.displayItems.length;
+    const showText = (_f = (_e = (_d = p.texts) === null || _d === void 0 ? void 0 : _d.totalItems) === null || _e === void 0 ? void 0 : _e.call(_d, filteredItems.length, p.displayItems.length)) !== null && _f !== void 0 ? _f : `Showing ${filteredItems.length} out of ${p.displayItems.length} total
+  items`;
+    return (react_1.default.createElement(Base, { className: p.className },
+        react_1.default.createElement(SearchBox_1.SearchBox, Object.assign({}, p, { searchText: searchText, setSearchText: (t) => {
+                var _a;
+                setSearchText(t);
+                (_a = p.onSearchTextChange) === null || _a === void 0 ? void 0 : _a.call(p, t);
+            }, textBoxRef: textBoxRef })),
+        react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length, "data-type": "content" },
+            rowCountOptDisplay === 'top' && outdiff && (react_1.default.createElement(RowCount, { "data-top": "true" }, showText)),
+            filteredItems.map((item, index) => (0, react_1.cloneElement)(p.renderItem({ searchText, item, index }), {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onClick: (e) => resWrap(item, e.target),
+            })),
+            rowCountOptDisplay === 'bottom' && outdiff && (react_1.default.createElement(RowCount, { "data-top": "false" }, showText)))));
+};
 exports.SearchInline = SearchInline;

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

@@ -1,5 +1,3 @@
 import React from 'react';
-import type { ISearchModal, TSearchModalRes } from './types';
-export declare const SearchModal: <T>(p: ISearchModal<T> & {
-    onSelectItem: (v: TSearchModalRes<T>) => void;
-}) => React.JSX.Element;
+import type { ISearchModal } from './types';
+export declare const SearchModal: <T>(p: ISearchModal<T>) => React.JSX.Element;

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

@@ -9,7 +9,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const styles_1 = require("../../styles");
 const Modal_1 = require("../Modal/Modal");
-const Base_1 = require("./Base");
+const Inline_1 = require("./Inline");
 const ModalStyled = (0, styled_1.default)(Modal_1.Modal) `
   display: flex;
   flex-flow: column;
@@ -23,6 +23,6 @@ const ModalStyled = (0, styled_1.default)(Modal_1.Modal) `
     max-width: 95vw;
   }
 `;
-const SearchModal = (p) => (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => p.onSelectItem(undefined), showCloseButton: false, closeOnClickOutside: true },
-    react_1.default.createElement(Base_1.SearchBase, Object.assign({}, p))));
+const SearchModal = (p) => (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => { var _a; return (_a = p === null || p === void 0 ? void 0 : p.onSelectItem) === null || _a === void 0 ? void 0 : _a.call(p, undefined); }, showCloseButton: false, closeOnClickOutside: true },
+    react_1.default.createElement(Inline_1.SearchInline, Object.assign({}, p))));
 exports.SearchModal = SearchModal;

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

@@ -49,6 +49,7 @@ const Base = styled_1.default.div `
     padding: 0.5rem;
     margin: 0;
     width: calc(100% - 1rem);
+    max-height: calc(100% - 1rem);
   }
 `;
 const MagnifyIcon = styled_1.default.div `

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

@@ -1,5 +1,4 @@
 export * from './AutoHideSearchBox';
-export * from './Base';
 export * from './Dialog';
 export * from './Inline';
 export * from './Modal';

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

@@ -15,7 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AutoHideSearchBox"), exports);
-__exportStar(require("./Base"), exports);
 __exportStar(require("./Dialog"), exports);
 __exportStar(require("./Inline"), exports);
 __exportStar(require("./Modal"), exports);

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

@@ -1,4 +1,10 @@
 /// <reference types="react" />
+import type { IRefTextEdit } from '../TextEdit/types';
+export type TSearchModalRes<T> = {
+    foundItem: T;
+    searchText: string;
+    target: EventTarget;
+};
 export interface ISearchDialog<T> {
     defaultValue?: string;
     placeholderText?: string;
@@ -32,11 +38,12 @@ export interface ISearchDialog<T> {
          */
         totalItems?: (showing: number, outof: number) => string;
     };
+    onSearchTextChange?: (v: string) => void;
+    onSelectItem?: (v: TSearchModalRes<T> | undefined) => void;
+    textBoxRef?: React.RefObject<IRefTextEdit>;
+    rowCountOpt?: {
+        /** if provided will change position of row count when some lines are hidden. default bottom */
+        display?: 'bottom' | 'top' | 'off';
+    };
 }
-export type TSearchModalRes<T> = undefined | {
-    foundItem: T;
-    searchText: string;
-    target: EventTarget;
-};
 export type ISearchModal<T> = ISearchDialog<T>;
-export type ISearchInline<T> = ISearchDialog<T>;

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

@@ -9,15 +9,14 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const math_1 = require("../../../common/helpers/math");
 const Base = styled_1.default.div `
-  width: calc(100% - 2px - 1rem);
-  height: 100%;
+  width: calc(100% - 1rem - 2px);
+  height: calc(100% - 1rem - 2px);
   border: solid 1px #666;
   border-radius: 0.5rem;
   padding: 0.5rem;
 `;
 const Points = styled_1.default.div `
   position: relative;
-
   width: 100%;
   height: 100%;
 `;

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

@@ -12,6 +12,8 @@ const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
   width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
 `;
 const TableRow = styled_1.default.div `
   display: flex;

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

@@ -1,13 +1,14 @@
 import React from 'react';
-export declare const CheckboxEdit: ({ defaultValue, onSubmit, noGrow, allowUndo, rightSpan, className, }: {
-    className?: string | undefined;
+export interface ICheckboxEdit {
+    className?: string;
     defaultValue: boolean;
     onSubmit: (val: boolean) => void;
-    noGrow?: boolean | undefined;
+    noGrow?: boolean;
     /**
      * if true, will add undo button after changes. if false, will submit after every keypress. default true
      */
-    allowUndo?: boolean | undefined;
+    allowUndo?: boolean;
     /** display to right of CB */
     rightSpan?: React.ReactNode;
-}) => React.JSX.Element;
+}
+export declare const CheckboxEdit: ({ defaultValue, onSubmit, noGrow, allowUndo, rightSpan, className, }: ICheckboxEdit) => React.JSX.Element;

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

@@ -78,7 +78,7 @@ allowUndo = true, rightSpan, className, }) => {
                 }
                 e.stopPropagation();
             } }),
-        allowUndo && value !== defaultValue && (react_1.default.createElement(Icons, { center: true, enableOverflow: true },
+        allowUndo && value !== defaultValue && (react_1.default.createElement(Icons, { center: true },
             react_1.default.createElement(common_2.IconD, { style: common_2.iconLeft, onClick: (e) => {
                     if (value !== defaultValue) {
                         onSubmit(value);

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

@@ -1,6 +1,5 @@
 export * from './CheckboxEdit';
 export * from './ColourEdit';
 export * from './ListboxEdit';
-export * from './RadioGroup';
 export * from './TextEdit';
 export * from './types';

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

@@ -17,6 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./CheckboxEdit"), exports);
 __exportStar(require("./ColourEdit"), exports);
 __exportStar(require("./ListboxEdit"), exports);
-__exportStar(require("./RadioGroup"), exports);
 __exportStar(require("./TextEdit"), exports);
 __exportStar(require("./types"), exports);

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

@@ -1,9 +1,10 @@
 import React from 'react';
-export declare const TextWithButton: ({ submitText, placeholder, validateF, onSubmit, }: {
+export interface ITextWithButton {
     /** default "Submit" */
-    submitText?: string | undefined;
-    placeholder?: string | undefined;
+    submitText?: string;
+    placeholder?: string;
     /** if provided will validate and block submission accordingly */
-    validateF?: ((s: string) => boolean) | undefined;
+    validateF?: (s: string) => boolean;
     onSubmit: (s: string) => void;
-}) => React.JSX.Element;
+}
+export declare const TextWithButton: ({ submitText, placeholder, validateF, onSubmit, }: ITextWithButton) => React.JSX.Element;

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

@@ -33,6 +33,7 @@ const react_1 = __importStar(require("react"));
 const Base = styled_1.default.div `
   display: flex;
   flex-flow: row;
+  max-height: 100%;
 `;
 const Input = styled_1.default.input `
   flex-grow: 1;

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

@@ -8,16 +8,15 @@ export type ITimelineItem = {
     checked: false;
     disabled?: boolean;
 });
-export declare const Timeline: ({ lineColour, items, onClick, maxCircleSize, className, bgColour, showTitles, }: {
+export interface ITimeline {
     /** default min(5vw,3rem) */
-    maxCircleSize?: string | undefined;
+    maxCircleSize?: string;
     /** default #ccc */
-    lineColour?: string | undefined;
+    lineColour?: string;
     items: ITimelineItem[];
-    onClick?: ((p: ITimelineItem) => void) | undefined;
-    className?: string | undefined;
-    /** used for behind icons. default inherit */
-    bgColour?: string | undefined;
+    onClick?: (p: ITimelineItem) => void;
+    className?: string;
     /** if true, will show titles under timeline. default true */
-    showTitles?: boolean | undefined;
-}) => React.JSX.Element;
+    showTitles?: boolean;
+}
+export declare const Timeline: ({ lineColour, items, onClick, maxCircleSize, className, showTitles, }: ITimeline) => React.JSX.Element;

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

@@ -46,7 +46,7 @@ const Item = styled_1.default.div `
 const Title = styled_1.default.span `
   text-align: center;
 `;
-const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5vw,3rem)', className, bgColour = 'inherit', showTitles = true, }) => {
+const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5vw,3rem)', className, showTitles = true, }) => {
     const firstFalse = items.findIndex((i) => !i.checked && !i.disabled);
     const lastTrue = (0, array_1.findLastIndex)(items, (i) => i.checked);
     return (react_1.default.createElement(Base, { className: className },
@@ -58,7 +58,7 @@ const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5v
                     react_1.default.createElement(Icon_1.Icon, { style: {
                             maxWidth: maxCircleSize,
                             cursor: enabled ? 'pointer' : 'default',
-                        }, onClick: () => enabled && (onClick === null || onClick === void 0 ? void 0 : onClick(p)) }, p.checked ? (react_1.default.createElement(icons_1.Checkmark, { style: { fill: '#60b515', backgroundColor: bgColour } })) : index !== firstFalse ? (react_1.default.createElement(Circle_1.Circle, { style: { fill: '#007cbb', backgroundColor: bgColour }, dotted: p.disabled })) : (react_1.default.createElement(icons_1.CircleDot, { style: { fill: '#007cbb', backgroundColor: bgColour } })))));
+                        }, onClick: () => enabled && (onClick === null || onClick === void 0 ? void 0 : onClick(p)) }, p.checked ? (react_1.default.createElement(icons_1.Checkmark, { style: { fill: '#60b515', backgroundColor: 'inherit' } })) : index !== firstFalse ? (react_1.default.createElement(Circle_1.Circle, { style: { fill: '#007cbb', backgroundColor: 'inherit' }, dotted: p.disabled })) : (react_1.default.createElement(icons_1.CircleDot, { style: { fill: '#007cbb', backgroundColor: 'inherit' } })))));
             })),
         showTitles && items.find((i) => i.title) && (react_1.default.createElement(Row, { style: { marginTop: '1rem' } }, items.map(({ title, key }) => (react_1.default.createElement(Title, { key: key, style: {
                 width: `${100 / items.length}%`,

package/dist/ui/components/TreeChart/base.js

@@ -36,8 +36,8 @@ const common_1 = require("../../styles/common");
 const helpers_1 = require("./helpers");
 const Base = styled_1.default.div `
   border: solid 1px #ccc;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  max-height: 100%;
+  overflow-y: auto;
 `;
 const NodeChildren = styled_1.default.div `
   display: flex;

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

@@ -19,6 +19,7 @@ export * from './OpenApiCodeBlock';
 export * from './PieChart';
 export * from './ProgressBar';
 export * from './Prompt';
+export * from './RadioGroup';
 export * from './RowOrColumn';
 export * from './Search';
 export * from './Sidebar';

package/dist/ui/components/index.js

@@ -35,6 +35,7 @@ __exportStar(require("./OpenApiCodeBlock"), exports);
 __exportStar(require("./PieChart"), exports);
 __exportStar(require("./ProgressBar"), exports);
 __exportStar(require("./Prompt"), exports);
+__exportStar(require("./RadioGroup"), exports);
 __exportStar(require("./RowOrColumn"), exports);
 __exportStar(require("./Search"), exports);
 __exportStar(require("./Sidebar"), exports);

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(Object.assign({}, style), { fill: undefined }) },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: Object.assign({}, 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(Object.assign({}, style), { fill: undefined }) },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: Object.assign({}, 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.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+export declare const Computer: ({ style, }: {
+    style?: ({
+        /** change the colour of the icon. default black */
+        fill?: string | undefined;
+    } & CSSProperties) | undefined;
+}) => React.JSX.Element;

package/dist/ui/icons/Computer.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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) },
+    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" },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490", style: Object.assign({}, 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.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+export declare const Moon: ({ style, }: {
+    style?: ({
+        /** change the colour of the icon. default black */
+        fill?: string | undefined;
+    } & CSSProperties) | undefined;
+}) => React.JSX.Element;

package/dist/ui/icons/Moon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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) },
+    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/icons/Sun.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Sun: (p: {
+    style: {
+        fill: string;
+    };
+}) => React.JSX.Element;

package/dist/ui/icons/Sun.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sun = void 0;
+const react_1 = __importDefault(require("react"));
+const Sun = (p) => {
+    var _a, _b;
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        react_1.default.createElement("g", { stroke: (_b = (_a = p === null || p === void 0 ? void 0 : p.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : 'black', strokeMiterlimit: "10", strokeWidth: "1.5", clipPath: "url(#a)" },
+            react_1.default.createElement("path", { strokeLinecap: "round", d: "M5 12H1m22 0h-4M7.05 7.05 4.222 4.222m15.556 15.556L16.95 16.95m-9.9 0-2.828 2.828M19.778 4.222 16.95 7.05" }),
+            react_1.default.createElement("path", { fillOpacity: "0", d: "M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" }),
+            react_1.default.createElement("path", { strokeLinecap: "round", d: "M12 19v4m0-22v4" })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: "a" },
+                react_1.default.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
+};
+exports.Sun = Sun;

package/dist/ui/icons/index.d.ts

@@ -2,13 +2,16 @@ export * from './Checkmark';
 export * from './ChevronRight';
 export * from './Circle';
 export * from './CircleDot';
+export * from './Computer';
 export * from './CrossIcon';
 export * from './Door';
 export * from './Hamburger';
 export * from './HorizontalDots';
 export * from './Magnify';
+export * from './Moon';
 export * from './Pencil';
 export * from './Save';
+export * from './Sun';
 export * from './Undo';
 export * from './UserOutline';
 export * from './Warning';

package/dist/ui/icons/index.js

@@ -18,13 +18,16 @@ __exportStar(require("./Checkmark"), exports);
 __exportStar(require("./ChevronRight"), exports);
 __exportStar(require("./Circle"), exports);
 __exportStar(require("./CircleDot"), exports);
+__exportStar(require("./Computer"), exports);
 __exportStar(require("./CrossIcon"), exports);
 __exportStar(require("./Door"), exports);
 __exportStar(require("./Hamburger"), exports);
 __exportStar(require("./HorizontalDots"), exports);
 __exportStar(require("./Magnify"), exports);
+__exportStar(require("./Moon"), exports);
 __exportStar(require("./Pencil"), exports);
 __exportStar(require("./Save"), exports);
+__exportStar(require("./Sun"), exports);
 __exportStar(require("./Undo"), exports);
 __exportStar(require("./UserOutline"), exports);
 __exportStar(require("./Warning"), exports);

package/package.json

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

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { IRefTextEdit } from '../TextEdit/types';
-import type { ISearchDialog, TSearchModalRes } from './types';
-type ISearchBase<T> = ISearchDialog<T> & {
-    onSearchTextChange?: (v: string) => void;
-    onSelectItem?: (v: TSearchModalRes<T>) => void;
-    textBoxRef?: React.RefObject<IRefTextEdit>;
-};
-export declare const SearchBase: <T>(p: ISearchBase<T>) => React.JSX.Element;
-export {};

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

@@ -1,111 +0,0 @@
-"use strict";
-'use client';
-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.SearchBase = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = __importStar(require("react"));
-const array_1 = require("../../../common/helpers/array");
-const styles_1 = require("../../styles");
-const SearchBox_1 = require("./SearchBox");
-const Base = styled_1.default.div `
-  display: flex;
-  flex-flow: column;
-  flex-grow: 1;
-  width: 100%;
-`;
-const Content = styled_1.default.div `
-  width: calc(100% - 2rem);
-  margin: auto;
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-start;
-  align-items: center;
-  max-height: calc(100vh - 20rem);
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  flex-grow: 1;
-  &[data-hasitems='true'] {
-    padding-bottom: 0.5rem;
-  }
-  @media ${styles_1.smallScreen} {
-    margin: 0;
-    width: calc(100% - 0.5rem);
-    margin-top: 1rem;
-  }
-`;
-const Row = styled_1.default.div `
-  width: 100%;
-`;
-const SearchBase = (p) => {
-    var _a, _b, _c, _d;
-    const { maxDisplayItems = 1000 } = p;
-    const [searchText, setSearchText] = (0, react_1.useState)((_a = p.defaultValue) !== null && _a !== void 0 ? _a : '');
-    (0, react_1.useImperativeHandle)(p.textBoxRef, () => ({
-        setValue: (v) => {
-            var _a, _b;
-            const value = (_a = divRef === null || divRef === void 0 ? void 0 : divRef.current) === null || _a === void 0 ? void 0 : _a.getValue();
-            if (v === value) {
-                return;
-            }
-            (_b = divRef === null || divRef === void 0 ? void 0 : divRef.current) === null || _b === void 0 ? void 0 : _b.setValue(v);
-            setSearchText(v);
-        },
-        focus: () => { var _a; return (_a = divRef === null || divRef === void 0 ? void 0 : divRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
-        getValue: () => { var _a; return (_a = divRef === null || divRef === void 0 ? void 0 : divRef.current) === null || _a === void 0 ? void 0 : _a.getValue(); },
-    }));
-    const divRef = (0, react_1.useRef)(null);
-    const resWrap = (foundItem, target) => {
-        var _a, _b;
-        if (!foundItem) {
-            (_a = p.onSelectItem) === null || _a === void 0 ? void 0 : _a.call(p, undefined);
-        }
-        else {
-            (_b = p.onSelectItem) === null || _b === void 0 ? void 0 : _b.call(p, { foundItem, searchText, target });
-        }
-    };
-    const filteredItemsRaw = p.displayItems.filter((i) => p.willDisplayItem(searchText, i));
-    const { part: filteredItems } = (0, array_1.take)(filteredItemsRaw, maxDisplayItems < 0 ? filteredItemsRaw.length : maxDisplayItems);
-    const outdiff = filteredItems.length !== p.displayItems.length;
-    const showText = (_d = (_c = (_b = p.texts) === null || _b === void 0 ? void 0 : _b.totalItems) === null || _c === void 0 ? void 0 : _c.call(_b, filteredItems.length, p.displayItems.length)) !== null && _d !== void 0 ? _d : `Showing ${filteredItems.length} out of ${p.displayItems.length} total
-  items`;
-    return (react_1.default.createElement(Base, { className: p.className },
-        react_1.default.createElement(SearchBox_1.SearchBox, Object.assign({}, p, { searchText: searchText, setSearchText: (t) => {
-                var _a;
-                setSearchText(t);
-                (_a = p.onSearchTextChange) === null || _a === void 0 ? void 0 : _a.call(p, t);
-            }, textBoxRef: divRef })),
-        react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length, "data-type": "content" },
-            filteredItems.map((item, index) => (0, react_1.cloneElement)(p.renderItem({ searchText, item, index }), {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onClick: (e) => resWrap(item, e.target),
-            })),
-            outdiff && react_1.default.createElement(Row, null, showText))));
-};
-exports.SearchBase = SearchBase;

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

@@ -1,14 +0,0 @@
-import React from 'react';
-export declare const RadioGroup: <T>({ defaultValue, onSubmit, values, renderLabel, renderValue, }: {
-    /**
-     * can overload the render of the label. defaults to toString
-     */
-    renderLabel?: ((a: T) => string) | undefined;
-    /**
-     * render the value from the generic T. defaults to toString
-     */
-    renderValue?: ((a: T) => string) | undefined;
-    defaultValue: T;
-    onSubmit: (val: T) => void;
-    values: T[];
-}) => React.JSX.Element;