@adamjanicki/ui 1.6.1 → 1.6.3

package/components/Avatar/Avatar.d.ts

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

package/components/Avatar/Avatar.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import Box from "../Box/Box";
+import { classNames } from "../../functions";
+var Avatar = React.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? "s" : _b, backgroundImage = _a.backgroundImage, className = _a.className, style = _a.style, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, username = _a.username, rest = __rest(_a, ["size", "backgroundImage", "className", "style", "corners", "username"]);
+    var _d = useState(false), imageError = _d[0], setImageError = _d[1];
+    var useFallback = imageError || !backgroundImage;
+    var color = chooseColor(username);
+    var avatarClassName = "aui-avatar aui-corners--".concat(corners);
+    if (useFallback) {
+        avatarClassName = classNames(avatarClassName, "aui-avatar-".concat(color));
+    }
+    var imageClassName = undefined;
+    var avatarStyle = {};
+    var imageStyle = undefined;
+    if (typeof size === "number") {
+        avatarStyle = { width: size, height: size, fontSize: 0.8 * size };
+        imageStyle = { width: size, height: size };
+    }
+    else {
+        avatarClassName = classNames(avatarClassName, "aui-avatar-".concat(size));
+        imageClassName = "aui-avatar-".concat(size);
+    }
+    var fallbackCharacter = username[0];
+    return (_jsx(Box, __assign({ className: classNames(avatarClassName, className), style: __assign(__assign({}, avatarStyle), style) }, rest, { ref: ref, children: !useFallback ? (_jsx("img", { src: backgroundImage, alt: "", className: imageClassName, onError: function () { return setImageError(true); }, style: imageStyle })) : (fallbackCharacter) })));
+});
+var colorOptions = ["red", "yellow", "green", "blue", "purple"];
+// simple deterministic "hash" to get a background color
+function chooseColor(username) {
+    return colorOptions[username.split("").reduce(function (sum, char) { return sum + char.charCodeAt(0); }, 0) %
+        colorOptions.length];
+}
+export default Avatar;

package/components/Avatar/index.d.ts

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

package/components/Avatar/index.js

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

package/components/Button/Button.d.ts

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

package/components/Button/Button.js

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

package/components/Button/index.d.ts

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

package/components/Button/index.js

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

package/components/Icon/Icon.d.ts

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

package/components/Icon/icons.d.ts

@@ -1,4 +1,4 @@
-export declare const iconTypes: readonly ["architect", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "atom", "award", "bar-graph", "building", "calculator", "calendar", "car", "check", "check-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "city", "clipboard", "clock", "clone", "cloud", "code", "comment", "cube", "database", "desktop", "document", "download", "edit", "evergreen", "export", "external", "file", "film", "flower", "folder", "gem", "globe", "graph-down", "graph-up", "grid", "heart", "home", "info-circle", "info-square", "letter", "license", "link", "list", "lock", "login", "logout", "menu", "minus", "minus-circle", "moon", "more", "mountains", "newspaper", "not-a-moon", "overflow", "person", "plus", "plus-circle", "podium", "search", "settings", "shell", "shuffle", "snowflake", "sparkles", "star", "sun", "tag", "ticket", "trash", "tree", "tv", "unlock", "upload", "vista", "warning-circle", "x", "x-circle"];
+export declare const iconTypes: readonly ["architect", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "atom", "award", "bar-graph", "bell", "building", "calculator", "calendar", "car", "check", "check-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "city", "clipboard", "clock", "clone", "cloud", "code", "comment", "cube", "database", "desktop", "document", "download", "edit", "evergreen", "export", "external", "file", "film", "flower", "folder", "gem", "globe", "graph-down", "graph-up", "grid", "heart", "home", "info-circle", "info-square", "letter", "license", "link", "list", "lock", "login", "logout", "menu", "minus", "minus-circle", "moon", "more", "mountains", "newspaper", "not-a-moon", "overflow", "person", "plus", "plus-circle", "podium", "search", "settings", "shell", "shuffle", "snowflake", "sparkles", "star", "sun", "tag", "ticket", "trash", "tree", "tv", "unlock", "upload", "vista", "warning-circle", "x", "x-circle"];
 export type IconType = (typeof iconTypes)[number];
 declare const icons: Record<IconType, string>;
 export default icons;

package/components/Icon/icons.js

@@ -7,6 +7,7 @@ export var iconTypes = [
     "atom",
     "award",
     "bar-graph",
+    "bell",
     "building",
     "calculator",
     "calendar",
@@ -173,5 +174,6 @@ var icons = {
     award: "M14.3374,6.1735h.0001c-.0375-.4687-.512-.8192-.6546-1.2562l-.0419-.1562c-.0953-.4498.1407-.9905-.0612-1.4155-.2278-.6859-.9683-.6907-1.4266-1.1453-.389-.3591-.4005-.9323-.8239-1.2454-.5374-.4791-1.1875-.1111-1.8097-.275-.594-.1584-.9305-.7239-1.5197-.6772-.5906-.0469-.9323.519-1.5233.6772-.522.155-1.0462-.1177-1.4901.095-.507.1795-.6814.6392-.9037,1.1151-.3085.6185-1.1274.673-1.4871,1.1352-.3477.4052-.2687.8929-.222,1.4184.0414.7628-.7646,1.2202-.7302,1.9108-.047.5906.519.9322.6772,1.5234.1625.622-.2001,1.2735.2803,1.8109.2726.3875.837.4611,1.2141.8203v4.9668c0,.466.5634.6993.893.3698l2.9217-2.9218c.2043-.2043.5355-.2043.7399,0l2.9218,2.9218c.3295.3295.893.0962.893-.3699v-4.9854c.0103-.0192.0187-.0348.029-.0541.5892-.3795,1.4185-.5754,1.4506-1.4131.0268-.3505-.1125-.7572.0103-1.1447.1692-.6226.8096-.9972.6628-1.7051ZM8.0001,8.7724c-1.3807,0-2.5-1.1172-2.5-2.4954s1.1193-2.4953,2.5-2.4953,2.5,1.1172,2.5,2.4953-1.1193,2.4954-2.5,2.4954Z",
     flower: "M12.2426,9.364c1.1716-1.1716,1.1716-3.071,0-4.2426,1.1716-1.1716,1.1716-3.0711,0-4.2427-1.1716-1.1716-3.071-1.1716-4.2426,0C6.8284-.2929,4.929-.2929,3.7574.8787c-1.1716,1.1716-1.1716,3.071,0,4.2427-1.1716,1.1716-1.1716,3.071,0,4.2426.8765.8765,2.1601,1.0964,3.2418.6615v2.668c-1.421-.8044-2.8931-.8878-3.3029-.1779-.4142.7175.4132,1.9706,1.8481,2.7991.8587.4958,1.7356.721,2.394.673.0212.0013.0392.0123.0609.0123s.0396-.0109.0609-.0123c.6584.048,1.5353-.1772,2.394-.673,1.4349-.8284,2.2623-2.0816,1.848-2.7991-.4099-.7099-1.8818-.6265-3.3029.1779v-2.6686c1.082.4358,2.3665.2159,3.2434-.661ZM6.2322,3.3535c.9763-.9763,2.5592-.9763,3.5355,0s.9763,2.5592,0,3.5356c-.9763.9763-2.5593.9763-3.5355,0-.9763-.9764-.9763-2.5592,0-3.5356Z",
     overflow: "M8,6.25c.9665,0,1.75.7835,1.75,1.75s-.7835,1.75-1.75,1.75-1.75-.7835-1.75-1.75.7835-1.75,1.75-1.75ZM6.25,1.75c0,.9665.7835,1.75,1.75,1.75s1.75-.7835,1.75-1.75-.7835-1.75-1.75-1.75-1.75.7835-1.75,1.75ZM6.25,14.25c0,.9665.7835,1.75,1.75,1.75s1.75-.7835,1.75-1.75-.7835-1.75-1.75-1.75-1.75.7835-1.75,1.75Z",
+    bell: "M14.1079,12.2049c-.512-.3928-.8403-.9752-.9876-1.6036-.2782-1.1865-.6092-3.0107-.62-5.006-.0114-2.1172-1.4575-4.0092-3.5003-4.4756v-.1196c0-.5523-.4477-1-1-1s-1,.4477-1,1v.1196c-2.0428.4664-3.4889,2.3584-3.5003,4.4756-.0108,1.9953-.3418,3.8195-.62,5.006-.1473.6284-.4756,1.2109-.9876,1.6036-.2736.2098-.4356.5579-.3818.9399.0714.5071.5548.8552,1.0666.8552h3.4232c0,1.0972.9028,2,2,2s2-.9028,2-2h3.4232c.5118,0,.9952-.3481,1.0666-.8552.0538-.382-.1083-.73-.3818-.9399ZM8,14h-.0292c.0162,0,.0292-.0131.0292-.0292,0,.0161.0131.0292.0292.0292h-.0292Z",
 };
 export default icons;

package/components/Layer/Layer.d.ts

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

package/components/Layer/Layer.js

@@ -25,22 +25,27 @@ import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
-var BaseLayer = React.forwardRef(function (_a, ref) {
-    var onClose = _a.onClose, children = _a.children, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b, visible = _a.visible, onMouseDown = _a.onMouseDown, layout = _a.layout, rest = __rest(_a, ["onClose", "children", "className", "disableEscape", "visible", "onMouseDown", "layout"]);
-    var focusRef = useFocusTrap(visible);
+var Layer = React.forwardRef(function (_a, ref) {
+    var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, onClose = _a.onClose, children = _a.children, className = _a.className, onMouseDown = _a.onMouseDown, layout = _a.layout, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock", "onClose", "children", "className", "onMouseDown", "layout"]);
+    var focusRef = useFocusTrap(true);
+    // Lock and unlock on mount and unmount
+    useScrollLock(!disableScrollLock);
     useEffect(function () {
         var handleEscape = function (event) {
+            var _a;
             if (event.key === "Escape") {
+                if (!returnFocusOnEscape) {
+                    var activeEl = document.activeElement;
+                    (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.blur) === null || _a === void 0 ? void 0 : _a.call(activeEl);
+                }
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         };
-        if (!disableEscape)
-            document.addEventListener("keydown", handleEscape);
+        document.addEventListener("keydown", handleEscape);
         return function () {
-            if (!disableEscape)
-                document.removeEventListener("keydown", handleEscape);
+            document.removeEventListener("keydown", handleEscape);
         };
-    }, [onClose, disableEscape]);
+    }, [onClose, returnFocusOnEscape]);
     return (_jsx(Box, __assign({ layout: __assign({ axis: "y", align: "center", justify: "center" }, layout) }, rest, { className: classNames("aui-layer-backdrop", className), onMouseDown: function (e) {
             onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
             onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -53,17 +58,4 @@ var BaseLayer = React.forwardRef(function (_a, ref) {
             },
         }) })));
 });
-var Layer = React.forwardRef(function (_a, ref) {
-    var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock"]);
-    // Lock and unlock on mount and unmount
-    useScrollLock(!disableScrollLock);
-    useEffect(function () { return function () {
-        var _a;
-        var activeEl = document.activeElement;
-        if (!returnFocusOnEscape) {
-            (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.blur) === null || _a === void 0 ? void 0 : _a.call(activeEl);
-        }
-    }; }, [returnFocusOnEscape]);
-    return _jsx(BaseLayer, __assign({}, rest, { visible: true, ref: ref }));
-});
 export default Layer;

package/components/Link/Link.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { type VisualButtonProps } from "../Button/Button";
 import { Layout } from "../../utils/types";
-type BaseLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
+export type BaseLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
     /**
      * URL to navigate to
      */
-    to?: string;
+    to: string;
 };
 type CustomLinkElement = React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 type LinkProps = BaseLinkProps & {
@@ -29,7 +29,7 @@ export declare const ButtonLink: React.ForwardRefExoticComponent<Omit<Omit<React
     /**
      * URL to navigate to
      */
-    to?: string;
+    to: string;
 } & {
     /**
      * Whether the link should open in a new tab

package/components/Link/Link.js

@@ -34,11 +34,11 @@ export var UnstyledLink = React.forwardRef(function (_a, ref) {
     return _jsx("a", __assign({}, props, { href: to, ref: ref }));
 });
 export var ButtonLink = React.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, corners = _a.corners, size = _a.size, props = __rest(_a, ["className", "variant", "corners", "size"]);
-    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), className), ref: 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 Link = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("aui-link", className), ref: 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 })));
 });
 export default Link;

package/components/Modal/Modal.d.ts

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

package/components/Modal/Modal.js

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

package/components/Modal/index.d.ts

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

package/components/Modal/index.js

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

package/components/Select/Select.d.ts

@@ -18,5 +18,5 @@ type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElemen
      */
     corners?: CornerType;
 };
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
-export default _default;
+declare const Select: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/components/Select/Select.js

@@ -21,12 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import React from "react";
 import classNames from "../../functions/classNames";
 import Box from "../Box";
 import Icon from "../Icon";
-var Select = function (_a, ref) {
+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, { 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 })] }));
-};
-export default forwardRef(Select);
+    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 })] }));
+});
+export default Select;

package/hooks/useFocusTrap.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef } from "react";
 var selector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
 /**
  * A hook for trapping focus within an element.
@@ -10,48 +10,39 @@ var selector = 'a[href], area[href], input:not([disabled]), select:not([disabled
 var useFocusTrap = function (isActive) {
     if (isActive === void 0) { isActive = true; }
     var trapRef = useRef(null);
-    var focusableElements = useRef(null);
-    var updateFocusableElements = useCallback(function () {
-        if (trapRef.current) {
-            focusableElements.current = trapRef.current.querySelectorAll(selector);
-        }
-    }, []);
     useEffect(function () {
-        if (!isActive || !trapRef.current)
+        var trap = trapRef.current;
+        if (!isActive || !trap)
             return;
-        updateFocusableElements();
         var handleKeyDown = function (event) {
-            var _a;
             if (event.key !== "Tab")
                 return;
-            if (!focusableElements.current ||
-                focusableElements.current.length === 0) {
-                return event.preventDefault();
-            }
-            var activeElement = document.activeElement;
-            var firstEl = focusableElements.current[0];
-            var lastEl = focusableElements.current[focusableElements.current.length - 1];
-            if (event.shiftKey && activeElement === firstEl) {
-                lastEl.focus();
+            var focusableElements = trap.querySelectorAll(selector);
+            if (!focusableElements.length) {
                 event.preventDefault();
+                return;
             }
-            else if (!event.shiftKey && activeElement === lastEl) {
-                firstEl.focus();
-                event.preventDefault();
+            var first = focusableElements[0];
+            var last = focusableElements[focusableElements.length - 1];
+            var active = document.activeElement;
+            if (event.shiftKey) {
+                if (active === first || !trap.contains(active)) {
+                    last.focus();
+                    event.preventDefault();
+                }
             }
-            else if (!((_a = trapRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
-                (event.shiftKey ? lastEl : firstEl).focus();
-                event.preventDefault();
+            else {
+                if (active === last || !trap.contains(active)) {
+                    first.focus();
+                    event.preventDefault();
+                }
             }
         };
-        var observer = new MutationObserver(updateFocusableElements);
-        observer.observe(trapRef.current, { childList: true, subtree: true });
-        document.addEventListener("keydown", handleKeyDown);
+        trap.addEventListener("keydown", handleKeyDown, true);
         return function () {
-            document.removeEventListener("keydown", handleKeyDown);
-            observer.disconnect();
+            trap.removeEventListener("keydown", handleKeyDown, true);
         };
-    }, [isActive, updateFocusableElements]);
+    }, [isActive]);
     return trapRef;
 };
 export default useFocusTrap;

package/index.d.ts

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

package/index.js

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

package/package.json

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

package/style.css

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

package/utils/types.d.ts

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