@epilot/spark-ui 0.25.1 → 0.26.0

package/dist/components/empty-state.js

@@ -1,38 +1,116 @@
 "use client";
+import { cn } from "../utils/cn.js";
 import { Icon } from "./icon.js";
+import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/empty-state.tsx
-const emptyStateVariants = cva("flex flex-col items-center gap-4 px-6 py-12 text-center", {
-	variants: { variant: {
-		dashed: "rounded-lg border border-dashed border-gray",
-		ghost: ""
-	} },
-	defaultVariants: { variant: "dashed" }
+const emptyStateVariants = cva("flex", {
+	variants: {
+		variant: {
+			dashed: "rounded-lg border border-dashed border-gray",
+			ghost: ""
+		},
+		size: {
+			default: "",
+			sm: ""
+		},
+		layout: {
+			stacked: "flex-col items-center text-center",
+			inline: "flex-row items-start text-left"
+		}
+	},
+	compoundVariants: [
+		{
+			layout: "stacked",
+			size: "default",
+			class: "gap-4 px-6 py-12"
+		},
+		{
+			layout: "stacked",
+			size: "sm",
+			class: "gap-2 px-4 py-5"
+		},
+		{
+			layout: "inline",
+			size: "default",
+			class: "gap-4 p-6"
+		},
+		{
+			layout: "inline",
+			size: "sm",
+			class: "gap-3 px-4 py-3"
+		}
+	],
+	defaultVariants: {
+		variant: "dashed",
+		size: "default",
+		layout: "stacked"
+	}
 });
-function EmptyState({ action, description, icon: Glyph, title, variant }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: emptyStateVariants({ variant }),
-		children: [
-			Glyph ? /* @__PURE__ */ jsx(Icon, {
-				size: "xl",
+const EmptyStateContext = createContext({
+	size: "default",
+	layout: "stacked"
+});
+function EmptyStateTitle({ className, ...props }) {
+	const { size } = useContext(EmptyStateContext);
+	return /* @__PURE__ */ jsx("h3", {
+		"data-slot": "empty-state-title",
+		className: cn("text-gray", size === "sm" ? "text-sm font-semibold" : "text-base font-bold", className),
+		...props
+	});
+}
+function EmptyStateDescription({ className, ...props }) {
+	const { size, layout } = useContext(EmptyStateContext);
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "empty-state-description",
+		className: cn(layout !== "inline" && "mx-auto", "max-w-md text-gray-light", size === "sm" ? "text-xs" : "text-sm", className),
+		...props
+	});
+}
+const actionsMargin = {
+	stacked: {
+		default: "mt-3",
+		sm: "mt-1"
+	},
+	inline: {
+		default: "mt-3",
+		sm: "mt-2"
+	}
+};
+function EmptyStateActions({ className, ...props }) {
+	const { size, layout } = useContext(EmptyStateContext);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-state-actions",
+		className: cn("flex flex-wrap gap-2", layout === "stacked" && "justify-center", actionsMargin[layout][size], className),
+		...props
+	});
+}
+function EmptyState({ children, className, icon: Glyph, layout = "stacked", size = "default", variant, ...props }) {
+	return /* @__PURE__ */ jsx(EmptyStateContext.Provider, {
+		value: {
+			size,
+			layout
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "empty-state",
+			className: cn(emptyStateVariants({
+				variant,
+				size,
+				layout
+			}), className),
+			...props,
+			children: [Glyph ? /* @__PURE__ */ jsx(Icon, {
+				size: size === "sm" ? "small" : "xl",
 				children: /* @__PURE__ */ jsx(Glyph, {})
-			}) : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-base font-bold text-gray",
-					children: title
-				}), description && /* @__PURE__ */ jsx("p", {
-					className: "mx-auto max-w-md text-sm text-gray-light",
-					children: description
-				})]
-			}),
-			action
-		]
+			}) : null, /* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-col gap-1", layout === "inline" && "min-w-0 flex-1"),
+				children
+			})]
+		})
 	});
 }
 //#endregion
-export { EmptyState };
+export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateTitle };
 
 //# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { Icon } from './icon'\n\nconst emptyStateVariants = cva(\n  'flex flex-col items-center gap-4 px-6 py-12 text-center',\n  {\n    variants: {\n      variant: {\n        dashed: 'rounded-lg border border-dashed border-gray',\n        ghost: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'dashed',\n    },\n  },\n)\n\ninterface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {\n  title: string\n  description?: string\n  icon?: SparkIcon\n  action?: ReactNode\n}\n\nexport function EmptyState({\n  action,\n  description,\n  icon: Glyph,\n  title,\n  variant,\n}: EmptyStateProps) {\n  return (\n    <div className={emptyStateVariants({ variant })}>\n      {Glyph ? (\n        <Icon size=\"xl\">\n          <Glyph />\n        </Icon>\n      ) : null}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-base font-bold text-gray\">{title}</h3>\n        {description && (\n          <p className=\"mx-auto max-w-md text-sm text-gray-light\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n\nexport type { EmptyStateProps }\n"],"mappings":";;;;;AAKA,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ;EACR,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF;AASA,SAAgB,WAAW,EACzB,QACA,aACA,MAAM,OACN,OACA,WACkB;CAClB,OACE,qBAAC,OAAD;EAAK,WAAW,mBAAmB,EAAE,QAAQ,CAAC;YAA9C;GACG,QACC,oBAAC,MAAD;IAAM,MAAK;cACT,oBAAC,OAAD,CAAQ,CAAA;GACJ,CAAA,IACJ;GACJ,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;eAAiC;IAAU,CAAA,GACxD,eACC,oBAAC,KAAD;KAAG,WAAU;eACV;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport {\n  createContext,\n  type HTMLAttributes,\n  type ReactNode,\n  useContext,\n} from 'react'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst emptyStateVariants = cva('flex', {\n  variants: {\n    variant: {\n      dashed: 'rounded-lg border border-dashed border-gray',\n      ghost: '',\n    },\n    size: { default: '', sm: '' },\n    layout: {\n      stacked: 'flex-col items-center text-center',\n      inline: 'flex-row items-start text-left',\n    },\n  },\n  compoundVariants: [\n    { layout: 'stacked', size: 'default', class: 'gap-4 px-6 py-12' },\n    { layout: 'stacked', size: 'sm', class: 'gap-2 px-4 py-5' },\n    { layout: 'inline', size: 'default', class: 'gap-4 p-6' },\n    { layout: 'inline', size: 'sm', class: 'gap-3 px-4 py-3' },\n  ],\n  defaultVariants: {\n    variant: 'dashed',\n    size: 'default',\n    layout: 'stacked',\n  },\n})\n\ntype EmptyStateVariants = VariantProps<typeof emptyStateVariants>\n\n// A leftover `title` would otherwise compile and render as a tooltip, not a heading.\ninterface EmptyStateProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    Pick<EmptyStateVariants, 'variant'> {\n  // null would switch off the compound cells and drop all padding and gap\n  size?: NonNullable<EmptyStateVariants['size']>\n  layout?: NonNullable<EmptyStateVariants['layout']>\n  icon?: SparkIcon\n  children: ReactNode\n}\n\nconst EmptyStateContext = createContext<{\n  size: NonNullable<EmptyStateVariants['size']>\n  layout: NonNullable<EmptyStateVariants['layout']>\n}>({ size: 'default', layout: 'stacked' })\n\nfunction EmptyStateTitle({\n  className,\n  ...props\n}: HTMLAttributes<HTMLHeadingElement>) {\n  const { size } = useContext(EmptyStateContext)\n  return (\n    <h3\n      data-slot=\"empty-state-title\"\n      className={cn(\n        'text-gray',\n        size === 'sm' ? 'text-sm font-semibold' : 'text-base font-bold',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyStateDescription({\n  className,\n  ...props\n}: HTMLAttributes<HTMLParagraphElement>) {\n  const { size, layout } = useContext(EmptyStateContext)\n  return (\n    <p\n      data-slot=\"empty-state-description\"\n      className={cn(\n        layout !== 'inline' && 'mx-auto',\n        'max-w-md text-gray-light',\n        size === 'sm' ? 'text-xs' : 'text-sm',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n// Margins plus the column's gap-1 reproduce the old spacing: 16/8 px stacked, 16/12 px inline.\nconst actionsMargin = {\n  stacked: { default: 'mt-3', sm: 'mt-1' },\n  inline: { default: 'mt-3', sm: 'mt-2' },\n} as const\n\nfunction EmptyStateActions({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  const { size, layout } = useContext(EmptyStateContext)\n  return (\n    <div\n      data-slot=\"empty-state-actions\"\n      className={cn(\n        'flex flex-wrap gap-2',\n        layout === 'stacked' && 'justify-center',\n        actionsMargin[layout][size],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyState({\n  children,\n  className,\n  icon: Glyph,\n  layout = 'stacked',\n  size = 'default',\n  variant,\n  ...props\n}: EmptyStateProps) {\n  return (\n    <EmptyStateContext.Provider value={{ size, layout }}>\n      <div\n        data-slot=\"empty-state\"\n        className={cn(emptyStateVariants({ variant, size, layout }), className)}\n        {...props}\n      >\n        {Glyph ? (\n          <Icon size={size === 'sm' ? 'small' : 'xl'}>\n            <Glyph />\n          </Icon>\n        ) : null}\n        <div\n          className={cn(\n            'flex flex-col gap-1',\n            layout === 'inline' && 'min-w-0 flex-1',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </EmptyStateContext.Provider>\n  )\n}\n\nexport { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateTitle }\nexport type { EmptyStateProps }\n"],"mappings":";;;;;;;AAWA,MAAM,qBAAqB,IAAI,QAAQ;CACrC,UAAU;EACR,SAAS;GACP,QAAQ;GACR,OAAO;EACT;EACA,MAAM;GAAE,SAAS;GAAI,IAAI;EAAG;EAC5B,QAAQ;GACN,SAAS;GACT,QAAQ;EACV;CACF;CACA,kBAAkB;EAChB;GAAE,QAAQ;GAAW,MAAM;GAAW,OAAO;EAAmB;EAChE;GAAE,QAAQ;GAAW,MAAM;GAAM,OAAO;EAAkB;EAC1D;GAAE,QAAQ;GAAU,MAAM;GAAW,OAAO;EAAY;EACxD;GAAE,QAAQ;GAAU,MAAM;GAAM,OAAO;EAAkB;CAC3D;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,QAAQ;CACV;AACF,CAAC;AAgBD,MAAM,oBAAoB,cAGvB;CAAE,MAAM;CAAW,QAAQ;AAAU,CAAC;AAEzC,SAAS,gBAAgB,EACvB,WACA,GAAG,SACkC;CACrC,MAAM,EAAE,SAAS,WAAW,iBAAiB;CAC7C,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,aACA,SAAS,OAAO,0BAA0B,uBAC1C,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SACoC;CACvC,MAAM,EAAE,MAAM,WAAW,WAAW,iBAAiB;CACrD,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,WAAW,YAAY,WACvB,4BACA,SAAS,OAAO,YAAY,WAC5B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,MAAM,gBAAgB;CACpB,SAAS;EAAE,SAAS;EAAQ,IAAI;CAAO;CACvC,QAAQ;EAAE,SAAS;EAAQ,IAAI;CAAO;AACxC;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC8B;CACjC,MAAM,EAAE,MAAM,WAAW,WAAW,iBAAiB;CACrD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wBACA,WAAW,aAAa,kBACxB,cAAc,QAAQ,OACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,UACA,WACA,MAAM,OACN,SAAS,WACT,OAAO,WACP,SACA,GAAG,SACe;CAClB,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;GAAE;GAAM;EAAO;YAChD,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,mBAAmB;IAAE;IAAS;IAAM;GAAO,CAAC,GAAG,SAAS;GACtE,GAAI;aAHN,CAKG,QACC,oBAAC,MAAD;IAAM,MAAM,SAAS,OAAO,UAAU;cACpC,oBAAC,OAAD,CAAQ,CAAA;GACJ,CAAA,IACJ,MACJ,oBAAC,OAAD;IACE,WAAW,GACT,uBACA,WAAW,YAAY,gBACzB;IAEC;GACE,CAAA,CACF;;CACqB,CAAA;AAEhC"}

package/dist/components/field.cjs

@@ -2,9 +2,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_theme = require("./theme.cjs");
 const require_components_separator = require("./separator.cjs");
 const require_components_skeleton = require("./skeleton.cjs");
-const require_components_theme = require("./theme.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/field.js

@@ -1,9 +1,9 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
+import { useTheme } from "./theme.js";
 import { Separator } from "./separator.js";
 import { Skeleton } from "./skeleton.js";
-import { useTheme } from "./theme.js";
 import * as React$1 from "react";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/icon.js

@@ -1,6 +1,6 @@
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon.tsx

package/dist/components/info-block.d.cts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "bare" | "default" | null | undefined;
+  variant?: "default" | "bare" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/info-block.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "bare" | "default" | null | undefined;
+  variant?: "default" | "bare" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/input-otp.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _base_ui_react_otp_field = require("@base-ui/react/otp-field");

package/dist/components/input-otp.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { OTPField } from "@base-ui/react/otp-field";

package/dist/components/input.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/components/kbd.cjs

@@ -0,0 +1,14 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react_jsx_runtime = require("react/jsx-runtime");
+let cn = require("cn");
+//#region src/components/kbd.tsx
+const Kbd = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+	"data-slot": "kbd",
+	className: (0, cn.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-md border border-gray-a6 bg-gray-a2 px-1.5 font-mono text-xs text-gray-a11", className),
+	...props
+});
+//#endregion
+exports.Kbd = Kbd;
+
+//# sourceMappingURL=kbd.cjs.map

package/dist/components/kbd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.cjs","names":[],"sources":["../../src/components/kbd.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype KbdProps = React.HTMLAttributes<HTMLElement>\n\nconst Kbd = ({ className, ...props }: KbdProps) => (\n  <kbd\n    data-slot=\"kbd\"\n    className={cn(\n      'inline-flex h-5 min-w-5 items-center justify-center rounded-md border border-gray-a6 bg-gray-a2 px-1.5 font-mono text-xs text-gray-a11',\n      className,\n    )}\n    {...props}\n  />\n)\n\nexport { Kbd }\nexport type { KbdProps }\n"],"mappings":";;;;;AAKA,MAAM,OAAO,EAAE,WAAW,GAAG,YAC3B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,aAAU;CACV,YAAA,GAAA,GAAA,IACE,0IACA,SACF;CACA,GAAI;AACL,CAAA"}

package/dist/components/kbd.d.cts

@@ -0,0 +1,13 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/kbd.d.ts
+type KbdProps = React$1.HTMLAttributes<HTMLElement>;
+declare const Kbd: ({
+  className,
+  ...props
+}: KbdProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Kbd, type KbdProps };
+//# sourceMappingURL=kbd.d.cts.map

package/dist/components/kbd.d.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/kbd.d.ts
+type KbdProps = React$1.HTMLAttributes<HTMLElement>;
+declare const Kbd: ({
+  className,
+  ...props
+}: KbdProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Kbd, type KbdProps };
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd.js

@@ -0,0 +1,13 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/kbd.tsx
+const Kbd = ({ className, ...props }) => /* @__PURE__ */ jsx("kbd", {
+	"data-slot": "kbd",
+	className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-md border border-gray-a6 bg-gray-a2 px-1.5 font-mono text-xs text-gray-a11", className),
+	...props
+});
+//#endregion
+export { Kbd };
+
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../../src/components/kbd.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype KbdProps = React.HTMLAttributes<HTMLElement>\n\nconst Kbd = ({ className, ...props }: KbdProps) => (\n  <kbd\n    data-slot=\"kbd\"\n    className={cn(\n      'inline-flex h-5 min-w-5 items-center justify-center rounded-md border border-gray-a6 bg-gray-a2 px-1.5 font-mono text-xs text-gray-a11',\n      className,\n    )}\n    {...props}\n  />\n)\n\nexport { Kbd }\nexport type { KbdProps }\n"],"mappings":";;;;AAKA,MAAM,OAAO,EAAE,WAAW,GAAG,YAC3B,oBAAC,OAAD;CACE,aAAU;CACV,WAAW,GACT,0IACA,SACF;CACA,GAAI;AACL,CAAA"}

package/dist/components/marker.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "border" | "default" | "separator" | null | undefined;
+  variant?: "separator" | "default" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/marker.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "border" | "default" | "separator" | null | undefined;
+  variant?: "separator" | "default" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/message-scroller.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
-const require_lib_message_animations = require("../lib/message-animations.cjs");
 const require_components_button = require("./button.cjs");
+const require_lib_message_animations = require("../lib/message-animations.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _epilot_spark_icons = require("@epilot/spark-icons");

package/dist/components/message-scroller.js

@@ -1,8 +1,8 @@
 "use client";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
-import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
 import { Button } from "./button.js";
+import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
 import * as React$1 from "react";
 import { ArrowDownward, ArrowUpward } from "@epilot/spark-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/pill.js

@@ -1,6 +1,6 @@
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import * as React$1 from "react";
 import { Close } from "@epilot/spark-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/popover.cjs

@@ -1,6 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_theme = require("./theme.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -47,7 +48,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
 	const context = react.useContext(PopoverAnchorContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, {
 		container,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_theme.PortalTheme, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
 			align,
 			alignOffset,
 			anchor: anchor ?? context?.anchor ?? void 0,
@@ -60,7 +61,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
 				className: (0, cn.cn)("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none dark:bg-gray-3", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
 				...props
 			})
-		})
+		}) })
 	});
 }
 //#endregion

package/dist/components/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    | 'align'\n    | 'alignOffset'\n    | 'side'\n    | 'sideOffset'\n    | 'anchor'\n    | 'collisionAvoidance'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  collisionAvoidance,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        collisionAvoidance={collisionAvoidance}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none dark:bg-gray-3',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,uBAAuBA,MAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,oBAIpB,GAAG;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAcA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,oBACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,oBAAoB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,QAAlB;EAAoC;YAClC,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACU;GACd;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,GAAA,IACE,8NAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}
+{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive","PortalTheme"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { PortalTheme } from './theme'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    | 'align'\n    | 'alignOffset'\n    | 'side'\n    | 'sideOffset'\n    | 'anchor'\n    | 'collisionAvoidance'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  collisionAvoidance,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PortalTheme>\n        <PopoverPrimitive.Positioner\n          align={align}\n          alignOffset={alignOffset}\n          anchor={anchor ?? context?.anchor ?? undefined}\n          className=\"isolate z-50\"\n          collisionAvoidance={collisionAvoidance}\n          side={side}\n          sideOffset={sideOffset}\n        >\n          <PopoverPrimitive.Popup\n            data-slot=\"popover-content\"\n            className={cn(\n              'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none dark:bg-gray-3',\n              // enter: fade + zoom + a slight per-side slide (was animate-in)\n              'data-starting-style:scale-95 data-starting-style:opacity-0',\n              'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n              // exit: fade + zoom (was animate-out)\n              'data-ending-style:scale-95 data-ending-style:opacity-0',\n              className,\n            )}\n            {...props}\n          />\n        </PopoverPrimitive.Positioner>\n      </PortalTheme>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,uBAAuBA,MAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,oBAIpB,GAAG;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAcA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,oBACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,oBAAoB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,QAAlB;EAAoC;YAClC,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACD,uBAAAA,QAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACU;GACd;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,GAAA,IACE,8NAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA,EAClB,CAAA;CACU,CAAA;AAE7B"}

package/dist/components/popover.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../utils/cn.js";
+import { PortalTheme } from "./theme.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -44,7 +45,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
 	const context = React$1.useContext(PopoverAnchorContext);
 	return /* @__PURE__ */ jsx(Popover$1.Portal, {
 		container,
-		children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		children: /* @__PURE__ */ jsx(PortalTheme, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
 			align,
 			alignOffset,
 			anchor: anchor ?? context?.anchor ?? void 0,
@@ -57,7 +58,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
 				className: cn("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none dark:bg-gray-3", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
 				...props
 			})
-		})
+		}) })
 	});
 }
 //#endregion

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    | 'align'\n    | 'alignOffset'\n    | 'side'\n    | 'sideOffset'\n    | 'anchor'\n    | 'collisionAvoidance'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  collisionAvoidance,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        collisionAvoidance={collisionAvoidance}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none dark:bg-gray-3',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;AAQA,MAAM,uBAAuBA,QAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,UAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,oBAIpB,GAAG;EACd,OAAO,WACL,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAcA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,oBACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,oBAAoB;CACrD,OACE,oBAACC,UAAiB,QAAlB;EAAoC;YAClC,oBAACA,UAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACU;GACd;GACM;aAEZ,oBAACA,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,8NAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}
+{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { PortalTheme } from './theme'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    | 'align'\n    | 'alignOffset'\n    | 'side'\n    | 'sideOffset'\n    | 'anchor'\n    | 'collisionAvoidance'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  collisionAvoidance,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PortalTheme>\n        <PopoverPrimitive.Positioner\n          align={align}\n          alignOffset={alignOffset}\n          anchor={anchor ?? context?.anchor ?? undefined}\n          className=\"isolate z-50\"\n          collisionAvoidance={collisionAvoidance}\n          side={side}\n          sideOffset={sideOffset}\n        >\n          <PopoverPrimitive.Popup\n            data-slot=\"popover-content\"\n            className={cn(\n              'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none dark:bg-gray-3',\n              // enter: fade + zoom + a slight per-side slide (was animate-in)\n              'data-starting-style:scale-95 data-starting-style:opacity-0',\n              'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n              // exit: fade + zoom (was animate-out)\n              'data-ending-style:scale-95 data-ending-style:opacity-0',\n              className,\n            )}\n            {...props}\n          />\n        </PopoverPrimitive.Positioner>\n      </PortalTheme>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;AASA,MAAM,uBAAuBA,QAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,UAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,oBAIpB,GAAG;EACd,OAAO,WACL,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAcA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,oBACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,oBAAoB;CACrD,OACE,oBAACC,UAAiB,QAAlB;EAAoC;YAClC,oBAAC,aAAD,EAAA,UACE,oBAACA,UAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACU;GACd;GACM;aAEZ,oBAACA,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,8NAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA,EAClB,CAAA;CACU,CAAA;AAE7B"}

package/dist/components/radio.js

@@ -1,6 +1,6 @@
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Radio as Radio$1 } from "@base-ui/react/radio";

package/dist/components/select.cjs

@@ -2,8 +2,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
+const require_components_theme = require("./theme.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _epilot_spark_icons = require("@epilot/spark-icons");
@@ -79,7 +80,7 @@ function SelectClear({ className, children, onClick, ...props }) {
 function SelectContent({ className, children, align = "start", alignOffset, side, sideOffset = 4, alignItemWithTrigger = false, container, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Portal, {
 		container,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Positioner, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_theme.PortalTheme, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Positioner, {
 			align,
 			alignItemWithTrigger,
 			alignOffset,
@@ -96,7 +97,7 @@ function SelectContent({ className, children, align = "start", alignOffset, side
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollDownButton, {})
 				]
 			})
-		})
+		}) })
 	});
 }
 function SelectLabel({ className, ...props }) {