@adamjanicki/ui 1.5.7 → 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/Box/Box.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
-import type { Layout } from "../../utils/types";
-type Props = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+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.
      */

package/components/Button/Button.d.ts

@@ -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

@@ -32,10 +32,6 @@ export var UnstyledButton = forwardRef(function (_a, 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("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("aui-button--".concat(variant, " aui-button-size--").concat(size, " aui-corners--").concat(corners), className), ref: ref })));

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,11 +1,11 @@
 import React from "react";
-import type { Style } from "../../utils/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
      */

package/components/Carousel/Carousel.js

@@ -25,6 +25,7 @@ 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 (_a, ref) {
     var _b, _c;
@@ -80,7 +81,7 @@ var Carousel = React.forwardRef(function (_a, ref) {
             transition: "transform ".concat(duration, "s ease-in-out"),
         }
         : undefined;
-    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)); }) }))] }))] })));
+    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/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/Select/Select.js

@@ -24,8 +24,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 import Box from "../Box";
+import Icon from "../Icon";
 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(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" }) })] }));
+    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(Icon, { icon: "down", className: "aui-select-icon", "aria-hidden": true })] }));
 };
 export default forwardRef(Select);

package/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Accordion } from "./components/Accordion";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
@@ -9,6 +10,7 @@ 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 Icon } from "./components/Icon";
 export { default as Input } from "./components/Input";
 export * from "./components/Input";
 export { default as Layer } from "./components/Layer";

package/index.js

@@ -1,4 +1,5 @@
 // Components
+export { default as Accordion } from "./components/Accordion";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
@@ -10,6 +11,7 @@ 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 Icon } from "./components/Icon";
 export { default as Input } from "./components/Input";
 export * from "./components/Input";
 export { default as Layer } from "./components/Layer";

package/package.json

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

package/style.css

@@ -21,6 +21,7 @@
   --aui-disabled-opacity: 0.5;
   --aui-default-transition: 0.25s ease-in-out;
   --aui-default-opacity-dim: 0.75;
+  --aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
   /* Corners */
   --aui-sharp-radius: 0;
   --aui-rounded-radius: 8px;
@@ -53,6 +54,8 @@
   --aui-layer-backdrop-background: rgba(200, 200, 200, 0.7);
   /* Link */
   --aui-link-color: #0070ff;
+  /* Select */
+  --aui-select-icon: var(--aui-dark-gray);
 }
 
 [data-theme="dark"] {
@@ -61,6 +64,7 @@
   --aui-default-text-color: white;
   --aui-default-background: var(--aui-obsidian);
   --aui-default-border: var(--aui-dark-gray);
+  --aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.36);
   /* Buttons */
   --aui-button-primary-background: white;
   --aui-button-primary-color: var(--aui-obsidian);
@@ -89,6 +93,8 @@
   --aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);
   /* Link */
   --aui-link-color: #33bfff;
+  /* Select */
+  --aui-select-icon: var(--aui-moon-gray);
 }
 
 /* General */
@@ -134,6 +140,28 @@
   border-color: var(--aui-default-border);
 }
 
+/* Accordion */
+.aui-accordion {
+  background-color: var(--aui-default-background);
+  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
+    var(--aui-container-box-shadow);
+}
+.aui-accordion-label {
+  font-weight: 600;
+}
+
+.aui-accordion-hr {
+  border: none;
+  height: var(--aui-xxs);
+  background-color: var(--aui-default-border);
+  width: 100%;
+  margin: 0;
+}
+
+.aui-accordion-arrow {
+  color: var(--aui-select-icon);
+}
+
 /* Alert */
 .aui-alert {
   padding: var(--aui-l);
@@ -175,7 +203,6 @@
 /* Button */
 .aui-button-base {
   background: none;
-  color: inherit;
   border: none;
   padding: 0;
 }
@@ -191,14 +218,6 @@
   font-weight: 600;
 }
 
-.aui-icon-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: opacity var(--aui-default-transition);
-  padding: var(--aui-m);
-}
-
 .aui-button-base:disabled {
   cursor: default !important;
   opacity: var(--aui-disabled-opacity);
@@ -212,6 +231,7 @@
 }
 
 .aui-button--secondary {
+  color: var(--aui-default-text-color);
   background-color: var(--aui-default-background);
   box-shadow: 0 0 0 1px var(--aui-default-border) inset,
     var(--aui-subtle-box-shadow);
@@ -226,7 +246,6 @@
 
 @media (hover: hover) {
   .aui-button--primary:not([disabled]):hover,
-  .aui-icon-button:not([disabled]):hover,
   .aui-link-default:hover {
     opacity: var(--aui-default-opacity-dim);
   }
@@ -309,14 +328,15 @@
   cursor: default;
 }
 
-.aui-select-triangle {
-  --size: 12px;
+.aui-select-icon {
+  --size: 10px;
+  color: var(--aui-select-icon);
   width: var(--size);
   height: var(--size);
   position: absolute;
-  top: 50%;
+  top: calc(50% + 1px);
   transform: translateY(-50%);
-  right: calc(var(--size) - 4px);
+  right: var(--size);
   pointer-events: none;
 }
 
@@ -331,6 +351,11 @@
   background: var(--aui-layer-backdrop-background);
 }
 
+/* Icons */
+.aui-icon * {
+  fill: currentColor;
+}
+
 /* Spinner */
 .aui-spinner {
   animation: aui-spinner-animation 1s linear infinite;

package/utils/types.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
+/**
+ * Default children type; can be a node or list of nodes
+ */
+export type Children = React.ReactNode | React.ReactNode[];
 /**
  * The type of corner to display, controlling the border radius property.
  */