@adamjanicki/ui 1.7.8 → 1.8.0

package/components/Avatar/Avatar.js

@@ -29,7 +29,7 @@ var Avatar = React.forwardRef(function (_a, ref) {
     var _c = useState(false), imageError = _c[0], setImageError = _c[1];
     var useFallback = imageError || !backgroundImage;
     var color = chooseColor(username);
-    var avatarClassName = null;
+    var avatarClassName = undefined;
     if (useFallback) {
         avatarClassName = classNames(avatarClassName, "aui-avatar-".concat(color));
     }

package/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import type { Children } from "../../utils/types";
+type FallbackProps = {
+    error: Error;
+    reset: () => void;
+};
+type Props = {
+    /**
+     * Component to render when an error is caught
+     */
+    Fallback: React.ComponentType<FallbackProps>;
+    /**
+     * Children wrapped by the error boundary
+     */
+    children: Children;
+    /**
+     * Called when an error is caught
+     */
+    onError?: (error: Error, info: React.ErrorInfo) => void;
+    /**
+     * Called when the error state is reset
+     */
+    onReset?: () => void;
+    /**
+     * Dependencies to trigger a reset on change
+     */
+    deps?: unknown[];
+};
+type State = {
+    error: Error | null;
+};
+export default class ErrorBoundary extends React.Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    componentDidUpdate(prevProps: Readonly<Props>): void;
+    private resetErrorBoundary;
+    private depsUpdated;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,61 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { error: null };
+        _this.resetErrorBoundary = function () {
+            var _a, _b;
+            if (_this.state.error !== null) {
+                _this.setState({ error: null });
+                (_b = (_a = _this.props).onReset) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        };
+        return _this;
+    }
+    ErrorBoundary.getDerivedStateFromError = function (error) {
+        return { error: error };
+    };
+    ErrorBoundary.prototype.componentDidCatch = function (error, info) {
+        var _a, _b;
+        (_b = (_a = this.props).onError) === null || _b === void 0 ? void 0 : _b.call(_a, error, info);
+    };
+    ErrorBoundary.prototype.componentDidUpdate = function (prevProps) {
+        if (this.depsUpdated(this.props.deps, prevProps.deps)) {
+            this.resetErrorBoundary();
+        }
+    };
+    ErrorBoundary.prototype.depsUpdated = function (nextDeps, prevDeps) {
+        if (!nextDeps || !prevDeps)
+            return false;
+        if (nextDeps.length !== prevDeps.length)
+            return true;
+        return nextDeps.some(function (dep, i) { return !Object.is(dep, prevDeps[i]); });
+    };
+    ErrorBoundary.prototype.render = function () {
+        var _a = this.props, Fallback = _a.Fallback, children = _a.children;
+        var error = this.state.error;
+        if (!error) {
+            return children;
+        }
+        return _jsx(Fallback, { error: error, reset: this.resetErrorBoundary });
+    };
+    return ErrorBoundary;
+}(React.Component));
+export default ErrorBoundary;

package/components/ErrorBoundary/index.d.ts

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

package/components/ErrorBoundary/index.js

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

package/components/Layer/Layer.js

@@ -48,7 +48,7 @@ var Layer = React.forwardRef(function (_a, ref) {
         };
     }, [onClose, returnFocusOnEscape]);
     var mergedRef = useMergeRefs(focusRef, children.props.ref);
-    return (_jsx(Box, __assign({ vfx: __assign({ pos: "fixed", axis: "y", align: "center", justify: "center", z: "max" }, vfx) }, rest, { className: classNames("aui-layer-backdrop", className), onMouseDown: function (e) {
+    return (_jsx(Box, __assign({ vfx: __assign({ axis: "y", align: "center", justify: "center", z: "max" }, vfx) }, 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();
         }, ref: ref, children: React.cloneElement(children, {

package/functions/classNames.d.ts

@@ -4,4 +4,4 @@
  * @param classNames list of class names to concatenate
  * @returns single aggregated string of classnames
  */
-export default function classNames(...classNames: Array<string | null | undefined>): string;
+export default function classNames(...classNames: Array<string | null | undefined>): string | undefined;

package/functions/classNames.js

@@ -9,8 +9,8 @@ export default function classNames() {
     for (var _i = 0; _i < arguments.length; _i++) {
         classNames[_i] = arguments[_i];
     }
-    return classNames
+    return (classNames
         .map(function (className) { return className === null || className === void 0 ? void 0 : className.trim(); })
         .filter(Boolean)
-        .join(" ");
+        .join(" ") || undefined);
 }

package/functions/getDeviceType.d.ts

@@ -0,0 +1,8 @@
+type DeviceType = "mobile" | "desktop";
+/**
+ * Best effort checks to determine the device being used
+ *
+ * @returns the type of device
+ */
+export default function getDeviceType(): DeviceType;
+export {};

package/functions/getDeviceType.js

@@ -0,0 +1,17 @@
+/**
+ * Best effort checks to determine the device being used
+ *
+ * @returns the type of device
+ */
+export default function getDeviceType() {
+    if (!navigator)
+        return "desktop";
+    var _a = navigator.userAgent, userAgent = _a === void 0 ? "" : _a, _b = navigator.maxTouchPoints, maxTouchPoints = _b === void 0 ? 0 : _b, platform = navigator.platform;
+    var isTouchScreen = maxTouchPoints > 0;
+    var isMobileUserAgent = /mobi|android|iphone|ipod|ipad/i.test(userAgent);
+    var isNewIpad = platform === "MacIntel" && maxTouchPoints > 1;
+    if ((isMobileUserAgent && isTouchScreen) || isNewIpad) {
+        return "mobile";
+    }
+    return "desktop";
+}

package/functions/index.d.ts

@@ -1,4 +1,5 @@
 import classNames from "./classNames";
 import scrollToId from "./scrollToId";
 import assertDefined from "./assertDefined";
-export { classNames, scrollToId, assertDefined };
+import getDeviceType from "./getDeviceType";
+export { classNames, scrollToId, assertDefined, getDeviceType };

package/functions/index.js

@@ -1,4 +1,5 @@
 import classNames from "./classNames";
 import scrollToId from "./scrollToId";
 import assertDefined from "./assertDefined";
-export { classNames, scrollToId, assertDefined };
+import getDeviceType from "./getDeviceType";
+export { classNames, scrollToId, assertDefined, getDeviceType };

package/hooks/useScrollLock.js

@@ -1,23 +1,33 @@
 import { useEffect } from "react";
+var globalLockCount = 0;
 var lockScroll = function () {
+    globalLockCount += 1;
+    if (globalLockCount > 1) {
+        return function () {
+            globalLockCount -= 1;
+        };
+    }
     var scrollPosition = window.scrollY;
     var style = document.body.style;
-    var htmlStyle = document.documentElement.style;
     var overflow = style.overflow, position = style.position, top = style.top, width = style.width;
-    var scrollBehavior = htmlStyle.scrollBehavior;
-    htmlStyle.scrollBehavior = "auto";
     style.overflow = "hidden";
     style.position = "fixed";
     style.top = "-".concat(scrollPosition, "px");
     style.width = "100%";
     return function () {
+        globalLockCount -= 1;
+        if (globalLockCount > 0) {
+            return;
+        }
         style.overflow = overflow;
         style.position = position;
         style.top = top;
         style.width = width;
-        // Restore scroll position without smooth behavior
-        window.scrollTo(0, scrollPosition);
-        htmlStyle.scrollBehavior = scrollBehavior;
+        window.scrollTo({
+            top: scrollPosition,
+            left: 0,
+            behavior: "instant",
+        });
     };
 };
 /**

package/index.d.ts

@@ -9,6 +9,7 @@ export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
+export { default as ErrorBoundary } from "./components/ErrorBoundary";
 export { default as Hamburger } from "./components/Hamburger";
 export * from "./components/Hamburger";
 export { default as Icon } from "./components/Icon";

package/index.js

@@ -10,6 +10,7 @@ export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
+export { default as ErrorBoundary } from "./components/ErrorBoundary";
 export { default as Hamburger } from "./components/Hamburger";
 export * from "./components/Hamburger";
 export { default as Icon } from "./components/Icon";

package/package.json

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

package/utils/transformVfx.js

@@ -1,186 +1,194 @@
 var transformers = {
     // --- Layout ---
-    pos: function (classes, _a) {
+    pos: function (_a) {
         var pos = _a.pos;
-        return classes.push("aui-pos-".concat(pos));
+        return "aui-pos-".concat(pos);
     },
-    axis: function (classes, _a) {
+    axis: function (_a) {
         var axis = _a.axis;
-        return classes.push("aui-flex-".concat(axis));
+        return "aui-flex-".concat(axis);
     },
-    gap: function (classes, _a) {
+    gap: function (_a) {
         var gap = _a.gap;
-        return classes.push("aui-gap-".concat(gap));
+        return "aui-gap-".concat(gap);
     },
-    align: function (classes, _a) {
+    align: function (_a) {
         var align = _a.align;
-        return classes.push("aui-align-".concat(align));
+        return "aui-align-".concat(align);
     },
-    justify: function (classes, _a) {
+    justify: function (_a) {
         var justify = _a.justify;
-        return classes.push("aui-justify-".concat(justify));
+        return "aui-justify-".concat(justify);
     },
-    wrap: function (classes) { return classes.push("aui-flex-wrap"); },
-    overflow: function (classes, _a) {
+    wrap: function () { return "aui-flex-wrap"; },
+    overflow: function (_a) {
         var overflow = _a.overflow;
-        return classes.push("aui-ov-".concat(overflow));
+        return "aui-ov-".concat(overflow);
     },
-    overflowX: function (classes, _a) {
+    overflowX: function (_a) {
         var overflowX = _a.overflowX;
-        return classes.push("aui-ov-x-".concat(overflowX));
+        return "aui-ov-x-".concat(overflowX);
     },
-    overflowY: function (classes, _a) {
+    overflowY: function (_a) {
         var overflowY = _a.overflowY;
-        return classes.push("aui-ov-y-".concat(overflowY));
+        return "aui-ov-y-".concat(overflowY);
     },
-    z: function (classes, _a) {
+    z: function (_a) {
         var z = _a.z;
-        return classes.push("aui-z-".concat(z));
+        return "aui-z-".concat(z);
     },
     // --- Spacing ---
-    padding: function (classes, _a) {
+    padding: function (_a) {
         var padding = _a.padding;
-        return classes.push("aui-pa-".concat(padding));
+        return "aui-pa-".concat(padding);
     },
-    paddingX: function (classes, _a) {
+    paddingX: function (_a) {
         var paddingX = _a.paddingX, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight;
+        var result = [];
         if (!paddingLeft)
-            classes.push("aui-pl-".concat(paddingX));
+            result.push("aui-pl-".concat(paddingX));
         if (!paddingRight)
-            classes.push("aui-pr-".concat(paddingX));
+            result.push("aui-pr-".concat(paddingX));
+        return result.join(" ");
     },
-    paddingY: function (classes, _a) {
+    paddingY: function (_a) {
         var paddingY = _a.paddingY, paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom;
+        var result = [];
         if (!paddingTop)
-            classes.push("aui-pt-".concat(paddingY));
+            result.push("aui-pt-".concat(paddingY));
         if (!paddingBottom)
-            classes.push("aui-pb-".concat(paddingY));
+            result.push("aui-pb-".concat(paddingY));
+        return result.join(" ");
     },
-    paddingTop: function (classes, _a) {
+    paddingTop: function (_a) {
         var paddingTop = _a.paddingTop;
-        return classes.push("aui-pt-".concat(paddingTop));
+        return "aui-pt-".concat(paddingTop);
     },
-    paddingBottom: function (classes, _a) {
+    paddingBottom: function (_a) {
         var paddingBottom = _a.paddingBottom;
-        return classes.push("aui-pb-".concat(paddingBottom));
+        return "aui-pb-".concat(paddingBottom);
     },
-    paddingLeft: function (classes, _a) {
+    paddingLeft: function (_a) {
         var paddingLeft = _a.paddingLeft;
-        return classes.push("aui-pl-".concat(paddingLeft));
+        return "aui-pl-".concat(paddingLeft);
     },
-    paddingRight: function (classes, _a) {
+    paddingRight: function (_a) {
         var paddingRight = _a.paddingRight;
-        return classes.push("aui-pr-".concat(paddingRight));
+        return "aui-pr-".concat(paddingRight);
     },
-    margin: function (classes, _a) {
+    margin: function (_a) {
         var margin = _a.margin;
-        return classes.push("aui-ma-".concat(margin));
+        return "aui-ma-".concat(margin);
     },
-    marginX: function (classes, _a) {
+    marginX: function (_a) {
         var marginX = _a.marginX, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
+        var result = [];
         if (!marginLeft)
-            classes.push("aui-ml-".concat(marginX));
+            result.push("aui-ml-".concat(marginX));
         if (!marginRight)
-            classes.push("aui-mr-".concat(marginX));
+            result.push("aui-mr-".concat(marginX));
+        return result.join(" ");
     },
-    marginY: function (classes, _a) {
+    marginY: function (_a) {
         var marginY = _a.marginY, marginTop = _a.marginTop, marginBottom = _a.marginBottom;
+        var result = [];
         if (!marginTop)
-            classes.push("aui-mt-".concat(marginY));
+            result.push("aui-mt-".concat(marginY));
         if (!marginBottom)
-            classes.push("aui-mb-".concat(marginY));
+            result.push("aui-mb-".concat(marginY));
+        return result.join(" ");
     },
-    marginTop: function (classes, _a) {
+    marginTop: function (_a) {
         var marginTop = _a.marginTop;
-        return classes.push("aui-mt-".concat(marginTop));
+        return "aui-mt-".concat(marginTop);
     },
-    marginBottom: function (classes, _a) {
+    marginBottom: function (_a) {
         var marginBottom = _a.marginBottom;
-        return classes.push("aui-mb-".concat(marginBottom));
+        return "aui-mb-".concat(marginBottom);
     },
-    marginLeft: function (classes, _a) {
+    marginLeft: function (_a) {
         var marginLeft = _a.marginLeft;
-        return classes.push("aui-ml-".concat(marginLeft));
+        return "aui-ml-".concat(marginLeft);
     },
-    marginRight: function (classes, _a) {
+    marginRight: function (_a) {
         var marginRight = _a.marginRight;
-        return classes.push("aui-mr-".concat(marginRight));
+        return "aui-mr-".concat(marginRight);
     },
     // --- Dimensions ---
-    width: function (classes, _a) {
+    width: function (_a) {
         var width = _a.width;
-        return classes.push("aui-w-".concat(width));
+        return "aui-w-".concat(width);
     },
-    maxWidth: function (classes, _a) {
+    maxWidth: function (_a) {
         var maxWidth = _a.maxWidth;
-        return classes.push("aui-mw-".concat(maxWidth));
+        return "aui-mw-".concat(maxWidth);
     },
-    height: function (classes, _a) {
+    height: function (_a) {
         var height = _a.height;
-        return classes.push("aui-h-".concat(height));
+        return "aui-h-".concat(height);
     },
-    maxHeight: function (classes, _a) {
+    maxHeight: function (_a) {
         var maxHeight = _a.maxHeight;
-        return classes.push("aui-mh-".concat(maxHeight));
+        return "aui-mh-".concat(maxHeight);
     },
     // --- Borders ---
-    radius: function (classes, _a) {
+    radius: function (_a) {
         var radius = _a.radius;
-        return classes.push("aui-radius-".concat(radius));
-    },
-    border: function (classes) { return classes.push("aui-ba"); },
-    borderTop: function (classes) { return classes.push("aui-bt"); },
-    borderBottom: function (classes) { return classes.push("aui-bb"); },
-    borderLeft: function (classes) { return classes.push("aui-bl"); },
-    borderRight: function (classes) { return classes.push("aui-br"); },
-    borderWidth: function (classes, _a) {
+        return "aui-radius-".concat(radius);
+    },
+    border: function () { return "aui-ba"; },
+    borderTop: function () { return "aui-bt"; },
+    borderBottom: function () { return "aui-bb"; },
+    borderLeft: function () { return "aui-bl"; },
+    borderRight: function () { return "aui-br"; },
+    borderWidth: function (_a) {
         var borderWidth = _a.borderWidth;
-        return classes.push("aui-bw-".concat(borderWidth));
+        return "aui-bw-".concat(borderWidth);
     },
-    borderStyle: function (classes, _a) {
+    borderStyle: function (_a) {
         var borderStyle = _a.borderStyle;
-        return classes.push("aui-bs-".concat(borderStyle));
+        return "aui-bs-".concat(borderStyle);
     },
-    borderColor: function (classes, _a) {
+    borderColor: function (_a) {
         var borderColor = _a.borderColor;
-        return classes.push("aui-bc-".concat(borderColor));
+        return "aui-bc-".concat(borderColor);
     },
     // --- Effects ---
-    shadow: function (classes, _a) {
+    shadow: function (_a) {
         var shadow = _a.shadow;
-        return classes.push("aui-shadow-".concat(shadow));
+        return "aui-shadow-".concat(shadow);
     },
-    opacity: function (classes, _a) {
+    opacity: function (_a) {
         var opacity = _a.opacity;
-        return classes.push("aui-op-".concat(opacity));
+        return "aui-op-".concat(opacity);
     },
     // --- Typography ---
-    fontSize: function (classes, _a) {
+    fontSize: function (_a) {
         var fontSize = _a.fontSize;
-        return classes.push("aui-f-".concat(fontSize));
+        return "aui-f-".concat(fontSize);
     },
-    fontWeight: function (classes, _a) {
+    fontWeight: function (_a) {
         var fontWeight = _a.fontWeight;
-        return classes.push("aui-fw-".concat(fontWeight));
+        return "aui-fw-".concat(fontWeight);
     },
-    textAlign: function (classes, _a) {
+    textAlign: function (_a) {
         var textAlign = _a.textAlign;
-        return classes.push("aui-ta-".concat(textAlign));
+        return "aui-ta-".concat(textAlign);
     },
-    italics: function (classes) { return classes.push("aui-it"); },
+    italics: function () { return "aui-it"; },
     // --- Colors ---
-    color: function (classes, _a) {
+    color: function (_a) {
         var color = _a.color;
-        return classes.push("aui-c-".concat(color));
+        return "aui-c-".concat(color);
     },
-    backgroundColor: function (classes, _a) {
+    backgroundColor: function (_a) {
         var backgroundColor = _a.backgroundColor;
-        return classes.push("aui-bg-".concat(backgroundColor));
+        return "aui-bg-".concat(backgroundColor);
     },
     // --- Misc ---
-    cursor: function (classes, _a) {
+    cursor: function (_a) {
         var cursor = _a.cursor;
-        return classes.push("aui-cursor-".concat(cursor));
+        return "aui-cursor-".concat(cursor);
     },
 };
 // Main function
@@ -190,9 +198,10 @@ export default function transformVfx(vfx) {
     var classes = [];
     Object.entries(vfx).forEach(function (_a) {
         var key = _a[0], value = _a[1];
-        if (value) {
-            var transformer = transformers[key];
-            transformer(classes, vfx);
+        var transformer = transformers[key];
+        var result = transformer(vfx);
+        if (value && result) {
+            classes.push(result);
         }
     });
     return classes.join(" ") || null;