@adamjanicki/ui 1.6.2 → 1.6.3

package/components/Avatar/Avatar.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { CornerType, SizeToken } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = Omit<BoxProps, "children"> & {
+    /**
+     * How to treat the border radius of the avatar
+     * @default "rounded"
+     */
+    corners?: CornerType;
+    /**
+     * Size of the avatar
+     * @default "s"
+     */
+    size?: SizeToken | number;
+    /**
+     * Image to be used in the background
+     */
+    backgroundImage?: string;
+    /**
+     * Username to render the first char of,
+     * or as a fallback if there's a 404 getting the backgroundImage url
+     */
+    username: string;
+};
+declare const Avatar: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Avatar;

package/components/Avatar/Avatar.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import Box from "../Box/Box";
+import { classNames } from "../../functions";
+var Avatar = React.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? "s" : _b, backgroundImage = _a.backgroundImage, className = _a.className, style = _a.style, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, username = _a.username, rest = __rest(_a, ["size", "backgroundImage", "className", "style", "corners", "username"]);
+    var _d = useState(false), imageError = _d[0], setImageError = _d[1];
+    var useFallback = imageError || !backgroundImage;
+    var color = chooseColor(username);
+    var avatarClassName = "aui-avatar aui-corners--".concat(corners);
+    if (useFallback) {
+        avatarClassName = classNames(avatarClassName, "aui-avatar-".concat(color));
+    }
+    var imageClassName = undefined;
+    var avatarStyle = {};
+    var imageStyle = undefined;
+    if (typeof size === "number") {
+        avatarStyle = { width: size, height: size, fontSize: 0.8 * size };
+        imageStyle = { width: size, height: size };
+    }
+    else {
+        avatarClassName = classNames(avatarClassName, "aui-avatar-".concat(size));
+        imageClassName = "aui-avatar-".concat(size);
+    }
+    var fallbackCharacter = username[0];
+    return (_jsx(Box, __assign({ className: classNames(avatarClassName, className), style: __assign(__assign({}, avatarStyle), style) }, rest, { ref: ref, children: !useFallback ? (_jsx("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
+function chooseColor(username) {
+    return colorOptions[username.split("").reduce(function (sum, char) { return sum + char.charCodeAt(0); }, 0) %
+        colorOptions.length];
+}
+export default Avatar;

package/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+import Avatar from "./Avatar";
+export default Avatar;

package/components/Avatar/index.js

@@ -0,0 +1,2 @@
+import Avatar from "./Avatar";
+export default Avatar;

package/components/Button/Button.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import type { CornerType, Layout } from "../../utils/types";
-type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+import { Props as IconProps } from "../Icon/Icon";
+type BaseButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type DefaultButtonProps = BaseButtonProps & {
     /**
      * Additional styles to apply to the layout that are transformed to classNames to be easier to override if needed
      */
@@ -25,6 +27,26 @@ export type VisualButtonProps = {
 };
 type ButtonProps = DefaultButtonProps & VisualButtonProps;
 export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<DefaultButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type IconButtonProps = Omit<BaseButtonProps, "children"> & {
+    /**
+     * The hover effect to play when the user hovers over the button
+     * @default "dim"
+     */
+    variant?: "dim" | "undim";
+    /**
+     * Which icon to render in the button
+     */
+    icon: IconProps["icon"];
+    /**
+     * The size of the icon
+     */
+    size?: IconProps["size"];
+    /**
+     * Other props to pass to the icon element
+     */
+    iconProps?: Omit<IconProps, "icon" | "size">;
+};
+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 getButtonClassName: ({ variant, corners, size, }: VisualButtonProps) => string;
 export default Button;

package/components/Button/Button.js

@@ -24,10 +24,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import classNames from "../../functions/classNames";
 import transformLayout from "../../utils/transformLayout";
+import Icon from "../Icon/Icon";
 export var UnstyledButton = React.forwardRef(function (_a, ref) {
     var className = _a.className, layout = _a.layout, props = __rest(_a, ["className", "layout"]);
     return (_jsx("button", __assign({}, props, { className: classNames("aui-action aui-button", transformLayout(layout), className), ref: ref })));
 });
+export var IconButton = React.forwardRef(function (_a, ref) {
+    var icon = _a.icon, size = _a.size, iconProps = _a.iconProps, _b = _a.variant, variant = _b === void 0 ? "dim" : _b, className = _a.className, rest = __rest(_a, ["icon", "size", "iconProps", "variant", "className"]);
+    return (_jsx(UnstyledButton, __assign({}, rest, { layout: { axis: "x", align: "center", justify: "center" }, className: classNames("aui-".concat(variant), className), ref: ref, children: _jsx(Icon, __assign({ icon: icon, size: size }, iconProps)) })));
+});
 var Button = React.forwardRef(function (_a, ref) {
     var variant = _a.variant, layout = _a.layout, corners = _a.corners, className = _a.className, size = _a.size, rest = __rest(_a, ["variant", "layout", "corners", "className", "size"]);
     return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), transformLayout(layout), className), ref: ref })));

package/components/Button/index.d.ts

@@ -1,3 +1,3 @@
-import Button, { UnstyledButton } from "./Button";
-export { UnstyledButton };
+import Button, { UnstyledButton, IconButton } from "./Button";
+export { UnstyledButton, IconButton };
 export default Button;

package/components/Button/index.js

@@ -1,3 +1,3 @@
-import Button, { UnstyledButton } from "./Button";
-export { UnstyledButton };
+import Button, { UnstyledButton, IconButton } from "./Button";
+export { UnstyledButton, IconButton };
 export default Button;

package/components/Icon/Icon.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { type IconType } from "./icons";
+import type { SizeToken } from "../../utils/types";
 export type Props = Omit<React.DetailedHTMLProps<React.SVGAttributes<SVGSVGElement>, SVGSVGElement>, "children" | "viewBox"> & {
     /**
      * The version of icon to render
@@ -9,7 +10,7 @@ export type Props = Omit<React.DetailedHTMLProps<React.SVGAttributes<SVGSVGEleme
      * Size of the icon; will control both width and height
      * @default "s"
      */
-    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+    size?: SizeToken;
 };
 declare const Icon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default Icon;

package/components/Layer/Layer.d.ts

@@ -10,11 +10,6 @@ type Props = Omit<BoxProps, "children"> & {
      * IMPORTANT: the child must be able to accept a ref
      */
     children: React.ReactElement<any>;
-    /**
-     * [Optional] Whether to disable the escape key to close the layer
-     * @default false
-     */
-    disableEscape?: boolean;
     /**
      * [Optional] Whether to return focus to the element that triggered the layer
      * @default false

package/components/Layer/Layer.js

@@ -26,13 +26,11 @@ import { useFocusTrap, useScrollLock } from "../../hooks";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
 var Layer = React.forwardRef(function (_a, ref) {
-    var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, onClose = _a.onClose, children = _a.children, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b, onMouseDown = _a.onMouseDown, layout = _a.layout, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock", "onClose", "children", "className", "disableEscape", "onMouseDown", "layout"]);
+    var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, onClose = _a.onClose, children = _a.children, className = _a.className, onMouseDown = _a.onMouseDown, layout = _a.layout, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock", "onClose", "children", "className", "onMouseDown", "layout"]);
     var focusRef = useFocusTrap(true);
     // Lock and unlock on mount and unmount
     useScrollLock(!disableScrollLock);
     useEffect(function () {
-        if (disableEscape)
-            return;
         var handleEscape = function (event) {
             var _a;
             if (event.key === "Escape") {
@@ -47,7 +45,7 @@ var Layer = React.forwardRef(function (_a, ref) {
         return function () {
             document.removeEventListener("keydown", handleEscape);
         };
-    }, [onClose, disableEscape, returnFocusOnEscape]);
+    }, [onClose, returnFocusOnEscape]);
     return (_jsx(Box, __assign({ layout: __assign({ axis: "y", align: "center", justify: "center" }, layout) }, rest, { className: classNames("aui-layer-backdrop", className), onMouseDown: function (e) {
             onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
             onClose === null || onClose === void 0 ? void 0 : onClose();

package/components/Modal/Modal.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
+    /**
+     * Callback that fires when the user clicks the Ok button in the modal
+     */
+    onConfirm: () => void;
+    /**
+     * Label rendered in the ok/confirm button
+     * @default "Ok"
+     */
+    confirmLabel?: React.ReactNode;
+    /**
+     * Label rendered in the cancel button
+     * @default "Cancel"
+     */
+    cancelLabel?: React.ReactNode;
+    /**
+     * Whether the modal is open or not
+     */
+    open: boolean;
+    /**
+     * Callback that fires when the user closes the modal
+     */
+    onClose: () => void;
+    /**
+     * [Optional] Whether to return focus to the element that triggered the modal
+     * @default false
+     */
+    returnFocusOnEscape?: boolean;
+};
+declare const Modal: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/components/Modal/Modal.js

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Box from "../Box/Box";
+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, _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", "confirmLabel", "cancelLabel", "returnFocusOnEscape"]);
+    return (_jsx(Animated, { className: "aui-modal-backdrop", animated: open, animateTo: { style: { opacity: 1 } }, animateFrom: { style: { opacity: 0 } }, children: _jsx(Layer, { onClose: onClose, returnFocusOnEscape: returnFocusOnEscape, children: _jsxs(Box, { role: "dialog", "aria-modal": "true", className: "aui-modal aui-corners--rounded", layout: { axis: "y", padding: "m", gap: "m" }, children: [_jsx(Box, { layout: {
+                            axis: "x",
+                            align: "center",
+                            justify: "end",
+                            width: "full",
+                        }, children: _jsx(IconButton, { icon: "x", onClick: onClose }) }), _jsx(Box, __assign({}, rest, { ref: ref })), _jsxs(Box, { layout: {
+                            axis: "x",
+                            align: "center",
+                            justify: "end",
+                            width: "full",
+                            gap: "m",
+                        }, children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }), _jsx(Button, { onClick: function () {
+                                    onConfirm();
+                                    onClose();
+                                }, children: confirmLabel })] })] }) }) }));
+});
+export default Modal;

package/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import Modal from "./Modal";
+export default Modal;

package/components/Modal/index.js

@@ -0,0 +1,2 @@
+import Modal from "./Modal";
+export default Modal;

package/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Accordion } from "./components/Accordion";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
+export { default as Avatar } from "./components/Avatar";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Box } from "./components/Box";
@@ -16,6 +17,7 @@ export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
 export { default as Link } from "./components/Link";
 export * from "./components/Link";
+export { default as Modal } from "./components/Modal";
 export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";

package/index.js

@@ -2,6 +2,7 @@
 export { default as Accordion } from "./components/Accordion";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
+export { default as Avatar } from "./components/Avatar";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Box } from "./components/Box";
@@ -17,6 +18,7 @@ export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
 export { default as Link } from "./components/Link";
 export * from "./components/Link";
+export { default as Modal } from "./components/Modal";
 export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 // Hooks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Basic UI components and hooks for React in TypeScript",
   "type": "module",
   "main": "./index.js",

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-default-text-color: black;--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-disabled-opacity: 0.5;--aui-default-transition: 0.25s ease-in-out;--aui-default-opacity-dim: 0.75;--aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);--aui-sharp-radius: 0;--aui-rounded-radius: 8px;--aui-pill-radius: 9999px;--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-static-background: #e8e8e8;--aui-layer-backdrop-background: rgba(200, 200, 200, 0.7);--aui-link-color: #0070ff;--aui-select-icon: var(--aui-dark-gray)}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-default-text-color: white;--aui-default-background: var(--aui-obsidian);--aui-default-border: var(--aui-dark-gray);--aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.36);--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-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff;--aui-select-icon: var(--aui-moon-gray)}.aui-corners--rounded{border-radius:var(--aui-rounded-radius)}.aui-corners--pill{border-radius:var(--aui-pill-radius)}.aui-corners--sharp{border-radius:var(--aui-sharp-radius)}.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-default-text-color);border-color:var(--aui-default-border)}.aui-accordion{background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-container-box-shadow)}.aui-accordion-label{font-weight:600}.aui-accordion-hr{border:none;height:1px;background-color:var(--aui-default-border);width:100%;margin:0}.aui-accordion-arrow{color:var(--aui-select-icon)}.aui-alert{padding:var(--aui-m);border-style:solid;border-width:1px;font-weight:400}.aui-badge{padding:var(--aui-xxs) var(--aui-xs);border-style:solid;border-width:1px;font-weight:500;font-size:14px;width:fit-content}.aui-banner{padding:var(--aui-l) var(--aui-xl);border:none;font-weight:400;width:100%}.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-size--regular{padding:var(--aui-s);font-weight:600}.aui-button-size--small{padding:var(--aui-xs);font-size:12px;font-weight:600}.aui-button:disabled{cursor:default !important;opacity:var(--aui-disabled-opacity)}.aui-button--primary{background-color: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-default-text-color);background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);transition:box-shadow var(--aui-default-transition)}.aui-link{font-weight:600;color:var(--aui-link-color);transition:opacity var(--aui-default-transition)}@media(hover: hover){.aui-button--primary:not([disabled]):hover,.aui-link:hover{opacity:var(--aui-default-opacity-dim)}.aui-button--secondary:not([disabled]):hover{box-shadow:0 0 0 1px var(--aui-button-secondary-border-hover) inset,var(--aui-subtle-box-shadow)}}.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-icon-input{overflow:scroll}.aui-icon-input input{background-color:rgba(0,0,0,0);width:100%}.aui-input{transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-disabled-opacity);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select-container{position:relative;padding:0;width:fit-content;transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.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-disabled-opacity);cursor:default}.aui-layer-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;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{max-width:100%;position:relative;overflow:hidden;min-height:var(--aui-xxl);min-width:var(--aui-xxl);width:fit-content}.aui-carousel-item{flex:0 0 100%;width:100%;height:100%}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l);padding:0}.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);padding:0}.aui-flex-x,.aui-flex-y,.aui-flex--x,.aui-flex--y{display:flex}.aui-flex-x{flex-direction:row}.aui-flex-y{flex-direction:column}.aui-flex--x{flex-direction:row-reverse}.aui-flex--y{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-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-justify-end{justify-content:flex-end}.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-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-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-mt-auto{margin-top:auto}.aui-mb-auto{margin-bottom:auto}.aui-ml-auto{margin-left:auto}.aui-mr-auto{margin-right: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-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-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-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-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-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-select-icon{--size: 10px;color:var(--aui-select-icon);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-default-text-color: black;--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-disabled-opacity: 0.5;--aui-default-transition: 0.25s ease-in-out;--aui-default-opacity-dim: 0.75;--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);--aui-sharp-radius: 0;--aui-rounded-radius: 8px;--aui-pill-radius: 9999px;--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-layer-backdrop-background: rgba(200, 200, 200, 0.6);--aui-link-color: #0070ff;--aui-select-icon: var(--aui-dark-gray)}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-default-text-color: white;--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-avatar-purple: #771199;--aui-avatar-blue: #0b4cce;--aui-avatar-red: #bb1111;--aui-avatar-green: #307040;--aui-avatar-yellow: #bb8822;--aui-static-background: var(--aui-darkest-gray);--aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff;--aui-select-icon: var(--aui-moon-gray)}.aui-corners--rounded{border-radius:var(--aui-rounded-radius)}.aui-corners--pill{border-radius:var(--aui-pill-radius)}.aui-corners--sharp{border-radius:var(--aui-sharp-radius)}.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-default-text-color);border-color:var(--aui-default-border)}.aui-modal{color:var(--aui-default-text-color);background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-floating-box-shadow);border-radius:var(--aui-rounded-radius);min-width:40%;max-width:100%}.aui-accordion{background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow)}.aui-accordion-label{font-weight:600}.aui-accordion-hr{border:none;height:1px;background-color:var(--aui-default-border);width:100%;margin:0}.aui-accordion-arrow{color:var(--aui-select-icon)}.aui-alert{padding:var(--aui-m);border-style:solid;border-width:1px;font-weight:400}.aui-avatar{overflow:hidden;text-align:center;font-weight:600}.aui-badge{padding:var(--aui-xxs) var(--aui-xs);border-style:solid;border-width:1px;font-weight:500;font-size:14px;width:fit-content}.aui-banner{padding:var(--aui-l) var(--aui-xl);border:none;font-weight:400;width:100%}.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-size--regular{padding:var(--aui-s);font-weight:600}.aui-button-size--small{padding:var(--aui-xs);font-size:12px;font-weight:600}.aui-button:disabled{cursor:default !important;opacity:var(--aui-disabled-opacity)}.aui-button--primary{background-color: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-default-text-color);background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);transition:box-shadow var(--aui-default-transition)}.aui-dim,.aui-undim{transition:opacity var(--aui-default-transition)}.aui-dim{opacity:1}.aui-undim{opacity:var(--aui-default-opacity-dim)}.aui-link{font-weight:600;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-default-opacity-dim)}.aui-button--secondary:not([disabled]):hover{box-shadow:0 0 0 1px var(--aui-button-secondary-border-hover) inset,var(--aui-subtle-box-shadow)}.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-icon-input{overflow:scroll}.aui-icon-input input{background-color:rgba(0,0,0,0);width:100%}.aui-input{transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-disabled-opacity);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select-container{position:relative;padding:0;width:fit-content;transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.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-disabled-opacity);cursor:default}.aui-modal-backdrop,.aui-layer-backdrop{z-index:10000}.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{max-width:100%;position:relative;overflow:hidden;min-height:var(--aui-xxl);min-width:var(--aui-xxl);width:fit-content}.aui-carousel-item{flex:0 0 100%;width:100%;height:100%}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l);padding:0}.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);padding:0}.aui-flex-x,.aui-flex-y,.aui-flex--x,.aui-flex--y{display:flex}.aui-flex-x{flex-direction:row}.aui-flex-y{flex-direction:column}.aui-flex--x{flex-direction:row-reverse}.aui-flex--y{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-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-justify-end{justify-content:flex-end}.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-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-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-mt-auto{margin-top:auto}.aui-mb-auto{margin-bottom:auto}.aui-ml-auto{margin-left:auto}.aui-mr-auto{margin-right: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-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-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-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-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-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-select-icon{--size: 10px;color:var(--aui-select-icon);width:var(--size);height:var(--size);position:absolute;top:calc(50% + 1px);transform:translateY(-50%);right:var(--size);pointer-events:none}

package/utils/types.d.ts

@@ -22,17 +22,21 @@ export type SizeDimension = "full" | "fit" | "min" | "max";
 /**
  * Size variants used for CSS.
  */
-type SizeToken = "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+export type SizeToken = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+/**
+ * Size variants used for padding & margin
+ */
+type SpacingSize = "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 /**
  * Used for margin
  */
-type AutoSize = SizeToken | "auto";
+type AutoSize = SpacingSize | "auto";
 /** Layout props for a component */
 export type Layout = {
     /** Direction the layout spans; along the x-axis or y-axis (Equivalent to flex-direction) */
     axis?: "x" | "y" | "-x" | "-y";
     /** Spacing between children of the layout */
-    gap?: SizeToken;
+    gap?: SpacingSize;
     /** Alignment orthogonal to the selected axis (Equivalent to align-items) */
     align?: "start" | "center" | "end";
     /** How to layout the children (Equivalent to justify-content) */
@@ -40,19 +44,19 @@ export type Layout = {
     /** Whether to allow wrapping of layout children */
     wrap?: boolean;
     /** Padding inside the layout */
-    padding?: SizeToken;
+    padding?: SpacingSize;
     /** Horizontal padding inside the layout */
-    paddingX?: SizeToken;
+    paddingX?: SpacingSize;
     /** Vertical padding inside the layout */
-    paddingY?: SizeToken;
+    paddingY?: SpacingSize;
     /** Top padding inside the layout */
-    paddingTop?: SizeToken;
+    paddingTop?: SpacingSize;
     /** Bottom padding inside the layout */
-    paddingBottom?: SizeToken;
+    paddingBottom?: SpacingSize;
     /** Left padding inside the layout */
-    paddingLeft?: SizeToken;
+    paddingLeft?: SpacingSize;
     /** Right padding inside the layout */
-    paddingRight?: SizeToken;
+    paddingRight?: SpacingSize;
     /** Margin outside the layout */
     margin?: AutoSize;
     /** Horizontal margin outside the layout */