@krelborn/stylesui 0.0.0-stage → 0.8.1

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,39 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+import type { TextTone } from "../Text";
+/**
+ * Heading level, rendered as the matching `h1`–`h6` element
+ */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Heading sizes, mapped to the `--sui-font-size-*` tokens
+ */
+export type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+/**
+ * Props for `Heading`: its own props plus every heading element prop
+ */
+export interface HeadingProps extends Omit<BoxProps<"h1">, "as"> {
+    /**
+     * Heading level; decides the rendered element
+     */
+    level: HeadingLevel;
+    /**
+     * Font size. Defaults to a size matching the level (1 is `3xl`, 6 is `sm`).
+     */
+    size?: HeadingSize;
+    /**
+     * Text colour. `muted` is for a quiet heading that labels a group, such as a sidebar section. Defaults to
+     * `default`, which inherits the surrounding text colour.
+     */
+    tone?: TextTone;
+}
+/**
+ * Section heading in the theme's heading font
+ *
+ * @example
+ * <Heading level={2}>Settings</Heading>
+ *
+ * @example
+ * <Heading level={2} size="xs" tone="muted">For review</Heading>
+ */
+export declare function Heading({ className, level, size, tone, ...rest }: HeadingProps): JSX.Element;

package/dist/components/Heading/Heading.js

@@ -0,0 +1,24 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Heading.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Heading/Heading.tsx
+var i = {
+	1: "3xl",
+	2: "2xl",
+	3: "xl",
+	4: "lg",
+	5: "md",
+	6: "sm"
+};
+function a({ className: a, level: o, size: s, tone: c = "default", ...l }) {
+	return /* @__PURE__ */ r(e, {
+		...l,
+		as: `h${o}`,
+		className: n(t.heading, a),
+		"data-size": s ?? i[o],
+		"data-tone": c
+	});
+}
+//#endregion
+export { a as Heading };

package/dist/components/Heading/Heading.module.js

@@ -0,0 +1,4 @@
+import './Heading.css';//#region src/components/Heading/Heading.module.css
+var e = "sui-heading-2pnHW", t = { heading: e };
+//#endregion
+export { t as default, e as heading };

package/dist/components/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from "./Heading";
+export type { HeadingLevel, HeadingProps, HeadingSize } from "./Heading";

package/dist/components/HorizontalFlow/HorizontalFlow.css

@@ -0,0 +1 @@
+.sui-horizontalFlow-E7MYC{gap:var(--sui-horizontal-flow-gap);flex-direction:row;display:flex}.sui-horizontalFlow-E7MYC[data-wrap]{flex-wrap:wrap}.sui-horizontalFlow-E7MYC:where(ul,ol){margin:0;padding:0;list-style:none}.sui-horizontalFlow-E7MYC[data-align=start]{align-items:start}.sui-horizontalFlow-E7MYC[data-align=center]{align-items:center}.sui-horizontalFlow-E7MYC[data-align=end]{align-items:end}.sui-horizontalFlow-E7MYC[data-align=stretch]{align-items:stretch}.sui-horizontalFlow-E7MYC[data-align=baseline]{align-items:baseline}.sui-horizontalFlow-E7MYC[data-justify=start]{justify-content:start}.sui-horizontalFlow-E7MYC[data-justify=center]{justify-content:center}.sui-horizontalFlow-E7MYC[data-justify=end]{justify-content:end}.sui-horizontalFlow-E7MYC[data-justify=between]{justify-content:space-between}

package/dist/components/HorizontalFlow/HorizontalFlow.d.ts

@@ -0,0 +1,30 @@
+import type { JSX } from "react";
+import type { Alignment, Justification, Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface HorizontalFlowOwnProps {
+    /**
+     * Cross-axis placement of children
+     */
+    align: Alignment;
+    /**
+     * Space between children and between wrapped lines
+     */
+    gap: Space;
+    /**
+     * Main-axis distribution of children
+     */
+    justify: Justification;
+    /**
+     * Whether children wrap onto new lines when they run out of room
+     */
+    wrap: boolean;
+}
+/**
+ * Props for `HorizontalFlow`: its own props plus every prop supported by the element given in `as`
+ */
+export type HorizontalFlowProps<E extends BoxElement = "div"> = HorizontalFlowOwnProps & Omit<BoxProps<E>, keyof HorizontalFlowOwnProps>;
+/**
+ * Horizontal flex flow shared by `Row` and `Cluster`
+ */
+export declare function HorizontalFlow<E extends BoxElement = "div">({ align, as, className, gap, justify, wrap, ...rest }: HorizontalFlowProps<E>): JSX.Element;
+export {};

package/dist/components/HorizontalFlow/HorizontalFlow.js

@@ -0,0 +1,31 @@
+import { Box as e } from "../Box/Box.js";
+import { listRole as t } from "../../layout/listRole.js";
+import { spaceValue as n } from "../../layout/spaceValue.js";
+import { withCustomProperties as r } from "../../layout/withCustomProperties.js";
+import i from "./HorizontalFlow.module.js";
+import { clsx as a } from "clsx";
+import { c as o } from "react/compiler-runtime";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/HorizontalFlow/HorizontalFlow.tsx
+function c(c) {
+	let l = o(22), u, d, f, p, m, h, g, _, v;
+	if (l[0] !== c) {
+		let { align: o, as: s, className: y, gap: b, justify: x, wrap: S, ...C } = c;
+		d = o, f = x, v = S;
+		let { role: w, style: T, ...E } = C, D = s ?? "div";
+		u = e, p = E, m = D, l[10] === y ? h = l[11] : (h = a(i.horizontalFlow, y), l[10] = y, l[11] = h), g = t(D, w), _ = r({ "--sui-horizontal-flow-gap": n(b) }, T), l[0] = c, l[1] = u, l[2] = d, l[3] = f, l[4] = p, l[5] = m, l[6] = h, l[7] = g, l[8] = _, l[9] = v;
+	} else u = l[1], d = l[2], f = l[3], p = l[4], m = l[5], h = l[6], g = l[7], _ = l[8], v = l[9];
+	let y = v ? "" : void 0, b;
+	return l[12] !== u || l[13] !== d || l[14] !== f || l[15] !== p || l[16] !== m || l[17] !== h || l[18] !== g || l[19] !== _ || l[20] !== y ? (b = /* @__PURE__ */ s(u, {
+		...p,
+		as: m,
+		className: h,
+		role: g,
+		style: _,
+		"data-align": d,
+		"data-justify": f,
+		"data-wrap": y
+	}), l[12] = u, l[13] = d, l[14] = f, l[15] = p, l[16] = m, l[17] = h, l[18] = g, l[19] = _, l[20] = y, l[21] = b) : b = l[21], b;
+}
+//#endregion
+export { c as HorizontalFlow };

package/dist/components/HorizontalFlow/HorizontalFlow.module.js

@@ -0,0 +1,4 @@
+import './HorizontalFlow.css';//#region src/components/HorizontalFlow/HorizontalFlow.module.css
+var e = "sui-horizontalFlow-E7MYC", t = { horizontalFlow: e };
+//#endregion
+export { t as default, e as horizontalFlow };

package/dist/components/HorizontalFlow/index.d.ts

@@ -0,0 +1,2 @@
+export { HorizontalFlow } from "./HorizontalFlow";
+export type { HorizontalFlowProps } from "./HorizontalFlow";

package/dist/components/Icon/AddIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A plus sign, for adding something such as an item, a row or a file. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="Add item" onClick={addItem}>
+ *   <AddIcon />
+ * </IconButton>
+ */
+export declare function AddIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/AddIcon.js

@@ -0,0 +1,22 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Icon/AddIcon.tsx
+function a(a) {
+	let o = n(4), s, c;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M5 12h14"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M12 5v14"
+	}), o[0] = s, o[1] = c) : (s = o[0], c = o[1]);
+	let l;
+	return o[2] === a ? l = o[3] : (l = /* @__PURE__ */ i(t, {
+		...a,
+		children: [s, c]
+	}), o[2] = a, o[3] = l), l;
+}
+//#endregion
+export { a as AddIcon };

package/dist/components/Icon/ChevronDownIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A chevron pointing down, for a control that opens a menu or a list below it, or expands a section. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <Button aria-expanded={open} onClick={toggle}>
+ *   Options <ChevronDownIcon />
+ * </Button>
+ */
+export declare function ChevronDownIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/ChevronDownIcon.js

@@ -0,0 +1,19 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Icon/ChevronDownIcon.tsx
+function i(i) {
+	let a = n(3), o;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "m6 9 6 6 6-6"
+	}), a[0] = o) : o = a[0];
+	let s;
+	return a[1] === i ? s = a[2] : (s = /* @__PURE__ */ r(t, {
+		...i,
+		children: o
+	}), a[1] = i, a[2] = s), s;
+}
+//#endregion
+export { i as ChevronDownIcon };

package/dist/components/Icon/CloseIcon.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A cross, for closing or dismissing something such as a dialog or a banner. It is hidden from assistive technology
+ * unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="Close" onClick={close}>
+ *   <CloseIcon />
+ * </IconButton>
+ */
+export declare function CloseIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/CloseIcon.js

@@ -0,0 +1,22 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Icon/CloseIcon.tsx
+function a(a) {
+	let o = n(4), s, c;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M18 6 6 18"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "m6 6 12 12"
+	}), o[0] = s, o[1] = c) : (s = o[0], c = o[1]);
+	let l;
+	return o[2] === a ? l = o[3] : (l = /* @__PURE__ */ i(t, {
+		...a,
+		children: [s, c]
+	}), o[2] = a, o[3] = l), l;
+}
+//#endregion
+export { a as CloseIcon };

package/dist/components/Icon/ColorModeIcon.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A sun half hidden behind a crescent moon, for the colour mode, such as on a button that switches between light and
+ * dark. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="Dark mode" onClick={toggleDarkMode} aria-pressed={isDark}>
+ *   <ColorModeIcon />
+ * </IconButton>
+ */
+export declare function ColorModeIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/ColorModeIcon.js

@@ -0,0 +1,37 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Icon/ColorModeIcon.tsx
+function a(a) {
+	let o = n(7), s, c, l, u, d;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M12 2v2"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M16 12a4 4 0 0 0-4-4"
+	}), u = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "m19 5-1.256 1.256"
+	}), d = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M20 12h2"
+	}), o[0] = s, o[1] = c, o[2] = l, o[3] = u, o[4] = d) : (s = o[0], c = o[1], l = o[2], u = o[3], d = o[4]);
+	let f;
+	return o[5] === a ? f = o[6] : (f = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l,
+			u,
+			d
+		]
+	}), o[5] = a, o[6] = f), f;
+}
+//#endregion
+export { a as ColorModeIcon };

package/dist/components/Icon/DeleteIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A bin, for deleting something for good. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="Delete message" onClick={deleteMessage}>
+ *   <DeleteIcon />
+ * </IconButton>
+ */
+export declare function DeleteIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/DeleteIcon.js

@@ -0,0 +1,37 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Icon/DeleteIcon.tsx
+function a(a) {
+	let o = n(7), s, c, l, u, d;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M10 11v6"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M14 11v6"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+	}), u = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M3 6h18"
+	}), d = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+	}), o[0] = s, o[1] = c, o[2] = l, o[3] = u, o[4] = d) : (s = o[0], c = o[1], l = o[2], u = o[3], d = o[4]);
+	let f;
+	return o[5] === a ? f = o[6] : (f = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l,
+			u,
+			d
+		]
+	}), o[5] = a, o[6] = f), f;
+}
+//#endregion
+export { a as DeleteIcon };

package/dist/components/Icon/Icon.css

@@ -0,0 +1 @@
+.sui-icon-szG-X{vertical-align:-.125em;block-size:1em;inline-size:1em;stroke-width:var(--sui-icon-stroke-width,2);flex-shrink:0;display:inline-block}.sui-mirrored-H6BYE:dir(rtl){transform:matrix(-1,0,0,1,24,0)}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,40 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for every icon: its own props plus every `svg` prop except those its artwork and `label` decide. It is 1em
+ * square, so `font-size` sizes it, its colour follows `color`, and its stroke weight follows `--sui-icon-stroke-width`.
+ */
+export interface IconProps extends Omit<BoxProps<"svg">, "aria-hidden" | "aria-label" | "aria-labelledby" | "as" | "children" | "dangerouslySetInnerHTML" | "fill" | "height" | "role" | "stroke" | "strokeLinecap" | "strokeLinejoin" | "strokeWidth" | "viewBox" | "width"> {
+    /**
+     * Not accepted: the icon is hidden from assistive technology exactly when it has no `label`
+     */
+    "aria-hidden"?: never;
+    /**
+     * Not accepted: the `label` names the icon
+     */
+    "aria-label"?: never;
+    /**
+     * Not accepted: the `label` names the icon
+     */
+    "aria-labelledby"?: never;
+    /**
+     * What the icon means, read by screen readers. Without it, or with an empty one, the icon is hidden from them, which
+     * suits an icon beside text or inside a named button.
+     */
+    label?: string;
+}
+interface IconBaseProps extends IconProps {
+    /**
+     * The glyph's shapes, drawn in round strokes on a 24 by 24 grid
+     */
+    children: ReactNode;
+    /**
+     * Whether the glyph points the way the text runs, so it is mirrored in right-to-left text
+     */
+    mirrored?: boolean;
+}
+/**
+ * The svg element every icon renders: 1em square, stroked in `currentColor`, and decorative unless it has a `label`
+ */
+export declare function Icon({ children, className, label, mirrored, ...rest }: IconBaseProps): JSX.Element;
+export {};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,28 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Icon.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Icon/Icon.tsx
+function i({ children: i, className: a, label: o, mirrored: s = !1, ...c }) {
+	let l = !o;
+	return /* @__PURE__ */ r(e, {
+		...c,
+		as: "svg",
+		className: n(t.icon, a),
+		fill: "none",
+		role: l ? void 0 : "img",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		viewBox: "0 0 24 24",
+		"aria-hidden": l ? !0 : void 0,
+		"aria-label": l ? void 0 : o,
+		children: s ? /* @__PURE__ */ r(e, {
+			as: "g",
+			className: t.mirrored,
+			children: i
+		}) : i
+	});
+}
+//#endregion
+export { i as Icon };

package/dist/components/Icon/Icon.module.js

@@ -0,0 +1,7 @@
+import './Icon.css';//#region src/components/Icon/Icon.module.css
+var e = "sui-icon-szG-X", t = "sui-mirrored-H6BYE", n = {
+	icon: e,
+	mirrored: t
+};
+//#endregion
+export { n as default, e as icon, t as mirrored };

package/dist/components/Icon/InfoIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A letter i in a circle, for information about something, such as an app's About details. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="About" {...getTriggerProps()}>
+ *   <InfoIcon />
+ * </IconButton>
+ */
+export declare function InfoIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/InfoIcon.js

@@ -0,0 +1,31 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Icon/InfoIcon.tsx
+function a(a) {
+	let o = n(5), s, c, l;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M12 16v-4"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M12 8h.01"
+	}), o[0] = s, o[1] = c, o[2] = l) : (s = o[0], c = o[1], l = o[2]);
+	let u;
+	return o[3] === a ? u = o[4] : (u = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l
+		]
+	}), o[3] = a, o[4] = u), u;
+}
+//#endregion
+export { a as InfoIcon };

package/dist/components/Icon/MoreHorizontalIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * Three dots in a row, for a menu of more actions, such as one at the end of a toolbar. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="More actions" {...getTriggerProps()}>
+ *   <MoreHorizontalIcon />
+ * </IconButton>
+ */
+export declare function MoreHorizontalIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/MoreHorizontalIcon.js

@@ -0,0 +1,35 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Icon/MoreHorizontalIcon.tsx
+function a(a) {
+	let o = n(5), s, c, l;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "12",
+		cy: "12",
+		r: "1"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "19",
+		cy: "12",
+		r: "1"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "5",
+		cy: "12",
+		r: "1"
+	}), o[0] = s, o[1] = c, o[2] = l) : (s = o[0], c = o[1], l = o[2]);
+	let u;
+	return o[3] === a ? u = o[4] : (u = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l
+		]
+	}), o[3] = a, o[4] = u), u;
+}
+//#endregion
+export { a as MoreHorizontalIcon };

package/dist/components/Icon/MoreVerticalIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * Three dots in a column, for a menu of more actions, such as one at the end of a list item or a table row. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="More actions" {...getTriggerProps()}>
+ *   <MoreVerticalIcon />
+ * </IconButton>
+ */
+export declare function MoreVerticalIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/MoreVerticalIcon.js

@@ -0,0 +1,35 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Icon/MoreVerticalIcon.tsx
+function a(a) {
+	let o = n(5), s, c, l;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "12",
+		cy: "12",
+		r: "1"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "12",
+		cy: "5",
+		r: "1"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "12",
+		cy: "19",
+		r: "1"
+	}), o[0] = s, o[1] = c, o[2] = l) : (s = o[0], c = o[1], l = o[2]);
+	let u;
+	return o[3] === a ? u = o[4] : (u = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l
+		]
+	}), o[3] = a, o[4] = u), u;
+}
+//#endregion
+export { a as MoreVerticalIcon };

package/dist/components/Icon/PaletteIcon.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A painter's palette dotted with paint, for choosing colours, such as the button that opens an appearance or theme
+ * menu. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="Appearance" {...getTriggerProps()}>
+ *   <PaletteIcon />
+ * </IconButton>
+ */
+export declare function PaletteIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/PaletteIcon.js

@@ -0,0 +1,49 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Icon/PaletteIcon.tsx
+function a(a) {
+	let o = n(7), s, c, l, u, d;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "13.5",
+		cy: "6.5",
+		fill: "currentColor",
+		r: ".5"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "17.5",
+		cy: "10.5",
+		fill: "currentColor",
+		r: ".5"
+	}), u = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "6.5",
+		cy: "12.5",
+		fill: "currentColor",
+		r: ".5"
+	}), d = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "8.5",
+		cy: "7.5",
+		fill: "currentColor",
+		r: ".5"
+	}), o[0] = s, o[1] = c, o[2] = l, o[3] = u, o[4] = d) : (s = o[0], c = o[1], l = o[2], u = o[3], d = o[4]);
+	let f;
+	return o[5] === a ? f = o[6] : (f = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l,
+			u,
+			d
+		]
+	}), o[5] = a, o[6] = f), f;
+}
+//#endregion
+export { a as PaletteIcon };