@adamjanicki/ui 1.5.5 → 1.5.7

package/components/Alert/Alert.d.ts

@@ -1,27 +1,16 @@
 import React from "react";
-import { ContentType, CornerType } from "../../types";
-type Props = {
+import type { ContentType, CornerType } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
     /**
      * The type of alert to display.
      */
     type: ContentType;
-    /**
-     * The content to display in the alert.
-     */
-    children: React.ReactNode | React.ReactNode[];
-    /**
-     * [Optional] Additional class names to apply to the alert.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the alert.
-     */
-    style?: React.CSSProperties;
     /**
      * [Optional] The corner style of the alert.
      * @default "rounded"
      */
     corners?: CornerType;
 };
-declare const Alert: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Alert: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Alert;

package/components/Alert/Alert.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import classNames from "../../functions/classNames";
+import Box from "../Box/Box";
 var Alert = React.forwardRef(function (_a, ref) {
-    var type = _a.type, className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, rest = __rest(_a, ["type", "className", "corners"]);
-    return (_jsx("div", __assign({ className: classNames("ajui-alert content--".concat(type, " corners--").concat(corners), className), ref: ref }, rest)));
+    var type = _a.type, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, className = _a.className, rest = __rest(_a, ["type", "corners", "className"]);
+    return (_jsx(Box, __assign({}, rest, { className: classNames("aui-alert aui-content--".concat(type, " aui-corners--").concat(corners), className), ref: ref })));
 });
 export default Alert;

package/components/Animated/Animated.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
-type Props = {
+import type { Style } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
     /**
      * Whether to begin the animation.
      * Set to true to start animation, false to start the exit animation.
@@ -26,7 +28,7 @@ type Props = {
         /**
          * Inline styles to apply to the component while animated
          */
-        style?: React.CSSProperties;
+        style?: Style;
     };
     animateFrom?: {
         /**
@@ -36,20 +38,8 @@ type Props = {
         /**
          * Inline styles to apply to the component when not animated
          */
-        style?: React.CSSProperties;
+        style?: Style;
     };
-    /**
-     * Children to render
-     */
-    children: React.ReactNode | React.ReactNode[];
-    /**
-     * [Optional] className to apply to the component always
-     */
-    className?: string;
-    /**
-     * [Optional] Inline styles to apply to the component always
-     */
-    style?: React.CSSProperties;
 };
-declare const Animated: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Animated: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Animated;

package/components/Animated/Animated.js

@@ -9,13 +9,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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, useEffect, useRef } from "react";
 import classNames from "../../functions/classNames";
+import Box from "../Box/Box";
 var Animated = React.forwardRef(function (props, ref) {
-    var animated = props.animated, _a = props.duration, duration = _a === void 0 ? 0.25 : _a, _b = props.keepMounted, keepMounted = _b === void 0 ? false : _b, animateTo = props.animateTo, animateFrom = props.animateFrom, children = props.children, className = props.className, style = props.style;
+    var animated = props.animated, _a = props.duration, duration = _a === void 0 ? 0.25 : _a, _b = props.keepMounted, keepMounted = _b === void 0 ? false : _b, animateTo = props.animateTo, animateFrom = props.animateFrom, className = props.className, style = props.style, rest = __rest(props, ["animated", "duration", "keepMounted", "animateTo", "animateFrom", "className", "style"]);
     var _c = useState(animated || keepMounted), shouldRender = _c[0], setShouldRender = _c[1];
-    var _d = useState(animated ? "forward" : "reverse"), animationState = _d[0], setAnimationState = _d[1];
+    var _d = useState(false), isAnimatingForward = _d[0], setIsAnimatingForward = _d[1];
     var timeoutRef = useRef(null);
     var animationFrameRef = useRef(null);
     var clearRefs = function () {
@@ -29,30 +41,35 @@ var Animated = React.forwardRef(function (props, ref) {
         }
     };
     useEffect(function () {
-        clearRefs();
-        if (animated) {
-            setShouldRender(true);
-            // Use requestAnimationFrame so browser paints shouldRender first
+        // initiate forward animation
+        if (animated && shouldRender) {
+            clearRefs();
             animationFrameRef.current = requestAnimationFrame(function () {
-                setAnimationState("forward");
-                animationFrameRef.current = null;
+                return setIsAnimatingForward(true);
             });
         }
+        return clearRefs;
+    }, [animated, shouldRender]);
+    useEffect(function () {
+        // make container element appear on DOM
+        if (animated) {
+            setShouldRender(true);
+        }
+        // initiate reverse animation
         else {
-            setAnimationState("reverse");
+            clearRefs();
+            setIsAnimatingForward(false);
             timeoutRef.current = window.setTimeout(function () {
                 if (!keepMounted) {
                     setShouldRender(false);
                 }
-                timeoutRef.current = null;
-                // convert to ms
             }, duration * 1000);
         }
         return clearRefs;
-    }, [animated, duration, keepMounted, shouldRender]);
+    }, [animated, duration, keepMounted]);
     if (!shouldRender)
         return null;
-    var currentAnimation = animationState === "forward" ? animateTo : animateFrom;
-    return (_jsx("div", { className: classNames(className, currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.className), style: __assign(__assign({ transition: "all ".concat(duration, "s ease-in-out") }, style), currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.style), ref: ref, children: children }));
+    var currentAnimation = isAnimatingForward ? animateTo : animateFrom;
+    return (_jsx(Box, __assign({ className: classNames(className, currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.className), style: __assign(__assign({ transition: "all ".concat(duration, "s ease-in-out") }, style), currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.style) }, rest, { ref: ref })));
 });
 export default Animated;

package/components/Badge/Badge.d.ts

@@ -1,28 +1,16 @@
 import React from "react";
-import { ContentType, CornerType } from "../../types";
-type Props = {
+import type { ContentType, CornerType } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
     /**
      * The type of badge to display.
      */
     type: ContentType;
-    /**
-     * The content to display in the badge.
-     * Should be short.
-     */
-    children: React.ReactNode | React.ReactNode[];
-    /**
-     * [Optional] Additional class names to apply to the badge.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the badge.
-     */
-    style?: React.CSSProperties;
     /**
      * [Optional] The corner style of the badge.
      * @default "rounded"
      */
     corners?: CornerType;
 };
-declare const Badge: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Badge: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Badge;

package/components/Badge/Badge.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import classNames from "../../functions/classNames";
+import Box from "../Box/Box";
 var Badge = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, rest = __rest(_a, ["type", "className", "corners"]);
-    return (_jsx("div", __assign({ className: classNames("ajui-badge content--".concat(type, " corners--").concat(corners), className), ref: ref }, rest)));
+    return (_jsx(Box, __assign({}, rest, { className: classNames("aui-badge aui-content--".concat(type, " aui-corners--").concat(corners), className), ref: ref })));
 });
 export default Badge;

package/components/Banner/Banner.d.ts

@@ -1,22 +1,11 @@
 import React from "react";
-import { ContentType } from "../../types";
-type Props = {
+import type { ContentType } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
     /**
      * The type of badge to display.
      */
     type: ContentType;
-    /**
-     * The content to display in the banner.
-     */
-    children: React.ReactNode | React.ReactNode[];
-    /**
-     * [Optional] Additional class names to apply to the banner.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the banner.
-     */
-    style?: React.CSSProperties;
 };
-declare const Banner: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Banner: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Banner;

package/components/Banner/Banner.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import classNames from "../../functions/classNames";
+import Box from "../Box/Box";
 var Banner = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, rest = __rest(_a, ["type", "className"]);
-    return (_jsx("div", __assign({ className: classNames("content--".concat(type, " ajui-banner"), className), ref: ref }, rest)));
+    return (_jsx(Box, __assign({}, rest, { className: classNames("aui-content--".concat(type, " aui-banner"), className), ref: ref })));
 });
 export default Banner;

package/components/Box/Box.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { Layout } from "../../utils/types";
+type Props = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    /**
+     * The organization of the container and its children.
+     */
+    layout?: Layout;
+};
+declare const Box: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type { Props as BoxProps };
+export default Box;

package/components/Box/Box.js

@@ -0,0 +1,66 @@
+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 from "react";
+import { classNames } from "../../functions";
+var Box = React.forwardRef(function (_a, ref) {
+    var layout = _a.layout, className = _a.className, style = _a.style, rest = __rest(_a, ["layout", "className", "style"]);
+    var transformedLayout = transformLayout(layout);
+    return (_jsx("div", __assign({}, rest, { className: classNames(transformedLayout.className, className), style: __assign(__assign({}, transformedLayout.style), style), ref: ref })));
+});
+function transformLayout(layout) {
+    if (!layout)
+        return { className: undefined, style: undefined };
+    var axis = layout.axis, gap = layout.gap, align = layout.align, justify = layout.justify, padding = layout.padding, margin = layout.margin, wrap = layout.wrap;
+    var style = {};
+    var className = "aui-flex-".concat(axis);
+    if (align) {
+        className = classNames(className, "aui-align-".concat(align));
+    }
+    if (justify) {
+        className = classNames(className, "aui-justify-".concat(justify));
+    }
+    if (wrap) {
+        className = classNames(className, "aui-flex-wrap");
+    }
+    if (gap) {
+        if (typeof gap === "number")
+            style.gap = gap;
+        else
+            className = classNames(className, "aui-gap-".concat(gap));
+    }
+    if (padding) {
+        if (typeof padding === "number")
+            style.padding = padding;
+        else
+            className = classNames(className, "aui-pa-".concat(padding));
+    }
+    if (margin) {
+        if (typeof margin === "number")
+            style.margin = margin;
+        else
+            className = classNames(className, "aui-ma-".concat(margin));
+    }
+    return { className: className, style: style };
+}
+export default Box;

package/components/Box/index.d.ts

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

package/components/Box/index.js

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

package/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CustomLinkElement } from "../Link/Link";
-import { CornerType } from "../../types";
+import { type CustomLinkElement } from "../Link/Link";
+import type { CornerType } from "../../utils/types";
 type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
     /**
      * [Optional] This can be used as a link if the `to` prop is provided
@@ -26,7 +26,7 @@ type ButtonProps = DefaultButtonProps & {
      * Type of button
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "transparent";
+    variant?: "primary" | "secondary";
     /**
      * Type of corners on the button
      * @default "rounded"

package/components/Button/Button.js

@@ -26,18 +26,18 @@ import { UnstyledLink } from "../Link/Link";
 import classNames from "../../functions/classNames";
 export var UnstyledButton = forwardRef(function (_a, ref) {
     var to = _a.to, LinkElement = _a.LinkElement, className = _a.className, props = __rest(_a, ["to", "LinkElement", "className"]);
-    className = classNames("ajui-button-base", className);
+    className = classNames("aui-button-base", className);
     if (to) {
         return (_jsx(UnstyledLink, { to: to, className: className, style: props.style, role: "button", LinkElement: LinkElement, "aria-label": props["aria-label"], children: props.children }));
     }
-    return _jsx("button", __assign({}, props, { className: className, ref: ref }));
+    return (_jsx("button", __assign({}, props, { className: classNames("aui-action", className), ref: ref })));
 });
 export var IconButton = forwardRef(function (_a, ref) {
     var icon = _a.icon, className = _a.className, props = __rest(_a, ["icon", "className"]);
-    return (_jsx(UnstyledButton, __assign({}, props, { className: classNames("ajui-icon-button", className), ref: ref, children: icon })));
+    return (_jsx(UnstyledButton, __assign({}, props, { className: classNames("aui-icon-button", className), ref: ref, children: icon })));
 });
 var Button = forwardRef(function (_a, ref) {
     var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, className = _a.className, _d = _a.size, size = _d === void 0 ? "regular" : _d, rest = __rest(_a, ["variant", "corners", "className", "size"]);
-    return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames("ajui-button--".concat(variant, " ajui-button-size--").concat(size, " corners--").concat(corners), className), ref: ref })));
+    return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames("aui-button--".concat(variant, " aui-button-size--").concat(size, " aui-corners--").concat(corners), className), ref: ref })));
 });
 export default Button;

package/components/Carousel/Carousel.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
+import type { Style } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
 type ButtonProps = {
     /**
      * Children to render inside the button
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | React.ReactNode[];
     /**
      * Additional class name to apply to the button
      */
@@ -11,9 +13,9 @@ type ButtonProps = {
     /**
      * Additional styles to apply to the button
      */
-    style?: React.CSSProperties;
+    style?: Style;
 };
-type Props = {
+type Props = BoxProps & {
     /**
      * The child elements/slides of the carousel
      */
@@ -50,14 +52,6 @@ type Props = {
      * [Optional] props to supply to the right arrow button
      */
     rightArrowProps?: ButtonProps;
-    /**
-     * [Optional] Additional class name to apply to the carousel.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the carousel.
-     */
-    style?: React.CSSProperties;
 };
-declare const Carousel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Carousel;

package/components/Carousel/Carousel.js

@@ -9,18 +9,30 @@ var __assign = (this && this.__assign) || function () {
     };
     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, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { classNames } from "../../functions";
 import Button from "../Button";
+import Box from "../Box/Box";
 var DEFAULT_DURATION_S = 1;
-var Carousel = React.forwardRef(function (props, ref) {
-    var _a, _b, _c;
-    var children = props.children, className = props.className, style = props.style, hideArrows = props.hideArrows, hideDots = props.hideDots, dotProps = props.dotProps, leftArrowProps = props.leftArrowProps, rightArrowProps = props.rightArrowProps;
+var Carousel = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var children = _a.children, className = _a.className, hideArrows = _a.hideArrows, hideDots = _a.hideDots, dotProps = _a.dotProps, leftArrowProps = _a.leftArrowProps, rightArrowProps = _a.rightArrowProps, autoplayInterval = _a.autoplayInterval, duration = _a.duration, rest = __rest(_a, ["children", "className", "hideArrows", "hideDots", "dotProps", "leftArrowProps", "rightArrowProps", "autoplayInterval", "duration"]);
     // min duration
-    var duration = Math.max((_a = props.duration) !== null && _a !== void 0 ? _a : DEFAULT_DURATION_S, 0.1);
-    var autoplayInterval = props.autoplayInterval
-        ? Math.max(duration, props.autoplayInterval)
+    duration = Math.max(duration !== null && duration !== void 0 ? duration : DEFAULT_DURATION_S, 0.1);
+    autoplayInterval = autoplayInterval
+        ? Math.max(duration, autoplayInterval)
         : undefined;
     var length = children.length;
     var _d = useState({
@@ -68,7 +80,7 @@ var Carousel = React.forwardRef(function (props, ref) {
             transition: "transform ".concat(duration, "s ease-in-out"),
         }
         : undefined;
-    return (_jsxs("div", { className: classNames("ajui-carousel", className), style: style, ref: ref, children: [_jsxs("div", { className: "ajui-carousel-slider", style: __assign(__assign({}, animatingStyles), { flexDirection: delta >= 0 ? "row" : "row-reverse" }), onTransitionEnd: onTransitionEnd, children: [_jsx("div", { className: "ajui-carousel-item", children: children[cur] }), _jsx("div", { className: "ajui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { className: classNames("ajui-carousel-arrow-prev", leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.className), style: leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.style, corners: "pill", "aria-label": "previous", onClick: function () { return startTransition(-1); }, children: (_b = leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.children) !== null && _b !== void 0 ? _b : "←" }), _jsx(Button, { className: classNames("ajui-carousel-arrow-next", rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.className), style: rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.style, corners: "pill", "aria-label": "next", onClick: function () { return startTransition(1); }, children: (_c = rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.children) !== null && _c !== void 0 ? _c : "→" })] })), !hideDots && (_jsx("div", { className: "ajui-carousel-dots", children: children.map(function (_, i) { return (_jsx(Button, { className: classNames("ajui-carousel-dot", dotProps === null || dotProps === void 0 ? void 0 : dotProps.className), corners: "pill", disabled: cur === i || animating, onClick: function () { return startTransition(i - cur); }, style: dotProps === null || dotProps === void 0 ? void 0 : dotProps.style }, i)); }) }))] }))] }));
+    return (_jsxs(Box, __assign({}, rest, { className: classNames("aui-carousel", className), ref: ref, children: [_jsxs(Box, { className: "aui-carousel-slider", style: __assign(__assign({}, animatingStyles), { flexDirection: delta >= 0 ? "row" : "row-reverse" }), onTransitionEnd: onTransitionEnd, children: [_jsx(Box, { className: "aui-carousel-item", children: children[cur] }), _jsx(Box, { className: "aui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { className: classNames("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow", leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.className), style: __assign({ left: 8 }, leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.style), corners: "pill", "aria-label": "previous", onClick: function () { return startTransition(-1); }, children: (_b = leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.children) !== null && _b !== void 0 ? _b : "←" }), _jsx(Button, { className: classNames("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow", rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.className), style: __assign({ right: 8 }, rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.style), corners: "pill", "aria-label": "next", onClick: function () { return startTransition(1); }, children: (_c = rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.children) !== null && _c !== void 0 ? _c : "→" })] })), !hideDots && (_jsx(Box, { layout: { axis: "x", align: "center", gap: "xs" }, className: "aui-carousel-dots", children: children.map(function (_, i) { return (_jsx(Button, { className: classNames("aui-carousel-dot", dotProps === null || dotProps === void 0 ? void 0 : dotProps.className), corners: "pill", disabled: cur === i || animating, onClick: function () { return startTransition(i - cur); }, style: dotProps === null || dotProps === void 0 ? void 0 : dotProps.style }, i)); }) }))] }))] })));
 });
 function safeMod(n, m) {
     return ((n % m) + m) % m;

package/components/Hamburger/Hamburger.d.ts

@@ -1,3 +1,4 @@
+import type { Style } from "../../utils/types";
 export type Props = {
     /**
      * Size of the button in pixels
@@ -39,17 +40,17 @@ export type Props = {
     /**
      * [Optional] additional styles to apply to the button
      */
-    style?: React.CSSProperties;
+    style?: Style;
     /**
      * [Optional] round corners of the bars
      */
     rounded?: boolean;
 };
 type OpenStyle = {
-    outer?: React.CSSProperties;
-    top: React.CSSProperties;
-    bottom: React.CSSProperties;
-    middle?: React.CSSProperties;
+    outer?: Style;
+    top: Style;
+    bottom: Style;
+    middle?: Style;
 };
 type InnerProps = Omit<Props, "variant" | "direction"> & {
     double?: boolean;

package/components/Input/IconInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { InputProps } from "./Input";
-import { CornerType } from "../../types";
+import type { CornerType, Style } from "../../utils/types";
 type IconInputProps = {
     /**
      * [Optional] Icon to display at the start of the input
@@ -17,7 +17,7 @@ type IconInputProps = {
     /**
      * [Optional] Inline styles to add to the container
      */
-    style?: React.CSSProperties;
+    style?: Style;
     /**
      * [Optional] Corner style for the input
      */

package/components/Input/IconInput.js

@@ -12,8 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
+import Box from "../Box";
 var IconInput = forwardRef(function (_a, ref) {
     var startIcon = _a.startIcon, endIcon = _a.endIcon, className = _a.className, style = _a.style, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, inputProps = _a.inputProps;
-    return (_jsxs("div", { className: classNames("ajui-input-default ajui-icon-input corners--".concat(corners), className), style: style, ref: ref, children: [startIcon || null, _jsx("input", __assign({}, inputProps, { className: classNames("ajui-input-base corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon || null] }));
+    return (_jsxs(Box, { layout: { axis: "x", align: "center" }, className: classNames("aui-input-default aui-icon-input aui-corners--".concat(corners), className), style: style, ref: ref, children: [startIcon, _jsx("input", __assign({}, inputProps, { className: classNames("aui-input-base aui-corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon] }));
 });
 export default IconInput;

package/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../types";
+import type { CornerType } from "../../utils/types";
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     /**
      * Type of corners on the input

package/components/Input/Input.js

@@ -25,6 +25,6 @@ import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 var Input = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, props = __rest(_a, ["className", "corners"]);
-    return (_jsx("input", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default corners--".concat(corners), className) })));
+    return (_jsx("input", __assign({}, props, { ref: ref, className: classNames("aui-input-base aui-input-default aui-corners--".concat(corners), className) })));
 });
 export default Input;

package/components/Input/TextArea.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../types";
+import type { CornerType } from "../../utils/types";
 type TextAreaProps = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
     /**
      * Type of corners on the text area

package/components/Input/TextArea.js

@@ -25,6 +25,6 @@ import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 var TextArea = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.rows, rows = _b === void 0 ? 3 : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, props = __rest(_a, ["className", "rows", "corners"]);
-    return (_jsx("textarea", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default corners--".concat(corners), className), rows: rows })));
+    return (_jsx("textarea", __assign({}, props, { ref: ref, className: classNames("aui-input-base aui-input-default aui-corners--".concat(corners), className), rows: rows })));
 });
 export default TextArea;

package/components/Layer/Layer.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-type Props = {
+import { type BoxProps } from "../Box/Box";
+type Props<T extends React.ElementType> = Omit<BoxProps, "children"> & {
     /**
      * Callback that fires when the user clicks outside the layer
      */
@@ -8,15 +9,7 @@ type Props = {
      * The child of the layer.
      * IMPORTANT: the child must be able to accept a ref
      */
-    children: React.ReactElement;
-    /**
-     * [Optional] Additional class name
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles
-     */
-    style?: React.CSSProperties;
+    children: React.ReactElement<React.ComponentPropsWithRef<T>>;
     /**
      * [Optional] Whether to disable the escape key to close the layer
      * @default false
@@ -33,5 +26,5 @@ type Props = {
      */
     disableScrollLock?: boolean;
 };
-declare const Layer: ({ returnFocusOnEscape, disableScrollLock, ...props }: Props) => React.JSX.Element;
+declare const Layer: <T extends React.ElementType>({ returnFocusOnEscape, disableScrollLock, ...props }: Props<T>) => React.JSX.Element;
 export default Layer;

package/components/Layer/Layer.js

@@ -24,6 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import classNames from "../../functions/classNames";
+import Box from "../Box/Box";
 var BaseLayer = function (_a) {
     var onClose = _a.onClose, children = _a.children, style = _a.style, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b, visible = _a.visible;
     var focusRef = useFocusTrap(visible);
@@ -40,7 +41,7 @@ var BaseLayer = function (_a) {
                 document.removeEventListener("keydown", handleEscape);
         };
     }, [onClose, disableEscape]);
-    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onMouseDown: onClose, children: React.cloneElement(children, {
+    return (_jsx(Box, { layout: { axis: "y", align: "center", justify: "center" }, className: classNames("aui-layer-backdrop", className), style: style, onMouseDown: onClose, children: React.cloneElement(children, {
             ref: focusRef,
             onMouseDown: function (e) {
                 var _a, _b;

package/components/Link/Link.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
 type BuiltinLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href">;
-export type CustomLinkElement = (props: Partial<BuiltinLinkProps> & {
+export type CustomLinkElement = React.ForwardRefExoticComponent<BuiltinLinkProps & {
     to: string;
-} & {
-    ref?: React.MutableRefObject<HTMLAnchorElement>;
-}) => React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
 type DefaultLinkProps = BuiltinLinkProps & {
     /**
      * URL to navigate to