ag-common 0.0.798 → 0.0.799

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

@@ -33,43 +33,13 @@ var __importStar = (this && this.__importStar) || (function () {
         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.DarkModeAux = exports.UseDarkMode = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const use_1 = require("../../helpers/cookie/use");
+const utils_1 = require("../../helpers/utils");
 const icons_1 = require("../../icons");
-const FlexColumn_1 = require("../FlexColumn");
-const Icon_1 = require("../Icon");
 const types_1 = require("./types");
-const Base = styled_1.default.div `
-  display: flex;
-  flex-flow: row;
-  &[data-mode='vert'] {
-    flex-flow: column;
-  }
-  overflow: hidden;
-  justify-content: space-between;
-  border-radius: 2rem;
-`;
-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;
-  cursor: pointer;
-
-  &[data-selected='true'] {
-    background-color: white;
-    cursor: default;
-  }
-`;
 const getColours = (p, vert) => {
     const deg = vert ? '180deg' : '90deg';
     switch (p) {
@@ -123,7 +93,7 @@ exports.UseDarkMode = UseDarkMode;
 const DarkModeAux = ({ iconSize = '2.5rem', className, mode, onSubmit, style, dm, }) => {
     const [index, setIndex] = (0, react_1.useState)(modes.findIndex((d) => d.mode === dm.darkmode));
     const [fill, background] = getColours(modes[index].mode, mode === 'vert');
-    const twCalc = `calc(${iconSize} + ${iconSize} + ${iconSize} )`;
+    const twCalc = `calc(${iconSize} + ${iconSize} + ${iconSize} + 8px)`;
     const setDarkmode = (newDarkMode) => {
         let className = '';
         if (newDarkMode === types_1.TDarkMode.dark) {
@@ -149,12 +119,12 @@ const DarkModeAux = ({ iconSize = '2.5rem', className, mode, onSubmit, style, dm
         dm.setDarkmode(newDarkMode);
         onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(newDarkMode);
     };
-    return (react_1.default.createElement(Base, { className: className, "data-mode": mode !== null && mode !== void 0 ? mode : 'horiz', style: Object.assign(Object.assign(Object.assign({}, style), { background, border: `solid 2px ${fill}`, width: twCalc, height: iconSize }), (mode === 'vert' && {
-            width: iconSize,
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)('flex flex-row overflow-hidden justify-between items-center rounded-4xl', 'data-[mode=vert]:flex-col', className), "data-mode": mode !== null && mode !== void 0 ? mode : 'horiz', style: Object.assign(Object.assign(Object.assign({}, style), { background, border: `solid 2px ${fill}`, width: twCalc, height: `calc(${iconSize} + 8px)`, padding: '2px', boxSizing: 'border-box' }), (mode === 'vert' && {
+            width: `calc(${iconSize} + 8px)`,
             height: twCalc,
         })) }, modes.map((v, i) => {
         const selected = index === i;
-        return (react_1.default.createElement(Label, { "data-selected": selected, style: { width: iconSize, height: iconSize }, 
+        return (react_1.default.createElement("div", { className: (0, utils_1.cn)('flex flex-col items-center justify-center rounded-full overflow-hidden cursor-pointer', 'data-[selected=true]:bg-white data-[selected=true]:cursor-default'), "data-selected": selected, style: { width: iconSize, height: iconSize }, 
             // eslint-disable-next-line react/no-array-index-key
             key: i.toString(), onClick: () => {
                 if (index === i) {
@@ -163,7 +133,7 @@ const DarkModeAux = ({ iconSize = '2.5rem', className, mode, onSubmit, style, dm
                 setIndex(i);
                 setDarkmode(v.mode);
             } },
-            react_1.default.createElement(IconStyled, null, v.icon({ style: { fill: selected ? fill : 'white' } }))));
+            react_1.default.createElement("div", { className: "[&>svg]:h-[70%] flex justify-center items-center w-full h-full" }, v.icon({ style: { fill: selected ? fill : 'white' } }))));
     })));
 };
 exports.DarkModeAux = DarkModeAux;

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

@@ -1,36 +1,3 @@
-export * from './BarChart';
-export * from './BorderGradient';
-export * from './Chevron';
-export * from './Close';
-export * from './Confirm';
 export * from './DarkMode';
-export * from './DropdownList';
-export * from './FlexColumn';
-export * from './FlexRow';
 export * from './HeadersRaw';
-export * from './HorizontalScrollBar';
-export * from './Icon';
-export * from './Image';
-export * from './InfiniteScroll';
-export * from './KebabDots';
-export * from './LineChart';
-export * from './Loader';
 export * from './Markdown';
-export * from './MinSidebar';
-export * from './Modal';
-export * from './PieChart';
-export * from './ProgressBar';
-export * from './Prompt';
-export * from './PulseRing';
-export * from './RowOrColumn';
-export * from './Search';
-export * from './shadcn';
-export * from './Sidebar';
-export * from './SparkLine';
-export * from './TabBar';
-export * from './Table';
-export * from './TextEdit';
-export * from './TextWithButton';
-export * from './TimelineChart';
-export * from './TreeChart';
-export * from './UserImage';

package/dist/ui/components/index.js

@@ -14,39 +14,6 @@ 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("./BarChart"), exports);
-__exportStar(require("./BorderGradient"), exports);
-__exportStar(require("./Chevron"), exports);
-__exportStar(require("./Close"), exports);
-__exportStar(require("./Confirm"), exports);
 __exportStar(require("./DarkMode"), exports);
-__exportStar(require("./DropdownList"), exports);
-__exportStar(require("./FlexColumn"), exports);
-__exportStar(require("./FlexRow"), exports);
 __exportStar(require("./HeadersRaw"), exports);
-__exportStar(require("./HorizontalScrollBar"), exports);
-__exportStar(require("./Icon"), exports);
-__exportStar(require("./Image"), exports);
-__exportStar(require("./InfiniteScroll"), exports);
-__exportStar(require("./KebabDots"), exports);
-__exportStar(require("./LineChart"), exports);
-__exportStar(require("./Loader"), exports);
 __exportStar(require("./Markdown"), exports);
-__exportStar(require("./MinSidebar"), exports);
-__exportStar(require("./Modal"), exports);
-__exportStar(require("./PieChart"), exports);
-__exportStar(require("./ProgressBar"), exports);
-__exportStar(require("./Prompt"), exports);
-__exportStar(require("./PulseRing"), exports);
-__exportStar(require("./RowOrColumn"), exports);
-__exportStar(require("./Search"), exports);
-__exportStar(require("./shadcn"), exports);
-__exportStar(require("./Sidebar"), exports);
-__exportStar(require("./SparkLine"), exports);
-__exportStar(require("./TabBar"), exports);
-__exportStar(require("./Table"), exports);
-__exportStar(require("./TextEdit"), exports);
-__exportStar(require("./TextWithButton"), exports);
-__exportStar(require("./TimelineChart"), exports);
-__exportStar(require("./TreeChart"), exports);
-__exportStar(require("./UserImage"), exports);

package/dist/ui/components/shadcn/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;

package/dist/ui/components/shadcn/dropdown-list.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface DropdownListOption {
+    value: string;
+    label: string;
+}
+export interface DropdownListProps {
+    options: string[] | DropdownListOption[];
+    renderF?: (value: string) => React.ReactNode;
+    onChange?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const DropdownList: ({ options, renderF, onChange, children, className, }: DropdownListProps) => React.JSX.Element;

package/dist/ui/components/shadcn/dropdown-list.js

@@ -0,0 +1,57 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownList = void 0;
+const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
+const React = __importStar(require("react"));
+const utils_1 = require("../../helpers/utils");
+const DropdownList = ({ options, renderF, onChange, children, className, }) => {
+    const [open, setOpen] = React.useState(false);
+    const handleSelect = (value) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        setOpen(false);
+    };
+    return (React.createElement(DropdownMenuPrimitive.Root, { open: open, onOpenChange: setOpen },
+        React.createElement(DropdownMenuPrimitive.Trigger, { asChild: true, className: className }, children),
+        React.createElement(DropdownMenuPrimitive.Portal, null,
+            React.createElement(DropdownMenuPrimitive.Content, { className: (0, utils_1.cn)('z-[1200] min-w-[8rem] overflow-hidden rounded-md border border-main-fg-mid bg-main-bg text-main-fg shadow-md', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'), align: "end" }, options.map((option, index) => {
+                const value = typeof option === 'string' ? option : option.value;
+                const label = typeof option === 'string' ? option : option.label;
+                const isLast = index === options.length - 1;
+                return (React.createElement(DropdownMenuPrimitive.Item, { key: value, className: (0, utils_1.cn)('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-main-bg-mid focus:text-main-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50', !isLast && 'border-b border-main-bg-mid'), onSelect: () => handleSelect(value) }, renderF ? renderF(value) : label));
+            })))));
+};
+exports.DropdownList = DropdownList;

package/dist/ui/components/shadcn/sheet.d.ts

@@ -7,7 +7,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogC
 declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
 declare const SheetOverlay: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>) => React.JSX.Element;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }

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

@@ -4,7 +4,6 @@ import { Circle } from './Circle';
 import { CircleDot } from './CircleDot';
 import { Cog } from './Cog';
 import { Computer } from './Computer';
-import { CrossIcon } from './CrossIcon';
 import { Door } from './Door';
 import { Hamburger } from './Hamburger';
 import { HorizontalDots } from './HorizontalDots';
@@ -43,10 +42,6 @@ declare const icons: {
             fill?: string;
         } & import("react").CSSProperties;
     }) => import("react").JSX.Element;
-    CrossIcon: ({ className, onClick, }: {
-        className?: string;
-        onClick?: () => void;
-    }) => import("react").JSX.Element;
     Door: import("react").JSX.Element;
     Hamburger: ({ className }: {
         className?: string;
@@ -83,4 +78,4 @@ declare const icons: {
         } & import("react").CSSProperties;
     }) => import("react").JSX.Element;
 };
-export { Checkmark, ChevronRight, Circle, CircleDot, Cog, Computer, CrossIcon, Door, Hamburger, HorizontalDots, House, icons, Magnify, Moon, Pencil, Save, Sun, Undo, UserOutline, Warning, };
+export { Checkmark, ChevronRight, Circle, CircleDot, Cog, Computer, Door, Hamburger, HorizontalDots, House, icons, Magnify, Moon, Pencil, Save, Sun, Undo, UserOutline, Warning, };

package/dist/ui/icons/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Warning = exports.UserOutline = exports.Undo = exports.Sun = exports.Save = exports.Pencil = exports.Moon = exports.Magnify = exports.icons = exports.House = exports.HorizontalDots = exports.Hamburger = exports.Door = exports.CrossIcon = exports.Computer = exports.Cog = exports.CircleDot = exports.Circle = exports.ChevronRight = exports.Checkmark = void 0;
+exports.Warning = exports.UserOutline = exports.Undo = exports.Sun = exports.Save = exports.Pencil = exports.Moon = exports.Magnify = exports.icons = exports.House = exports.HorizontalDots = exports.Hamburger = exports.Door = exports.Computer = exports.Cog = exports.CircleDot = exports.Circle = exports.ChevronRight = exports.Checkmark = void 0;
 const Checkmark_1 = require("./Checkmark");
 Object.defineProperty(exports, "Checkmark", { enumerable: true, get: function () { return Checkmark_1.Checkmark; } });
 const ChevronRight_1 = require("./ChevronRight");
@@ -13,8 +13,6 @@ const Cog_1 = require("./Cog");
 Object.defineProperty(exports, "Cog", { enumerable: true, get: function () { return Cog_1.Cog; } });
 const Computer_1 = require("./Computer");
 Object.defineProperty(exports, "Computer", { enumerable: true, get: function () { return Computer_1.Computer; } });
-const CrossIcon_1 = require("./CrossIcon");
-Object.defineProperty(exports, "CrossIcon", { enumerable: true, get: function () { return CrossIcon_1.CrossIcon; } });
 const Door_1 = require("./Door");
 Object.defineProperty(exports, "Door", { enumerable: true, get: function () { return Door_1.Door; } });
 const Hamburger_1 = require("./Hamburger");
@@ -46,7 +44,6 @@ const icons = {
     Circle: Circle_1.Circle,
     CircleDot: CircleDot_1.CircleDot,
     Computer: Computer_1.Computer,
-    CrossIcon: CrossIcon_1.CrossIcon,
     Door: Door_1.Door,
     Hamburger: Hamburger_1.Hamburger,
     House: House_1.House,

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

@@ -1,28 +1,35 @@
-import type { CSSProperties } from 'react';
-/** function that returns css that gives a text outline drop shadow.
+import React, { type CSSProperties, type ReactNode } from 'react';
+/** function that returns a style object for text outline drop shadow.
  * @param outlineColour default='white'
  * @param sizePx default = 1px
  */
-export declare const HardOutline: (outlineColour?: string, sizePx?: number) => import("@emotion/react").SerializedStyles;
+export declare const HardOutline: (outlineColour?: string, sizePx?: number) => React.CSSProperties;
 export declare const HardOutlineFilter: (outlineColour?: string, sizePx?: number) => string;
-/** disable user text selection */
-export declare const NoTextSelect: import("@emotion/react").SerializedStyles;
-/** enable text overflow
- * @param lines number of lines before overflow
+/** disable user text selection - returns Tailwind className */
+export declare const NoTextSelect = "select-none";
+/** enable text overflow - returns Tailwind className
+ * @param lines number of lines before overflow (1-10 supported by Tailwind, or use arbitrary value)
  */
-export declare const TextOverflowEllipsis: (lines: number) => import("@emotion/react").SerializedStyles;
+export declare const TextOverflowEllipsis: (lines: number) => string;
 /** stop dragging of element */
 export declare const noDrag: {
     draggable: boolean;
     onDragStart: React.DragEventHandler<HTMLDivElement>;
     onTouchStart: React.TouchEventHandler<HTMLDivElement>;
 };
-/** apply bounce effect given a condition */
-export declare const bounce: (bounceattr: string) => import("@emotion/react").SerializedStyles;
-export declare const Card: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** apply bounce effect given a condition
+ * Returns className and style for bounce animation
+ * @param isActive whether the bounce is active (transform translateY to 0)
+ * @returns object with className and style for the bounce effect
+ */
+export declare const bounce: (isActive?: boolean) => {
+    className: string;
+    style: React.CSSProperties;
+};
+export declare const Card: ({ children, className, ...props }: {
+    children: ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export interface IVarStyles {
     /** default var(--main-fg) */
     color: string;

package/dist/ui/styles/common.js

@@ -1,20 +1,29 @@
 "use strict";
 'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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");
-/** function that returns css that gives a text outline drop shadow.
+const react_1 = __importDefault(require("react"));
+/** function that returns a style object for text outline drop shadow.
  * @param outlineColour default='white'
  * @param sizePx default = 1px
  */
-const HardOutline = (outlineColour = 'white', sizePx = 1) => (0, react_1.css) `\
-filter: ${(0, exports.HardOutlineFilter)(outlineColour, sizePx)};
-`;
+const HardOutline = (outlineColour = 'white', sizePx = 1) => ({
+    filter: (0, exports.HardOutlineFilter)(outlineColour, sizePx),
+});
 exports.HardOutline = HardOutline;
 const HardOutlineFilter = (outlineColour = 'white', sizePx = 1) => {
     const px = `${sizePx}px`;
@@ -24,24 +33,19 @@ const HardOutlineFilter = (outlineColour = 'white', sizePx = 1) => {
   drop-shadow(-${px} -${px} 0px ${outlineColour})`;
 };
 exports.HardOutlineFilter = HardOutlineFilter;
-/** disable user text selection */
-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 */
-`;
-/** enable text overflow
- * @param lines number of lines before overflow
+/** disable user text selection - returns Tailwind className */
+exports.NoTextSelect = 'select-none';
+/** enable text overflow - returns Tailwind className
+ * @param lines number of lines before overflow (1-10 supported by Tailwind, or use arbitrary value)
  */
-const TextOverflowEllipsis = (lines) => (0, react_1.css) `
-  display: -webkit-box;
-  -webkit-line-clamp: ${lines};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
+const TextOverflowEllipsis = (lines) => {
+    // Tailwind supports line-clamp-1 through line-clamp-10
+    if (lines >= 1 && lines <= 10) {
+        return `line-clamp-${lines}`;
+    }
+    // For values outside 1-10, use arbitrary value
+    return `line-clamp-[${lines}]`;
+};
 exports.TextOverflowEllipsis = TextOverflowEllipsis;
 /** stop dragging of element */
 exports.noDrag = {
@@ -55,28 +59,23 @@ exports.noDrag = {
         e.stopPropagation();
     },
 };
-/** apply bounce effect given a condition */
-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%;
-  transform: translateY(-5px);
-  &[${bounceattr}='true'] {
-    transform: translateY(0);
-  }
-`;
+/** apply bounce effect given a condition
+ * Returns className and style for bounce animation
+ * @param isActive whether the bounce is active (transform translateY to 0)
+ * @returns object with className and style for the bounce effect
+ */
+const bounce = (isActive = false) => ({
+    className: `transition-opacity transition-transform duration-200 origin-center ${isActive ? 'translate-y-0' : '-translate-y-[5px]'}`,
+    style: {
+        transitionTimingFunction: 'cubic-bezier(0.02, 1.5, 0.74, 1.23)',
+    },
+});
 exports.bounce = bounce;
-exports.Card = styled_1.default.div `
-  background-color: white;
-  margin: 0.5rem;
-
-  position: relative;
-  border-radius: 0.5rem;
-  max-width: 40rem;
-  padding: 1rem;
-  border: solid 2px ${colours_1.colours.lighter};
-`;
+const Card = (_a) => {
+    var { children, className = '' } = _a, props = __rest(_a, ["children", "className"]);
+    return (react_1.default.createElement("div", Object.assign({ className: `bg-white m-2 relative rounded-lg max-w-[40rem] p-4 border-2 border-lighter ${className}` }, props), children));
+};
+exports.Card = Card;
 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)' }));

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

@@ -1,4 +1,3 @@
 export * from './colours';
 export * from './common';
 export * from './media';
-export * from './standaloneStyles';

package/dist/ui/styles/index.js

@@ -17,4 +17,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./colours"), exports);
 __exportStar(require("./common"), exports);
 __exportStar(require("./media"), exports);
-__exportStar(require("./standaloneStyles"), exports);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.798",
+  "version": "0.0.799",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -43,8 +43,6 @@
     "@aws-sdk/lib-dynamodb": "^3.902.0",
     "@aws-sdk/s3-presigned-post": "^3.901.0",
     "@azure/cosmos": "^4.5.1",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
     "@google/genai": "^1.22.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
@@ -61,15 +59,12 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-toast": "^1.2.15",
     "@smithy/types": "^4.6.0",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.1.10",
-    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/addon-styling-webpack": "^3.0.0",
     "@storybook/addons": "^7.6.17",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
-    "@storybook/react-webpack5": "^9.1.10",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/react-vite": "^10.0.8",
+    "@storybook/react-webpack5": "^10.0.8",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.7.0",
     "@types/react": "^19.2.2",
@@ -78,13 +73,13 @@
     "@typescript-eslint/parser": "^8.46.0",
     "aws-cdk-lib": "^2.219.0",
     "buffer": "^6.0.3",
-    "eslint-plugin-storybook": "^9.1.10",
+    "eslint-plugin-storybook": "^10.0.8",
     "globstar": "^1.0.0",
     "jsonwebtoken": "^9.0.2",
     "jwks-rsa": "^3.2.0",
     "node-cache": "^5.1.2",
     "rimraf": "^6.0.1",
-    "storybook": "^9.1.10"
+    "storybook": "^10.0.8"
   },
   "files": [
     "dist/**/*",

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

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

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

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-const BarChartBase = styled_1.default.div `
-  display: flex;
-  flex-flow: column;
-  width: 100%;
-  height: 100%;
-  margin-top: 0.5rem;
-  position: relative;
-`;
-const ItemStyled = (0, styled_1.default)(Item_1.Item) `
-  margin-bottom: 0.75rem;
-  height: auto;
-  overflow: hidden;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-`;
-const BarChart = ({ data: dataRaw, style: sRaw, className, }) => {
-    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", style: style, className: className },
-        react_1.default.createElement(UT.Comp, { pos: UT.pos }, ({ data }) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, data, { 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: { selectedKey, data },
-                });
-            } }))),
-        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,12 +0,0 @@
-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, style, }: {
-    data: IBarChartData;
-    className?: string;
-    onMouseMove?: MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
-    maxWidth: number;
-    style: IVarStyles;
-}) => React.JSX.Element;