@adamjanicki/ui 1.5.6 → 1.5.8

package/components/Accordion/Accordion.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Style } from "../../utils/types";
+type Props = {
+    /**
+     * Drawers to render as accordion sections
+     */
+    drawers: Drawer[];
+    /**
+     * [Optional] additional class name to apply to the accordion
+     */
+    className?: string;
+    /**
+     * [Optional] additional styles to apply to the accordion
+     */
+    style?: Style;
+    /**
+     * Duration of the drawer animation (in seconds)
+     */
+    duration?: number;
+    /**
+     * Whether to hide the dividers between drawers
+     * @default false
+     */
+    hideDividers?: boolean;
+};
+declare const Accordion: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+type Drawer = {
+    /**
+     * Label for the accordion drawer
+     */
+    label: string;
+    /**
+     * Content hidden within this accordion drawer
+     */
+    content: React.ReactNode;
+};
+type DrawerProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    item: Drawer;
+    duration?: number;
+    showDivider: boolean;
+};
+declare const Drawer: ({ item, open, onOpenChange, duration, showDivider, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/components/Accordion/Accordion.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import Box from "../Box";
+import Icon from "../Icon";
+import { UnstyledButton } from "../Button";
+import Animated from "../Animated";
+import { classNames } from "../../functions";
+var Accordion = React.forwardRef(function (_a, ref) {
+    var drawers = _a.drawers, className = _a.className, style = _a.style, duration = _a.duration, hideDividers = _a.hideDividers;
+    var _b = useState(new Set()), openIndices = _b[0], setOpenIndices = _b[1];
+    return (_jsx(Box, { layout: { axis: "y" }, className: classNames("aui-accordion aui-corners--rounded", className), style: style, ref: ref, children: drawers.map(function (item, i) { return (_jsx(Drawer, { item: item, open: openIndices.has(i), onOpenChange: function (open) {
+                return setOpenIndices(function (prev) {
+                    var next = new Set(prev);
+                    if (open) {
+                        next.add(i);
+                    }
+                    else {
+                        next.delete(i);
+                    }
+                    return next;
+                });
+            }, duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) }));
+});
+var Drawer = function (_a) {
+    var item = _a.item, open = _a.open, onOpenChange = _a.onOpenChange, duration = _a.duration, showDivider = _a.showDivider;
+    var boxRef = useRef(null);
+    var _b = useState(), height = _b[0], setHeight = _b[1];
+    var children = item.content;
+    useEffect(function () {
+        if (open && children && boxRef.current) {
+            setHeight(boxRef.current.offsetHeight);
+        }
+    }, [open, children]);
+    // TODO: change this to use calc-size when supported
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size#browser_compatibility
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { layout: { axis: "y" }, children: [_jsx(UnstyledButton, { onClick: function () { return onOpenChange(!open); }, children: _jsxs(Box, { layout: { axis: "x", align: "center", gap: "m", padding: "l" }, children: [_jsx(Icon, { size: 12, icon: open ? "down" : "right", className: "aui-accordion-arrow" }), _jsx("span", { className: "aui-accordion-label", children: item.label })] }) }), _jsx(Animated, { style: { overflow: "hidden" }, keepMounted: true, duration: duration, animated: open, animateFrom: {
+                            style: {
+                                visibility: "hidden",
+                                height: 0,
+                                transform: "translateY(-4px)",
+                                opacity: 0.9,
+                            },
+                        }, animateTo: {
+                            style: { height: height, transform: "translateY(0)", opacity: 1 },
+                        }, children: _jsx(Box, { ref: boxRef, children: children }) })] }), showDivider && _jsx("hr", { className: "aui-accordion-hr" })] }));
+};
+export default Accordion;

package/components/Accordion/index.d.ts

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

package/components/Accordion/index.js

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

package/components/Alert/Alert.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-import type { ContentType, CornerType, DivProps } from "../../types";
-type Props = DivProps & {
+import type { ContentType, CornerType } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
     /**
      * The type of alert to display.
      */

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({}, rest, { className: classNames("ajui-alert ajui-content--".concat(type, " ajui-corners--").concat(corners), className), ref: ref })));
+    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,6 +1,7 @@
 import React from "react";
-import type { DivProps, Style } from "../../types";
-type Props = DivProps & {
+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.

package/components/Animated/Animated.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 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, rest = __rest(props, ["animated", "duration", "keepMounted", "animateTo", "animateFrom", "children", "className", "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(false), isAnimatingForward = _d[0], setIsAnimatingForward = _d[1];
     var timeoutRef = useRef(null);
@@ -69,6 +70,6 @@ var Animated = React.forwardRef(function (props, ref) {
     if (!shouldRender)
         return null;
     var currentAnimation = isAnimatingForward ? animateTo : animateFrom;
-    return (_jsx("div", __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, children: children })));
+    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,6 +1,7 @@
 import React from "react";
-import type { ContentType, CornerType, DivProps } from "../../types";
-type Props = DivProps & {
+import type { ContentType, CornerType } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
     /**
      * The type of badge to display.
      */

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({}, rest, { className: classNames("ajui-badge ajui-content--".concat(type, " ajui-corners--").concat(corners), className), ref: ref })));
+    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,6 +1,7 @@
 import React from "react";
-import type { ContentType, DivProps } from "../../types";
-type Props = DivProps & {
+import type { ContentType } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
     /**
      * The type of badge to display.
      */

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({}, rest, { className: classNames("ajui-content--".concat(type, " ajui-banner"), className), ref: ref })));
+    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,15 @@
+import React from "react";
+import type { Layout, Children } from "../../utils/types";
+type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
+    /**
+     * Children to render inside the box
+     */
+    children?: Children;
+    /**
+     * 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 { type CustomLinkElement } from "../Link/Link";
-import type { CornerType } from "../../types";
+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
@@ -14,13 +14,6 @@ type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTM
      */
     LinkElement?: CustomLinkElement;
 };
-type IconButtonProps = Omit<DefaultButtonProps, "children"> & {
-    /**
-     * Icon to display inside the button
-     * I would usually use FontAwesome, but for added flexibility, it's any node
-     */
-    icon: React.ReactNode;
-};
 type ButtonProps = DefaultButtonProps & {
     /**
      * Type of button
@@ -39,6 +32,5 @@ type ButtonProps = DefaultButtonProps & {
     size?: "regular" | "small";
 };
 export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<DefaultButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/components/Button/Button.js

@@ -26,18 +26,14 @@ 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: classNames("ajui-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("button", __assign({}, props, { className: classNames("aui-action", className), ref: ref })));
 });
 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, " ajui-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/Button/index.d.ts

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

package/components/Button/index.js

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

package/components/Carousel/Carousel.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import type { DivProps, Style } from "../../types";
+import type { Children, Style } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
 type ButtonProps = {
     /**
      * Children to render inside the button
      */
-    children?: React.ReactNode | React.ReactNode[];
+    children?: Children;
     /**
      * Additional class name to apply to the button
      */
@@ -14,7 +15,7 @@ type ButtonProps = {
      */
     style?: Style;
 };
-type Props = DivProps & {
+type Props = BoxProps & {
     /**
      * The child elements/slides of the carousel
      */

package/components/Carousel/Carousel.js

@@ -24,14 +24,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { classNames } from "../../functions";
 import Button from "../Button";
+import Box from "../Box/Box";
+import Icon from "../Icon";
 var DEFAULT_DURATION_S = 1;
-var Carousel = React.forwardRef(function (props, ref) {
-    var _a, _b, _c;
-    var children = props.children, className = props.className, hideArrows = props.hideArrows, hideDots = props.hideDots, dotProps = props.dotProps, leftArrowProps = props.leftArrowProps, rightArrowProps = props.rightArrowProps, rest = __rest(props, ["children", "className", "hideArrows", "hideDots", "dotProps", "leftArrowProps", "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({
@@ -79,7 +81,7 @@ var Carousel = React.forwardRef(function (props, ref) {
             transition: "transform ".concat(duration, "s ease-in-out"),
         }
         : undefined;
-    return (_jsxs("div", __assign({}, rest, { className: classNames("ajui-carousel", className), 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(Icon, { icon: "left", size: 12, style: { marginRight: 2 } })) }), _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 : (_jsx(Icon, { icon: "right", size: 12, style: { marginLeft: 2 } })) })] })), !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,4 +1,4 @@
-import type { Style } from "../../types";
+import type { Style } from "../../utils/types";
 export type Props = {
     /**
      * Size of the button in pixels

package/components/Icon/Icon.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { type IconType } from "./icons";
+type Props = Omit<React.DetailedHTMLProps<React.SVGAttributes<SVGSVGElement>, SVGSVGElement>, "children" | "viewBox"> & {
+    /**
+     * The version of icon to render
+     */
+    icon: IconType;
+    /**
+     * Size of the icon
+     */
+    size?: number;
+};
+declare const Icon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default Icon;

package/components/Icon/Icon.js

@@ -0,0 +1,33 @@
+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 icons from "./icons";
+import { classNames } from "../../functions";
+var defaultViewBox = "0 0 512 512";
+var Icon = React.forwardRef(function (_a, ref) {
+    var icon = _a.icon, className = _a.className, size = _a.size, style = _a.style, rest = __rest(_a, ["icon", "className", "size", "style"]);
+    var _b = icons[icon], contents = _b.contents, viewBox = _b.viewBox;
+    return (_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox || defaultViewBox, className: classNames("aui-icon", className), style: __assign({ width: size, height: size }, style) }, rest, { ref: ref, children: contents.map(function (icon, i) { return (_jsx(React.Fragment, { children: icon }, i)); }) })));
+});
+export default Icon;

package/components/Icon/icons.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type IconDefinition = {
+    readonly contents: React.JSX.Element[];
+    readonly viewBox?: string;
+};
+export declare const iconTypes: readonly ["up", "down", "left", "right"];
+export type IconType = (typeof iconTypes)[number];
+declare const icons: Record<IconType, IconDefinition>;
+export default icons;

package/components/Icon/icons.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export var iconTypes = ["up", "down", "left", "right"];
+var arrowPath = "M94.0908,296.3057c-29.82338,0-54-24.17662-54-54s24.17662-54,54-54c.00237,0,.00475,0,.00712,0c.0017,0,141.65138,0,221.99288,0v-222c0-29.82338,24.17662-54,54-54s54,24.17662,54,54c0,.00237,0,.00475,0,.00712s0,273.40726,0,275.97468c0,.00607,0,.01213,0,.0182c0,29.82338-24.17662,54-54,54h-276Z";
+var icons = {
+    down: {
+        contents: [
+            _jsx("path", { d: arrowPath, transform: "matrix(.707107 0.707107-.707107 0.707107 165.642289-79.868246)" }),
+        ],
+    },
+    up: {
+        contents: [
+            _jsx("path", { d: arrowPath, transform: "matrix(-.707107-.707107 0.707107-.707107 346.357711 591.868246)" }),
+        ],
+    },
+    left: {
+        contents: [
+            _jsx("path", { d: arrowPath, transform: "matrix(-.707107 0.707107-.707107-.707107 591.868246 165.642289)" }),
+        ],
+    },
+    right: {
+        contents: [
+            _jsx("path", { d: arrowPath, transform: "matrix(.707107-.707107 0.707107 0.707107-79.868246 346.357711)" }),
+        ],
+    },
+};
+export default icons;

package/components/Icon/index.d.ts

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

package/components/Icon/index.js

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

package/components/Input/IconInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { InputProps } from "./Input";
-import type { CornerType, Style } from "../../types";
+import type { CornerType, Style } from "../../utils/types";
 type IconInputProps = {
     /**
      * [Optional] Icon to display at the start of 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 ajui-corners--".concat(corners), className), style: style, ref: ref, children: [startIcon || null, _jsx("input", __assign({}, inputProps, { className: classNames("ajui-input-base ajui-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 type { 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 ajui-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 type { 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 ajui-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,6 +1,6 @@
 import React from "react";
-import type { DivProps } from "../../types";
-type Props<T extends React.ElementType> = Omit<DivProps, "children"> & {
+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
      */

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;