@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Accordion/AccordionContext.d.ts

@@ -0,0 +1,40 @@
+import type { HeadingLevel } from "../Heading";
+import type { AccordionIndicator, AccordionVariant } from "./Accordion";
+/**
+ * State an `Accordion` shares with its items
+ */
+export interface AccordionContextValue {
+    /**
+     * The generated id every toggle and panel id starts with
+     */
+    baseId: string;
+    /**
+     * Level of every item's heading
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * Shape of every item's indicator
+     */
+    indicator: AccordionIndicator;
+    /**
+     * Values of the open items
+     */
+    openValues: readonly string[];
+    /**
+     * Whether each open panel is a region named by its title
+     */
+    regions: boolean;
+    /**
+     * Opens the item with the given value if it is closed, or closes it if it is open, reporting the open items to
+     * `onValueChange`
+     */
+    toggle: (value: string) => void;
+    /**
+     * Look of the accordion and its items
+     */
+    variant: AccordionVariant;
+}
+/**
+ * Carries an `Accordion`'s state to its items; null outside an `Accordion`
+ */
+export declare const AccordionContext: import("react").Context<AccordionContextValue | null>;

package/dist/components/Accordion/AccordionContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/Accordion/AccordionContext.ts
+var t = e(null);
+export { t as AccordionContext };

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,51 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `AccordionItem`: its own props plus every `div` prop except `dangerouslySetInnerHTML` and `title`
+ */
+export interface AccordionItemProps extends Omit<BoxProps<"div">, "as" | "dangerouslySetInnerHTML" | "title"> {
+    /**
+     * Controls beside the toggle, such as an `IconButton` that adds an entry to the section. They sit outside the
+     * heading, so they are not part of its text or the toggle's name.
+     */
+    actions?: ReactNode;
+    /**
+     * The panel's content
+     */
+    children?: ReactNode;
+    /**
+     * Muted text under the title, inside the toggle, so it is read as part of the toggle's name
+     */
+    description?: ReactNode;
+    /**
+     * Whether the item cannot be opened or closed. A disabled item stays reachable with the keyboard, so its title is
+     * read, and its closed panel is skipped by find-in-page. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the panel's content renders only once the item first opens, for content that is costly to render. It stays
+     * rendered after the item closes. Find-in-page and links cannot reach content that has never rendered. Defaults to
+     * `false`.
+     */
+    lazy?: boolean;
+    /**
+     * The header's text, which names the toggle and, when the accordion has regions, the panel
+     */
+    title: ReactNode;
+    /**
+     * Shown at the end of the toggle, such as a value or a `Counter`. A space separates it from the title, so it is read
+     * after it. Not for interactive content, which cannot sit inside the toggle: put controls in `actions`.
+     */
+    trailing?: ReactNode;
+    /**
+     * Identifies the item in the `Accordion`'s `value`, `defaultValue` and `onValueChange`
+     */
+    value: string;
+}
+/**
+ * One section of an `Accordion`: a heading holding the toggle that opens and closes it, and the panel it shows
+ *
+ * @example
+ * <AccordionItem title="Effects" trailing={<Counter count={2} />} value="effects">…</AccordionItem>
+ */
+export declare function AccordionItem({ actions, children, className, description, disabled, lazy, title, trailing, value, ...rest }: AccordionItemProps): JSX.Element;

package/dist/components/Accordion/AccordionItem.js

@@ -0,0 +1,69 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Accordion.module.js";
+import { panelId as r, titleId as i, toggleId as a } from "./accordionIds.js";
+import { AccordionToggleContent as o } from "./AccordionToggleContent.js";
+import { useAccordionContext as s } from "./useAccordionContext.js";
+import { useFindablePanel as c } from "./useFindablePanel.js";
+import { useHasOpened as l } from "./useHasOpened.js";
+import { clsx as u } from "clsx";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+// src/components/Accordion/AccordionItem.tsx
+function p({ actions: p, children: m, className: h, description: g, disabled: _ = !1, lazy: v = !1, title: y, trailing: b, value: x, ...S }) {
+	let C = s("AccordionItem"), w = C.openValues.includes(x), T = a(C.baseId, x), E = r(C.baseId, x), D = i(C.baseId, x), O = l(w), k = c({
+		disabled: _,
+		onMatch: () => C.toggle(x),
+		open: w
+	}), A = C.regions && w ? {
+		role: "region",
+		"aria-labelledby": D
+	} : {};
+	function j() {
+		_ || C.toggle(x);
+	}
+	return /* @__PURE__ */ f(t, {
+		...S,
+		className: u(n.item, h),
+		"data-disabled": _,
+		"data-open": w,
+		children: [/* @__PURE__ */ f(t, {
+			className: n.header,
+			children: [/* @__PURE__ */ d(t, {
+				as: `h${C.headingLevel}`,
+				className: n.heading,
+				children: /* @__PURE__ */ d(t, {
+					as: "button",
+					className: n.toggle,
+					id: T,
+					onClick: j,
+					type: "button",
+					"aria-controls": E,
+					"aria-disabled": _ ? !0 : void 0,
+					"aria-expanded": w,
+					"data-variant": C.variant,
+					children: /* @__PURE__ */ d(o, {
+						description: g,
+						indicator: C.indicator,
+						title: y,
+						titleId: D,
+						trailing: b
+					})
+				})
+			}), e(p) && /* @__PURE__ */ d(t, {
+				className: n.actions,
+				children: p
+			})]
+		}), /* @__PURE__ */ d(t, {
+			className: n.panel,
+			hidden: !w,
+			id: E,
+			ref: k,
+			...A,
+			children: /* @__PURE__ */ d(t, {
+				className: n.content,
+				children: !v || O ? m : null
+			})
+		})]
+	});
+}
+export { p as AccordionItem };

package/dist/components/Accordion/AccordionToggleContent.d.ts

@@ -0,0 +1,30 @@
+import type { JSX, ReactNode } from "react";
+import type { AccordionIndicator } from "./Accordion";
+interface AccordionToggleContentProps {
+    /**
+     * Muted text under the title
+     */
+    description: ReactNode;
+    /**
+     * Shape of the indicator
+     */
+    indicator: AccordionIndicator;
+    /**
+     * The header's text
+     */
+    title: ReactNode;
+    /**
+     * Id of the element holding the title
+     */
+    titleId: string;
+    /**
+     * Shown at the end of the toggle
+     */
+    trailing: ReactNode;
+}
+/**
+ * What an `AccordionItem`'s toggle shows: the indicator, which the stylesheet places for the look, then its title, and
+ * its description and trailing content, each after a space, so the toggle's name reads them in that order
+ */
+export declare function AccordionToggleContent({ description, indicator, title, titleId, trailing, }: AccordionToggleContentProps): JSX.Element;
+export {};

package/dist/components/Accordion/AccordionToggleContent.js

@@ -0,0 +1,44 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import { AddIcon as n } from "../Icon/AddIcon.js";
+import { ChevronDownIcon as r } from "../Icon/ChevronDownIcon.js";
+import i from "./Accordion.module.js";
+import { c as a } from "react/compiler-runtime";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+// src/components/Accordion/AccordionToggleContent.tsx
+function l(l) {
+	let u = a(16), { description: d, indicator: f, title: p, titleId: m, trailing: h } = l, g;
+	u[0] === f ? g = u[1] : (g = f === "plusMinus" ? /* @__PURE__ */ s(n, { className: `${i.indicator} ${i.plusMinus}` }) : /* @__PURE__ */ s(r, { className: `${i.indicator} ${i.chevron}` }), u[0] = f, u[1] = g);
+	let _;
+	u[2] !== p || u[3] !== m ? (_ = /* @__PURE__ */ s(t, {
+		as: "span",
+		className: i.title,
+		id: m,
+		children: p
+	}), u[2] = p, u[3] = m, u[4] = _) : _ = u[4];
+	let v;
+	u[5] === d ? v = u[6] : (v = e(d) && /* @__PURE__ */ c(o, { children: [" ", /* @__PURE__ */ s(t, {
+		as: "span",
+		className: i.description,
+		children: d
+	})] }), u[5] = d, u[6] = v);
+	let y;
+	u[7] !== _ || u[8] !== v ? (y = /* @__PURE__ */ c(t, {
+		as: "span",
+		className: i.label,
+		children: [_, v]
+	}), u[7] = _, u[8] = v, u[9] = y) : y = u[9];
+	let b;
+	u[10] === h ? b = u[11] : (b = e(h) && /* @__PURE__ */ c(o, { children: [" ", /* @__PURE__ */ s(t, {
+		as: "span",
+		className: i.trailing,
+		children: h
+	})] }), u[10] = h, u[11] = b);
+	let x;
+	return u[12] !== g || u[13] !== y || u[14] !== b ? (x = /* @__PURE__ */ c(o, { children: [
+		g,
+		y,
+		b
+	] }), u[12] = g, u[13] = y, u[14] = b, u[15] = x) : x = u[15], x;
+}
+export { l as AccordionToggleContent };

package/dist/components/Accordion/accordionIds.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Builds the id of an item's toggle
+ *
+ * @param baseId the `Accordion`'s generated id
+ * @param value the item's value
+ * @returns an id unique to the value within its `Accordion`, whatever characters the value holds
+ */
+export declare function toggleId(baseId: string, value: string): string;
+/**
+ * Builds the id of an item's panel
+ *
+ * @param baseId the `Accordion`'s generated id
+ * @param value the item's value
+ * @returns an id unique to the value within its `Accordion`, whatever characters the value holds
+ */
+export declare function panelId(baseId: string, value: string): string;
+/**
+ * Builds the id of an item's title, which names its panel when the panel is a region
+ *
+ * @param baseId the `Accordion`'s generated id
+ * @param value the item's value
+ * @returns an id unique to the value within its `Accordion`, whatever characters the value holds
+ */
+export declare function titleId(baseId: string, value: string): string;

package/dist/components/Accordion/accordionIds.js

@@ -0,0 +1,12 @@
+import { idSegment as e } from "../../accessibility/idSegment.js";
+// src/components/Accordion/accordionIds.ts
+function t(t, n) {
+	return `${t}-toggle-${e(n)}`;
+}
+function n(t, n) {
+	return `${t}-panel-${e(n)}`;
+}
+function r(t, n) {
+	return `${t}-title-${e(n)}`;
+}
+export { n as panelId, r as titleId, t as toggleId };

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

@@ -0,0 +1,4 @@
+export { Accordion } from "./Accordion";
+export type { AccordionIndicator, AccordionProps, AccordionVariant } from "./Accordion";
+export { AccordionItem } from "./AccordionItem";
+export type { AccordionItemProps } from "./AccordionItem";

package/dist/components/Accordion/useAccordionContext.d.ts

@@ -0,0 +1,9 @@
+import type { AccordionContextValue } from "./AccordionContext";
+/**
+ * Reads the state of the surrounding `Accordion`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `Accordion`'s state
+ * @throws MissingContextError when the part is not inside an `Accordion`
+ */
+export declare function useAccordionContext(part: string): AccordionContextValue;

package/dist/components/Accordion/useAccordionContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { AccordionContext as t } from "./AccordionContext.js";
+import { useContext as n } from "react";
+// src/components/Accordion/useAccordionContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Accordion");
+	return i;
+}
+export { r as useAccordionContext };

package/dist/components/Accordion/useFindablePanel.d.ts

@@ -0,0 +1,25 @@
+import type { RefObject } from "react";
+interface FindablePanelOptions {
+    /**
+     * Whether the item is disabled, so its closed panel is skipped by find-in-page
+     */
+    disabled: boolean;
+    /**
+     * Called when find-in-page, a fragment link or the page's URL fragment as the panel mounts matches inside the closed
+     * panel
+     */
+    onMatch: () => void;
+    /**
+     * Whether the item is open
+     */
+    open: boolean;
+}
+/**
+ * Keeps a closed panel hidden until find-in-page or a fragment link matches inside it. Render the panel with `hidden`
+ * set to whether it is closed, and give it the returned ref.
+ *
+ * @param options the item's state and what to do on a match
+ * @returns the ref for the panel element
+ */
+export declare function useFindablePanel({ disabled, onMatch, open }: FindablePanelOptions): RefObject<HTMLDivElement | null>;
+export {};

package/dist/components/Accordion/useFindablePanel.js

@@ -0,0 +1,36 @@
+import { useFragmentTargetReveal as e } from "./useFragmentTargetReveal.js";
+import { useLayoutEffect as t, useRef as n, useState as r } from "react";
+import { c as i } from "react/compiler-runtime";
+// src/components/Accordion/useFindablePanel.ts
+function a(a) {
+	let s = i(15), { disabled: c, onMatch: l, open: u } = a, d = n(null), [f, p] = r(0), m = !u && !c, h;
+	s[0] !== c || s[1] !== u ? (h = () => {
+		u || d.current?.setAttribute("hidden", c ? "" : "until-found");
+	}, s[0] = c, s[1] = u, s[2] = h) : h = s[2];
+	let g;
+	s[3] !== c || s[4] !== u || s[5] !== f ? (g = [
+		c,
+		u,
+		f
+	], s[3] = c, s[4] = u, s[5] = f, s[6] = g) : g = s[6], t(h, g);
+	let _, v;
+	s[7] !== m || s[8] !== l ? (_ = () => {
+		let e = d.current;
+		if (e === null || !m) return;
+		let t = function(t) {
+			t.target === e && (p(o), l());
+		};
+		return e.addEventListener("beforematch", t), () => e.removeEventListener("beforematch", t);
+	}, v = [m, l], s[7] = m, s[8] = l, s[9] = _, s[10] = v) : (_ = s[9], v = s[10]), t(_, v);
+	let y;
+	return s[11] !== m || s[12] !== l || s[13] !== u ? (y = {
+		findable: m,
+		onMatch: l,
+		open: u,
+		panelRef: d
+	}, s[11] = m, s[12] = l, s[13] = u, s[14] = y) : y = s[14], e(y), d;
+}
+function o(e) {
+	return e + 1;
+}
+export { a as useFindablePanel };

package/dist/components/Accordion/useFragmentTargetReveal.d.ts

@@ -0,0 +1,27 @@
+import type { RefObject } from "react";
+interface FragmentTargetRevealOptions {
+    /**
+     * Whether the panel is closed and can be found, so the fragment's target may open it
+     */
+    findable: boolean;
+    /**
+     * Called when the page's URL fragment points inside the panel as it mounts
+     */
+    onMatch: () => void;
+    /**
+     * Whether the item is open
+     */
+    open: boolean;
+    /**
+     * The panel element
+     */
+    panelRef: RefObject<HTMLElement | null>;
+}
+/**
+ * Opens a closed panel when, as it mounts, the page's URL fragment points at an element inside it, and scrolls that
+ * element into view once the panel has opened
+ *
+ * @param options the panel, its state and what to do on a match
+ */
+export declare function useFragmentTargetReveal({ findable, onMatch, open, panelRef }: FragmentTargetRevealOptions): void;
+export {};

package/dist/components/Accordion/useFragmentTargetReveal.js

@@ -0,0 +1,36 @@
+import { useEffect as e, useLayoutEffect as t, useRef as n } from "react";
+import { c as r } from "react/compiler-runtime";
+// src/components/Accordion/useFragmentTargetReveal.ts
+function i(i) {
+	let o = r(8), { findable: s, onMatch: c, open: l, panelRef: u } = i, d = n(!1), f = n(null), p, m;
+	o[0] !== s || o[1] !== c || o[2] !== u ? (p = () => {
+		if (d.current) return;
+		d.current = !0;
+		let e = a();
+		s && e !== null && u.current?.contains(e) === !0 && (f.current = e, c());
+	}, m = [
+		s,
+		c,
+		u
+	], o[0] = s, o[1] = c, o[2] = u, o[3] = p, o[4] = m) : (p = o[3], m = o[4]), t(p, m);
+	let h, g;
+	o[5] === l ? (h = o[6], g = o[7]) : (h = () => {
+		l && f.current !== null && (f.current.scrollIntoView(), f.current = null);
+	}, g = [l], o[5] = l, o[6] = h, o[7] = g), e(h, g);
+}
+function a() {
+	let e = window.location.hash.slice(1);
+	return e === "" ? null : o(e) ?? o(s(e));
+}
+function o(e) {
+	return document.getElementById(e) ?? Array.from(document.getElementsByName(e)).find((e) => e instanceof HTMLAnchorElement) ?? null;
+}
+function s(e) {
+	let t = new TextEncoder().encode(e), n = [];
+	for (let e = 0; e < t.length; e++) {
+		let r = String.fromCharCode(t[e + 1] ?? 0, t[e + 2] ?? 0);
+		t[e] === 37 && /^[\da-f]{2}$/i.test(r) ? (n.push(Number.parseInt(r, 16)), e += 2) : n.push(t[e]);
+	}
+	return new TextDecoder("utf-8", { ignoreBOM: !0 }).decode(new Uint8Array(n));
+}
+export { i as useFragmentTargetReveal };

package/dist/components/Accordion/useHasOpened.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tells whether an item has been open at any time since it mounted
+ *
+ * @param open whether the item is open now
+ * @returns true once the item has opened, including while it is open
+ */
+export declare function useHasOpened(open: boolean): boolean;

package/dist/components/Accordion/useHasOpened.js

@@ -0,0 +1,7 @@
+import { useState as e } from "react";
+// src/components/Accordion/useHasOpened.ts
+function t(t) {
+	let [n, r] = e(t);
+	return t && !n && r(!0), n || t;
+}
+export { t as useHasOpened };

package/dist/components/Alert/Alert.css

@@ -0,0 +1 @@
+.sui-alert-7cYyI{--sui-alert-bg:var(--sui-color-info-subtle,#f0f3ff);--sui-alert-accent:var(--sui-color-info-text,#4338ca);--sui-link-color:currentColor;align-items:flex-start;gap:var(--sui-space-3,.75rem);padding:var(--sui-space-4,1rem);border:var(--sui-border-width,1px) solid var(--sui-alert-accent);border-radius:var(--sui-radius-md,4px);background-color:var(--sui-alert-bg);color:var(--sui-color-text,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-font-size-md,1rem);line-height:var(--sui-line-height-normal,1.5);overflow-wrap:anywhere;display:flex}.sui-alert-7cYyI[data-tone=danger]{--sui-alert-bg:var(--sui-color-danger-subtle,#fff1f1);--sui-alert-accent:var(--sui-color-danger-text,#b91c1c)}.sui-alert-7cYyI[data-tone=success]{--sui-alert-bg:var(--sui-color-success-subtle,#eefef3);--sui-alert-accent:var(--sui-color-success-text,#166534)}.sui-alert-7cYyI[data-tone=warning]{--sui-alert-bg:var(--sui-color-warning-subtle,#fffce1);--sui-alert-accent:var(--sui-color-warning-text,#854d0e)}.sui-icon-Zg6SB{block-size:1lh;color:var(--sui-alert-accent);flex:none;align-items:center;display:flex}.sui-content-UXnmZ{flex:1;min-inline-size:0}.sui-title-abGgF{color:var(--sui-alert-accent);font-weight:var(--sui-font-weight-bold,700)}

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,47 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Alert colours and icons: the theme's four status colours
+ */
+export type AlertTone = "danger" | "info" | "success" | "warning";
+/**
+ * Props for `Alert`: its own props plus every native div prop
+ */
+export interface AlertProps extends Omit<BoxProps<"div">, "as" | "title"> {
+    /**
+     * Icon shown before the content. Defaults to the icon for the tone; `null` or `false` shows none.
+     */
+    icon?: ReactNode;
+    /**
+     * Bold first line above the children. It replaces the native `title` attribute, so it never
+     * reaches the DOM as an attribute.
+     */
+    title?: ReactNode;
+    /**
+     * Alert colour and default icon. Defaults to `info`.
+     */
+    tone?: AlertTone;
+}
+/**
+ * Inline message in one of four tones, with an icon for the tone and an optional title. It has no
+ * role, so screen readers read it in place. Set `role="alert"` for an error raised by an action, or
+ * `aria-live="polite"` for a quiet update. Screen readers announce a polite region reliably only when
+ * it is on the page before its content changes, so keep the element with `aria-live` rendered and
+ * render the alert inside it.
+ *
+ * @example
+ * <Alert title="Scheduled maintenance" tone="warning">
+ *   The dashboard is read-only on Saturday from 02:00 to 03:00 UTC.
+ * </Alert>
+ *
+ * @example
+ * <Box aria-live="polite">
+ *   {isSaved && <Alert tone="success">Draft saved</Alert>}
+ * </Box>
+ *
+ * @example
+ * <Alert role="alert" title="Payment failed" tone="danger">
+ *   The card was declined. Check the details and try again.
+ * </Alert>
+ */
+export declare function Alert({ children, className, icon, title, tone, ...rest }: AlertProps): JSX.Element;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,27 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Alert.module.js";
+import { AlertIcon as r } from "./AlertIcon.js";
+import { clsx as i } from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+// src/components/Alert/Alert.tsx
+function s({ children: s, className: c, icon: l, title: u, tone: d = "info", ...f }) {
+	let p = l !== null && l !== !1;
+	return /* @__PURE__ */ o(t, {
+		...f,
+		className: i(n.alert, c),
+		"data-tone": d,
+		children: [p ? /* @__PURE__ */ a(t, {
+			as: "span",
+			className: n.icon,
+			children: l === void 0 ? /* @__PURE__ */ a(r, { tone: d }) : l
+		}) : null, /* @__PURE__ */ o(t, {
+			className: n.content,
+			children: [e(u) ? /* @__PURE__ */ a(t, {
+				className: n.title,
+				children: u
+			}) : null, s]
+		})]
+	});
+}
+export { s as Alert };

package/dist/components/Alert/Alert.module.js

@@ -0,0 +1,8 @@
+import './Alert.css';// src/components/Alert/Alert.module.css
+var e = "sui-alert-7cYyI", t = "sui-icon-Zg6SB", n = "sui-content-UXnmZ", r = "sui-title-abGgF", i = {
+	alert: e,
+	icon: t,
+	content: n,
+	title: r
+};
+export { e as alert, n as content, i as default, t as icon, r as title };

package/dist/components/Alert/AlertIcon.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from "react";
+import type { AlertTone } from "./Alert";
+interface AlertIconProps {
+    /**
+     * Alert tone whose glyph to draw
+     */
+    tone: AlertTone;
+}
+/**
+ * Decorative glyph for an alert tone, drawn in the current text colour and hidden from assistive
+ * technology, since the alert's text carries the meaning
+ */
+export declare function AlertIcon({ tone }: AlertIconProps): JSX.Element;
+export {};

package/dist/components/Alert/AlertIcon.js

@@ -0,0 +1,42 @@
+import { Box as e } from "../Box/Box.js";
+import { c as t } from "react/compiler-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+// src/components/Alert/AlertIcon.tsx
+var i = {
+	danger: "M15 9l-6 6M9 9l6 6",
+	info: "M12 16v-4M12 8h.01",
+	success: "M8 12.5l3 3 5-6",
+	warning: "M12 10v4M12 17h.01"
+};
+function a(a) {
+	let o = t(7), { tone: s } = a, c;
+	o[0] === s ? c = o[1] : (c = s === "warning" ? /* @__PURE__ */ n(e, {
+		as: "path",
+		d: "M12 3L22 20H2z"
+	}) : /* @__PURE__ */ n(e, {
+		as: "circle",
+		cx: 12,
+		cy: 12,
+		r: 10
+	}), o[0] = s, o[1] = c);
+	let l = i[s], u;
+	o[2] === l ? u = o[3] : (u = /* @__PURE__ */ n(e, {
+		as: "path",
+		d: l
+	}), o[2] = l, o[3] = u);
+	let d;
+	return o[4] !== c || o[5] !== u ? (d = /* @__PURE__ */ r(e, {
+		as: "svg",
+		fill: "none",
+		height: "1.25em",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		viewBox: "0 0 24 24",
+		width: "1.25em",
+		"aria-hidden": "true",
+		children: [c, u]
+	}), o[4] = c, o[5] = u, o[6] = d) : d = o[6], d;
+}
+export { a as AlertIcon };

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

@@ -0,0 +1,2 @@
+export { Alert } from "./Alert";
+export type { AlertProps, AlertTone } from "./Alert";

package/dist/components/Avatar/Avatar.css

@@ -0,0 +1 @@
+.sui-avatar-3xMuZ{--sui-avatar-size:2rem;--sui-avatar-font-scale:.4;--sui-avatar-outline-width:var(--sui-border-width,1px);inline-size:var(--sui-avatar-size);block-size:var(--sui-avatar-size);outline:var(--sui-avatar-outline-width) solid var(--sui-color-control-border,transparent);outline-offset:calc(var(--sui-avatar-outline-width) * -1);background-color:var(--sui-color-secondary,#e5e7eb);color:var(--sui-color-on-secondary,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:calc(var(--sui-avatar-size) * var(--sui-avatar-font-scale));font-weight:var(--sui-font-weight-bold,700);vertical-align:middle;border-radius:50%;flex:none;place-items:center;line-height:1;display:inline-grid;overflow:hidden}.sui-avatar-3xMuZ[data-size=xs]{--sui-avatar-size:1rem;--sui-avatar-font-scale:.55;--sui-avatar-outline-width:min(var(--sui-border-width,1px), 1px)}.sui-avatar-3xMuZ[data-size=sm]{--sui-avatar-size:1.5rem}.sui-avatar-3xMuZ[data-size=lg]{--sui-avatar-size:3rem}.sui-image-ieqGp{object-fit:cover;block-size:100%;inline-size:100%}@media (forced-colors:active){.sui-avatar-3xMuZ{outline-color:canvastext}}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,33 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Avatar sizes: `xs` is 1rem across, `sm` 1.5rem, `md` 2rem and `lg` 3rem
+ */
+export type AvatarSize = "lg" | "md" | "sm" | "xs";
+/**
+ * Props for `Avatar`: its own props plus every `span` prop except `children`, `dangerouslySetInnerHTML` and `role`
+ */
+export interface AvatarProps extends Omit<BoxProps<"span">, "as" | "children" | "dangerouslySetInnerHTML" | "role"> {
+    /**
+     * The person's or team's name. It names the avatar for screen readers, unless a non-blank `aria-label` replaces it,
+     * and gives the initials shown when there is no image.
+     */
+    name: string;
+    /**
+     * Avatar size. `xs` shows one initial. Defaults to `md`.
+     */
+    size?: AvatarSize;
+    /**
+     * Image URL. Initials show while it is missing or empty, and after it fails to load until `src` changes to a URL
+     * that has not failed.
+     */
+    src?: string;
+}
+/**
+ * A person or team, shown as their image or their initials in a circle. Screen readers read it as an image named by
+ * `name`. When the name is printed beside it, pass `aria-hidden={true}` so the name is not read twice.
+ *
+ * @example
+ * <Avatar name="Pat Lee" size="sm" src={pat.avatarUrl} />
+ */
+export declare function Avatar({ "aria-label": ariaLabel, className, name, size, src, ...rest }: AvatarProps): JSX.Element;