@adamjanicki/ui 1.5.6 → 1.5.7

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,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 { 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

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: classNames("ajui-action", 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, " 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/Carousel/Carousel.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import type { DivProps, Style } from "../../types";
+import type { Style } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
 type ButtonProps = {
     /**
      * Children to render inside 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,15 @@ 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";
 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 +80,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(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,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/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;

package/components/Link/Link.js

@@ -29,10 +29,10 @@ var DefaultLinkElement = forwardRef(function (_a, ref) {
 });
 export var UnstyledLink = forwardRef(function (_a, ref) {
     var _b = _a.LinkElement, LinkElement = _b === void 0 ? DefaultLinkElement : _b, className = _a.className, props = __rest(_a, ["LinkElement", "className"]);
-    return (_jsx(LinkElement, __assign({}, props, { className: classNames("ajui-action", className), ref: ref })));
+    return (_jsx(LinkElement, __assign({}, props, { className: classNames("aui-action", className), ref: ref })));
 });
 var Link = forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("ajui-link-default", className), ref: ref })));
+    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("aui-link-default", className), ref: ref })));
 });
 export default Link;

package/components/Select/Select.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.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> & {
     /**
      * Array of options to display in the select

package/components/Select/Select.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 Select = 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("div", { className: classNames("ajui-select-container", "ajui-corners--".concat(corners), disabled ? "ajui-select-disabled" : undefined, className), style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: "ajui-select-base ajui-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("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "ajui-select-triangle", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219" }) })] }));
+    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-base 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("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "aui-select-triangle", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219" }) })] }));
 };
 export default forwardRef(Select);

package/components/Spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-import type { Style } from "../../types";
+import type { Style } from "../../utils/types";
 type Props = {
     /**
      * [Optional] Additional class names to apply to the spinner.

package/components/Spinner/Spinner.js

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

package/index.d.ts

@@ -2,13 +2,13 @@ export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
+export { default as Box } from "./components/Box";
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
 export { default as Hamburger } from "./components/Hamburger";
 export * from "./components/Hamburger";
-export { default as InlineCode } from "./components/InlineCode";
 export { default as Input } from "./components/Input";
 export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
@@ -18,4 +18,3 @@ export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";
 export * from "./functions";
-export * from "./types";

package/index.js

@@ -3,13 +3,13 @@ export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
+export { default as Box } from "./components/Box";
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
 export { default as Hamburger } from "./components/Hamburger";
 export * from "./components/Hamburger";
-export { default as InlineCode } from "./components/InlineCode";
 export { default as Input } from "./components/Input";
 export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
@@ -21,5 +21,3 @@ export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";
 // Functions
 export * from "./functions";
-// Types
-export * from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "description": "Basic UI components and hooks for React in TypeScript",
   "type": "module",
   "main": "./index.js",
@@ -15,7 +15,8 @@
     "clean": "./clean.sh",
     "lint": "eslint src --max-warnings=0",
     "build": "npm run clean && npm run lint && tsc; cp src/style.css ./style.css",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "dryrun": "npm publish --dry-run"
   },
   "peerDependencies": {
     "react": ">=18",