@adamjanicki/ui 1.8.1 → 1.8.3

package/components/Accordion/Accordion.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { type BoxProps } from "../Box/Box";
+import type { ReadonlyableArray } from "../../utils/types";
 type Props = Omit<BoxProps, "children"> & {
     /**
      * Drawers to render as accordion sections
      */
-    drawers: Drawer[];
+    drawers: ReadonlyableArray<Drawer>;
     /**
      * Duration of the drawer animation (in seconds)
      */

package/components/Animated/Animated.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Vfx, Style } from "../../utils/types";
+import type { ReadonlyableArray, Style, Vfx } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
 type AnimationState = {
     /**
@@ -52,7 +52,7 @@ type Props = BoxProps & {
      * The properties to apply a transition
      * @default ['all']
      */
-    transitionProperties?: string[];
+    transitionProperties?: ReadonlyableArray<string>;
 };
 declare const Animated: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Animated;

package/components/Avatar/Avatar.js

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useState } from "react";
+import ui from "../ui";
 import Box from "../Box/Box";
 import { classNames } from "../../functions";
 var Avatar = React.forwardRef(function (_a, ref) {
@@ -45,7 +46,7 @@ var Avatar = React.forwardRef(function (_a, ref) {
         imageClassName = "aui-avatar-".concat(size);
     }
     var fallbackCharacter = username[0];
-    return (_jsx(Box, __assign({ className: classNames(avatarClassName, className), style: __assign(__assign({}, avatarStyle), style), vfx: __assign({ radius: "rounded", overflow: "hidden", fontWeight: 6, textAlign: "center" }, vfx) }, rest, { ref: ref, children: !useFallback ? (_jsx("img", { src: backgroundImage, alt: "", className: imageClassName, onError: function () { return setImageError(true); }, style: imageStyle })) : (fallbackCharacter) })));
+    return (_jsx(Box, __assign({ className: classNames(avatarClassName, className), style: __assign(__assign({}, avatarStyle), style), vfx: __assign({ radius: "rounded", overflow: "hidden", fontWeight: 6, textAlign: "center" }, vfx) }, rest, { ref: ref, children: !useFallback ? (_jsx(ui.img, { src: backgroundImage, alt: "", className: imageClassName, onError: function () { return setImageError(true); }, style: imageStyle })) : (fallbackCharacter) })));
 });
 var colorOptions = ["red", "yellow", "green", "blue", "purple"];
 // simple deterministic "hash" to get a background color

package/components/Banner/Banner.d.ts

@@ -3,7 +3,7 @@ import type { ContentType } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
 type Props = BoxProps & {
     /**
-     * The type of badge to display.
+     * The type of banner to display.
      */
     type: ContentType;
 };

package/components/Button/Button.d.ts

@@ -40,8 +40,8 @@ type IconButtonProps = Omit<DefaultButtonProps, "children"> & {
 export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const getButtonProps: ({ variant, size, }: VisualButtonProps) => {
-    className: string;
-    vfx: {
+    readonly className: "aui-button-primary" | "aui-button-secondary";
+    readonly vfx: {
         readonly radius: "rounded";
         readonly fontWeight: 6;
         readonly fontSize: "xs";

package/components/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Children, Style } from "../../utils/types";
+import type { Children, ReadonlyableArray, Style } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
 type ButtonProps = {
     /**
@@ -19,7 +19,7 @@ type Props = BoxProps & {
     /**
      * The child elements/slides of the carousel
      */
-    children: React.ReactNode[];
+    children: ReadonlyableArray<React.ReactNode>;
     /**
      * How long the transition lasts (in seconds)
      * @default 1

package/components/Carousel/Carousel.js

@@ -27,7 +27,7 @@ import Button from "../Button";
 import Box from "../Box/Box";
 import Icon from "../Icon";
 var DEFAULT_DURATION_S = 1;
-var itemVfx = { width: "full", height: "full" };
+var itemVfx = { width: "full", height: "full", stretch: "max" };
 var Carousel = React.forwardRef(function (_a, ref) {
     var _b, _c;
     var children = _a.children, hideArrows = _a.hideArrows, vfx = _a.vfx, hideDots = _a.hideDots, dotProps = _a.dotProps, leftArrowProps = _a.leftArrowProps, rightArrowProps = _a.rightArrowProps, autoplayInterval = _a.autoplayInterval, duration = _a.duration, rest = __rest(_a, ["children", "hideArrows", "vfx", "hideDots", "dotProps", "leftArrowProps", "rightArrowProps", "autoplayInterval", "duration"]);
@@ -86,7 +86,7 @@ var Carousel = React.forwardRef(function (_a, ref) {
                     axis: delta >= 0 ? "x" : "-x",
                     width: "full",
                     height: "full",
-                }, style: animatingStyles, onTransitionEnd: onTransitionEnd, children: [_jsx(Box, { vfx: itemVfx, className: "aui-carousel-item", children: children[cur] }), _jsx(Box, { vfx: itemVfx, className: "aui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { vfx: {
+                }, style: animatingStyles, onTransitionEnd: onTransitionEnd, children: [_jsx(Box, { vfx: itemVfx, children: children[cur] }), _jsx(Box, { vfx: itemVfx, "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { vfx: {
                                     axis: "x",
                                     align: "center",
                                     justify: "center",

package/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { ReadonlyableArray } from "../../utils/types";
 type FallbackProps = {
     error: Error;
     reset: () => void;
@@ -23,7 +24,7 @@ type Props = {
     /**
      * Dependencies to trigger a reset on change
      */
-    deps?: unknown[];
+    deps?: ReadonlyableArray<unknown>;
 };
 type State = {
     error: Error | null;

package/components/Link/Link.d.ts

@@ -1,24 +1,17 @@
 import React from "react";
+import ui from "../ui";
 import { type VisualButtonProps } from "../Button/Button";
 import { Vfx } from "../../utils/types";
-export type BaseLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
+export type LinkProps = Omit<React.ComponentProps<typeof ui.a>, "href"> & {
     /**
      * URL to navigate to
      */
     to: string;
-};
-type CustomLinkElement = React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-type LinkProps = BaseLinkProps & {
-    /**
-     * Whether the link should open in a new tab
-     */
-    external?: boolean;
     /**
-     * [Optional] Custom link element to use
-     * This is useful for using a different link element, like a React Router Link
-     * If this is not provided, a normal anchor tag will be used
+     * Whether to open the link in a new tab.
+     * @default false
      */
-    LinkElement?: CustomLinkElement;
+    newTab?: boolean;
     /**
      * The VFX or other organizational css to apply to this element.
      * Properties are translated to class names before being applied.
@@ -26,22 +19,18 @@ type LinkProps = BaseLinkProps & {
     vfx?: Vfx;
 };
 export declare const UnstyledLink: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export declare const ButtonLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
+export declare const ButtonLink: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    vfx?: Vfx;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>, "href"> & {
     /**
      * URL to navigate to
      */
     to: string;
-} & {
-    /**
-     * Whether the link should open in a new tab
-     */
-    external?: boolean;
     /**
-     * [Optional] Custom link element to use
-     * This is useful for using a different link element, like a React Router Link
-     * If this is not provided, a normal anchor tag will be used
+     * Whether to open the link in a new tab.
+     * @default false
      */
-    LinkElement?: CustomLinkElement;
+    newTab?: boolean;
     /**
      * The VFX or other organizational css to apply to this element.
      * Properties are translated to class names before being applied.

package/components/Link/Link.js

@@ -22,16 +22,43 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
+import ui from "../ui";
 import { getButtonProps } from "../Button/Button";
 import classNames from "../../functions/classNames";
-import transformVfx from "../../utils/transformVfx";
+import RouterContext from "../../router/RouterContext";
+import { getHref } from "../../router/href";
+function routeInternally(event) {
+    // only route internally if it's a left click and no modifier keys are held down
+    return (event.button === 0 &&
+        !event.defaultPrevented &&
+        !event.metaKey &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.shiftKey);
+}
 export var UnstyledLink = React.forwardRef(function (_a, ref) {
-    var LinkElement = _a.LinkElement, to = _a.to, className = _a.className, vfx = _a.vfx, external = _a.external, rest = __rest(_a, ["LinkElement", "to", "className", "vfx", "external"]);
-    var props = __assign(__assign(__assign({}, (external ? { target: "_blank", rel: "noreferrer noopener" } : {})), rest), { className: classNames("aui-action", transformVfx(vfx), className) });
-    if (LinkElement) {
-        return _jsx(LinkElement, __assign({}, props, { to: to, ref: ref }));
+    var to = _a.to, className = _a.className, newTab = _a.newTab, onClick = _a.onClick, target = _a.target, rel = _a.rel, rest = __rest(_a, ["to", "className", "newTab", "onClick", "target", "rel"]);
+    var router = React.useContext(RouterContext);
+    var href = router
+        ? getHref(to, router.location.pathname, router.basename)
+        : { type: "unknown", url: to };
+    if (newTab) {
+        target = "_blank";
+        rel = "noreferrer noopener";
     }
-    return _jsx("a", __assign({}, props, { href: to, ref: ref }));
+    var handleClick = function (event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!router ||
+            newTab ||
+            href.type === "external" ||
+            href.type === "octo" ||
+            !routeInternally(event))
+            return;
+        // Client-side navigation
+        event.preventDefault();
+        router.navigate(to);
+    };
+    return (_jsx(ui.a, __assign({}, rest, { href: href.url, target: target, rel: rel, className: classNames("aui-action", className), onClick: handleClick, ref: ref })));
 });
 export var ButtonLink = React.forwardRef(function (_a, ref) {
     var className = _a.className, variant = _a.variant, vfx = _a.vfx, size = _a.size, props = __rest(_a, ["className", "variant", "vfx", "size"]);

package/components/Modal/Modal.d.ts

@@ -38,6 +38,10 @@ type Props = BoxProps & {
      * @default false
      */
     returnFocusOnEscape?: boolean;
+    /**
+     * Props to pass to the outer box container
+     */
+    wrapperBoxProps?: Omit<BoxProps, "children">;
 };
 declare const Modal: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/components/Modal/Modal.js

@@ -27,18 +27,9 @@ import Layer from "../Layer";
 import Button, { IconButton } from "../Button";
 import Animated from "../Animated";
 var Modal = React.forwardRef(function (_a, ref) {
-    var open = _a.open, onClose = _a.onClose, onConfirm = _a.onConfirm, confirmButtonProps = _a.confirmButtonProps, cancelButtonProps = _a.cancelButtonProps, _b = _a.confirmLabel, confirmLabel = _b === void 0 ? "Ok" : _b, _c = _a.cancelLabel, cancelLabel = _c === void 0 ? "Cancel" : _c, returnFocusOnEscape = _a.returnFocusOnEscape, rest = __rest(_a, ["open", "onClose", "onConfirm", "confirmButtonProps", "cancelButtonProps", "confirmLabel", "cancelLabel", "returnFocusOnEscape"]);
-    return (_jsx(Animated, { vfx: { z: "max" }, visible: open, animateTo: { vfx: { opacity: "full" } }, animateFrom: { vfx: { opacity: "none" } }, children: _jsx(Layer, { onClose: onClose, returnFocusOnEscape: returnFocusOnEscape, children: _jsxs(Box, { role: "dialog", "aria-modal": "true", vfx: {
-                    axis: "y",
-                    padding: "m",
-                    gap: "m",
-                    radius: "rounded",
-                    maxWidth: "full",
-                    shadow: "floating",
-                    border: true,
-                    color: "default",
-                    backgroundColor: "default",
-                }, children: [_jsx(Box, { vfx: {
+    var open = _a.open, onClose = _a.onClose, onConfirm = _a.onConfirm, confirmButtonProps = _a.confirmButtonProps, cancelButtonProps = _a.cancelButtonProps, _b = _a.confirmLabel, confirmLabel = _b === void 0 ? "Ok" : _b, _c = _a.cancelLabel, cancelLabel = _c === void 0 ? "Cancel" : _c, returnFocusOnEscape = _a.returnFocusOnEscape, wrapperBoxProps = _a.wrapperBoxProps, rest = __rest(_a, ["open", "onClose", "onConfirm", "confirmButtonProps", "cancelButtonProps", "confirmLabel", "cancelLabel", "returnFocusOnEscape", "wrapperBoxProps"]);
+    var _d = wrapperBoxProps || {}, wrapperBoxVfx = _d.vfx, wrapperBoxRest = __rest(_d, ["vfx"]);
+    return (_jsx(Animated, { vfx: { z: "max" }, visible: open, animateTo: { vfx: { opacity: "full" } }, animateFrom: { vfx: { opacity: "none" } }, children: _jsx(Layer, { onClose: onClose, returnFocusOnEscape: returnFocusOnEscape, children: _jsxs(Box, __assign({ role: "dialog", "aria-modal": "true" }, wrapperBoxRest, { vfx: __assign({ axis: "y", padding: "m", gap: "m", radius: "rounded", maxWidth: "full", shadow: "floating", border: true, color: "default", backgroundColor: "default" }, wrapperBoxVfx), children: [_jsx(Box, { vfx: {
                             axis: "x",
                             align: "center",
                             justify: "end",
@@ -52,6 +43,6 @@ var Modal = React.forwardRef(function (_a, ref) {
                         }, children: [_jsx(Button, __assign({ variant: "secondary" }, cancelButtonProps, { onClick: onClose, children: cancelLabel })), _jsx(Button, __assign({}, confirmButtonProps, { onClick: function () {
                                     onConfirm();
                                     onClose();
-                                }, children: confirmLabel }))] })] }) }) }));
+                                }, children: confirmLabel }))] })] })) }) }));
 });
 export default Modal;

package/components/Select/Select.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 import { type BoxProps } from "../Box/Box";
 import ui from "../ui";
+import type { ReadonlyableArray } from "../../utils/types";
 type SelectProps = React.ComponentProps<typeof ui.select>;
 type Props = Omit<BoxProps, "children" | "onChange"> & {
     /**
      * Array of options to display in the select
      */
-    options: string[];
+    options: ReadonlyableArray<string>;
     /**
      * Mapper function to get the label of the option
      *

package/components/ui.js

@@ -26,7 +26,7 @@ import transformVfx from "../utils/transformVfx";
 function createVfxElement(tag) {
     var Component = React.forwardRef(function (_a, ref) {
         var vfx = _a.vfx, className = _a.className, props = __rest(_a, ["vfx", "className"]);
-        return React.createElement(tag, __assign(__assign({}, props), { ref: ref, className: classNames(transformVfx(vfx), className) }));
+        return React.createElement(tag, __assign(__assign({}, props), { ref: ref, className: classNames(className, transformVfx(vfx)) }));
     });
     return Component;
 }

package/functions/classNames.d.ts

@@ -1,7 +1,8 @@
+import type { ReadonlyableArray } from "../utils/types";
 /**
  * Reduce a list of classnames into one string
  *
  * @param classNames list of class names to concatenate
  * @returns single aggregated string of classnames
  */
-export default function classNames(...classNames: Array<string | null | undefined>): string | undefined;
+export default function classNames(...classNames: ReadonlyableArray<string | null | undefined>): string | undefined;

package/hooks/useMergeRefs.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
+import type { ReadonlyableArray } from "../utils/types";
 /**
  * Simple hook that merges N refs into one callback
  *
  * @param refs all the refs you want to merge
  * @returns one combined ref
  */
-declare const useMergeRefs: <T>(...refs: (React.Ref<T> | null | undefined)[]) => React.Ref<T>;
+declare const useMergeRefs: <T>(...refs: ReadonlyableArray<React.Ref<T> | null | undefined>) => React.Ref<T>;
 export default useMergeRefs;

package/index.d.ts

@@ -24,3 +24,4 @@ export { default as Spinner } from "./components/Spinner";
 export { default as ui } from "./components/ui";
 export * from "./hooks";
 export * from "./functions";
+export * from "./router";

package/index.js

@@ -27,3 +27,5 @@ export { default as ui } from "./components/ui";
 export * from "./hooks";
 // Functions
 export * from "./functions";
+// Router
+export * from "./router";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "Basic UI components and hooks for React in TypeScript",
   "type": "module",
   "main": "./index.js",
@@ -29,8 +29,8 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
     "sass": "^1.90.0",

package/router/PathParamsContext.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { PathParams } from "./types";
+declare const PathParamsContext: React.Context<PathParams | null>;
+export default PathParamsContext;

package/router/PathParamsContext.js

@@ -0,0 +1,3 @@
+import React from "react";
+var PathParamsContext = React.createContext(null);
+export default PathParamsContext;

package/router/Route.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type Props = {
+    /**
+     * Path pattern to match against window.location.pathname (e.g. `"/movie/:id"`)
+     * Currently, only 2 types are supported:
+     * 1. static: `/reviews/movies`
+     * 2. dynamic (params): `/reviews/:media/:title/view`
+     * In the future, I might extend use to include wildcard matching if I need it
+     */
+    path: string;
+    /** Element to render when the path matches */
+    element: React.ReactElement;
+};
+/**
+ * A simple wrapper to be used by <Routes>
+ */
+export default function Route({}: Props): null;

package/router/Route.js

@@ -0,0 +1,6 @@
+/**
+ * A simple wrapper to be used by <Routes>
+ */
+export default function Route(_a) {
+    return null;
+}

package/router/Router.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type Props = {
+    /** Children to render inside the router provider */
+    children: React.ReactNode;
+    /** Optional basename prefix for all internal navigation (e.g. "/app") */
+    basename?: string;
+};
+export default function Router({ children, basename }: Props): import("react/jsx-runtime").JSX.Element;

package/router/Router.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import RouterContext from "./RouterContext";
+import { createHistory, getCurrentLocation } from "./history";
+import { getHref, normalizeBasename } from "./href";
+export default function Router(_a) {
+    var children = _a.children, _b = _a.basename, basename = _b === void 0 ? "" : _b;
+    basename = normalizeBasename(basename);
+    var historyRef = React.useRef(null);
+    if (!historyRef.current)
+        historyRef.current = createHistory();
+    var history = historyRef.current;
+    var _c = React.useState(getCurrentLocation), location = _c[0], setLocation = _c[1];
+    // to avoid infinite rerenders
+    var locationRef = React.useRef(location);
+    React.useLayoutEffect(function () {
+        var removeListener = history.addListener(function (nextLocation) {
+            locationRef.current = nextLocation;
+            setLocation(nextLocation);
+        });
+        return function () {
+            removeListener();
+            history.cleanup();
+        };
+    }, [history]);
+    var navigate = React.useCallback(function (to) {
+        var currentPathname = locationRef.current.pathname;
+        history.push(getHref(to, currentPathname, basename).url);
+    }, [history, basename]);
+    var contextValue = React.useMemo(function () { return ({
+        location: location,
+        navigate: navigate,
+        basename: basename,
+    }); }, [location, navigate, basename]);
+    return (_jsx(RouterContext.Provider, { value: contextValue, children: children }));
+}

package/router/RouterContext.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { Location, Navigate } from "./types";
+type RouterContextValue = {
+    /** Current location */
+    location: Location;
+    /** Push-style navigation */
+    navigate: Navigate;
+    /** Optional basename prefix for all internal navigation */
+    basename: string;
+};
+declare const RouterContext: React.Context<RouterContextValue | null>;
+export default RouterContext;

package/router/RouterContext.js

@@ -0,0 +1,3 @@
+import React from "react";
+var RouterContext = React.createContext(null);
+export default RouterContext;

package/router/Routes.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { Children } from "../utils/types";
+export type Props = {
+    /**
+     * Child <Route> elements to switch between.
+     * Note: non <Route> children will be silently ignored
+     */
+    children: Children;
+    /**
+     * What to render when no routes match, like a 404 page.
+     */
+    fallback?: React.ReactNode;
+};
+/**
+ * Nested within a router component, this component handles rendering the proper route.
+ * Note: sticking any other components besides routes in here will not be rendered
+ */
+export default function Routes({ children: rawChildren, fallback }: Props): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/router/Routes.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { matchPath } from "./path";
+import PathParamsContext from "./PathParamsContext";
+import Route from "./Route";
+import useRouterContext from "./hooks/useRouterContext";
+import { stripBasename } from "./href";
+function findRouteElements(children) {
+    return children.filter(function (child) { return React.isValidElement(child) && child.type === Route; });
+}
+/**
+ * Nested within a router component, this component handles rendering the proper route.
+ * Note: sticking any other components besides routes in here will not be rendered
+ */
+export default function Routes(_a) {
+    var rawChildren = _a.children, fallback = _a.fallback;
+    var router = useRouterContext("<Routes>");
+    var location = router.location, basename = router.basename;
+    var pathname = stripBasename(location.pathname, basename);
+    var children = Array.isArray(rawChildren) ? rawChildren : [rawChildren];
+    var routes = findRouteElements(children);
+    for (var _i = 0, routes_1 = routes; _i < routes_1.length; _i++) {
+        var routeElement = routes_1[_i];
+        var _b = routeElement.props, path = _b.path, element = _b.element;
+        var pathParams = matchPath(path, pathname);
+        if (pathParams) {
+            return (_jsx(PathParamsContext.Provider, { value: pathParams, children: element }));
+        }
+    }
+    return fallback;
+}

package/router/history.d.ts

@@ -0,0 +1,10 @@
+import type { Location } from "./types";
+export declare function getCurrentLocation(): Location;
+type LocationListener = (location: Location) => void;
+export declare function createHistory(): {
+    readonly push: (to: string) => void;
+    readonly addListener: (listener: LocationListener) => () => void;
+    readonly cleanup: () => void;
+};
+export type History = ReturnType<typeof createHistory>;
+export {};

package/router/history.js

@@ -0,0 +1,46 @@
+export function getCurrentLocation() {
+    return {
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+    };
+}
+export function createHistory() {
+    var listeners = new Set();
+    var notifyListeners = function () {
+        var location = getCurrentLocation();
+        listeners.forEach(function (listener) { return listener(location); });
+    };
+    var listening = false;
+    var startListening = function () {
+        if (listening)
+            return;
+        window.addEventListener("popstate", notifyListeners);
+        listening = true;
+    };
+    var stopListening = function () {
+        if (!listening)
+            return;
+        window.removeEventListener("popstate", notifyListeners);
+        listening = false;
+    };
+    return {
+        push: function (to) {
+            window.history.pushState(null, "", to);
+            notifyListeners();
+        },
+        addListener: function (listener) {
+            startListening();
+            listeners.add(listener);
+            return function () {
+                listeners.delete(listener);
+                if (listeners.size === 0)
+                    stopListening();
+            };
+        },
+        cleanup: function () {
+            stopListening();
+            listeners.clear();
+        },
+    };
+}

package/router/hooks/useLocation.d.ts

@@ -0,0 +1,7 @@
+import type { Location } from "../types";
+/**
+ * Get the current location (can only be used within a Router)
+ *
+ * @returns the current location
+ */
+export default function useLocation(): Location;

package/router/hooks/useLocation.js

@@ -0,0 +1,10 @@
+import useRouterContext from "./useRouterContext";
+/**
+ * Get the current location (can only be used within a Router)
+ *
+ * @returns the current location
+ */
+export default function useLocation() {
+    var location = useRouterContext("useLocation()").location;
+    return location;
+}

package/router/hooks/useNavigate.d.ts

@@ -0,0 +1,7 @@
+import type { Navigate } from "../types";
+/**
+ * Get a navigate function (can only be used within a Router)
+ *
+ * @returns a navigate function
+ */
+export default function useNavigate(): Navigate;

package/router/hooks/useNavigate.js

@@ -0,0 +1,10 @@
+import useRouterContext from "./useRouterContext";
+/**
+ * Get a navigate function (can only be used within a Router)
+ *
+ * @returns a navigate function
+ */
+export default function useNavigate() {
+    var navigate = useRouterContext("useNavigate()").navigate;
+    return navigate;
+}

package/router/hooks/usePathParams.d.ts

@@ -0,0 +1,8 @@
+import type { PathParams } from "../types";
+/**
+ * Get the params from the current pathname
+ *
+ * @returns the params from the current path
+ * e.g. `{id: "1"}` for `/movie/:id <=> /movie/1`
+ */
+export default function usePathParams(): PathParams;

package/router/hooks/usePathParams.js

@@ -0,0 +1,15 @@
+import React from "react";
+import PathParamsContext from "../PathParamsContext";
+/**
+ * Get the params from the current pathname
+ *
+ * @returns the params from the current path
+ * e.g. `{id: "1"}` for `/movie/:id <=> /movie/1`
+ */
+export default function usePathParams() {
+    var params = React.useContext(PathParamsContext);
+    if (!params) {
+        throw new Error("usePathParams() must be used inside of a <Router> component");
+    }
+    return params;
+}

package/router/hooks/useRouterContext.d.ts

@@ -0,0 +1,5 @@
+export default function useRouterContext(name: string): {
+    location: import("../types").Location;
+    navigate: import("../types").Navigate;
+    basename: string;
+};

package/router/hooks/useRouterContext.js

@@ -0,0 +1,9 @@
+import React from "react";
+import RouterContext from "../RouterContext";
+export default function useRouterContext(name) {
+    var routerContext = React.useContext(RouterContext);
+    if (!routerContext) {
+        throw new Error("".concat(name, " must be used inside of a <Router> component"));
+    }
+    return routerContext;
+}

package/router/hooks/useSearchParams.d.ts

@@ -0,0 +1,2 @@
+import type { SearchParams, SetSearchParams } from "../types";
+export default function useSearchParams(): [SearchParams, SetSearchParams];

package/router/hooks/useSearchParams.js

@@ -0,0 +1,47 @@
+import React from "react";
+import useRouterContext from "./useRouterContext";
+function deserialize(search) {
+    var urlSearchParams = new URLSearchParams(search);
+    var searchParams = {};
+    urlSearchParams.forEach(function (value, key) {
+        var existing = searchParams[key];
+        if (existing === undefined) {
+            searchParams[key] = value;
+        }
+        else if (Array.isArray(existing)) {
+            existing.push(value);
+        }
+        else {
+            searchParams[key] = [existing, value];
+        }
+    });
+    return searchParams;
+}
+function serialize(params) {
+    var urlSearchParams = new URLSearchParams();
+    Object.entries(params).forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        if (value !== undefined) {
+            if (Array.isArray(value)) {
+                value.forEach(function (subvalue) { return urlSearchParams.append(key, subvalue); });
+            }
+            else {
+                urlSearchParams.set(key, value);
+            }
+        }
+    });
+    var stringified = urlSearchParams.toString();
+    return stringified ? "?".concat(stringified) : "";
+}
+export default function useSearchParams() {
+    var router = useRouterContext("useSearchParams()");
+    var location = router.location, navigate = router.navigate;
+    var pathname = location.pathname, hash = location.hash, search = location.search;
+    var params = React.useMemo(function () { return deserialize(search); }, [search]);
+    var setSearchParams = React.useCallback(function (next) {
+        var nextParams = typeof next === "function" ? next(params) : next;
+        var url = pathname + serialize(nextParams) + hash;
+        navigate(url);
+    }, [navigate, pathname, hash, params]);
+    return [params, setSearchParams];
+}

package/router/href.d.ts

@@ -0,0 +1,8 @@
+export type Href = {
+    type: "internal" | "external" | "octo" | "unknown";
+    url: string;
+};
+export declare function getHref(to: string, pathname: string, normalizedBasename: string): Href;
+export declare function normalizeBasename(basename: string): string;
+export declare function isExternal(to: string): boolean;
+export declare function stripBasename(pathname: string, basename: string): string;

package/router/href.js

@@ -0,0 +1,43 @@
+import { popSlash, prependSlash } from "./string";
+// computes href given to, current pathname, and optional basename
+export function getHref(to, pathname, normalizedBasename) {
+    // external
+    if (isExternal(to))
+        return { type: "external", url: to };
+    // hash only
+    if (to.startsWith("#"))
+        return { type: "octo", url: to };
+    var type = "internal";
+    // absolute
+    if (to.startsWith("/")) {
+        return { type: type, url: normalizedBasename + to };
+    }
+    // relative
+    pathname = stripBasename(prependSlash(pathname), normalizedBasename);
+    if (!to || to.startsWith("#"))
+        return { type: type, url: normalizedBasename + pathname + to };
+    return {
+        type: type,
+        url: normalizedBasename + popSlash(pathname) + prependSlash(to),
+    };
+}
+// formats with a starting slash and removes trailing slash
+export function normalizeBasename(basename) {
+    if (!basename || basename === "/")
+        return "";
+    return prependSlash(popSlash(basename));
+}
+// simple heuristic check
+export function isExternal(to) {
+    return /^(https?:\/\/|mailto:|tel:)/i.test(to);
+}
+export function stripBasename(pathname, basename) {
+    if (!basename)
+        return pathname;
+    if (pathname === basename)
+        return "/";
+    if (pathname.startsWith(basename + "/")) {
+        return pathname.slice(basename.length);
+    }
+    return pathname;
+}

package/router/index.d.ts

@@ -0,0 +1,7 @@
+export { default as useLocation } from "./hooks/useLocation";
+export { default as useNavigate } from "./hooks/useNavigate";
+export { default as usePathParams } from "./hooks/usePathParams";
+export { default as useSearchParams } from "./hooks/useSearchParams";
+export { default as Router } from "./Router";
+export { default as Route } from "./Route";
+export { default as Routes } from "./Routes";

package/router/index.js

@@ -0,0 +1,7 @@
+export { default as useLocation } from "./hooks/useLocation";
+export { default as useNavigate } from "./hooks/useNavigate";
+export { default as usePathParams } from "./hooks/usePathParams";
+export { default as useSearchParams } from "./hooks/useSearchParams";
+export { default as Router } from "./Router";
+export { default as Route } from "./Route";
+export { default as Routes } from "./Routes";

package/router/path.d.ts

@@ -0,0 +1,2 @@
+import type { PathParams } from "./types";
+export declare function matchPath(pattern: string, pathname: string): PathParams | false;

package/router/path.js

@@ -0,0 +1,38 @@
+import { popSlash, prependSlash } from "./string";
+function normalizePath(path) {
+    path = prependSlash(path);
+    if (path.length > 1) {
+        path = popSlash(path);
+    }
+    return path;
+}
+// false == no match
+export function matchPath(pattern, pathname) {
+    var normalizedPattern = normalizePath(pattern);
+    var normalizedPathname = normalizePath(pathname);
+    if (!normalizedPattern.includes(":")) {
+        return normalizedPattern === normalizedPathname ? {} : false;
+    }
+    var patternSegments = normalizedPattern.split("/").filter(Boolean);
+    var pathSegments = normalizedPathname.split("/").filter(Boolean);
+    if (patternSegments.length !== pathSegments.length) {
+        return false;
+    }
+    var params = {};
+    for (var i = 0; i < patternSegments.length; i++) {
+        var patternSegment = patternSegments[i];
+        var pathSegment = pathSegments[i];
+        // dynamic
+        if (patternSegment.startsWith(":")) {
+            var paramName = patternSegment.slice(1).trim();
+            if (!paramName)
+                return false;
+            params[paramName] = pathSegment;
+        }
+        // static
+        else if (patternSegment !== pathSegment) {
+            return false;
+        }
+    }
+    return params;
+}

package/router/string.d.ts

@@ -0,0 +1,2 @@
+export declare function prependSlash(str: string): string;
+export declare function popSlash(str: string): string;

package/router/string.js

@@ -0,0 +1,6 @@
+export function prependSlash(str) {
+    return str.startsWith("/") ? str : "/".concat(str);
+}
+export function popSlash(str) {
+    return str.replace(/\/$/, "");
+}

package/router/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Location object of the current URL.
+ */
+export type Location = {
+    /** URL pathname (e.g. "/movies/123") */
+    pathname: string;
+    /** URL search (e.g. "?q=inception") */
+    search: string;
+    /** URL hash (e.g. "#home") */
+    hash: string;
+};
+/**
+ * A function to handle page navigation
+ */
+export type Navigate = (to: string) => void;
+/**
+ * Object containing params from the pathname
+ * e.g. `{id: "1"}` for `/movie/:id <=> /movie/1`
+ */
+export type PathParams = {
+    [key: string]: string | undefined;
+};
+/**
+ * Object containing params from the search string
+ * e.g. `{id: "1", movies: ["inception", "alien"]}` for `"?id=1&movies=inception&movies=alien"`
+ */
+export type SearchParams = {
+    [key: string]: string | string[] | undefined;
+};
+/** Callback or object to update search params */
+export type SetSearchParamsArg = SearchParams | ((prev: SearchParams) => SearchParams);
+/** Callback to update search params and reload relevant hooks */
+export type SetSearchParams = (next: SetSearchParamsArg) => void;

package/router/types.js

@@ -0,0 +1 @@
+export {};

package/style.css

@@ -1 +1 @@
-:root{--aui-xxs: 2px;--aui-xs: 4px;--aui-s: 8px;--aui-m: 16px;--aui-l: 24px;--aui-xl: 32px;--aui-xxl: 64px;--aui-moon-gray: #ccc;--aui-dark-gray: #555;--aui-darkest-gray: #333;--aui-obsidian: #121212;--aui-focus-ring-color: #b2dbfa;--aui-color-default: black;--aui-color-muted: var(--aui-dark-gray);--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-opacity-disabled: 0.5;--aui-opacity-dim: 0.75;--aui-default-transition: 0.25s ease-in-out;--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);--aui-radius-none: 0;--aui-radius-subtle: 4px;--aui-radius-rounded: 8px;--aui-radius-max: 10000px;--aui-button-primary-background: black;--aui-button-primary-color: white;--aui-button-secondary-border-hover: var(--aui-darkest-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);--aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);--aui-success-background: #dff2e1;--aui-success-color: #1b5e20;--aui-success-border: #b2dfb1;--aui-warning-background: #fceeb6;--aui-warning-color: #b23904;--aui-warning-border: #e6d5a2;--aui-error-background: #fdecea;--aui-error-color: #b71c1c;--aui-error-border: #f5b7b7;--aui-info-background: #e3f2fd;--aui-info-color: #0d47a1;--aui-info-border: #90caf9;--aui-avatar-purple: #bc54d6;--aui-avatar-blue: #618bdc;--aui-avatar-red: #ee6060;--aui-avatar-green: #add386;--aui-avatar-yellow: #f5c76d;--aui-static-background: #e8e8e8;--aui-static-color: var(--aui-color-default);--aui-static-border: var(--aui-default-border);--aui-layer-backdrop-background: rgba(200, 200, 200, 0.6);--aui-link-color: #0070ff}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-color-default: white;--aui-color-muted: var(--aui-moon-gray);--aui-default-background: var(--aui-obsidian);--aui-default-border: var(--aui-dark-gray);--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);--aui-button-primary-background: white;--aui-button-primary-color: var(--aui-obsidian);--aui-button-secondary-border-hover: var(--aui-moon-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);--aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);--aui-success-background: #2a5733;--aui-success-color: #d9efd8;--aui-success-border: #439e4a;--aui-warning-background: #736230;--aui-warning-color: #fff6d1;--aui-warning-border: #927a3b;--aui-error-background: #663232;--aui-error-color: #f9dadc;--aui-error-border: #8d2a2a;--aui-info-background: #335f72;--aui-info-color: #d4f1f5;--aui-info-border: #1d8ea4;--aui-static-background: var(--aui-darkest-gray);--aui-static-color: var(--aui-color-default);--aui-static-border: var(--aui-default-border);--aui-avatar-purple: #771199;--aui-avatar-blue: #0b4cce;--aui-avatar-red: #bb1111;--aui-avatar-green: #307040;--aui-avatar-yellow: #bb8822;--aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff}*{box-sizing:border-box}html{font-family:system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%;line-height:1.15;tab-size:4;-webkit-font-smoothing:antialiased}body{margin:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.aui-content-success{background-color:var(--aui-success-background);color:var(--aui-success-color);border-color:var(--aui-success-border)}.aui-content-warning{background-color:var(--aui-warning-background);color:var(--aui-warning-color);border-color:var(--aui-warning-border)}.aui-content-error{background-color:var(--aui-error-background);color:var(--aui-error-color);border-color:var(--aui-error-border)}.aui-content-info{background-color:var(--aui-info-background);color:var(--aui-info-color);border-color:var(--aui-info-border)}.aui-content-static{background-color:var(--aui-static-background);color:var(--aui-static-color);border-color:var(--aui-static-border)}.aui-alert,.aui-badge{border-style:solid;border-width:1px}.aui-action{color:inherit;text-decoration:none;cursor:pointer;outline-color:var(--aui-link-color)}.aui-action:focus:not(:focus-visible){outline:none}.aui-button{background:none;border:none;padding:0}.aui-button:disabled{cursor:default !important;opacity:var(--aui-opacity-disabled)}.aui-button-primary{background-color:var(--aui-button-primary-background);border:1px solid var(--aui-button-primary-background);color:var(--aui-button-primary-color);box-shadow:var(--aui-button-primary-box-shadow);transition:opacity var(--aui-default-transition)}.aui-button-secondary{color:var(--aui-color-default);background-color:var(--aui-default-background);border:1px solid var(--aui-default-border);box-shadow:var(--aui-subtle-box-shadow);transition:border var(--aui-default-transition)}.aui-dim,.aui-undim{transition:opacity var(--aui-default-transition)}.aui-dim{opacity:1}.aui-undim{opacity:var(--aui-opacity-dim)}.aui-link{color:var(--aui-link-color);transition:opacity var(--aui-default-transition)}@media(hover: hover){.aui-button-primary:not([disabled]):hover,.aui-dim:not([disabled]):hover,.aui-link:hover{opacity:var(--aui-opacity-dim)}.aui-button-secondary:not([disabled]):hover{border-color:var(--aui-button-secondary-border-hover)}.aui-undim:not([disabled]):hover{opacity:1}}.aui-input-base{outline:none;border:none;background-color:inherit;color:inherit;padding:var(--aui-s);font-weight:400}.aui-input-base::selection{background-color:var(--aui-focus-ring-color)}.aui-input,.aui-select-container{transition:box-shadow var(--aui-default-transition);border:1px solid var(--aui-default-border);box-shadow:var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-opacity-disabled);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select{width:100%;color:inherit;border:none;outline:none;box-shadow:none;cursor:pointer;background-color:rgba(0,0,0,0);padding:var(--aui-s) 28px var(--aui-s) var(--aui-s);font-weight:600;appearance:none;-webkit-appearance:none;-moz-appearance:none}.aui-select-disabled *{opacity:var(--aui-opacity-disabled);cursor:default}.aui-layer-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--aui-layer-backdrop-background)}.aui-icon *{color:currentColor;fill:currentColor}.aui-spinner{animation:aui-spinner-animation 1s linear infinite;transform-origin:center;height:var(--aui-l)}@keyframes aui-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.aui-carousel-item{flex:0 0 100%}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l)}.aui-carousel-dots{position:absolute;bottom:var(--aui-s);transform:translateX(-50%);left:50%}.aui-carousel-dot{width:var(--aui-m);height:var(--aui-s)}.aui-pos-static{position:static}.aui-pos-relative{position:relative}.aui-pos-absolute{position:absolute}.aui-pos-fixed{position:fixed}.aui-pos-sticky{position:sticky}.aui-flex-x{display:flex;flex-direction:row}.aui-flex-y{display:flex;flex-direction:column}.aui-flex--x{display:flex;flex-direction:row-reverse}.aui-flex--y{display:flex;flex-direction:column-reverse}.aui-flex-wrap{flex-wrap:wrap}.aui-align-start{align-items:flex-start}.aui-align-center{align-items:center}.aui-align-end{align-items:flex-end}.aui-justify-start{justify-content:flex-start}.aui-justify-center{justify-content:center}.aui-justify-end{justify-content:flex-end}.aui-justify-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-avatar-red{background-color:var(--aui-avatar-red)}.aui-avatar-yellow{background-color:var(--aui-avatar-yellow)}.aui-avatar-green{background-color:var(--aui-avatar-green)}.aui-avatar-blue{background-color:var(--aui-avatar-blue)}.aui-avatar-purple{background-color:var(--aui-avatar-purple)}.aui-avatar-xxs{width:12px;height:12px;line-height:12px;font-size:9.6px}.aui-avatar-xs{width:16px;height:16px;line-height:16px;font-size:12.8px}.aui-avatar-s{width:24px;height:24px;line-height:24px;font-size:19.2px}.aui-avatar-m{width:32px;height:32px;line-height:32px;font-size:25.6px}.aui-avatar-l{width:48px;height:48px;line-height:48px;font-size:38.4px}.aui-avatar-xl{width:64px;height:64px;line-height:64px;font-size:51.2px}.aui-avatar-xxl{width:128px;height:128px;line-height:128px;font-size:102.4px}.aui-icon-xxs{width:8px;height:8px}.aui-icon-xs{width:12px;height:12px}.aui-icon-s{width:16px;height:16px}.aui-icon-m{width:24px;height:24px}.aui-icon-l{width:32px;height:32px}.aui-icon-xl{width:48px;height:48px}.aui-icon-xxl{width:64px;height:64px}.aui-pa-none{padding:0}.aui-pa-xxs{padding:var(--aui-xxs)}.aui-pa-xs{padding:var(--aui-xs)}.aui-pa-s{padding:var(--aui-s)}.aui-pa-m{padding:var(--aui-m)}.aui-pa-l{padding:var(--aui-l)}.aui-pa-xl{padding:var(--aui-xl)}.aui-pa-xxl{padding:var(--aui-xxl)}.aui-pt-none{padding-top:0}.aui-pt-xxs{padding-top:var(--aui-xxs)}.aui-pt-xs{padding-top:var(--aui-xs)}.aui-pt-s{padding-top:var(--aui-s)}.aui-pt-m{padding-top:var(--aui-m)}.aui-pt-l{padding-top:var(--aui-l)}.aui-pt-xl{padding-top:var(--aui-xl)}.aui-pt-xxl{padding-top:var(--aui-xxl)}.aui-pb-none{padding-bottom:0}.aui-pb-xxs{padding-bottom:var(--aui-xxs)}.aui-pb-xs{padding-bottom:var(--aui-xs)}.aui-pb-s{padding-bottom:var(--aui-s)}.aui-pb-m{padding-bottom:var(--aui-m)}.aui-pb-l{padding-bottom:var(--aui-l)}.aui-pb-xl{padding-bottom:var(--aui-xl)}.aui-pb-xxl{padding-bottom:var(--aui-xxl)}.aui-pl-none{padding-left:0}.aui-pl-xxs{padding-left:var(--aui-xxs)}.aui-pl-xs{padding-left:var(--aui-xs)}.aui-pl-s{padding-left:var(--aui-s)}.aui-pl-m{padding-left:var(--aui-m)}.aui-pl-l{padding-left:var(--aui-l)}.aui-pl-xl{padding-left:var(--aui-xl)}.aui-pl-xxl{padding-left:var(--aui-xxl)}.aui-pr-none{padding-right:0}.aui-pr-xxs{padding-right:var(--aui-xxs)}.aui-pr-xs{padding-right:var(--aui-xs)}.aui-pr-s{padding-right:var(--aui-s)}.aui-pr-m{padding-right:var(--aui-m)}.aui-pr-l{padding-right:var(--aui-l)}.aui-pr-xl{padding-right:var(--aui-xl)}.aui-pr-xxl{padding-right:var(--aui-xxl)}.aui-ma-auto{margin:auto}.aui-ma-none{margin:0}.aui-ma-xxs{margin:var(--aui-xxs)}.aui-ma-xs{margin:var(--aui-xs)}.aui-ma-s{margin:var(--aui-s)}.aui-ma-m{margin:var(--aui-m)}.aui-ma-l{margin:var(--aui-l)}.aui-ma-xl{margin:var(--aui-xl)}.aui-ma-xxl{margin:var(--aui-xxl)}.aui-mt-auto{margin-top:auto}.aui-mt-none{margin-top:0}.aui-mt-xxs{margin-top:var(--aui-xxs)}.aui-mt-xs{margin-top:var(--aui-xs)}.aui-mt-s{margin-top:var(--aui-s)}.aui-mt-m{margin-top:var(--aui-m)}.aui-mt-l{margin-top:var(--aui-l)}.aui-mt-xl{margin-top:var(--aui-xl)}.aui-mt-xxl{margin-top:var(--aui-xxl)}.aui-mb-auto{margin-bottom:auto}.aui-mb-none{margin-bottom:0}.aui-mb-xxs{margin-bottom:var(--aui-xxs)}.aui-mb-xs{margin-bottom:var(--aui-xs)}.aui-mb-s{margin-bottom:var(--aui-s)}.aui-mb-m{margin-bottom:var(--aui-m)}.aui-mb-l{margin-bottom:var(--aui-l)}.aui-mb-xl{margin-bottom:var(--aui-xl)}.aui-mb-xxl{margin-bottom:var(--aui-xxl)}.aui-ml-auto{margin-left:auto}.aui-ml-none{margin-left:0}.aui-ml-xxs{margin-left:var(--aui-xxs)}.aui-ml-xs{margin-left:var(--aui-xs)}.aui-ml-s{margin-left:var(--aui-s)}.aui-ml-m{margin-left:var(--aui-m)}.aui-ml-l{margin-left:var(--aui-l)}.aui-ml-xl{margin-left:var(--aui-xl)}.aui-ml-xxl{margin-left:var(--aui-xxl)}.aui-mr-auto{margin-right:auto}.aui-mr-none{margin-right:0}.aui-mr-xxs{margin-right:var(--aui-xxs)}.aui-mr-xs{margin-right:var(--aui-xs)}.aui-mr-s{margin-right:var(--aui-s)}.aui-mr-m{margin-right:var(--aui-m)}.aui-mr-l{margin-right:var(--aui-l)}.aui-mr-xl{margin-right:var(--aui-xl)}.aui-mr-xxl{margin-right:var(--aui-xxl)}.aui-gap-none{gap:0}.aui-gap-xxs{gap:var(--aui-xxs)}.aui-gap-xs{gap:var(--aui-xs)}.aui-gap-s{gap:var(--aui-s)}.aui-gap-m{gap:var(--aui-m)}.aui-gap-l{gap:var(--aui-l)}.aui-gap-xl{gap:var(--aui-xl)}.aui-gap-xxl{gap:var(--aui-xxl)}.aui-w-full{width:100%}.aui-w-fit{width:fit-content}.aui-w-min{width:min-content}.aui-w-max{width:max-content}.aui-mw-full{max-width:100%}.aui-mw-fit{max-width:fit-content}.aui-mw-min{max-width:min-content}.aui-mw-max{max-width:max-content}.aui-h-full{height:100%}.aui-h-fit{height:fit-content}.aui-h-min{height:min-content}.aui-h-max{height:max-content}.aui-mh-full{max-height:100%}.aui-mh-fit{max-height:fit-content}.aui-mh-min{max-height:min-content}.aui-mh-max{max-height:max-content}.aui-radius-none{border-radius:var(--aui-radius-none)}.aui-radius-subtle{border-radius:var(--aui-radius-subtle)}.aui-radius-rounded{border-radius:var(--aui-radius-rounded)}.aui-radius-max{border-radius:var(--aui-radius-max)}.aui-ba{border:1px solid var(--aui-default-border)}.aui-bt{border-top:1px solid var(--aui-default-border)}.aui-br{border-right:1px solid var(--aui-default-border)}.aui-bb{border-bottom:1px solid var(--aui-default-border)}.aui-bl{border-left:1px solid var(--aui-default-border)}.aui-bw-none{border-width:0px}.aui-bw-xs{border-width:1px}.aui-bw-s{border-width:2px}.aui-bw-m{border-width:4px}.aui-bw-l{border-width:8px}.aui-bw-xl{border-width:16px}.aui-bs-solid{border-style:solid}.aui-bs-dotted{border-style:dotted}.aui-bs-dashed{border-style:dashed}.aui-bs-none{border-style:none}.aui-bc-default{border-color:var(--aui-default-border)}.aui-bc-primary{border-color:var(--aui-color-default)}.aui-shadow-subtle{box-shadow:var(--aui-subtle-box-shadow)}.aui-shadow-floating{box-shadow:var(--aui-floating-box-shadow)}.aui-shadow-none{box-shadow:none}.aui-op-none{opacity:0}.aui-op-disabled{opacity:var(--aui-opacity-disabled)}.aui-op-dim{opacity:var(--aui-opacity-dim)}.aui-op-full{opacity:1}.aui-f-xxs{font-size:10px}.aui-f-xs{font-size:12px}.aui-f-s{font-size:14px}.aui-f-default{font-size:16px}.aui-f-m{font-size:20px}.aui-f-l{font-size:24px}.aui-f-xl{font-size:32px}.aui-f-xxl{font-size:48px}.aui-fw-1{font-weight:100}.aui-fw-2{font-weight:200}.aui-fw-3{font-weight:300}.aui-fw-4{font-weight:400}.aui-fw-5{font-weight:500}.aui-fw-6{font-weight:600}.aui-fw-7{font-weight:700}.aui-fw-8{font-weight:800}.aui-fw-9{font-weight:900}.aui-ta-left{text-align:left}.aui-ta-right{text-align:right}.aui-ta-center{text-align:center}.aui-it{font-style:italic}.aui-c-default{color:var(--aui-color-default)}.aui-c-muted{color:var(--aui-color-muted)}.aui-c-inherit{color:inherit}.aui-c-transparent{color:rgba(0,0,0,0)}.aui-bg-default{background-color:var(--aui-default-background)}.aui-bg-muted{background-color:var(--aui-static-background)}.aui-bg-inherit{background-color:inherit}.aui-bg-transparent{background-color:rgba(0,0,0,0)}.aui-ov-scroll{overflow:scroll}.aui-ov-x-scroll{overflow-x:scroll}.aui-ov-y-scroll{overflow-y:scroll}.aui-ov-hidden{overflow:hidden}.aui-ov-x-hidden{overflow-x:hidden}.aui-ov-y-hidden{overflow-y:hidden}.aui-z-auto{z-index:auto}.aui-z-floating{z-index:100}.aui-z-nav{z-index:1000}.aui-z-max{z-index:10000}.aui-cursor-auto{cursor:auto}.aui-cursor-pointer{cursor:pointer}.aui-select-icon{--size: 10px;color:var(--aui-color-muted);width:var(--size);height:var(--size);position:absolute;top:calc(50% + 1px);transform:translateY(-50%);right:var(--size);pointer-events:none}
+:root{--aui-xxs: 2px;--aui-xs: 4px;--aui-s: 8px;--aui-m: 16px;--aui-l: 24px;--aui-xl: 32px;--aui-xxl: 64px;--aui-moon-gray: #ccc;--aui-dark-gray: #555;--aui-darkest-gray: #333;--aui-obsidian: #121212;--aui-focus-ring-color: #b2dbfa;--aui-color-default: black;--aui-color-muted: var(--aui-dark-gray);--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-opacity-disabled: 0.5;--aui-opacity-dim: 0.75;--aui-default-transition: 0.25s ease-in-out;--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);--aui-radius-none: 0;--aui-radius-subtle: 4px;--aui-radius-rounded: 8px;--aui-radius-max: 10000px;--aui-button-primary-background: black;--aui-button-primary-color: white;--aui-button-secondary-border-hover: var(--aui-darkest-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);--aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);--aui-success-background: #dff2e1;--aui-success-color: #1b5e20;--aui-success-border: #b2dfb1;--aui-warning-background: #fceeb6;--aui-warning-color: #b23904;--aui-warning-border: #e6d5a2;--aui-error-background: #fdecea;--aui-error-color: #b71c1c;--aui-error-border: #f5b7b7;--aui-info-background: #e3f2fd;--aui-info-color: #0d47a1;--aui-info-border: #90caf9;--aui-avatar-purple: #bc54d6;--aui-avatar-blue: #618bdc;--aui-avatar-red: #ee6060;--aui-avatar-green: #add386;--aui-avatar-yellow: #f5c76d;--aui-static-background: #e8e8e8;--aui-static-color: var(--aui-color-default);--aui-static-border: var(--aui-default-border);--aui-layer-backdrop-background: rgba(200, 200, 200, 0.6);--aui-link-color: #0070ff}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-color-default: white;--aui-color-muted: var(--aui-moon-gray);--aui-default-background: var(--aui-obsidian);--aui-default-border: var(--aui-dark-gray);--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);--aui-button-primary-background: white;--aui-button-primary-color: var(--aui-obsidian);--aui-button-secondary-border-hover: var(--aui-moon-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);--aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);--aui-success-background: #2a5733;--aui-success-color: #d9efd8;--aui-success-border: #439e4a;--aui-warning-background: #736230;--aui-warning-color: #fff6d1;--aui-warning-border: #927a3b;--aui-error-background: #663232;--aui-error-color: #f9dadc;--aui-error-border: #8d2a2a;--aui-info-background: #335f72;--aui-info-color: #d4f1f5;--aui-info-border: #1d8ea4;--aui-static-background: var(--aui-darkest-gray);--aui-static-color: var(--aui-color-default);--aui-static-border: var(--aui-default-border);--aui-avatar-purple: #771199;--aui-avatar-blue: #0b4cce;--aui-avatar-red: #bb1111;--aui-avatar-green: #307040;--aui-avatar-yellow: #bb8822;--aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff}*{box-sizing:border-box}html{font-family:system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%;line-height:1.15;tab-size:4;-webkit-font-smoothing:antialiased}body{margin:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.aui-content-success{background-color:var(--aui-success-background);color:var(--aui-success-color);border-color:var(--aui-success-border)}.aui-content-warning{background-color:var(--aui-warning-background);color:var(--aui-warning-color);border-color:var(--aui-warning-border)}.aui-content-error{background-color:var(--aui-error-background);color:var(--aui-error-color);border-color:var(--aui-error-border)}.aui-content-info{background-color:var(--aui-info-background);color:var(--aui-info-color);border-color:var(--aui-info-border)}.aui-content-static{background-color:var(--aui-static-background);color:var(--aui-static-color);border-color:var(--aui-static-border)}.aui-alert,.aui-badge{border-style:solid;border-width:1px}.aui-action{color:inherit;text-decoration:none;cursor:pointer;outline-color:var(--aui-link-color)}.aui-action:focus:not(:focus-visible){outline:none}.aui-button{background:none;border:none;padding:0}.aui-button:disabled{cursor:default !important;opacity:var(--aui-opacity-disabled)}.aui-button-primary{background-color:var(--aui-button-primary-background);border:1px solid var(--aui-button-primary-background);color:var(--aui-button-primary-color);box-shadow:var(--aui-button-primary-box-shadow);transition:opacity var(--aui-default-transition)}.aui-button-secondary{color:var(--aui-color-default);background-color:var(--aui-default-background);border:1px solid var(--aui-default-border);box-shadow:var(--aui-subtle-box-shadow);transition:border var(--aui-default-transition)}.aui-dim,.aui-undim{transition:opacity var(--aui-default-transition)}.aui-dim{opacity:1}.aui-undim{opacity:var(--aui-opacity-dim)}.aui-link{color:var(--aui-link-color);transition:opacity var(--aui-default-transition)}@media(hover: hover){.aui-button-primary:not([disabled]):hover,.aui-dim:not([disabled]):hover,.aui-link:hover{opacity:var(--aui-opacity-dim)}.aui-button-secondary:not([disabled]):hover{border-color:var(--aui-button-secondary-border-hover)}.aui-undim:not([disabled]):hover{opacity:1}}.aui-input-base{outline:none;border:none;background-color:inherit;color:inherit;padding:var(--aui-s);font-weight:400}.aui-input-base::selection{background-color:var(--aui-focus-ring-color)}.aui-input,.aui-select-container{transition:box-shadow var(--aui-default-transition);border:1px solid var(--aui-default-border);box-shadow:var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-opacity-disabled);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select{width:100%;color:inherit;border:none;outline:none;box-shadow:none;cursor:pointer;background-color:rgba(0,0,0,0);padding:var(--aui-s) 28px var(--aui-s) var(--aui-s);font-weight:600;appearance:none;-webkit-appearance:none;-moz-appearance:none}.aui-select-disabled *{opacity:var(--aui-opacity-disabled);cursor:default}.aui-layer-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--aui-layer-backdrop-background)}.aui-icon *{color:currentColor;fill:currentColor}.aui-spinner{animation:aui-spinner-animation 1s linear infinite;transform-origin:center;height:var(--aui-l)}@keyframes aui-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l)}.aui-carousel-dots{position:absolute;bottom:var(--aui-s);transform:translateX(-50%);left:50%}.aui-carousel-dot{width:var(--aui-m);height:var(--aui-s)}.aui-pos-static{position:static}.aui-pos-relative{position:relative}.aui-pos-absolute{position:absolute}.aui-pos-fixed{position:fixed}.aui-pos-sticky{position:sticky}.aui-flex-x{display:flex;flex-direction:row}.aui-flex-y{display:flex;flex-direction:column}.aui-flex--x{display:flex;flex-direction:row-reverse}.aui-flex--y{display:flex;flex-direction:column-reverse}.aui-flex-wrap{flex-wrap:wrap}.aui-align-start{align-items:flex-start}.aui-align-center{align-items:center}.aui-align-end{align-items:flex-end}.aui-justify-start{justify-content:flex-start}.aui-justify-center{justify-content:center}.aui-justify-end{justify-content:flex-end}.aui-justify-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-stretch-even{flex:1 1 0}.aui-stretch-grow{flex-grow:1}.aui-stretch-min{flex-shrink:1}.aui-stretch-max{flex:0 0 100%}.aui-avatar-red{background-color:var(--aui-avatar-red)}.aui-avatar-yellow{background-color:var(--aui-avatar-yellow)}.aui-avatar-green{background-color:var(--aui-avatar-green)}.aui-avatar-blue{background-color:var(--aui-avatar-blue)}.aui-avatar-purple{background-color:var(--aui-avatar-purple)}.aui-avatar-xxs{width:12px;height:12px;line-height:12px;font-size:9.6px}.aui-avatar-xs{width:16px;height:16px;line-height:16px;font-size:12.8px}.aui-avatar-s{width:24px;height:24px;line-height:24px;font-size:19.2px}.aui-avatar-m{width:32px;height:32px;line-height:32px;font-size:25.6px}.aui-avatar-l{width:48px;height:48px;line-height:48px;font-size:38.4px}.aui-avatar-xl{width:64px;height:64px;line-height:64px;font-size:51.2px}.aui-avatar-xxl{width:128px;height:128px;line-height:128px;font-size:102.4px}.aui-icon-xxs{width:8px;height:8px}.aui-icon-xs{width:12px;height:12px}.aui-icon-s{width:16px;height:16px}.aui-icon-m{width:24px;height:24px}.aui-icon-l{width:32px;height:32px}.aui-icon-xl{width:48px;height:48px}.aui-icon-xxl{width:64px;height:64px}.aui-pa-none{padding:0}.aui-pa-xxs{padding:var(--aui-xxs)}.aui-pa-xs{padding:var(--aui-xs)}.aui-pa-s{padding:var(--aui-s)}.aui-pa-m{padding:var(--aui-m)}.aui-pa-l{padding:var(--aui-l)}.aui-pa-xl{padding:var(--aui-xl)}.aui-pa-xxl{padding:var(--aui-xxl)}.aui-pt-none{padding-top:0}.aui-pt-xxs{padding-top:var(--aui-xxs)}.aui-pt-xs{padding-top:var(--aui-xs)}.aui-pt-s{padding-top:var(--aui-s)}.aui-pt-m{padding-top:var(--aui-m)}.aui-pt-l{padding-top:var(--aui-l)}.aui-pt-xl{padding-top:var(--aui-xl)}.aui-pt-xxl{padding-top:var(--aui-xxl)}.aui-pb-none{padding-bottom:0}.aui-pb-xxs{padding-bottom:var(--aui-xxs)}.aui-pb-xs{padding-bottom:var(--aui-xs)}.aui-pb-s{padding-bottom:var(--aui-s)}.aui-pb-m{padding-bottom:var(--aui-m)}.aui-pb-l{padding-bottom:var(--aui-l)}.aui-pb-xl{padding-bottom:var(--aui-xl)}.aui-pb-xxl{padding-bottom:var(--aui-xxl)}.aui-pl-none{padding-left:0}.aui-pl-xxs{padding-left:var(--aui-xxs)}.aui-pl-xs{padding-left:var(--aui-xs)}.aui-pl-s{padding-left:var(--aui-s)}.aui-pl-m{padding-left:var(--aui-m)}.aui-pl-l{padding-left:var(--aui-l)}.aui-pl-xl{padding-left:var(--aui-xl)}.aui-pl-xxl{padding-left:var(--aui-xxl)}.aui-pr-none{padding-right:0}.aui-pr-xxs{padding-right:var(--aui-xxs)}.aui-pr-xs{padding-right:var(--aui-xs)}.aui-pr-s{padding-right:var(--aui-s)}.aui-pr-m{padding-right:var(--aui-m)}.aui-pr-l{padding-right:var(--aui-l)}.aui-pr-xl{padding-right:var(--aui-xl)}.aui-pr-xxl{padding-right:var(--aui-xxl)}.aui-ma-auto{margin:auto}.aui-ma-none{margin:0}.aui-ma-xxs{margin:var(--aui-xxs)}.aui-ma-xs{margin:var(--aui-xs)}.aui-ma-s{margin:var(--aui-s)}.aui-ma-m{margin:var(--aui-m)}.aui-ma-l{margin:var(--aui-l)}.aui-ma-xl{margin:var(--aui-xl)}.aui-ma-xxl{margin:var(--aui-xxl)}.aui-mt-auto{margin-top:auto}.aui-mt-none{margin-top:0}.aui-mt-xxs{margin-top:var(--aui-xxs)}.aui-mt-xs{margin-top:var(--aui-xs)}.aui-mt-s{margin-top:var(--aui-s)}.aui-mt-m{margin-top:var(--aui-m)}.aui-mt-l{margin-top:var(--aui-l)}.aui-mt-xl{margin-top:var(--aui-xl)}.aui-mt-xxl{margin-top:var(--aui-xxl)}.aui-mb-auto{margin-bottom:auto}.aui-mb-none{margin-bottom:0}.aui-mb-xxs{margin-bottom:var(--aui-xxs)}.aui-mb-xs{margin-bottom:var(--aui-xs)}.aui-mb-s{margin-bottom:var(--aui-s)}.aui-mb-m{margin-bottom:var(--aui-m)}.aui-mb-l{margin-bottom:var(--aui-l)}.aui-mb-xl{margin-bottom:var(--aui-xl)}.aui-mb-xxl{margin-bottom:var(--aui-xxl)}.aui-ml-auto{margin-left:auto}.aui-ml-none{margin-left:0}.aui-ml-xxs{margin-left:var(--aui-xxs)}.aui-ml-xs{margin-left:var(--aui-xs)}.aui-ml-s{margin-left:var(--aui-s)}.aui-ml-m{margin-left:var(--aui-m)}.aui-ml-l{margin-left:var(--aui-l)}.aui-ml-xl{margin-left:var(--aui-xl)}.aui-ml-xxl{margin-left:var(--aui-xxl)}.aui-mr-auto{margin-right:auto}.aui-mr-none{margin-right:0}.aui-mr-xxs{margin-right:var(--aui-xxs)}.aui-mr-xs{margin-right:var(--aui-xs)}.aui-mr-s{margin-right:var(--aui-s)}.aui-mr-m{margin-right:var(--aui-m)}.aui-mr-l{margin-right:var(--aui-l)}.aui-mr-xl{margin-right:var(--aui-xl)}.aui-mr-xxl{margin-right:var(--aui-xxl)}.aui-gap-none{gap:0}.aui-gap-xxs{gap:var(--aui-xxs)}.aui-gap-xs{gap:var(--aui-xs)}.aui-gap-s{gap:var(--aui-s)}.aui-gap-m{gap:var(--aui-m)}.aui-gap-l{gap:var(--aui-l)}.aui-gap-xl{gap:var(--aui-xl)}.aui-gap-xxl{gap:var(--aui-xxl)}.aui-w-full{width:100%}.aui-w-fit{width:fit-content}.aui-w-min{width:min-content}.aui-w-max{width:max-content}.aui-mw-full{max-width:100%}.aui-mw-fit{max-width:fit-content}.aui-mw-min{max-width:min-content}.aui-mw-max{max-width:max-content}.aui-h-full{height:100%}.aui-h-fit{height:fit-content}.aui-h-min{height:min-content}.aui-h-max{height:max-content}.aui-mh-full{max-height:100%}.aui-mh-fit{max-height:fit-content}.aui-mh-min{max-height:min-content}.aui-mh-max{max-height:max-content}.aui-radius-none{border-radius:var(--aui-radius-none)}.aui-radius-subtle{border-radius:var(--aui-radius-subtle)}.aui-radius-rounded{border-radius:var(--aui-radius-rounded)}.aui-radius-max{border-radius:var(--aui-radius-max)}.aui-ba{border:1px solid var(--aui-default-border)}.aui-bt{border-top:1px solid var(--aui-default-border)}.aui-br{border-right:1px solid var(--aui-default-border)}.aui-bb{border-bottom:1px solid var(--aui-default-border)}.aui-bl{border-left:1px solid var(--aui-default-border)}.aui-bw-none{border-width:0px}.aui-bw-xs{border-width:1px}.aui-bw-s{border-width:2px}.aui-bw-m{border-width:4px}.aui-bw-l{border-width:8px}.aui-bw-xl{border-width:16px}.aui-bs-solid{border-style:solid}.aui-bs-dotted{border-style:dotted}.aui-bs-dashed{border-style:dashed}.aui-bs-none{border-style:none}.aui-bc-default{border-color:var(--aui-default-border)}.aui-bc-primary{border-color:var(--aui-color-default)}.aui-shadow-subtle{box-shadow:var(--aui-subtle-box-shadow)}.aui-shadow-floating{box-shadow:var(--aui-floating-box-shadow)}.aui-shadow-none{box-shadow:none}.aui-op-none{opacity:0}.aui-op-disabled{opacity:var(--aui-opacity-disabled)}.aui-op-dim{opacity:var(--aui-opacity-dim)}.aui-op-full{opacity:1}.aui-f-xxs{font-size:10px}.aui-f-xs{font-size:12px}.aui-f-s{font-size:14px}.aui-f-default{font-size:16px}.aui-f-m{font-size:20px}.aui-f-l{font-size:24px}.aui-f-xl{font-size:32px}.aui-f-xxl{font-size:48px}.aui-fw-1{font-weight:100}.aui-fw-2{font-weight:200}.aui-fw-3{font-weight:300}.aui-fw-4{font-weight:400}.aui-fw-5{font-weight:500}.aui-fw-6{font-weight:600}.aui-fw-7{font-weight:700}.aui-fw-8{font-weight:800}.aui-fw-9{font-weight:900}.aui-ta-left{text-align:left}.aui-ta-right{text-align:right}.aui-ta-center{text-align:center}.aui-it{font-style:italic}.aui-c-default{color:var(--aui-color-default)}.aui-c-muted{color:var(--aui-color-muted)}.aui-c-inherit{color:inherit}.aui-c-transparent{color:rgba(0,0,0,0)}.aui-bg-default{background-color:var(--aui-default-background)}.aui-bg-muted{background-color:var(--aui-static-background)}.aui-bg-inherit{background-color:inherit}.aui-bg-transparent{background-color:rgba(0,0,0,0)}.aui-ov-scroll{overflow:scroll}.aui-ov-x-scroll{overflow-x:scroll}.aui-ov-y-scroll{overflow-y:scroll}.aui-ov-hidden{overflow:hidden}.aui-ov-x-hidden{overflow-x:hidden}.aui-ov-y-hidden{overflow-y:hidden}.aui-z-auto{z-index:auto}.aui-z-floating{z-index:100}.aui-z-nav{z-index:1000}.aui-z-max{z-index:10000}.aui-cursor-auto{cursor:auto}.aui-cursor-pointer{cursor:pointer}.aui-select-icon{--size: 10px;color:var(--aui-color-muted);width:var(--size);height:var(--size);position:absolute;top:calc(50% + 1px);transform:translateY(-50%);right:var(--size);pointer-events:none}

package/utils/transformVfx.js

@@ -20,6 +20,10 @@ var transformers = {
         var justify = _a.justify;
         return "aui-justify-".concat(justify);
     },
+    stretch: function (_a) {
+        var stretch = _a.stretch;
+        return "aui-stretch-".concat(stretch);
+    },
     wrap: function () { return "aui-flex-wrap"; },
     overflow: function (_a) {
         var overflow = _a.overflow;

package/utils/types.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export type Children = React.ReactNode | React.ReactNode[];
+export type ReadonlyableArray<T> = readonly T[] | T[];
+export type Children = React.ReactNode | ReadonlyableArray<React.ReactNode>;
 export type ContentType = "success" | "warning" | "error" | "info" | "static";
 export type Style = React.CSSProperties;
 export type SizeDimension = "full" | "fit" | "min" | "max";
@@ -17,8 +18,10 @@ export type Vfx = {
     gap?: SpacingSize;
     /** Alignment orthogonal to the selected axis (Equivalent to align-items) */
     align?: "start" | "center" | "end";
-    /** How to content the children (Equivalent to justify-content) */
+    /** How to space the children (Equivalent to justify-content) */
     justify?: "start" | "center" | "between" | "around" | "end";
+    /** Flex presets to determine how a node stretches within its container */
+    stretch?: "even" | "grow" | "min" | "max";
     /** Whether to allow wrapping of children */
     wrap?: boolean;
     /** How to handle overflow in the container */
@@ -63,7 +66,7 @@ export type Vfx = {
     maxWidth?: SizeDimension;
     /** Height of the content */
     height?: SizeDimension;
-    /** Maximum of the content */
+    /** Maximum height of the content */
     maxHeight?: SizeDimension;
     /** Border radius of the content */
     radius?: "none" | "subtle" | "rounded" | "max";