@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Heading/Heading.js

@@ -0,0 +1,23 @@
+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";
+// 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
+	});
+}
+export { a as Heading };

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

@@ -0,0 +1,3 @@
+import './Heading.css';// src/components/Heading/Heading.module.css
+var e = "sui-heading-2pnHW", t = { heading: e };
+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,30 @@
+import { listRole as e } from "../../layout/listRole.js";
+import { spaceValue as t } from "../../layout/spaceValue.js";
+import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import { Box as r } from "../Box/Box.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";
+// 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 = r, p = E, m = D, l[10] === y ? h = l[11] : (h = a(i.horizontalFlow, y), l[10] = y, l[11] = h), g = e(D, w), _ = n({ "--sui-horizontal-flow-gap": t(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;
+}
+export { c as HorizontalFlow };

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

@@ -0,0 +1,3 @@
+import './HorizontalFlow.css';// src/components/HorizontalFlow/HorizontalFlow.module.css
+var e = "sui-horizontalFlow-E7MYC", t = { horizontalFlow: e };
+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,21 @@
+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";
+// 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;
+}
+export { a as AddIcon };

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

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A check mark, for something that is on, chosen or done, such as a checked item in a menu. It is hidden from assistive technology unless it has a `label`, so where the control it marks states its own value, such as a menu item's `aria-checked`, leave it without one.
+ *
+ * @example
+ * <Text>
+ *   <CheckIcon label="Saved" /> Draft
+ * </Text>
+ */
+export declare function CheckIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/CheckIcon.js

@@ -0,0 +1,18 @@
+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";
+// src/components/Icon/CheckIcon.tsx
+function i(i) {
+	let a = n(3), o;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M20 6 9 17l-5-5"
+	}), 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;
+}
+export { i as CheckIcon };

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,18 @@
+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";
+// 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;
+}
+export { i as ChevronDownIcon };

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

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A chevron pointing along the line, for something that opens beside it, such as a submenu, or leads onward. It points the way the text runs, so it is mirrored in right-to-left text. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <Button aria-haspopup="menu">
+ *   Move to <ChevronRightIcon />
+ * </Button>
+ */
+export declare function ChevronRightIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/ChevronRightIcon.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";
+// src/components/Icon/ChevronRightIcon.tsx
+function i(i) {
+	let a = n(3), o;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "m9 18 6-6-6-6"
+	}), a[0] = o) : o = a[0];
+	let s;
+	return a[1] === i ? s = a[2] : (s = /* @__PURE__ */ r(t, {
+		...i,
+		mirrored: !0,
+		children: o
+	}), a[1] = i, a[2] = s), s;
+}
+export { i as ChevronRightIcon };

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,21 @@
+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";
+// 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;
+}
+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,36 @@
+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";
+// 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;
+}
+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,36 @@
+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";
+// 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;
+}
+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,27 @@
+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";
+// 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
+	});
+}
+export { i as Icon };

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

@@ -0,0 +1,6 @@
+import './Icon.css';// src/components/Icon/Icon.module.css
+var e = "sui-icon-szG-X", t = "sui-mirrored-H6BYE", n = {
+	icon: e,
+	mirrored: t
+};
+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,30 @@
+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";
+// 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;
+}
+export { a as InfoIcon };

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

@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * Three horizontal lines, for the button that shows a site's navigation when it is collapsed on a narrow screen. 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}>
+ *   <MenuIcon /> Menu
+ * </Button>
+ */
+export declare function MenuIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/MenuIcon.js

@@ -0,0 +1,28 @@
+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";
+// src/components/Icon/MenuIcon.tsx
+function a(a) {
+	let o = n(5), s, c, l;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M4 5h16"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M4 12h16"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M4 19h16"
+	}), 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;
+}
+export { a as MenuIcon };

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,34 @@
+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";
+// 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;
+}
+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,34 @@
+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";
+// 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;
+}
+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;