@adamjanicki/ui 1.6.6 → 1.6.7

package/components/Link/Link.js

@@ -22,23 +22,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { getButtonClassName } from "../Button/Button";
+import { getButtonProps } from "../Button/Button";
 import classNames from "../../functions/classNames";
-import transformLayout from "../../utils/transformLayout";
+import transformVfx from "../../utils/transformVfx";
 export var UnstyledLink = React.forwardRef(function (_a, ref) {
-    var LinkElement = _a.LinkElement, to = _a.to, className = _a.className, external = _a.external, layout = _a.layout, rest = __rest(_a, ["LinkElement", "to", "className", "external", "layout"]);
-    var props = __assign(__assign(__assign({}, (external ? { target: "_blank", rel: "noreferrer noopener" } : {})), rest), { className: classNames("aui-action", transformLayout(layout), className) });
+    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 }));
     }
     return _jsx("a", __assign({}, props, { href: to, ref: ref }));
 });
 export var ButtonLink = React.forwardRef(function (_a, ref) {
-    var className = _a.className, layout = _a.layout, variant = _a.variant, corners = _a.corners, size = _a.size, props = __rest(_a, ["className", "layout", "variant", "corners", "size"]);
-    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), transformLayout(layout), className), ref: ref })));
+    var className = _a.className, variant = _a.variant, vfx = _a.vfx, size = _a.size, props = __rest(_a, ["className", "variant", "vfx", "size"]);
+    var _b = getButtonProps({
+        variant: variant,
+        size: size,
+    }), additionalVfx = _b.vfx, additionalClassName = _b.className;
+    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames(additionalClassName, className), vfx: __assign(__assign({}, additionalVfx), vfx), ref: ref })));
 });
 var Link = React.forwardRef(function (_a, ref) {
-    var className = _a.className, layout = _a.layout, props = __rest(_a, ["className", "layout"]);
-    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("aui-link", transformLayout(layout), className), ref: ref })));
+    var className = _a.className, vfx = _a.vfx, props = __rest(_a, ["className", "vfx"]);
+    return (_jsx(UnstyledLink, __assign({}, props, { vfx: __assign({ fontWeight: 6 }, vfx), className: classNames("aui-link", className), ref: ref })));
 });
 export default Link;

package/components/Modal/Modal.js

@@ -28,12 +28,21 @@ 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", visible: 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: {
+    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",
+                    color: "default",
+                    backgroundColor: "default",
+                }, children: [_jsx(Box, { vfx: {
                             axis: "x",
                             align: "center",
                             justify: "end",
                             width: "full",
-                        }, children: _jsx(IconButton, { icon: "x", onClick: onClose }) }), _jsx(Box, __assign({}, rest, { ref: ref })), _jsxs(Box, { layout: {
+                        }, children: _jsx(IconButton, { icon: "x", onClick: onClose }) }), _jsx(Box, __assign({}, rest, { ref: ref })), _jsxs(Box, { vfx: {
                             axis: "x",
                             align: "center",
                             justify: "end",

package/components/Select/Select.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
-import type { CornerType } from "../../utils/types";
-type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> & {
+import { type BoxProps } from "../Box/Box";
+import ui from "../ui";
+type SelectProps = React.ComponentProps<typeof ui.select>;
+type Props = Omit<BoxProps, "children"> & {
     /**
      * Array of options to display in the select
      */
@@ -13,10 +15,9 @@ type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElemen
      */
     getOptionLabel?: (option: string) => string;
     /**
-     * [Optional] The corner style of the select element.
-     * @default "rounded"
+     * Props to pass to the underlying select element
      */
-    corners?: CornerType;
+    selectProps?: SelectProps;
 };
 declare const Select: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/components/Select/Select.js

@@ -23,10 +23,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import classNames from "../../functions/classNames";
-import Box from "../Box";
+import Box from "../Box/Box";
 import Icon from "../Icon";
+import ui from "../ui";
 var Select = React.forwardRef(function (_a, ref) {
-    var className = _a.className, options = _a.options, getOptionLabel = _a.getOptionLabel, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, style = _a.style, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionLabel", "corners", "style", "disabled"]);
-    return (_jsxs(Box, { layout: { axis: "x", align: "center" }, className: classNames("aui-select-container", "aui-corners--".concat(corners), disabled ? "aui-select-disabled" : undefined, className), style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: "aui-select aui-corners--".concat(corners), disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: option, children: (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || option }, index)); }) })), _jsx(Icon, { icon: "chevron-down", className: "aui-select-icon", "aria-hidden": true })] }));
+    var className = _a.className, options = _a.options, vfx = _a.vfx, getOptionLabel = _a.getOptionLabel, selectProps = _a.selectProps, rest = __rest(_a, ["className", "options", "vfx", "getOptionLabel", "selectProps"]);
+    var selectClassName = (selectProps || {}).className;
+    return (_jsxs(Box, __assign({ vfx: __assign({ pos: "relative", width: "fit", axis: "x", align: "center", radius: "rounded", backgroundColor: "default", color: "default", padding: "none" }, vfx), className: classNames("aui-select-container", (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled) ? "aui-select-disabled" : undefined, className) }, rest, { children: [_jsx(ui.select, __assign({}, selectProps, { className: classNames("aui-select", selectClassName), ref: ref, children: options.map(function (option, index) { return (_jsx("option", { value: option, children: (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || option }, index)); }) })), _jsx(Icon, { icon: "chevron-down", className: "aui-select-icon", "aria-hidden": true })] })));
 });
 export default Select;

package/components/Spinner/Spinner.d.ts

@@ -1,13 +1,4 @@
-import type { Style } from "../../utils/types";
-type Props = {
-    /**
-     * [Optional] Additional class names to apply to the spinner.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the spinner.
-     */
-    style?: Style;
-};
+import ui from "../ui";
+type Props = Omit<React.ComponentProps<typeof ui.svg>, "children" | "viewBox">;
 declare const Spinner: ({ className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/components/Spinner/Spinner.js

@@ -26,6 +26,6 @@ var Spinner = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return (
     // Designed on 2023-08-18
-    _jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", className: classNames("aui-spinner", className) }, props, { children: _jsx("path", { fill: "currentColor", d: "M256,0C114.62,0,0,114.62,0,256S114.62,512,256,512c70.64,0,134.59-28.61,180.91-74.88l-31.11-31.11c-38.35,38.3-91.31,61.99-149.8,61.99-117.08,0-212-94.92-212-212S138.92,44,256,44V0Z" }) })));
+    _jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg" }, props, { viewBox: "0 0 512 512", className: classNames("aui-spinner", className), children: _jsx("path", { fill: "currentColor", d: "M256,0C114.62,0,0,114.62,0,256S114.62,512,256,512c70.64,0,134.59-28.61,180.91-74.88l-31.11-31.11c-38.35,38.3-91.31,61.99-149.8,61.99-117.08,0-212-94.92-212-212S138.92,44,256,44V0Z" }) })));
 };
 export default Spinner;

package/components/ui.d.ts

@@ -1,16 +1,16 @@
 import React from "react";
-import type { Layout } from "../utils/types";
+import type { Vfx } from "../utils/types";
 type HtmlTag = keyof React.JSX.IntrinsicElements;
 type Props<T extends HtmlTag> = React.ComponentPropsWithRef<T> & {
     /**
-     * The organization of this element and its children.
+     * The VFX or other organizational css to apply to this element.
      * Properties are translated to class names before being applied.
      */
-    layout?: Layout;
+    vfx?: Vfx;
 };
-declare function createLayoutElement<T extends HtmlTag>(tag: T): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props<T>> & React.RefAttributes<React.ComponentRef<T>>>;
+declare function createVfxElement<T extends HtmlTag>(tag: T): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props<T>> & React.RefAttributes<React.ComponentRef<T>>>;
 type HtmlTags = {
-    [K in HtmlTag]: ReturnType<typeof createLayoutElement<K>>;
+    [K in HtmlTag]: ReturnType<typeof createVfxElement<K>>;
 };
 declare const ui: HtmlTags;
 export default ui;

package/components/ui.js

@@ -22,11 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { classNames } from "../functions";
-import transformLayout from "../utils/transformLayout";
-function createLayoutElement(tag) {
+import transformVfx from "../utils/transformVfx";
+function createVfxElement(tag) {
     var Component = React.forwardRef(function (_a, ref) {
-        var layout = _a.layout, className = _a.className, props = __rest(_a, ["layout", "className"]);
-        return React.createElement(tag, __assign(__assign({}, props), { ref: ref, className: classNames(transformLayout(layout), className) }));
+        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 Component;
 }
@@ -36,7 +36,7 @@ var ui = new Proxy({}, {
         if (cachedComponent) {
             return cachedComponent;
         }
-        var component = createLayoutElement(tag);
+        var component = createVfxElement(tag);
         cache[tag] = component;
         return component;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "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-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}
+: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}.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);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);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-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{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-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-opacity-disabled);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{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-opacity-disabled);cursor:default}.aui-layer-backdrop{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-sharp{box-shadow:0 0 0 1px var(--aui-default-border) inset}.aui-shadow-subtle{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow)}.aui-shadow-floating{box-shadow:0 0 0 1px var(--aui-default-border) inset,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-m{font-size:16px}.aui-f-l{font-size:20px}.aui-f-xl{font-size:24px}.aui-f-xxl{font-size:32px}.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-bg-default{background-color:var(--aui-color-default)}.aui-bg-muted{background-color:var(--aui-color-muted)}.aui-bg-inherit{background-color:inherit}.aui-bg-transparent{background-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-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.d.ts

@@ -0,0 +1,2 @@
+import { Vfx } from "./types";
+export default function transformVfx(vfx: Vfx | undefined): string | null;

package/utils/transformVfx.js

@@ -0,0 +1,147 @@
+import { classNames } from "../functions";
+// Prefix maps for padding and margin keys
+var spacingPrefixMap = {
+    padding: "pa",
+    paddingTop: "pt",
+    paddingBottom: "pb",
+    paddingLeft: "pl",
+    paddingRight: "pr",
+    margin: "ma",
+    marginTop: "mt",
+    marginBottom: "mb",
+    marginLeft: "ml",
+    marginRight: "mr",
+};
+var dimensionPrefixMap = {
+    width: "w",
+    maxWidth: "mw",
+    height: "h",
+    maxHeight: "mh",
+};
+var mapLayout = function (_a) {
+    var pos = _a.pos, axis = _a.axis, wrap = _a.wrap, align = _a.align, justify = _a.justify, gap = _a.gap, overflow = _a.overflow, overflowX = _a.overflowX, overflowY = _a.overflowY, z = _a.z;
+    var className = pos ? "aui-pos-".concat(pos) : null;
+    if (axis)
+        className = classNames(className, "aui-flex-".concat(axis));
+    if (wrap)
+        className = classNames(className, "aui-flex-wrap");
+    if (align)
+        className = classNames(className, "aui-align-".concat(align));
+    if (justify)
+        className = classNames(className, "aui-justify-".concat(justify));
+    if (gap)
+        className = classNames(className, "aui-gap-".concat(gap));
+    if (overflow)
+        className = classNames(className, "aui-ov-".concat(overflow));
+    if (overflowX)
+        className = classNames(className, "aui-ov-x-".concat(overflowX));
+    if (overflowY)
+        className = classNames(className, "aui-ov-y-".concat(overflowY));
+    if (z)
+        className = classNames(className, "aui-z-".concat(z));
+    return className;
+};
+var mapSpacing = function (_a) {
+    var padding = _a.padding, paddingX = _a.paddingX, paddingY = _a.paddingY, paddingBottom = _a.paddingBottom, paddingTop = _a.paddingTop, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, margin = _a.margin, marginX = _a.marginX, marginY = _a.marginY, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
+    // Use your existing spacingPrefixMap logic
+    var className = null;
+    var spacingProps = [
+        ["padding", padding],
+        ["paddingTop", paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY],
+        ["paddingBottom", paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY],
+        ["paddingLeft", paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX],
+        ["paddingRight", paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX],
+        ["margin", margin],
+        ["marginTop", marginTop !== null && marginTop !== void 0 ? marginTop : marginY],
+        ["marginBottom", marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY],
+        ["marginLeft", marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX],
+        ["marginRight", marginRight !== null && marginRight !== void 0 ? marginRight : marginX],
+    ];
+    spacingProps.forEach(function (_a) {
+        var prop = _a[0], value = _a[1];
+        if (value) {
+            var prefix = spacingPrefixMap[prop];
+            className = classNames(className, "aui-".concat(prefix, "-").concat(value));
+        }
+    });
+    return className;
+};
+var dimensionProps = ["width", "height", "maxWidth", "maxHeight"];
+var mapDimensions = function (vfx) {
+    var className = null;
+    dimensionProps.forEach(function (prop) {
+        var value = vfx[prop];
+        if (value)
+            className = classNames(className, "aui-".concat(dimensionPrefixMap[prop], "-").concat(value));
+    });
+    return className;
+};
+var mapBorders = function (_a) {
+    var border = _a.border, borderTop = _a.borderTop, borderBottom = _a.borderBottom, borderLeft = _a.borderLeft, borderRight = _a.borderRight, borderWidth = _a.borderWidth, borderStyle = _a.borderStyle, borderColor = _a.borderColor;
+    var className = null;
+    var sides = {
+        ba: border,
+        bt: borderTop,
+        bb: borderBottom,
+        bl: borderLeft,
+        br: borderRight,
+    };
+    Object.entries(sides).forEach(function (_a) {
+        var prefix = _a[0], value = _a[1];
+        if (value) {
+            className = classNames(className, "aui-".concat(prefix));
+        }
+    });
+    var modifiers = {
+        bw: borderWidth,
+        bs: borderStyle,
+        bc: borderColor,
+    };
+    Object.entries(modifiers).forEach(function (_a) {
+        var prefix = _a[0], value = _a[1];
+        if (value) {
+            className = classNames(className, "aui-".concat(prefix, "-").concat(value));
+        }
+    });
+    return className;
+};
+var mapMiscellaneous = function (_a) {
+    var radius = _a.radius, shadow = _a.shadow, color = _a.color, backgroundColor = _a.backgroundColor, opacity = _a.opacity;
+    var className = radius ? "aui-radius-".concat(radius) : null;
+    if (shadow)
+        className = classNames(className, "aui-shadow-".concat(shadow));
+    if (color)
+        className = classNames(className, "aui-c-".concat(color));
+    if (backgroundColor)
+        className = classNames(className, "aui-bg-".concat(backgroundColor));
+    if (opacity)
+        className = classNames(className, "aui-op-".concat(opacity));
+    return className;
+};
+var mapTypography = function (_a) {
+    var fontSize = _a.fontSize, fontWeight = _a.fontWeight, textAlign = _a.textAlign, italics = _a.italics;
+    var className = null;
+    if (fontSize)
+        className = classNames(className, "aui-f-".concat(fontSize));
+    if (fontWeight)
+        className = classNames(className, "aui-fw-".concat(fontWeight));
+    if (textAlign)
+        className = classNames(className, "aui-ta-".concat(textAlign));
+    if (italics)
+        className = classNames(className, "aui-it");
+    return className;
+};
+var transformers = [
+    mapLayout,
+    mapSpacing,
+    mapDimensions,
+    mapBorders,
+    mapTypography,
+    mapMiscellaneous,
+];
+export default function transformVfx(vfx) {
+    if (!vfx)
+        return null;
+    var combinedClasses = classNames.apply(void 0, transformers.map(function (transformer) { return transformer(vfx); }));
+    return combinedClasses || null;
+}

package/utils/types.d.ts

@@ -1,83 +1,103 @@
 import React from "react";
-/**
- * Default children type; can be a node or list of nodes
- */
 export type Children = React.ReactNode | React.ReactNode[];
-/**
- * The type of corner to display, controlling the border radius property.
- */
-export type CornerType = "pill" | "rounded" | "sharp";
-/**
- * The type of message associated with a piece of content.
- */
 export type ContentType = "success" | "warning" | "error" | "info" | "static";
-/**
- * Standard style object to apply inline styling to components.
- */
 export type Style = React.CSSProperties;
-/**
- * Used for width and height
- */
 export type SizeDimension = "full" | "fit" | "min" | "max";
-/**
- * Size variants used for CSS.
- */
 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 SpacingSize = SizeToken | "none";
 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) */
+type Color = "default" | "muted" | "inherit" | "transparent";
+type Overflow = "hidden" | "scroll";
+export type Vfx = {
+    /** Element's positioning */
+    pos?: "static" | "relative" | "absolute" | "fixed" | "sticky";
+    /** Direction the content spans; along the x-axis or y-axis (Equivalent to flex-direction) */
     axis?: "x" | "y" | "-x" | "-y";
-    /** Spacing between children of the layout */
+    /** Spacing between children of the content */
     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) */
+    /** How to content the children (Equivalent to justify-content) */
     justify?: "start" | "center" | "between" | "around" | "end";
-    /** Whether to allow wrapping of layout children */
+    /** Whether to allow wrapping of children */
     wrap?: boolean;
-    /** Padding inside the layout */
+    /** How to handle overflow in the container */
+    overflow?: Overflow;
+    /** How to handle overflow in the X direction */
+    overflowX?: Overflow;
+    /** How to handle overflow in the Y direction */
+    overflowY?: Overflow;
+    /** Z-index to position the element at */
+    z?: "auto" | "floating" | "nav" | "max";
+    /** Padding inside the content */
     padding?: SpacingSize;
-    /** Horizontal padding inside the layout */
+    /** Horizontal padding inside the content */
     paddingX?: SpacingSize;
-    /** Vertical padding inside the layout */
+    /** Vertical padding inside the content */
     paddingY?: SpacingSize;
-    /** Top padding inside the layout */
+    /** Top padding inside the content */
     paddingTop?: SpacingSize;
-    /** Bottom padding inside the layout */
+    /** Bottom padding inside the content */
     paddingBottom?: SpacingSize;
-    /** Left padding inside the layout */
+    /** Left padding inside the content */
     paddingLeft?: SpacingSize;
-    /** Right padding inside the layout */
+    /** Right padding inside the content */
     paddingRight?: SpacingSize;
-    /** Margin outside the layout */
+    /** Margin outside the content */
     margin?: AutoSize;
-    /** Horizontal margin outside the layout */
+    /** Horizontal margin outside the content */
     marginX?: AutoSize;
-    /** Vertical margin outside the layout */
+    /** Vertical margin outside the content */
     marginY?: AutoSize;
-    /** Top margin outside the layout */
+    /** Top margin outside the content */
     marginTop?: AutoSize;
-    /** Bottom margin outside the layout */
+    /** Bottom margin outside the content */
     marginBottom?: AutoSize;
-    /** Left margin outside the layout */
+    /** Left margin outside the content */
     marginLeft?: AutoSize;
-    /** Right margin outside the layout */
+    /** Right margin outside the content */
     marginRight?: AutoSize;
-    /** Width of the layout */
+    /** Width of the content */
     width?: SizeDimension;
-    /** Maximum width of the layout */
+    /** Maximum width of the content */
     maxWidth?: SizeDimension;
-    /** Height of the laout */
+    /** Height of the content */
     height?: SizeDimension;
-    /** Maximum of the layout */
+    /** Maximum of the content */
     maxHeight?: SizeDimension;
+    /** Border radius of the content */
+    radius?: "none" | "subtle" | "rounded" | "max";
+    /** Border for all edges */
+    border?: boolean;
+    /** Border top */
+    borderTop?: boolean;
+    /** Border bottom */
+    borderBottom?: boolean;
+    /** Border left */
+    borderLeft?: boolean;
+    /** Border right */
+    borderRight?: boolean;
+    /** Border thickness */
+    borderWidth?: SpacingSize;
+    /** Border type */
+    borderStyle?: "none" | "solid" | "dotted" | "dashed";
+    /** Border color */
+    borderColor?: "default" | "primary";
+    /** Box shadow presets */
+    shadow?: "subtle" | "floating" | "sharp";
+    /** Opacity presets */
+    opacity?: "none" | "disabled" | "dim" | "full";
+    /** Font size */
+    fontSize?: SizeToken;
+    /** Font weight */
+    fontWeight?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    /** Text alignment */
+    textAlign?: "center" | "left" | "right";
+    /** Use italics? */
+    italics?: boolean;
+    /** Color */
+    color?: Color;
+    /** Background color */
+    backgroundColor?: Color;
 };
 export {};

package/utils/transformLayout.d.ts

@@ -1,2 +0,0 @@
-import { Layout } from "./types";
-export default function transformLayout(layout: Layout | undefined): string | null;