barua-ui 0.2.0

package/dist/index.js

@@ -0,0 +1,2462 @@
+"use client";
+
+// src/provider.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect2 } from "react";
+
+// src/toast.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+
+// src/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/toast.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+var ICONS = {
+  success: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "m6.5 10.3 2.3 2.3 4.7-5.2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  danger: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 6v5m0 3v.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  warning: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 3.5 18 17H2L10 3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 8.5v3.5m0 2.2v.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  info: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 9v5m0-8v.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] })
+};
+function useToast() {
+  const push = useContext(ToastContext);
+  if (!push) throw new Error("useToast must be used within <BaruaProvider>");
+  return push;
+}
+function ToastProvider({ children }) {
+  const [items, setItems] = useState([]);
+  const nextId = useRef(1);
+  const dismiss = useCallback((id) => {
+    setItems((list) => list.map((t) => t.id === id ? { ...t, leaving: true } : t));
+    setTimeout(() => setItems((list) => list.filter((t) => t.id !== id)), 260);
+  }, []);
+  const push = useCallback(
+    (opts) => {
+      const id = nextId.current++;
+      setItems((list) => [...list, { id, variant: "info", duration: 4e3, ...opts }]);
+      const duration = opts.duration ?? 4e3;
+      if (duration > 0) setTimeout(() => dismiss(id), duration);
+    },
+    [dismiss]
+  );
+  const [container, setContainer] = useState(null);
+  useEffect(() => setContainer(document.body), []);
+  const region = useMemo(
+    () => container === null ? null : createPortal(
+      /* @__PURE__ */ jsx("div", { className: "b-toast-region", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "status",
+          className: cn("b-toast", `b-toast--${t.variant}`, t.leaving && "is-leaving"),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "b-toast__icon", children: ICONS[t.variant ?? "info"] }),
+            /* @__PURE__ */ jsxs("div", { className: "b-toast__content", children: [
+              t.title && /* @__PURE__ */ jsx("div", { className: "b-toast__title", children: t.title }),
+              t.description && /* @__PURE__ */ jsx("div", { className: "b-toast__desc", children: t.description })
+            ] }),
+            t.action && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "b-toast__action",
+                onClick: () => {
+                  t.action?.onClick();
+                  dismiss(t.id);
+                },
+                children: t.action.label
+              }
+            )
+          ]
+        },
+        t.id
+      )) }),
+      container
+    ),
+    [items, dismiss, container]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: push, children: [
+    children,
+    region
+  ] });
+}
+
+// src/provider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ThemeContext = createContext2(null);
+var MAP_URI = "data:image/svg+xml," + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><defs><linearGradient id="x" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#ff0000" stop-opacity="0"/><stop offset="1" stop-color="#ff0000"/></linearGradient><linearGradient id="y" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#00ff00" stop-opacity="0"/><stop offset="1" stop-color="#00ff00"/></linearGradient><radialGradient id="c"><stop offset="0" stop-color="#808000"/><stop offset="0.68" stop-color="#808000"/><stop offset="1" stop-color="#808000" stop-opacity="0"/></radialGradient></defs><rect width="256" height="256" fill="#000"/><rect width="256" height="256" fill="url(#x)" style="mix-blend-mode:screen"/><rect width="256" height="256" fill="url(#y)" style="mix-blend-mode:screen"/><rect width="256" height="256" fill="url(#c)"/></svg>'
+);
+function enableRefraction() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("b-refract")) {
+    document.documentElement.classList.add("b-refract");
+    return;
+  }
+  if (!("chrome" in window) || !CSS.supports("backdrop-filter", "url(#x)")) return;
+  const host = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  host.setAttribute("width", "0");
+  host.setAttribute("height", "0");
+  host.setAttribute("aria-hidden", "true");
+  host.style.position = "absolute";
+  host.innerHTML = `<filter id="b-refract" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"><feImage href="${MAP_URI}" preserveAspectRatio="none" result="m"/><feDisplacementMap in="SourceGraphic" in2="m" scale="-32" xChannelSelector="R" yChannelSelector="G"/></filter>`;
+  document.body.appendChild(host);
+  document.documentElement.classList.add("b-refract");
+}
+function BaruaProvider({
+  children,
+  theme = "auto",
+  accent,
+  glass = false,
+  refraction = true
+}) {
+  useEffect2(() => {
+    const root = document.documentElement;
+    if (theme === "auto") delete root.dataset.theme;
+    else root.dataset.theme = theme;
+    if (accent && accent !== "blue") root.dataset.accent = accent;
+    else delete root.dataset.accent;
+    if (glass) root.dataset.glass = "liquid";
+    else delete root.dataset.glass;
+  }, [theme, accent, glass]);
+  useEffect2(() => {
+    if (refraction) enableRefraction();
+    else document.documentElement.classList.remove("b-refract");
+  }, [refraction]);
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value: { theme }, children: /* @__PURE__ */ jsx2(ToastProvider, { children }) });
+}
+function useBaruaTheme() {
+  const ctx = useContext2(ThemeContext);
+  if (!ctx) throw new Error("useBaruaTheme must be used within <BaruaProvider>");
+  return ctx;
+}
+function ThemeScript() {
+  const js = 'try{const t=localStorage.getItem("barua-theme");if(t)document.documentElement.dataset.theme=t;if(localStorage.getItem("barua-glass"))document.documentElement.dataset.glass="liquid"}catch(e){}';
+  return /* @__PURE__ */ jsx2("script", { dangerouslySetInnerHTML: { __html: js } });
+}
+
+// src/actions.tsx
+import { forwardRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function buttonClasses(p, extra) {
+  return cn(
+    "b-btn",
+    p.variant === "liquid" ? "b-btn--primary b-btn--liquid" : p.variant && p.variant !== "default" && `b-btn--${p.variant}`,
+    p.size && p.size !== "md" && `b-btn--${p.size}`,
+    p.pill && "b-btn--pill",
+    p.block && "b-btn--block",
+    p.loading && "is-loading",
+    p.active && "is-active",
+    p.icon && "b-icon-btn",
+    extra
+  );
+}
+var Button = forwardRef(function Button2({ variant, size, pill, block: block2, loading, icon, active, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      ref,
+      className: buttonClasses({ variant, size, pill, block: block2, loading, icon, active }, className),
+      "aria-busy": loading || void 0,
+      ...rest,
+      children
+    }
+  );
+});
+var ButtonLink = forwardRef(function ButtonLink2({ variant, size, pill, block: block2, loading, icon, active, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx3(
+    "a",
+    {
+      ref,
+      className: buttonClasses({ variant, size, pill, block: block2, loading, icon, active }, className),
+      ...rest,
+      children
+    }
+  );
+});
+var Fab = forwardRef(function Fab2({ extended, inline, className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      ref,
+      className: cn("b-btn", !extended && "b-icon-btn", "b-fab", extended && "b-fab--extended", className),
+      style: inline ? { position: "static", ...style } : style,
+      ...rest,
+      children
+    }
+  );
+});
+function Toolbar({
+  glass,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3("div", { role: "toolbar", className: cn("b-toolbar", glass && "b-toolbar--glass", className), ...rest, children });
+}
+
+// src/forms.tsx
+import {
+  forwardRef as forwardRef2,
+  useId,
+  useRef as useRef2
+} from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Field({ label, help, error, required, htmlFor, className, children }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("b-field", error ? "is-invalid" : void 0, className), children: [
+    label && /* @__PURE__ */ jsx4("label", { className: cn("b-label", required && "b-label--required"), htmlFor, children: label }),
+    children,
+    help && !error && /* @__PURE__ */ jsx4("p", { className: "b-help", children: help }),
+    error && /* @__PURE__ */ jsx4("p", { className: "b-error", role: "alert", children: error })
+  ] });
+}
+var Input = forwardRef2(function Input2({ filled, density, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ref,
+      className: cn(
+        "b-input",
+        filled && "b-input--filled",
+        density && density !== "md" && `b-input--${density}`,
+        className
+      ),
+      ...rest
+    }
+  );
+});
+var Textarea = forwardRef2(
+  function Textarea2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx4("textarea", { ref, className: cn("b-textarea", className), ...rest });
+  }
+);
+var Select = forwardRef2(
+  function Select2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx4("select", { ref, className: cn("b-select", className), ...rest });
+  }
+);
+var Checkbox = forwardRef2(function Checkbox2({ label, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs2("label", { className: cn("b-checkbox", className), children: [
+    /* @__PURE__ */ jsx4("input", { ref, type: "checkbox", ...rest }),
+    label && /* @__PURE__ */ jsx4("span", { children: label })
+  ] });
+});
+var Radio = forwardRef2(function Radio2({ label, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs2("label", { className: cn("b-radio", className), children: [
+    /* @__PURE__ */ jsx4("input", { ref, type: "radio", ...rest }),
+    label && /* @__PURE__ */ jsx4("span", { children: label })
+  ] });
+});
+var Switch = forwardRef2(function Switch2({ label, small, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs2("label", { className: cn("b-switch", small && "b-switch--sm", className), children: [
+    /* @__PURE__ */ jsx4("input", { ref, type: "checkbox", role: "switch", ...rest }),
+    label && /* @__PURE__ */ jsx4("span", { children: label })
+  ] });
+});
+var Slider = forwardRef2(
+  function Slider2({ className, onInput, ...rest }, ref) {
+    return /* @__PURE__ */ jsx4(
+      "input",
+      {
+        ref,
+        type: "range",
+        className: cn("b-slider", className),
+        onInput: (e) => {
+          const el = e.currentTarget;
+          const min = Number(el.min) || 0;
+          const max = Number(el.max) || 100;
+          el.style.setProperty("--b-slider-fill", `${(Number(el.value) - min) / (max - min) * 100}%`);
+          onInput?.(e);
+        },
+        ...rest
+      }
+    );
+  }
+);
+function OtpInput({
+  length = 6,
+  value = "",
+  onChange,
+  invalid,
+  className,
+  "aria-label": ariaLabel = "One-time code"
+}) {
+  const refs = useRef2([]);
+  const id = useId();
+  const emit = (chars) => onChange?.(chars.join(""));
+  const setChar = (i, ch) => {
+    const chars = Array.from({ length }, (_, j) => value[j] ?? "");
+    chars[i] = ch;
+    emit(chars);
+  };
+  return /* @__PURE__ */ jsx4("div", { className: cn("b-otp", invalid && "is-invalid", className), role: "group", "aria-label": ariaLabel, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx4(
+    "input",
+    {
+      id: `${id}-${i}`,
+      ref: (el) => {
+        refs.current[i] = el;
+      },
+      inputMode: "numeric",
+      autoComplete: i === 0 ? "one-time-code" : "off",
+      maxLength: 1,
+      "aria-label": `Digit ${i + 1}`,
+      className: value[i] ? "is-filled" : void 0,
+      value: value[i] ?? "",
+      onChange: (e) => {
+        const ch = e.target.value.replace(/\D/g, "").slice(-1);
+        setChar(i, ch);
+        if (ch) refs.current[i + 1]?.focus();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Backspace" && !value[i]) refs.current[i - 1]?.focus();
+      },
+      onPaste: (e) => {
+        const digits = e.clipboardData.getData("text").replace(/\D/g, "");
+        if (!digits) return;
+        e.preventDefault();
+        emit(Array.from({ length }, (_2, j) => digits[j] ?? ""));
+        refs.current[Math.min(digits.length, length - 1)]?.focus();
+      }
+    },
+    i
+  )) });
+}
+
+// src/content.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Card = forwardRef3(function Card2({ variant = "default", interactive, flush, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref,
+      className: cn(
+        "b-card",
+        variant !== "default" && `b-card--${variant}`,
+        interactive && "b-card--interactive",
+        flush && "b-card--flush",
+        className
+      ),
+      ...rest
+    }
+  );
+});
+var CardHeader = (p) => /* @__PURE__ */ jsx5("div", { ...p, className: cn("b-card__header", p.className) });
+var CardBody = (p) => /* @__PURE__ */ jsx5("div", { ...p, className: cn("b-card__body", p.className) });
+var CardFooter = (p) => /* @__PURE__ */ jsx5("div", { ...p, className: cn("b-card__footer", p.className) });
+var CardTitle = (p) => /* @__PURE__ */ jsx5("div", { ...p, className: cn("b-card__title", p.className) });
+var CardSubtitle = (p) => /* @__PURE__ */ jsx5("div", { ...p, className: cn("b-card__subtitle", p.className) });
+var CardEyebrow = (p) => /* @__PURE__ */ jsx5("div", { ...p, className: cn("b-card__eyebrow", p.className) });
+function StoryCard({
+  media,
+  eyebrow,
+  title,
+  subtitle,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("b-card b-card--media-overlay", className), ...rest, children: [
+    /* @__PURE__ */ jsx5("div", { className: "b-card__media", children: media }),
+    /* @__PURE__ */ jsxs3("div", { className: "b-card__overlay", children: [
+      eyebrow && /* @__PURE__ */ jsx5("div", { className: "b-card__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ jsx5("div", { className: "b-card__title", children: title }),
+      subtitle && /* @__PURE__ */ jsx5("div", { className: "b-card__subtitle", children: subtitle })
+    ] })
+  ] });
+}
+function Badge({ variant = "default", dot, className, ...rest }) {
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      className: cn("b-badge", variant !== "default" && `b-badge--${variant}`, dot && "b-badge--dot", className),
+      ...rest
+    }
+  );
+}
+function Tag(p) {
+  return /* @__PURE__ */ jsx5("span", { ...p, className: cn("b-tag", p.className) });
+}
+function Chip({ selected, onRemove, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs3("button", { type: "button", className: cn("b-chip", selected && "is-selected", className), "aria-pressed": selected, ...rest, children: [
+    children,
+    onRemove && /* @__PURE__ */ jsx5(
+      "span",
+      {
+        role: "button",
+        "aria-label": "Remove",
+        className: "b-chip__remove",
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        children: "\u2715"
+      }
+    )
+  ] });
+}
+function Avatar({ size = "md", src, alt, online, square, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      className: cn(
+        "b-avatar",
+        size !== "md" && `b-avatar--${size}`,
+        online && "b-avatar--online",
+        square && "b-avatar--square",
+        className
+      ),
+      ...rest,
+      children: src ? /* @__PURE__ */ jsx5("img", { src, alt: alt ?? "" }) : children
+    }
+  );
+}
+function AvatarGroup(p) {
+  return /* @__PURE__ */ jsx5("span", { ...p, className: cn("b-avatar-group", p.className) });
+}
+function IconTile({ color = "accent", small, className, ...rest }) {
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      className: cn(
+        "b-icon-tile",
+        small && "b-icon-tile--sm",
+        color !== "accent" && `b-icon-tile--${color}`,
+        className
+      ),
+      ...rest
+    }
+  );
+}
+function List({ plain, insetDividers, className, ...rest }) {
+  return /* @__PURE__ */ jsx5(
+    "ul",
+    {
+      className: cn("b-list", plain && "b-list--plain", insetDividers && "b-list--inset-divider", className),
+      ...rest
+    }
+  );
+}
+function ListItem({
+  leading,
+  title,
+  subtitle,
+  trailing,
+  chevron,
+  interactive,
+  selected,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "li",
+    {
+      className: cn("b-list-item", interactive && "b-list-item--interactive", selected && "is-selected", className),
+      ...rest,
+      children: [
+        leading && /* @__PURE__ */ jsx5("span", { className: "b-list-item__leading", children: leading }),
+        /* @__PURE__ */ jsxs3("span", { className: "b-list-item__content", children: [
+          title && /* @__PURE__ */ jsx5("span", { className: "b-list-item__title", children: title }),
+          subtitle && /* @__PURE__ */ jsx5("span", { className: "b-list-item__subtitle", children: subtitle }),
+          children
+        ] }),
+        (trailing || chevron) && /* @__PURE__ */ jsxs3("span", { className: "b-list-item__trailing", children: [
+          trailing,
+          chevron && /* @__PURE__ */ jsx5("span", { className: "b-list-item__chevron", children: "\u203A" })
+        ] })
+      ]
+    }
+  );
+}
+function Stat({
+  label,
+  value,
+  delta,
+  direction,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("b-stat", className), ...rest, children: [
+    /* @__PURE__ */ jsx5("span", { className: "b-stat__label", children: label }),
+    /* @__PURE__ */ jsx5("span", { className: "b-stat__value", children: value }),
+    delta && /* @__PURE__ */ jsx5("span", { className: cn("b-stat__delta", direction === "up" && "is-up", direction === "down" && "is-down"), children: delta })
+  ] });
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("b-empty", className), ...rest, children: [
+    icon && /* @__PURE__ */ jsx5("span", { className: "b-empty__icon", children: icon }),
+    /* @__PURE__ */ jsx5("div", { className: "b-empty__title", children: title }),
+    description && /* @__PURE__ */ jsx5("p", { className: "b-empty__desc", children: description }),
+    action
+  ] });
+}
+function GroupBox({
+  label,
+  icon,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("b-groupbox", className), ...rest, children: [
+    label && /* @__PURE__ */ jsxs3("div", { className: "b-groupbox__label", children: [
+      icon,
+      label
+    ] }),
+    children
+  ] });
+}
+function Labeled({
+  label,
+  sublabel,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("b-labeled", className), ...rest, children: [
+    /* @__PURE__ */ jsxs3("span", { className: "b-labeled__label", children: [
+      label,
+      sublabel && /* @__PURE__ */ jsx5("small", { children: sublabel })
+    ] }),
+    /* @__PURE__ */ jsx5("span", { className: "b-labeled__value", children })
+  ] });
+}
+var ListHeader = (p) => /* @__PURE__ */ jsx5("div", { ...p, className: cn("b-list__header", p.className) });
+var ListFooter = (p) => /* @__PURE__ */ jsx5("div", { ...p, className: cn("b-list__footer", p.className) });
+
+// src/feedback.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Alert({ variant = "info", title, icon, onClose, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      role: variant === "danger" ? "alert" : "status",
+      className: cn("b-alert", variant !== "info" && `b-alert--${variant}`, className),
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx6("span", { className: "b-alert__icon", children: icon }),
+        /* @__PURE__ */ jsxs4("div", { className: "b-alert__content", children: [
+          title && /* @__PURE__ */ jsx6("div", { className: "b-alert__title", children: title }),
+          children && /* @__PURE__ */ jsx6("div", { className: "b-alert__desc", children })
+        ] }),
+        onClose && /* @__PURE__ */ jsx6("button", { className: "b-alert__close", "aria-label": "Dismiss", onClick: onClose, children: "\u2715" })
+      ]
+    }
+  );
+}
+function Progress({ value, size = "md", variant = "accent", label, className, ...rest }) {
+  const indeterminate = value == null;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuenow": indeterminate ? void 0 : Math.round(value),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cn(
+        "b-progress",
+        size !== "md" && `b-progress--${size}`,
+        variant !== "accent" && `b-progress--${variant}`,
+        indeterminate && "b-progress--indeterminate",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx6("div", { className: "b-progress__fill", style: indeterminate ? void 0 : { width: `${value}%` } })
+    }
+  );
+}
+function Spinner({ size = "md", className, ...rest }) {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("b-spinner", size !== "md" && `b-spinner--${size}`, className),
+      ...rest
+    }
+  );
+}
+function Skeleton({
+  kind = "text",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx6("div", { "aria-hidden": "true", className: cn("b-skeleton", `b-skeleton--${kind}`, className), ...rest });
+}
+function StatusDot({
+  state = "neutral",
+  pulse,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: cn("b-status", state !== "neutral" && `b-status--${state}`, pulse && "b-status--pulse", className),
+      ...rest,
+      children
+    }
+  );
+}
+function Tip({
+  icon,
+  title,
+  description,
+  actions,
+  onClose,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: cn("b-tip", className), ...rest, children: [
+    icon && /* @__PURE__ */ jsx6("span", { className: "b-tip__icon", children: icon }),
+    /* @__PURE__ */ jsxs4("span", { className: "b-tip__content", children: [
+      /* @__PURE__ */ jsx6("span", { className: "b-tip__title", children: title }),
+      description && /* @__PURE__ */ jsx6("span", { className: "b-tip__desc", children: description }),
+      actions && /* @__PURE__ */ jsx6("span", { className: "b-tip__actions", children: actions })
+    ] }),
+    onClose && /* @__PURE__ */ jsx6("button", { className: "b-tip__close", "aria-label": "Dismiss tip", onClick: onClose, children: "\u2715" })
+  ] });
+}
+function LinearGauge({
+  value,
+  minLabel,
+  maxLabel,
+  plain,
+  label,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      role: "meter",
+      "aria-label": label,
+      "aria-valuenow": Math.round(value),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cn("b-gauge-linear", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx6("div", { className: cn("b-gauge-linear__track", plain && "b-gauge-linear__track--plain"), children: /* @__PURE__ */ jsx6("span", { className: "b-gauge-linear__marker", style: { "--v": `${value}%` } }) }),
+        (minLabel != null || maxLabel != null) && /* @__PURE__ */ jsxs4("div", { className: "b-gauge-linear__labels", children: [
+          /* @__PURE__ */ jsx6("span", { children: minLabel }),
+          /* @__PURE__ */ jsx6("span", { children: maxLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/overlays.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function useDialog(open) {
+  const ref = useRef3(null);
+  useEffect3(() => {
+    const d = ref.current;
+    if (!d) return;
+    if (open && !d.open) d.showModal();
+    else if (!open && d.open) d.close();
+  }, [open]);
+  return ref;
+}
+function backdropClose(onClose, dismissable = true) {
+  return (e) => {
+    if (!dismissable || !onClose) return;
+    if (e.target === e.currentTarget) onClose();
+  };
+}
+function Modal({
+  open,
+  onClose,
+  dismissable = true,
+  title,
+  footer,
+  size = "md",
+  glass,
+  className,
+  children,
+  ...rest
+}) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ jsxs5(
+    "dialog",
+    {
+      ref,
+      onClose: () => onClose?.(),
+      onClick: backdropClose(onClose, dismissable),
+      className: cn("b-modal", size !== "md" && `b-modal--${size}`, glass && "b-modal--glass", className),
+      ...rest,
+      children: [
+        title != null && /* @__PURE__ */ jsxs5("header", { className: "b-modal__header", children: [
+          /* @__PURE__ */ jsx7("h2", { className: "b-modal__title", children: title }),
+          /* @__PURE__ */ jsx7("button", { className: "b-modal__close", "aria-label": "Close", onClick: () => onClose?.(), children: "\u2715" })
+        ] }),
+        /* @__PURE__ */ jsx7("div", { className: "b-modal__body", children }),
+        footer && /* @__PURE__ */ jsx7("footer", { className: "b-modal__footer", children: footer })
+      ]
+    }
+  );
+}
+function AlertDialog({
+  open,
+  onClose,
+  title,
+  description,
+  actions,
+  row,
+  className,
+  ...rest
+}) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ jsxs5(
+    "dialog",
+    {
+      ref,
+      onClose: () => onClose?.(),
+      className: cn("b-modal b-alert-dialog", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "b-modal__body", children: [
+          /* @__PURE__ */ jsx7("div", { className: "b-alert-dialog__title", children: title }),
+          description && /* @__PURE__ */ jsx7("p", { className: "b-alert-dialog__desc", children: description })
+        ] }),
+        /* @__PURE__ */ jsx7("div", { className: cn("b-alert-dialog__actions", row && "b-alert-dialog__actions--row"), children: actions.map((a, i) => /* @__PURE__ */ jsx7(
+          "button",
+          {
+            className: cn(a.destructive && "is-destructive", a.primary && "is-primary"),
+            onClick: a.onClick,
+            children: a.label
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+function Sheet({
+  open,
+  onClose,
+  dismissable = true,
+  title,
+  className,
+  children,
+  ...rest
+}) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ jsxs5(
+    "dialog",
+    {
+      ref,
+      onClose: () => onClose?.(),
+      onClick: backdropClose(onClose, dismissable),
+      className: cn("b-sheet", className),
+      ...rest,
+      children: [
+        title != null && /* @__PURE__ */ jsxs5("header", { className: "b-sheet__header", children: [
+          /* @__PURE__ */ jsx7("h2", { className: "b-modal__title", children: title }),
+          /* @__PURE__ */ jsx7("button", { className: "b-modal__close", "aria-label": "Close", onClick: () => onClose?.(), children: "\u2715" })
+        ] }),
+        /* @__PURE__ */ jsx7("div", { className: "b-sheet__body", children })
+      ]
+    }
+  );
+}
+function BottomSheet({
+  open,
+  onClose,
+  dismissable = true,
+  detent,
+  className,
+  children,
+  ...rest
+}) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ jsxs5(
+    "dialog",
+    {
+      ref,
+      onClose: () => onClose?.(),
+      onClick: backdropClose(onClose, dismissable),
+      className: cn("b-bottom-sheet", detent && `b-bottom-sheet--${detent}`, className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: "b-bottom-sheet__grabber", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx7("div", { className: "b-bottom-sheet__body", children })
+      ]
+    }
+  );
+}
+function Popover({ title, arrow, card, anchored, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "b-popover",
+        arrow && `b-popover--arrow-${arrow}`,
+        card && "b-popover--card",
+        anchored && "b-popover--anchored",
+        className
+      ),
+      ...rest,
+      children: [
+        title && !card && /* @__PURE__ */ jsx7("div", { className: "b-popover__title", children: title }),
+        children
+      ]
+    }
+  );
+}
+function Tooltip({
+  label,
+  below,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      "data-tooltip": label,
+      className: cn("b-tooltip-host", below && "b-tooltip-host--bottom", className),
+      ...rest,
+      children
+    }
+  );
+}
+function ActionSheet({
+  open,
+  onClose,
+  title,
+  actions,
+  cancelLabel = "Cancel",
+  className,
+  ...rest
+}) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ jsxs5("dialog", { ref, onClose: () => onClose?.(), className: cn("b-action-sheet", className), ...rest, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "b-action-sheet__group", children: [
+      title && /* @__PURE__ */ jsx7("p", { className: "b-action-sheet__title", children: title }),
+      actions.map((a, i) => /* @__PURE__ */ jsx7("button", { className: cn(a.destructive && "is-destructive"), onClick: a.onClick, children: a.label }, i))
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "b-action-sheet__group b-action-sheet__cancel", children: /* @__PURE__ */ jsx7("button", { onClick: () => onClose?.(), children: cancelLabel }) })
+  ] });
+}
+
+// src/nav.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Segmented({
+  options,
+  value,
+  onChange,
+  block: block2,
+  label,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      className: cn("b-segmented", block2 && "b-segmented--block", className),
+      ...rest,
+      children: options.map((o) => /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          className: cn("b-segmented__item", o.value === value && "is-active"),
+          "aria-pressed": o.value === value,
+          onClick: () => onChange(o.value),
+          children: o.label
+        },
+        o.value
+      ))
+    }
+  );
+}
+function Tabs({
+  items,
+  value,
+  onChange,
+  className,
+  ...rest
+}) {
+  const id = useId2();
+  return /* @__PURE__ */ jsx8("div", { role: "tablist", className: cn("b-tabs", className), ...rest, children: items.map((t, i) => /* @__PURE__ */ jsx8(
+    "button",
+    {
+      role: "tab",
+      id: `${id}-tab-${t.id}`,
+      "aria-selected": t.id === value,
+      "aria-controls": `${id}-panel-${t.id}`,
+      tabIndex: t.id === value ? 0 : -1,
+      className: "b-tab",
+      onClick: () => onChange(t.id),
+      onKeyDown: (e) => {
+        const dir = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+        if (!dir) return;
+        e.preventDefault();
+        const next = items[(i + dir + items.length) % items.length];
+        onChange(next.id);
+      },
+      children: t.label
+    },
+    t.id
+  )) });
+}
+function TabPanel({
+  active,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx8("div", { role: "tabpanel", hidden: !active, className: cn("b-tabpanel", className), ...rest });
+}
+function Breadcrumbs({
+  items,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx8("nav", { "aria-label": "Breadcrumb", ...rest, children: /* @__PURE__ */ jsx8("ol", { className: cn("b-breadcrumbs", className), children: items.map((c, i) => {
+    const last = i === items.length - 1;
+    return /* @__PURE__ */ jsx8("li", { children: c.href && !last ? /* @__PURE__ */ jsx8("a", { href: c.href, children: c.label }) : /* @__PURE__ */ jsx8("span", { "aria-current": last ? "page" : void 0, children: c.label }) }, i);
+  }) }) });
+}
+
+// src/icon.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var iconNames = [
+  "arrow-up-right",
+  "backward",
+  "bell",
+  "bolt",
+  "bookmark",
+  "calendar",
+  "camera",
+  "check",
+  "chevron-down",
+  "chevron-left",
+  "chevron-right",
+  "chevron-up",
+  "clock",
+  "close",
+  "doc",
+  "download",
+  "drop",
+  "filter",
+  "flame",
+  "folder",
+  "forward",
+  "garage",
+  "gear",
+  "grid",
+  "heart",
+  "house",
+  "info",
+  "lightbulb",
+  "link",
+  "lock",
+  "mail",
+  "message",
+  "mic",
+  "moon-stars",
+  "music-note",
+  "newspaper",
+  "pause",
+  "pencil",
+  "people",
+  "person",
+  "photo",
+  "pin",
+  "play",
+  "plus",
+  "refresh",
+  "repeat",
+  "search",
+  "send",
+  "share",
+  "shield",
+  "sliders",
+  "sparkles",
+  "speaker",
+  "star",
+  "sun",
+  "trash",
+  "warning",
+  "waveform",
+  "wifi"
+];
+var GLYPHS = {
+  "arrow-up-right": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M6 14 14 6M7.5 6H14v6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "backward": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M5.5 4.5v11", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "M15 5.6v8.8a.6.6 0 0 1-.93.5L7.6 10.5a.6.6 0 0 1 0-1l6.47-4.4a.6.6 0 0 1 .93.5Z", fill: "currentColor" })
+  ] }),
+  "bell": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M10 3.5A4.5 4.5 0 0 1 14.5 8c0 3 1 4 1.5 4.5H4c.5-.5 1.5-1.5 1.5-4.5A4.5 4.5 0 0 1 10 3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "M8.5 15.5a1.6 1.6 0 0 0 3 0", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "bolt": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M11 3 5 11h4l-1 6 6-8h-4l1-6Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "bookmark": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M5.5 5A1.5 1.5 0 0 1 7 3.5h6A1.5 1.5 0 0 1 14.5 5v11.5L10 13l-4.5 3.5V5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "calendar": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("rect", { x: "3.5", y: "4.5", width: "13", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M7 3v3M13 3v3M3.5 8.5h13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "camera": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M3.5 7A1.5 1.5 0 0 1 5 5.5h1.5L8 3.5h4l1.5 2H15A1.5 1.5 0 0 1 16.5 7v7a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 14V7Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "10.5", r: "2.8", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  "check": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M4 10.5 8.5 15 16 5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "chevron-down": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "m5 8 5 5 5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "chevron-left": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M12 5l-5 5 5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "chevron-right": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "m8 5 5 5-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "chevron-up": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "m5 12 5-5 5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "clock": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "10", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M10 6.5V10l2.5 2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "close": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "m5 5 10 10M15 5 5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+  "doc": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M5.5 3.5h6L15 7v9.5H5.5V3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "M11.5 3.5V7H15M8 10.5h4M8 13h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "download": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M10 3.5v9M6.5 9.5l3.5 3 3.5-3M4 16.5h12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "drop": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M10 2.8C7.7 6 5.5 8.6 5.5 11.4a4.5 4.5 0 0 0 9 0c0-2.8-2.2-5.4-4.5-8.6Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "filter": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M3.5 5.5h13M6 10h8M8.5 14.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+  "flame": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M10 3c-2.5 3-4.5 5.2-4.5 7.4a4.5 4.5 0 0 0 9 0C14.5 8.2 12.5 6 10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "folder": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M3.5 5.5A1.5 1.5 0 0 1 5 4h3l1.5 2H15a1.5 1.5 0 0 1 1.5 1.5V14a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 14V5.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "forward": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M14.5 4.5v11", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "M5 5.6v8.8a.6.6 0 0 0 .93.5l6.47-4.4a.6.6 0 0 0 0-1L5.93 5.1a.6.6 0 0 0-.93.5Z", fill: "currentColor" })
+  ] }),
+  "garage": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M3 9.5 10 4l7 5.5M5 8.5V16h10V8.5M7 11h6M7 13.5h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "gear": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "10", r: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M10 2.5v3M10 14.5v3M2.5 10h3M14.5 10h3M4.7 4.7l2.1 2.1M13.2 13.2l2.1 2.1M15.3 4.7l-2.1 2.1M6.8 13.2l-2.1 2.1", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
+  ] }),
+  "grid": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("rect", { x: "3.5", y: "3.5", width: "5.5", height: "5.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("rect", { x: "11", y: "3.5", width: "5.5", height: "5.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("rect", { x: "3.5", y: "11", width: "5.5", height: "5.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("rect", { x: "11", y: "11", width: "5.5", height: "5.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  "heart": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M10 16.5S3.5 12.5 3.5 8.2A3.6 3.6 0 0 1 10 6a3.6 3.6 0 0 1 6.5 2.2c0 4.3-6.5 8.3-6.5 8.3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "house": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M3 9.5 10 4l7 5.5M5 8.5V16h10V8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "info": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "10", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M10 9v4M10 6.4h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "lightbulb": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M10 3a5 5 0 0 0-2.5 9.3V14a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1.7A5 5 0 0 0 10 3ZM8.5 17h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "link": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M8.5 11.5a3 3 0 0 0 4.2 0l2.5-2.5a3 3 0 1 0-4.2-4.2l-1 1M11.5 8.5a3 3 0 0 0-4.2 0L4.8 11a3 3 0 1 0 4.2 4.2l1-1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+  "lock": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("rect", { x: "5", y: "9", width: "10", height: "7", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M7 9V6.5a3 3 0 0 1 6 0V9", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  "mail": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "m4.5 7 5.5 4 5.5-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "message": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M5.5 4h9a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H8.5l-3 3v-3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "mic": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("rect", { x: "7.5", y: "3.5", width: "5", height: "9", rx: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M5.5 10a4.5 4.5 0 0 0 9 0M10 14.5v2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "moon-stars": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M14.5 12.5A6 6 0 0 1 7.5 5.5 6 6 0 1 0 14.5 12.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "m14 3.5.6 1.4 1.4.6-1.4.6-.6 1.4-.6-1.4-1.4-.6 1.4-.6.6-1.4Z", fill: "currentColor" })
+  ] }),
+  "music-note": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M8 15.5V5l7-1.5V13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("circle", { cx: "6", cy: "15.5", r: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("circle", { cx: "13", cy: "13", r: "2", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  "newspaper": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("rect", { x: "3", y: "4", width: "14", height: "12", rx: "1.8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M6 7.5h4.5v3.5H6zM13 7.5h1M13 11h1M6 13.5h8", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "pause": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M6 4.5h2.5v11H6zM11.5 4.5H14v11h-2.5z" }) }),
+  "pencil": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "m4 16 .8-3.2 8.8-8.8a1.4 1.4 0 0 1 2 0l.4.4a1.4 1.4 0 0 1 0 2l-8.8 8.8L4 16Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "m12.5 5.5 2 2", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  "people": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "7.5", cy: "7", r: "2.6", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M2.5 16a5 5 0 0 1 10 0", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "M13 4.6a2.6 2.6 0 0 1 0 4.9M14.5 11.6a5 5 0 0 1 3 4.4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "person": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "6.5", r: "3", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M4 16.5a6 6 0 0 1 12 0", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "photo": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("rect", { x: "3.5", y: "4.5", width: "13", height: "11", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("circle", { cx: "7.5", cy: "8", r: "1.2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx9("path", { d: "m5 14 3.5-3.5 2 2L14 9l2.5 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "pin": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M10 17s-5-4.3-5-8a5 5 0 0 1 10 0c0 3.7-5 8-5 8Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "9", r: "1.8", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  "play": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M7 4.9v10.2a.6.6 0 0 0 .92.5l8-5.1a.6.6 0 0 0 0-1l-8-5.1a.6.6 0 0 0-.92.5Z" }) }),
+  "plus": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M10 4v12M4 10h12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+  "refresh": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M15.8 10A5.8 5.8 0 1 1 13 5.1M15.8 3.5v3.2h-3.2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "repeat": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M5.5 8V7A2.5 2.5 0 0 1 8 4.5h6.5M12.5 2.5l2 2-2 2M14.5 12v1a2.5 2.5 0 0 1-2.5 2.5H5.5M7.5 17.5l-2-2 2-2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "search": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "9", cy: "9", r: "5.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "m13.5 13.5 3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "send": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "m3.5 10 13-6-3.5 13-3.5-4.5L3.5 10Zm6 2.5L13 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "share": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M10 12.5v-9M7 6l3-2.8L13 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "M5.5 9.5H5A1.5 1.5 0 0 0 3.5 11v4A1.5 1.5 0 0 0 5 16.5h10a1.5 1.5 0 0 0 1.5-1.5v-4A1.5 1.5 0 0 0 15 9.5h-.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "shield": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M10 3l6 2v5c0 3.5-2.5 5.8-6 7-3.5-1.2-6-3.5-6-7V5l6-2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "m7.5 10 1.8 1.8L13 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "sliders": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M3.5 6.5h5M12 6.5h4.5M3.5 13.5h3M10 13.5h6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx9("circle", { cx: "10.2", cy: "6.5", r: "1.8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("circle", { cx: "8.2", cy: "13.5", r: "1.8", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  "sparkles": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M10 3l1.2 3.3 3.3 1.2-3.3 1.2L10 12 8.8 8.7 5.5 7.5l3.3-1.2L10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "m14.8 11.5.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7.7-1.8Z", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" })
+  ] }),
+  "speaker": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M4 8v4h2.5L10 15V5L6.5 8H4Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "M12.5 7.5a3.5 3.5 0 0 1 0 5M14.5 5.5a6 6 0 0 1 0 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "star": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "m10 3 2 4.4 4.8.5-3.6 3.2 1 4.7L10 13.4l-4.2 2.4 1-4.7L3.2 7.9 8 7.4 10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "sun": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "10", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx9("path", { d: "M10 1.5v2m0 13v2M18.5 10h-2m-13 0h-2m14.5-6-1.4 1.4M4.9 15.1 3.5 16.5m0-13 1.4 1.4m10.2 10.2 1.4 1.4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "trash": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M4 6h12M8 6V4.5h4V6M6.5 6l.5 10h6l.5-10M8.5 9v4M11.5 9v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "warning": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M10 3.5 18 17H2L10 3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx9("path", { d: "M10 8.5V12M10 14.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  "waveform": /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsx9("path", { d: "M4 8.5v3M7 6v8M10 4v12M13 6.5v7M16 8.5v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+  "wifi": /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M2.5 8a11 11 0 0 1 15 0M5 11a7.3 7.3 0 0 1 10 0M7.6 13.8a3.6 3.6 0 0 1 4.8 0", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "16.2", r: "1.1", fill: "currentColor" })
+  ] })
+};
+var Icon = forwardRef4(function Icon2({ name, size, title, className, ...rest }, ref) {
+  const glyph = GLYPHS[name];
+  if (!glyph) return null;
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      ref,
+      className: cn("b-icon", size && size !== "md" && `b-icon--${size}`, className),
+      viewBox: "0 0 20 20",
+      fill: "none",
+      role: title ? "img" : void 0,
+      "aria-hidden": title ? void 0 : true,
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsx9("title", { children: title }) : null,
+        glyph
+      ]
+    }
+  );
+});
+
+// src/primitive.tsx
+import { createElement, forwardRef as forwardRef5 } from "react";
+function block(defaultTag, base, displayName) {
+  const Component = forwardRef5(function Block({ as, className, ...rest }, ref) {
+    return createElement(as ?? defaultTag, { ref, className: cn(base, className), ...rest });
+  });
+  Component.displayName = displayName;
+  return Component;
+}
+
+// src/layout.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function stackClasses(base, p, className) {
+  return cn(
+    base,
+    p.gap !== void 0 && `b-gap-${p.gap}`,
+    p.align && `b-stack--${p.align}`,
+    p.wrap && "b-stack--wrap",
+    className
+  );
+}
+var Stack = forwardRef6(function Stack2({ as: Tag2 = "div", gap, align, wrap, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(Component, { ref, className: stackClasses("b-stack", { gap, align, wrap }, className), ...rest, children });
+});
+var VStack = Stack;
+var HStack = forwardRef6(function HStack2({ as: Tag2 = "div", gap, align, wrap, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(Component, { ref, className: stackClasses("b-hstack", { gap, align, wrap }, className), ...rest, children });
+});
+var Grid = forwardRef6(function Grid2({ as: Tag2 = "div", cols, gap, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(
+    Component,
+    {
+      ref,
+      className: cn("b-grid", cols && `b-grid--${cols}`, gap !== void 0 && `b-gap-${gap}`, className),
+      ...rest,
+      children
+    }
+  );
+});
+var Container = forwardRef6(function Container2({ as: Tag2 = "div", size, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(Component, { ref, className: cn("b-container", size && `b-container--${size}`, className), ...rest, children });
+});
+var ScrollArea = forwardRef6(function ScrollArea2({ as: Tag2 = "div", axis, fade, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(
+    Component,
+    {
+      ref,
+      className: cn("b-scroll-area", axis && `b-scroll-area--${axis}`, fade && "b-scroll-area--fade", className),
+      ...rest,
+      children
+    }
+  );
+});
+var Divider = forwardRef6(function Divider2({ as: Tag2 = "div", vertical, inset, label, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(
+    Component,
+    {
+      ref,
+      role: children ? void 0 : "separator",
+      className: cn(
+        "b-divider",
+        vertical && "b-divider--vertical",
+        inset && "b-divider--inset",
+        label && "b-divider--label",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Stage = block("div", "b-stage", "Stage");
+var Spacer = block("span", "b-spacer", "Spacer");
+var Grow = block("div", "b-grow", "Grow");
+var Split = block("div", "b-split", "Split");
+var Section = block("section", "b-section", "Section");
+var SafeArea = block("div", "b-safe-area", "SafeArea");
+var CardGrid = block("div", "b-card-grid", "CardGrid");
+var Bento = block("div", "b-bento", "Bento");
+var Dashboard = block("div", "b-dashboard", "Dashboard");
+var Workspace = block("div", "b-workspace", "Workspace");
+var WorkspaceMain = block("main", "b-workspace__main", "WorkspaceMain");
+var Inspector = block("aside", "b-inspector", "Inspector");
+var SkipLink = block("a", "b-skip-link", "SkipLink");
+var Span = forwardRef6(function Span2({ as: Tag2 = "div", span, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(Component, { ref, className: cn(`b-span-${span}`, className), ...rest, children });
+});
+var Sidebar = forwardRef6(function Sidebar2({ as: Tag2 = "nav", material, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(Component, { ref, className: cn("b-sidebar", material && `b-sidebar--${material}`, className), ...rest, children });
+});
+var SidebarHeading = block("div", "b-sidebar__heading", "SidebarHeading");
+var SidebarGroup = block("div", "b-sidebar__group", "SidebarGroup");
+var SidebarItem = forwardRef6(function SidebarItem2({ as: Tag2 = "a", active, className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ jsx10(
+    Component,
+    {
+      ref,
+      className: cn("b-sidebar__item", active && "is-active", className),
+      "aria-current": active ? "page" : void 0,
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/typography.tsx
+import { Fragment as Fragment2, forwardRef as forwardRef7 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var ROLE_TAG = {
+  "large-title": "h1",
+  title1: "h1",
+  title2: "h2",
+  title3: "h3",
+  headline: "h4",
+  subheadline: "p",
+  body: "p",
+  callout: "p",
+  caption: "span",
+  caption2: "span",
+  overline: "span"
+};
+var Text = forwardRef7(function Text2({ role = "body", as, tone, align, truncate, clamp, tabularNums, className, children, ...rest }, ref) {
+  const Component = as ?? ROLE_TAG[role];
+  return /* @__PURE__ */ jsx11(
+    Component,
+    {
+      ref,
+      className: cn(
+        `b-${role}`,
+        tone && `b-text-${tone}`,
+        align && `b-text-${align}`,
+        truncate && "b-truncate",
+        clamp && `b-line-clamp-${clamp}`,
+        tabularNums && "b-tabular-nums",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Link = block("a", "b-link", "Link");
+var LinkGroup = block("div", "b-link-group", "LinkGroup");
+var Kbd = block("span", "b-kbd", "Kbd");
+var Overline = block("span", "b-overline", "Overline");
+var Footnote = block("p", "b-footnote", "Footnote");
+var Footnotes = block("div", "b-footnotes", "Footnotes");
+var Quote = forwardRef7(function Quote2({ cite, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs7("blockquote", { ref, className: cn("b-quote", className), ...rest, children: [
+    /* @__PURE__ */ jsx11("p", { children }),
+    cite ? /* @__PURE__ */ jsx11("cite", { children: cite }) : null
+  ] });
+});
+var CodeBlock = forwardRef7(function CodeBlock2({ title, copy, copyLabel = "Copy", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs7("div", { ref, className: cn("b-code", className), ...rest, children: [
+    title || copy ? /* @__PURE__ */ jsxs7("div", { className: "b-code__header", children: [
+      /* @__PURE__ */ jsx11("span", { children: title }),
+      copy ? /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          className: "b-code__copy",
+          onClick: (event) => {
+            const pre = event.currentTarget.closest(".b-code")?.querySelector("code");
+            if (pre?.textContent) void navigator.clipboard.writeText(pre.textContent);
+          },
+          children: copyLabel
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx11("pre", { children: /* @__PURE__ */ jsx11("code", { children }) })
+  ] });
+});
+var DescriptionList = forwardRef7(
+  function DescriptionList2({ stacked, items, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx11("dl", { ref, className: cn("b-dl", stacked && "b-dl--stacked", className), ...rest, children: items ? items.map((item, i) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx11("dt", { children: item.term }),
+      /* @__PURE__ */ jsx11("dd", { children: item.description })
+    ] }, i)) : children });
+  }
+);
+
+// src/data.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var Table = forwardRef8(function Table2({ striped, hover, compact, wrap = true, className, children, ...rest }, ref) {
+  const table = /* @__PURE__ */ jsx12(
+    "table",
+    {
+      ref,
+      className: cn(
+        "b-table",
+        striped && "b-table--striped",
+        hover && "b-table--hover",
+        compact && "b-table--compact",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+  return wrap ? /* @__PURE__ */ jsx12("div", { className: "b-table-wrap", children: table }) : table;
+});
+var TableWrap = block("div", "b-table-wrap", "TableWrap");
+var TableNum = block("td", "b-table__num", "TableNum");
+var TableSortHeader = forwardRef8(
+  function TableSortHeader2({ direction = null, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx12(
+      "th",
+      {
+        ref,
+        className: cn("b-table__sort", direction && `is-${direction}`, className),
+        "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var Gauge = forwardRef8(function Gauge2({ value, label, display, className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      ref,
+      className: cn("b-gauge", className),
+      style: { ["--b-progress"]: value, ...style },
+      role: "img",
+      "aria-label": typeof label === "string" ? `${label}: ${value}%` : `${value}%`,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx12("div", { className: "b-gauge__value", children: display ?? `${value}%` }),
+        label ? /* @__PURE__ */ jsx12("div", { className: "b-gauge__label", children: label }) : null
+      ]
+    }
+  );
+});
+var Donut = forwardRef8(function Donut2({ slices, value, label, description, className, ...rest }, ref) {
+  let at = 0;
+  const stops = slices.map((s) => {
+    const from = at;
+    at += s.value;
+    const color = /^\d$/.test(s.color) ? `var(--b-chart-${s.color})` : s.color;
+    return `${color} ${from}% ${at}%`;
+  }).join(", ");
+  return /* @__PURE__ */ jsxs8("div", { ref, className: cn("b-donut", className), ...rest, children: [
+    /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: "b-pie",
+        style: { ["--b-pie"]: stops },
+        role: "img",
+        "aria-label": description ?? slices.map((s) => `${s.label}: ${s.value}%`).join(", ")
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { className: "b-donut__center", children: [
+      value ? /* @__PURE__ */ jsx12("div", { className: "b-stat__value", children: value }) : null,
+      label ? /* @__PURE__ */ jsx12("div", { className: "b-stat__label", children: label }) : null
+    ] })
+  ] });
+});
+var Sparkline = forwardRef8(function Sparkline2({ points, className, ...rest }, ref) {
+  const max = Math.max(...points, 1);
+  const min = Math.min(...points, 0);
+  const span = max - min || 1;
+  const d = points.map((p, i) => {
+    const x = i / Math.max(points.length - 1, 1) * 100;
+    const y = 22 - (p - min) / span * 20;
+    return `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`;
+  }).join(" ");
+  return /* @__PURE__ */ jsx12(
+    "svg",
+    {
+      ref,
+      className: cn("b-sparkline", className),
+      viewBox: "0 0 100 24",
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      ...rest,
+      children: /* @__PURE__ */ jsx12("path", { d })
+    }
+  );
+});
+var Legend = forwardRef8(function Legend2({ items, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx12("ul", { ref, className: cn("b-legend", className), ...rest, children: items.map((item, i) => /* @__PURE__ */ jsxs8("li", { children: [
+    /* @__PURE__ */ jsx12(
+      "span",
+      {
+        className: "b-legend__swatch",
+        style: item.color ? { background: /^\d$/.test(item.color) ? `var(--b-chart-${item.color})` : item.color } : void 0
+      }
+    ),
+    item.label
+  ] }, i)) });
+});
+var Columns = forwardRef8(function Columns2({ data, max, rounded, height, className, style, description, ...rest }, ref) {
+  const top = max ?? Math.max(...data.map((d) => d.value), 1);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ref,
+      className: cn("b-columns", rounded && "b-columns--rounded", className),
+      style: { ...height ? { ["--b-chart-h"]: height } : null, ...style },
+      role: "img",
+      "aria-label": description ?? data.map((d) => `${d.label}: ${d.value}`).join(", "),
+      ...rest,
+      children: data.map((d, i) => /* @__PURE__ */ jsx12(
+        "div",
+        {
+          className: "b-columns__bar",
+          "data-label": d.label,
+          style: { ["--v"]: `${Math.round(d.value / top * 100)}%` }
+        },
+        i
+      ))
+    }
+  );
+});
+var Bars = forwardRef8(function Bars2({ data, max, description, className, ...rest }, ref) {
+  const top = max ?? Math.max(...data.map((d) => d.value), 1);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ref,
+      className: cn("b-bars", className),
+      role: "img",
+      "aria-label": description ?? data.map((d) => `${d.label}: ${d.value}`).join(", "),
+      ...rest,
+      children: data.map((d, i) => /* @__PURE__ */ jsxs8("div", { className: "b-bars__row", children: [
+        /* @__PURE__ */ jsx12("span", { className: "b-bars__label", children: d.label }),
+        /* @__PURE__ */ jsx12("div", { className: "b-bars__track", children: /* @__PURE__ */ jsx12("i", { style: { ["--v"]: `${Math.round(d.value / top * 100)}%` } }) }),
+        /* @__PURE__ */ jsx12("span", { className: "b-bars__value", children: d.display ?? d.value })
+      ] }, i))
+    }
+  );
+});
+var Chart = block("figure", "b-chart", "Chart");
+var ChartTip = block("div", "b-chart-tip", "ChartTip");
+var Heatmap = block("div", "b-heatmap", "Heatmap");
+
+// src/navigation.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var TopNav = block("header", "b-topnav", "TopNav");
+var TopNavBrand = block("a", "b-topnav__brand", "TopNavBrand");
+var TopNavLinks = block("nav", "b-topnav__links", "TopNavLinks");
+function navLink(base, displayName) {
+  const Component = forwardRef9(function NavLink({ as: Tag2 = "a", active, className, children, ...rest }, ref) {
+    const El = Tag2;
+    return /* @__PURE__ */ jsx13(
+      El,
+      {
+        ref,
+        className: cn(base, active && "is-active"),
+        "aria-current": active ? "page" : void 0,
+        ...rest,
+        children
+      }
+    );
+  });
+  Component.displayName = displayName;
+  return Component;
+}
+var TopNavLink = navLink("b-topnav__link", "TopNavLink");
+var BottomNavItem = navLink("b-bottomnav__item", "BottomNavItem");
+var DockItem = navLink("b-dock__item", "DockItem");
+var BottomNav = block("nav", "b-bottomnav", "BottomNav");
+var Dock = block("div", "b-dock", "Dock");
+var DockTray = block("div", "b-dock__tray", "DockTray");
+var PillNav = block("nav", "b-pill-nav", "PillNav");
+var BackButton = block("button", "b-back-btn", "BackButton");
+var MarketingNav = block("header", "b-marketing-nav", "MarketingNav");
+var MarketingNavBrand = block("a", "b-marketing-nav__brand", "MarketingNavBrand");
+var MarketingNavLinks = block("nav", "b-marketing-nav__links", "MarketingNavLinks");
+var Steps = forwardRef9(function Steps2({ steps, current, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx13("ol", { ref, className: cn("b-steps", className), ...rest, children: steps.map((step, i) => {
+    const state = step.state ?? (current === void 0 ? void 0 : i < current ? "complete" : i === current ? "active" : void 0);
+    return /* @__PURE__ */ jsx13(
+      "li",
+      {
+        className: state ? `is-${state}` : void 0,
+        "data-step": i + 1,
+        "aria-current": state === "active" ? "step" : void 0,
+        children: step.label
+      },
+      i
+    );
+  }) });
+});
+var Drawer = forwardRef9(function Drawer2({ end, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx13("nav", { ref, className: cn("b-drawer", end && "b-drawer--end", className), ...rest, children });
+});
+var DrawerHeader = block("div", "b-drawer__header", "DrawerHeader");
+var DrawerBody = block("div", "b-drawer__body", "DrawerBody");
+var StatusBar = block("div", "b-statusbar", "StatusBar");
+var StatusBarItem = block("span", "b-statusbar__item", "StatusBarItem");
+var Menu = forwardRef9(function Menu2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx13("ul", { ref, className: cn("b-menu", className), role: "menu", ...rest, children });
+});
+var MenuItem = forwardRef9(function MenuItem2({ shortcut, danger, icon, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx13("li", { role: "none", children: /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "menuitem",
+      className: cn("b-menu__item", danger && "b-menu__item--danger", className),
+      ...rest,
+      children: [
+        icon,
+        children,
+        shortcut ? /* @__PURE__ */ jsx13("span", { className: "b-menu__shortcut", children: shortcut }) : null
+      ]
+    }
+  ) });
+});
+var MenuLabel = block("li", "b-menu__label", "MenuLabel");
+var MenuSeparator = block("li", "b-menu__separator", "MenuSeparator");
+var Dropdown = forwardRef9(function Dropdown2({ label, variant = "button", end, triggerProps, className, children, ...rest }, ref) {
+  const { className: triggerClass, ...triggerRest } = triggerProps ?? {};
+  return /* @__PURE__ */ jsxs9("details", { ref, className: cn("b-dropdown", end && "b-dropdown--end", className), ...rest, children: [
+    /* @__PURE__ */ jsx13(
+      "summary",
+      {
+        className: cn(variant === "select" ? "b-select" : "b-btn", triggerClass),
+        "aria-haspopup": variant === "select" ? "listbox" : "menu",
+        ...triggerRest,
+        children: label
+      }
+    ),
+    children
+  ] });
+});
+
+// src/forms-extra.tsx
+import {
+  forwardRef as forwardRef10,
+  useId as useId3
+} from "react";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var Form = block("form", "b-form", "Form");
+var FormRow = block("div", "b-form-row", "FormRow");
+var FormActions = block("div", "b-form-actions", "FormActions");
+var Fieldset = block("fieldset", "b-fieldset", "Fieldset");
+var Help = block("p", "b-help", "Help");
+var ErrorText = block("p", "b-error", "ErrorText");
+var Optional = block("span", "b-optional", "Optional");
+var FormSection = forwardRef10(function FormSection2({ title, description, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs10("div", { ref, className: cn("b-form-section", className), ...rest, children: [
+    title || description ? /* @__PURE__ */ jsxs10("div", { className: "b-form-section__header", children: [
+      title ? /* @__PURE__ */ jsx14("div", { className: "b-form-section__title", children: title }) : null,
+      description ? /* @__PURE__ */ jsx14("p", { className: "b-form-section__desc", children: description }) : null
+    ] }) : null,
+    children
+  ] });
+});
+var Label = forwardRef10(function Label2({ required, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx14("label", { ref, className: cn("b-label", required && "b-label--required", className), ...rest, children });
+});
+var InputGroup = forwardRef10(function InputGroup2({ prefix, suffix, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs10("div", { ref, className: cn("b-input-group", className), ...rest, children: [
+    prefix ? /* @__PURE__ */ jsx14("span", { className: "b-input-affix b-input-affix--start", children: prefix }) : null,
+    children,
+    suffix ? /* @__PURE__ */ jsx14("span", { className: "b-input-affix b-input-affix--end", children: suffix }) : null
+  ] });
+});
+var StepperInput = forwardRef10(function StepperInput2({ decrementLabel = "Decrease", incrementLabel = "Increase", onStep, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs10("div", { className: cn("b-stepper-input", className), children: [
+    /* @__PURE__ */ jsx14("button", { type: "button", "aria-label": decrementLabel, onClick: () => onStep?.(-1), children: "\u2212" }),
+    /* @__PURE__ */ jsx14("input", { ref, type: "number", ...rest }),
+    /* @__PURE__ */ jsx14("button", { type: "button", "aria-label": incrementLabel, onClick: () => onStep?.(1), children: "+" })
+  ] });
+});
+var Range = forwardRef10(function Range2({ min = 0, max = 100, step = 1, value, onRangeChange, label, className, ...rest }, ref) {
+  const id = useId3();
+  const span = max - min || 1;
+  const start = (Math.min(...value) - min) / span * 100;
+  const width = (Math.max(...value) - Math.min(...value)) / span * 100;
+  return /* @__PURE__ */ jsxs10("div", { ref, className: cn("b-range", className), role: "group", "aria-label": label, ...rest, children: [
+    /* @__PURE__ */ jsx14("div", { className: "b-range__fill", style: { insetInlineStart: `${start}%`, width: `${width}%` } }),
+    /* @__PURE__ */ jsx14(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value: value[0],
+        "aria-label": label ? `${label}, minimum` : "Minimum",
+        id: `${id}-min`,
+        onChange: (e) => onRangeChange?.([Number(e.target.value), value[1]])
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value: value[1],
+        "aria-label": label ? `${label}, maximum` : "Maximum",
+        id: `${id}-max`,
+        onChange: (e) => onRangeChange?.([value[0], Number(e.target.value)])
+      }
+    )
+  ] });
+});
+var Dropzone = forwardRef10(function Dropzone2({ active, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx14("div", { ref, className: cn("b-dropzone", active && "is-active", className), ...rest, children });
+});
+var UploadItem = forwardRef10(function UploadItem2({ name, size, thumb, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs10("li", { ref, className: cn("b-upload-item", className), ...rest, children: [
+    thumb ? /* @__PURE__ */ jsx14("span", { className: "b-upload-item__thumb", children: thumb }) : null,
+    /* @__PURE__ */ jsxs10("span", { className: "b-upload-item__meta", children: [
+      /* @__PURE__ */ jsx14("span", { className: "b-upload-item__name", children: name }),
+      size ? /* @__PURE__ */ jsx14("span", { className: "b-upload-item__size", children: size }) : null
+    ] }),
+    children
+  ] });
+});
+var Upload = block("div", "b-upload", "Upload");
+var FilterBar = block("div", "b-filter-bar", "FilterBar");
+var Swatches = block("div", "b-swatches", "Swatches");
+var Swatch = block("button", "b-swatch", "Swatch");
+var SearchField = block("div", "b-search", "SearchField");
+var FilterChip = forwardRef10(function FilterChip2({ value, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs10("button", { ref, type: "button", className: cn("b-filter-chip", className), ...rest, children: [
+    children,
+    value ? /* @__PURE__ */ jsx14("span", { className: "b-filter-chip__value", children: value }) : null
+  ] });
+});
+
+// src/productivity.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var Kanban = block("div", "b-kanban", "Kanban");
+var KanbanList = block("ul", "b-kanban-col__list", "KanbanList");
+var TaskList = block("ul", "b-task-list", "TaskList");
+var TaskRow = block("div", "b-task-row", "TaskRow");
+var DataGrid = block("div", "b-datagrid", "DataGrid");
+var Tree = block("ul", "b-tree", "Tree");
+var Feed = block("ul", "b-feed", "Feed");
+var Log = block("div", "b-log", "Log");
+var BulkActions = block("div", "b-bulk-actions", "BulkActions");
+var SelectionCount = block("span", "b-selection-count", "SelectionCount");
+var Resizable = block("div", "b-resizable", "Resizable");
+var ResizeHandle = block("div", "b-resize-handle", "ResizeHandle");
+var DragHandle = block("span", "b-drag-handle", "DragHandle");
+var KanbanColumn = forwardRef11(function KanbanColumn2({ title, count, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs11("section", { ref, className: cn("b-kanban-col", className), ...rest, children: [
+    /* @__PURE__ */ jsxs11("header", { className: "b-kanban-col__header", children: [
+      title,
+      count !== void 0 ? /* @__PURE__ */ jsx15("span", { className: "b-kanban-col__count", children: count }) : null
+    ] }),
+    children
+  ] });
+});
+var Task = forwardRef11(function Task2({ title, meta, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs11("li", { ref, className: cn("b-task", className), ...rest, children: [
+    /* @__PURE__ */ jsx15("div", { className: "b-task__title", children: title }),
+    meta ? /* @__PURE__ */ jsx15("div", { className: "b-task__meta", children: meta }) : null,
+    children
+  ] });
+});
+var TreeItem = forwardRef11(function TreeItem2({ label, icon, defaultOpen, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsxs11("details", { ref, className: cn("b-tree-item", className), open: defaultOpen, ...rest, children: [
+    /* @__PURE__ */ jsxs11("summary", { children: [
+      icon,
+      label
+    ] }),
+    children
+  ] }) });
+});
+var Timeline = forwardRef11(function Timeline2({ entries, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx15("ol", { ref, className: cn("b-timeline", className), ...rest, children: entries.map((entry, i) => /* @__PURE__ */ jsxs11("li", { className: entry.state ? `is-${entry.state}` : void 0, children: [
+    entry.time ? /* @__PURE__ */ jsx15("div", { className: "b-timeline__time", children: entry.time }) : null,
+    /* @__PURE__ */ jsx15("div", { className: "b-timeline__title", children: entry.title }),
+    entry.body ? /* @__PURE__ */ jsx15("div", { className: "b-timeline__body", children: entry.body }) : null
+  ] }, i)) });
+});
+var FileTile = forwardRef11(function FileTile2({ name, icon, selected, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs11(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn("b-file-tile", selected && "is-selected", className),
+      "aria-pressed": selected,
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx15("span", { className: "b-file-tile__icon", children: icon }) : null,
+        /* @__PURE__ */ jsx15("span", { className: "b-file-tile__name", children: name })
+      ]
+    }
+  );
+});
+var FileGrid = block("div", "b-file-grid", "FileGrid");
+var FileBrowser = block("div", "b-file-browser", "FileBrowser");
+
+// src/marketing.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var Landing = block("div", "b-landing", "Landing");
+var SpecStrip = block("div", "b-spec-strip", "SpecStrip");
+var CardRail = block("div", "b-card-rail", "CardRail");
+var SiteFooter = block("footer", "b-site-footer", "SiteFooter");
+var SiteFooterGroups = block("div", "b-site-footer__groups", "SiteFooterGroups");
+var SiteFooterGroup = block("div", "b-site-footer__group", "SiteFooterGroup");
+var SiteFooterHeading = block("div", "b-site-footer__heading", "SiteFooterHeading");
+var SiteFooterLegal = block("div", "b-site-footer__legal", "SiteFooterLegal");
+var Chapter = forwardRef12(function Chapter2({ eyebrow, title, lede, actions, tight, start, dark, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs12(
+    "section",
+    {
+      ref,
+      className: cn(
+        "b-chapter",
+        tight && "b-chapter--tight",
+        start && "b-chapter--start",
+        dark && "b-chapter--dark",
+        className
+      ),
+      ...rest,
+      children: [
+        eyebrow ? /* @__PURE__ */ jsx16("p", { className: "b-chapter__eyebrow", children: eyebrow }) : null,
+        title ? /* @__PURE__ */ jsx16("h2", { className: "b-chapter__title", children: title }) : null,
+        lede ? /* @__PURE__ */ jsx16("p", { className: "b-chapter__lede", children: lede }) : null,
+        actions ? /* @__PURE__ */ jsx16("div", { className: "b-chapter__actions", children: actions }) : null,
+        children
+      ]
+    }
+  );
+});
+var Hero = forwardRef12(function Hero2({ title, media, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs12("section", { ref, className: cn("b-hero", className), ...rest, children: [
+    title ? /* @__PURE__ */ jsx16("h1", { className: "b-hero__title", children: title }) : null,
+    children,
+    media ? /* @__PURE__ */ jsx16("div", { className: "b-hero__media", children: media }) : null
+  ] });
+});
+var Figure = forwardRef12(function Figure2({ caption, bleed, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs12("figure", { ref, className: cn("b-figure", bleed && "b-figure--bleed", className), ...rest, children: [
+    /* @__PURE__ */ jsx16("div", { className: "b-figure__frame", children }),
+    caption ? /* @__PURE__ */ jsx16("figcaption", { className: "b-figure__caption", children: caption }) : null
+  ] });
+});
+var FeatureRow = forwardRef12(function FeatureRow2({ title, body, media, flip, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs12("section", { ref, className: cn("b-feature-row", flip && "b-feature-row--flip", className), ...rest, children: [
+    /* @__PURE__ */ jsxs12("div", { children: [
+      title ? /* @__PURE__ */ jsx16("h3", { className: "b-feature-row__title", children: title }) : null,
+      body ? /* @__PURE__ */ jsx16("div", { className: "b-feature-row__body", children: body }) : null,
+      children
+    ] }),
+    media
+  ] });
+});
+var PromoBand = forwardRef12(function PromoBand2({ title, body, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs12("section", { ref, className: cn("b-promo-band", className), ...rest, children: [
+    title ? /* @__PURE__ */ jsx16("div", { className: "b-promo-band__title", children: title }) : null,
+    body ? /* @__PURE__ */ jsx16("div", { className: "b-promo-band__body", children: body }) : null,
+    children
+  ] });
+});
+
+// src/system.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var Auth = block("div", "b-auth", "Auth");
+var Onboarding = block("div", "b-onboarding", "Onboarding");
+var OnboardingHero = block("div", "b-onboarding__hero", "OnboardingHero");
+var AppGrid = block("div", "b-app-grid", "AppGrid");
+var AppTile = block("a", "b-app-tile", "AppTile");
+var Callout = block("p", "b-callout", "Callout");
+var Notification = block("div", "b-notification", "Notification");
+var Wall = block("div", "b-wall", "Wall");
+var GlassContainer = block("div", "b-glass-container", "GlassContainer");
+var AuthCard = forwardRef13(function AuthCard2({ logo, title, subtitle, footer, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs13("div", { ref, className: cn("b-auth-card", className), ...rest, children: [
+    logo ? /* @__PURE__ */ jsx17("div", { className: "b-auth-card__logo", "aria-hidden": "true", children: logo }) : null,
+    title ? /* @__PURE__ */ jsx17("div", { className: "b-auth-card__title", children: title }) : null,
+    subtitle ? /* @__PURE__ */ jsx17("div", { className: "b-auth-card__subtitle", children: subtitle }) : null,
+    children,
+    footer ? /* @__PURE__ */ jsx17("div", { className: "b-auth-card__footer", children: footer }) : null
+  ] });
+});
+var Result = forwardRef13(function Result2({ tone, icon, title, description, actions, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs13("div", { ref, className: cn("b-result", tone && `b-result--${tone}`, className), ...rest, children: [
+    icon ? /* @__PURE__ */ jsx17("div", { className: "b-result__icon", "aria-hidden": "true", children: icon }) : null,
+    title ? /* @__PURE__ */ jsx17("div", { className: "b-result__title", children: title }) : null,
+    description ? /* @__PURE__ */ jsx17("p", { className: "b-result__desc", children: description }) : null,
+    children,
+    actions ? /* @__PURE__ */ jsx17("div", { className: "b-result__actions", children: actions }) : null
+  ] });
+});
+var SysPage = forwardRef13(function SysPage2({ code, title, description, actions, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs13("div", { ref, className: cn("b-syspage", className), ...rest, children: [
+    code ? /* @__PURE__ */ jsx17("div", { className: "b-syspage__code", children: code }) : null,
+    title ? /* @__PURE__ */ jsx17("div", { className: "b-syspage__title", children: title }) : null,
+    description ? /* @__PURE__ */ jsx17("p", { className: "b-syspage__desc", children: description }) : null,
+    children,
+    actions ? /* @__PURE__ */ jsx17("div", { className: "b-syspage__actions", children: actions }) : null
+  ] });
+});
+var Banner = forwardRef13(function Banner2({ neutral, onDismiss, dismissLabel = "Dismiss", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs13("div", { ref, className: cn("b-banner", neutral && "b-banner--neutral", className), role: "status", ...rest, children: [
+    /* @__PURE__ */ jsx17("span", { children }),
+    onDismiss ? /* @__PURE__ */ jsx17("button", { type: "button", className: "b-banner__close", onClick: onDismiss, "aria-label": dismissLabel, children: /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 20 20", fill: "none", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("path", { d: "m5.5 5.5 9 9m0-9-9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+  ] });
+});
+
+// src/command.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var CommandList = block("ul", "b-cmdk__list", "CommandList");
+var CommandGroupLabel = block("li", "b-cmdk__group-label", "CommandGroupLabel");
+var CommandFooter = block("footer", "b-cmdk__footer", "CommandFooter");
+var HoverCard = block("div", "b-hover-card", "HoverCard");
+var CommandPalette = forwardRef14(
+  function CommandPalette2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx18("dialog", { ref, className: cn("b-modal b-cmdk", className), ...rest, children });
+  }
+);
+var CommandInput = forwardRef14(
+  function CommandInput2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx18("input", { ref, type: "search", className: cn("b-cmdk__input", className), ...rest });
+  }
+);
+var CommandItem = forwardRef14(function CommandItem2({ active, icon, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsxs14(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn("b-cmdk__item", active && "is-active", className),
+      "aria-selected": active,
+      ...rest,
+      children: [
+        icon,
+        children
+      ]
+    }
+  ) });
+});
+
+// src/extras.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var ButtonGroup = forwardRef15(function ButtonGroup2({ attached, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      ref,
+      className: cn("b-btn-group", attached && "b-btn-group--attached", className),
+      role: "group",
+      ...rest,
+      children
+    }
+  );
+});
+var SplitButton = forwardRef15(function SplitButton2({ children, menu, menuLabel = "More options", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs15("span", { ref, className: cn("b-split-btn", className), ...rest, children: [
+    children,
+    /* @__PURE__ */ jsx19("button", { type: "button", className: "b-btn b-btn--primary", "aria-label": menuLabel, "aria-haspopup": "menu", children: /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 20 20", fill: "none", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("path", { d: "m5 8 5 5 5-5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+    menu
+  ] });
+});
+var ToggleButton = forwardRef15(function ToggleButton2({ pressed, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn("b-toggle-btn", pressed && "is-active", className),
+      "aria-pressed": pressed,
+      ...rest,
+      children
+    }
+  );
+});
+var SortControl = block("div", "b-sort-control", "SortControl");
+var Share = block("div", "b-share", "Share");
+var Accordion = block("div", "b-accordion", "Accordion");
+var Disclosure = forwardRef15(function Disclosure2({ title, plain, defaultOpen, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs15(
+    "details",
+    {
+      ref,
+      className: cn("b-disclosure", plain && "b-disclosure--plain", className),
+      open: defaultOpen,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx19("summary", { children: title }),
+        /* @__PURE__ */ jsx19("div", { className: "b-disclosure__body", children })
+      ]
+    }
+  );
+});
+var Calendar = block("div", "b-calendar", "Calendar");
+var CalendarGrid = block("div", "b-calendar__grid", "CalendarGrid");
+var CalendarMonth = block("span", "b-calendar__month", "CalendarMonth");
+var CalendarWeekday = block("span", "b-calendar__weekday", "CalendarWeekday");
+var CalendarHeader = block("div", "b-calendar__header", "CalendarHeader");
+var DatePicker = block("details", "b-datepicker", "DatePicker");
+var CalendarView = block("div", "b-calview", "CalendarView");
+var CalendarViewHead = block("div", "b-calview__head", "CalendarViewHead");
+var CalendarViewCell = block("div", "b-calview__cell", "CalendarViewCell");
+var CalendarDay = forwardRef15(function CalendarDay2({ muted, today, selected, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn("b-calendar__day", muted && "is-muted", today && "is-today", selected && "is-selected", className),
+      "aria-current": today ? "date" : void 0,
+      "aria-pressed": selected || void 0,
+      ...rest,
+      children
+    }
+  );
+});
+var Event = forwardRef15(function Event2({ tone, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19("div", { ref, className: cn("b-event", tone && `b-event--${tone}`, className), ...rest, children });
+});
+var Combobox = block("div", "b-combobox", "Combobox");
+var ComboboxList = block("ul", "b-combobox__list", "ComboboxList");
+var ComboboxEmpty = block("li", "b-combobox__empty", "ComboboxEmpty");
+var SearchResults = block("div", "b-search-results", "SearchResults");
+var ComboboxOption = forwardRef15(function ComboboxOption2({ selected, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(
+    "li",
+    {
+      ref,
+      role: "option",
+      "aria-selected": selected,
+      className: cn("b-combobox__option", selected && "is-active", className),
+      ...rest,
+      children
+    }
+  );
+});
+var SearchResult = forwardRef15(function SearchResult2({ title, snippet, path, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs15("a", { ref, className: cn("b-search-result", className), ...rest, children: [
+    /* @__PURE__ */ jsx19("span", { className: "b-search-result__title", children: title }),
+    snippet ? /* @__PURE__ */ jsx19("span", { className: "b-search-result__snippet", children: snippet }) : null,
+    path ? /* @__PURE__ */ jsx19("span", { className: "b-search-result__path", children: path }) : null
+  ] });
+});
+var Carousel = block("div", "b-carousel", "Carousel");
+var CarouselTrack = block("div", "b-carousel__track", "CarouselTrack");
+var CarouselSlide = block("div", "b-carousel__slide", "CarouselSlide");
+var CarouselDots = block("div", "b-carousel__dots", "CarouselDots");
+var Gallery = block("div", "b-gallery", "Gallery");
+var ImageViewer = block("div", "b-image-viewer", "ImageViewer");
+var ImageViewerBar = block("div", "b-image-viewer__bar", "ImageViewerBar");
+var UploadPreviews = block("div", "b-upload-previews", "UploadPreviews");
+var UploadPreview = block("div", "b-upload-preview", "UploadPreview");
+var Lightbox = forwardRef15(function Lightbox2({ caption, actions, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs15("dialog", { ref, className: cn("b-lightbox", className), ...rest, children: [
+    /* @__PURE__ */ jsx19("div", { className: "b-lightbox__frame", children }),
+    caption ? /* @__PURE__ */ jsx19("div", { className: "b-lightbox__caption", children: caption }) : null,
+    actions ? /* @__PURE__ */ jsx19("div", { className: "b-lightbox__actions", children: actions }) : null
+  ] });
+});
+var AccountSwitcher = block("div", "b-account-switcher", "AccountSwitcher");
+var CommandCenter = block("div", "b-command-center", "CommandCenter");
+var Gantt = block("div", "b-gantt", "Gantt");
+var GanttRow = block("div", "b-gantt__row", "GanttRow");
+var GanttBar = block("div", "b-gantt__bar", "GanttBar");
+var HoverCardHost = block("span", "b-hover-card-host", "HoverCardHost");
+var GlassInteractive = block("div", "b-glass-interactive", "GlassInteractive");
+var Rail = forwardRef15(function Rail2({ material, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19("nav", { ref, className: cn("b-rail", material && `b-rail--${material}`, className), ...rest, children });
+});
+var RailItem = block("a", "b-rail__item", "RailItem");
+var Account = forwardRef15(function Account2({ name, email, current, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs15("div", { ref, className: cn("b-account", className), ...rest, children: [
+    children,
+    /* @__PURE__ */ jsxs15("span", { className: "b-account__meta", children: [
+      /* @__PURE__ */ jsx19("span", { className: "b-account__name", children: name }),
+      email ? /* @__PURE__ */ jsx19("span", { className: "b-account__email", children: email }) : null
+    ] }),
+    current ? /* @__PURE__ */ jsx19("span", { className: "b-account__check", "aria-label": "Current account", children: /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 20 20", fill: "none", width: "16", height: "16", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("path", { d: "M4 10.5 8.5 15 16 5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : null
+  ] });
+});
+var OnboardingFeature = forwardRef15(
+  function OnboardingFeature2({ title, description, icon, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs15("div", { ref, className: cn("b-onboarding-feature", className), ...rest, children: [
+      icon,
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx19("div", { className: "b-onboarding-feature__title", children: title }),
+        description ? /* @__PURE__ */ jsx19("p", { className: "b-onboarding-feature__desc", children: description }) : null
+      ] })
+    ] });
+  }
+);
+
+// src/media.tsx
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var MediaPlaceholder = block("div", "b-media-placeholder", "MediaPlaceholder");
+var AsyncImage = block("span", "b-async-img", "AsyncImage");
+var Web = block("div", "b-web", "Web");
+var Video = block("video", "b-video", "Video");
+var Audio = block("div", "b-audio", "Audio");
+var Waveform = block("div", "b-waveform", "Waveform");
+var Thumb = forwardRef16(function Thumb2({ duration, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs16("div", { ref, className: cn("b-thumb", duration !== void 0 && "b-thumb--video", className), ...rest, children: [
+    children,
+    duration ? /* @__PURE__ */ jsx20("span", { className: "b-thumb__duration", children: duration }) : null
+  ] });
+});
+var CircularProgress = forwardRef16(
+  function CircularProgress2({ value, label, description, className, style, ...rest }, ref) {
+    return /* @__PURE__ */ jsx20("div", { className: "b-circular-wrap", children: /* @__PURE__ */ jsx20(
+      "div",
+      {
+        ref,
+        className: cn("b-circular", className),
+        style: { ...value === void 0 ? null : { ["--b-progress"]: value }, ...style },
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": value === void 0 ? void 0 : 0,
+        "aria-valuemax": value === void 0 ? void 0 : 100,
+        "aria-label": description,
+        ...rest,
+        children: label ? /* @__PURE__ */ jsx20("div", { className: "b-circular__label", children: label }) : null
+      }
+    ) });
+  }
+);
+var Axis = forwardRef16(function Axis2({ y, ticks, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx20("div", { ref, className: cn("b-axis", y && "b-axis--y", className), "aria-hidden": "true", ...rest, children: ticks ? ticks.map((tick, i) => /* @__PURE__ */ jsx20("span", { children: tick }, i)) : children });
+});
+var RadarChart = block("svg", "b-radar-svg", "RadarChart");
+var LineChart = block("svg", "b-line-svg", "LineChart");
+var AreaChart = block("svg", "b-area-svg", "AreaChart");
+var ScatterChart = block("svg", "b-scatter-svg", "ScatterChart");
+var GridLines = block("div", "b-gridlines", "GridLines");
+var MenuBar = block("div", "b-menubar", "MenuBar");
+var MenuBarItem = block("button", "b-menubar__item", "MenuBarItem");
+var PaginationEllipsis = block("span", "b-pagination__ellipsis", "PaginationEllipsis");
+var Pagination = forwardRef16(function Pagination2({ label = "Pagination", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx20("nav", { ref, "aria-label": label, ...rest, children: /* @__PURE__ */ jsx20("ul", { className: cn("b-pagination", className), children }) });
+});
+var PaginationItem = forwardRef16(
+  function PaginationItem2({ current, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20(
+      "a",
+      {
+        ref,
+        className: cn("b-pagination__item", current && "is-active", className),
+        "aria-current": current ? "page" : void 0,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+var LiquidToggle = forwardRef16(function LiquidToggle2({ pressed, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx20(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn("b-liquid-toggle", className),
+      "aria-pressed": pressed,
+      ...rest,
+      children
+    }
+  );
+});
+var CommandCenterTile = block("div", "b-cc__tile", "CommandCenterTile");
+var CommandCenterLabel = block("div", "b-cc__label", "CommandCenterLabel");
+var CommandCenterStatus = block("div", "b-cc__status", "CommandCenterStatus");
+var ImageLens = block("div", "b-lens", "ImageLens");
+export {
+  Accordion,
+  Account,
+  AccountSwitcher,
+  ActionSheet,
+  Alert,
+  AlertDialog,
+  AppGrid,
+  AppTile,
+  AreaChart,
+  AsyncImage,
+  Audio,
+  Auth,
+  AuthCard,
+  Avatar,
+  AvatarGroup,
+  Axis,
+  BackButton,
+  Badge,
+  Banner,
+  Bars,
+  BaruaProvider,
+  Bento,
+  BottomNav,
+  BottomNavItem,
+  BottomSheet,
+  Breadcrumbs,
+  BulkActions,
+  Button,
+  ButtonGroup,
+  ButtonLink,
+  Calendar,
+  CalendarDay,
+  CalendarGrid,
+  CalendarHeader,
+  CalendarMonth,
+  CalendarView,
+  CalendarViewCell,
+  CalendarViewHead,
+  CalendarWeekday,
+  Callout,
+  Card,
+  CardBody,
+  CardEyebrow,
+  CardFooter,
+  CardGrid,
+  CardHeader,
+  CardRail,
+  CardSubtitle,
+  CardTitle,
+  Carousel,
+  CarouselDots,
+  CarouselSlide,
+  CarouselTrack,
+  Chapter,
+  Chart,
+  ChartTip,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  CodeBlock,
+  Columns,
+  Combobox,
+  ComboboxEmpty,
+  ComboboxList,
+  ComboboxOption,
+  CommandCenter,
+  CommandCenterLabel,
+  CommandCenterStatus,
+  CommandCenterTile,
+  CommandFooter,
+  CommandGroupLabel,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandPalette,
+  Container,
+  Dashboard,
+  DataGrid,
+  DatePicker,
+  DescriptionList,
+  Disclosure,
+  Divider,
+  Dock,
+  DockItem,
+  DockTray,
+  Donut,
+  DragHandle,
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+  Dropdown,
+  Dropzone,
+  EmptyState,
+  ErrorText,
+  Event,
+  Fab,
+  FeatureRow,
+  Feed,
+  Field,
+  Fieldset,
+  Figure,
+  FileBrowser,
+  FileGrid,
+  FileTile,
+  FilterBar,
+  FilterChip,
+  Footnote,
+  Footnotes,
+  Form,
+  FormActions,
+  FormRow,
+  FormSection,
+  Gallery,
+  Gantt,
+  GanttBar,
+  GanttRow,
+  Gauge,
+  GlassContainer,
+  GlassInteractive,
+  Grid,
+  GridLines,
+  GroupBox,
+  Grow,
+  HStack,
+  Heatmap,
+  Help,
+  Hero,
+  HoverCard,
+  HoverCardHost,
+  Icon,
+  IconTile,
+  ImageLens,
+  ImageViewer,
+  ImageViewerBar,
+  Input,
+  InputGroup,
+  Inspector,
+  Kanban,
+  KanbanColumn,
+  KanbanList,
+  Kbd,
+  Label,
+  Labeled,
+  Landing,
+  Legend,
+  Lightbox,
+  LineChart,
+  LinearGauge,
+  Link,
+  LinkGroup,
+  LiquidToggle,
+  List,
+  ListFooter,
+  ListHeader,
+  ListItem,
+  Log,
+  MarketingNav,
+  MarketingNavBrand,
+  MarketingNavLinks,
+  MediaPlaceholder,
+  Menu,
+  MenuBar,
+  MenuBarItem,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
+  Modal,
+  Notification,
+  Onboarding,
+  OnboardingFeature,
+  OnboardingHero,
+  Optional,
+  OtpInput,
+  Overline,
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PillNav,
+  Popover,
+  Progress,
+  PromoBand,
+  Quote,
+  RadarChart,
+  Radio,
+  Rail,
+  RailItem,
+  Range,
+  Resizable,
+  ResizeHandle,
+  Result,
+  SafeArea,
+  ScatterChart,
+  ScrollArea,
+  SearchField,
+  SearchResult,
+  SearchResults,
+  Section,
+  Segmented,
+  Select,
+  SelectionCount,
+  Share,
+  Sheet,
+  Sidebar,
+  SidebarGroup,
+  SidebarHeading,
+  SidebarItem,
+  SiteFooter,
+  SiteFooterGroup,
+  SiteFooterGroups,
+  SiteFooterHeading,
+  SiteFooterLegal,
+  Skeleton,
+  SkipLink,
+  Slider,
+  SortControl,
+  Spacer,
+  Span,
+  Sparkline,
+  SpecStrip,
+  Spinner,
+  Split,
+  SplitButton,
+  Stack,
+  Stage,
+  Stat,
+  StatusBar,
+  StatusBarItem,
+  StatusDot,
+  StepperInput,
+  Steps,
+  StoryCard,
+  Swatch,
+  Swatches,
+  Switch,
+  SysPage,
+  TabPanel,
+  Table,
+  TableNum,
+  TableSortHeader,
+  TableWrap,
+  Tabs,
+  Tag,
+  Task,
+  TaskList,
+  TaskRow,
+  Text,
+  Textarea,
+  ThemeScript,
+  Thumb,
+  Timeline,
+  Tip,
+  ToastProvider,
+  ToggleButton,
+  Toolbar,
+  Tooltip,
+  TopNav,
+  TopNavBrand,
+  TopNavLink,
+  TopNavLinks,
+  Tree,
+  TreeItem,
+  Upload,
+  UploadItem,
+  UploadPreview,
+  UploadPreviews,
+  VStack,
+  Video,
+  Wall,
+  Waveform,
+  Web,
+  Workspace,
+  WorkspaceMain,
+  block,
+  buttonClasses,
+  cn,
+  iconNames,
+  useBaruaTheme,
+  useToast
+};
+//# sourceMappingURL=index.js.map