@epilot/spark-ui 0.12.3 → 0.13.0

package/dist/components/accordion.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/accordion.tsx

package/dist/components/accordion.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React$1 from "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import * as React$1 from "react";
 
 //#region src/components/accordion.d.ts
 type AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline';

package/dist/components/accordion.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
-import "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {

package/dist/components/badge.cjs

@@ -12,7 +12,7 @@ const Badge = react.forwardRef(({ className, children, styleVariant, color, ...p
 		"data-slot": "badge",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
-		className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
+		className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
 		ref,
 		...props,
 		children

package/dist/components/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,sHACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,kJACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}

package/dist/components/badge.js

@@ -9,7 +9,7 @@ const Badge = React$1.forwardRef(({ className, children, styleVariant, color, ..
 		"data-slot": "badge",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
 		"data-accent-color": color ? accentByColor[color] : void 0,
-		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
+		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
 		ref,
 		...props,
 		children

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,sHACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,kJACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}

package/dist/components/bar-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";

package/dist/components/bubble.d.cts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "default" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.d.ts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "default" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button.d.cts

@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "bare" | "secondary" | "destructive" | "primary" | "tertiary" | null | undefined;
-  color?: "accent" | "neutral" | "danger" | null | undefined;
-  size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
+  color?: "neutral" | "accent" | "danger" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/button.d.ts

@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "bare" | "secondary" | "destructive" | "primary" | "tertiary" | null | undefined;
-  color?: "accent" | "neutral" | "danger" | null | undefined;
-  size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
+  color?: "neutral" | "accent" | "danger" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/callout.d.cts

@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "neutral" | "success" | "warning" | "info" | "error" | null | undefined;
+  variant?: "error" | "success" | "warning" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.d.ts

@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "neutral" | "success" | "warning" | "info" | "error" | null | undefined;
+  variant?: "error" | "success" | "warning" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/empty-state.d.cts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/empty-state.d.ts
 declare const emptyStateVariants: (props?: ({
-  variant?: "ghost" | "dashed" | null | undefined;
+  variant?: "dashed" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {
   title: string;

package/dist/components/empty-state.d.ts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/empty-state.d.ts
 declare const emptyStateVariants: (props?: ({
-  variant?: "ghost" | "dashed" | null | undefined;
+  variant?: "dashed" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {
   title: string;

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?: "default" | "bare" | null | undefined;
+  variant?: "bare" | "default" | 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?: "default" | "bare" | null | undefined;
+  variant?: "bare" | "default" | 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-group.d.cts

@@ -10,7 +10,7 @@ declare function InputGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,

package/dist/components/input-group.d.ts

@@ -10,7 +10,7 @@ declare function InputGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,

package/dist/components/line-chart.cjs

@@ -1,11 +1,11 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/line-chart.js

@@ -1,10 +1,10 @@
 "use client";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useMemo } from "react";

package/dist/components/message-scroller.cjs

@@ -1,9 +1,9 @@
 "use client";
 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_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_button = require("./button.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_lib_message_animations = require("../lib/message-animations.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
@@ -14,7 +14,7 @@ let motion_react_m = require("motion/react-m");
 let cnfast = require("cnfast");
 //#region src/components/message-scroller.tsx
 const MessageScrollerAnimationReadyContext = react.createContext(false);
-const MotionMessageScrollerPrimitiveItem = (0, motion_react_m.create)(_shadcn_react_message_scroller.MessageScroller.Item);
+const MotionDiv = (0, motion_react_m.create)("div");
 function MessageScrollerProvider(props) {
 	const [ready, setReady] = react.useState(false);
 	react.useEffect(() => {
@@ -50,19 +50,23 @@ function MessageScrollerContent({ className, ...props }) {
 		...props
 	});
 }
-function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+function MessageScrollerItem({ className, scrollAnchor = false, children, ...props }) {
 	const ready = react.useContext(MessageScrollerAnimationReadyContext);
 	const shouldReduceMotion = require_hooks_use_reduced_motion.useReducedMotion();
 	const skipEntrance = !ready || shouldReduceMotion;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionMessageScrollerPrimitiveItem, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Item, {
 		...props,
 		"data-slot": "message-scroller-item",
 		scrollAnchor,
 		className: (0, cnfast.cn)("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
-		variants: require_lib_message_animations.MESSAGE_ANIMATIONS["slide-up"].variants,
-		initial: skipEntrance ? false : "initial",
-		animate: "animate",
-		exit: skipEntrance ? void 0 : "exit"
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionDiv, {
+			className: "w-full min-w-0",
+			variants: require_lib_message_animations.MESSAGE_ANIMATIONS["slide-up"].variants,
+			initial: skipEntrance ? false : "initial",
+			animate: "animate",
+			exit: skipEntrance ? void 0 : "exit",
+			children
+		})
 	});
 }
 function MessageScrollerButton({ direction = "end", className, children, render, styleVariant = "surface", color = "neutral", size = "icon-small", ...props }) {

package/dist/components/message-scroller.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-scroller.cjs","names":["React","MessageScrollerPrimitive","LazyMotion","domAnimation","useReducedMotion","MESSAGE_ANIMATIONS","Button","MaterialSymbol"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nconst MotionMessageScrollerPrimitiveItem = create(MessageScrollerPrimitive.Item)\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MotionMessageScrollerPrimitiveItem\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n      variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n      initial={skipEntrance ? false : 'initial'}\n      animate=\"animate\"\n      exit={skipEntrance ? undefined : 'exit'}\n    />\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,uCAAuCA,MAAM,cAAc,KAAK;AAetE,MAAM,sCAAA,GAAA,eAAA,QAA4CC,+BAAAA,gBAAyB,IAAI;AAE/E,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYD,MAAM,SAAS,KAAK;CAE9C,MAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACE,aAAAA,YAAD;EAAY,UAAUC,aAAAA;EAAc,QAAA;YAClC,iBAAA,GAAA,kBAAA,KAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAIV,YAAA,GAAA,OAAA,IACE,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SACwB;CAC3B,MAAM,QAAQD,MAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqBI,iCAAAA,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,iBAAA,GAAA,kBAAA,KAAC,oCAAD;EACE,GAAI;EACJ,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,SACF;EACA,UAAUC,+BAAAA,mBAAmB,YAAY;EACzC,SAAS,eAAe,QAAQ;EAChC,SAAQ;EACR,MAAM,eAAe,KAAA,IAAY;CAClC,CAAA;AAEL;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACJ,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACK,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}
+{"version":3,"file":"message-scroller.cjs","names":["React","LazyMotion","domAnimation","MessageScrollerPrimitive","useReducedMotion","MESSAGE_ANIMATIONS","Button","MaterialSymbol"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\nconst MotionDiv = create('div')\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  children,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MessageScrollerPrimitive.Item\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n    >\n      <MotionDiv\n        className=\"w-full min-w-0\"\n        variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n        initial={skipEntrance ? false : 'initial'}\n        animate=\"animate\"\n        exit={skipEntrance ? undefined : 'exit'}\n      >\n        {children}\n      </MotionDiv>\n    </MessageScrollerPrimitive.Item>\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,uCAAuCA,MAAM,cAAc,KAAK;AACtE,MAAM,aAAA,GAAA,eAAA,QAAmB,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,MAAM,SAAS,KAAK;CAE9C,MAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD;EAAY,UAAUC,aAAAA;EAAc,QAAA;YAClC,iBAAA,GAAA,kBAAA,KAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAIV,YAAA,GAAA,OAAA,IACE,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQH,MAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqBI,iCAAAA,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,iBAAA,GAAA,kBAAA,KAACD,+BAAAA,gBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,SACF;YAEA,iBAAA,GAAA,kBAAA,KAAC,WAAD;GACE,WAAU;GACV,UAAUE,+BAAAA,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACG,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/message-scroller.d.cts

@@ -22,6 +22,7 @@ declare function MessageScrollerContent({
 declare function MessageScrollerItem({
   className,
   scrollAnchor,
+  children,
   ...props
 }: MessageScrollerItemProps): import("react/jsx-runtime").JSX.Element;
 declare function MessageScrollerButton({

package/dist/components/message-scroller.d.ts

@@ -22,6 +22,7 @@ declare function MessageScrollerContent({
 declare function MessageScrollerItem({
   className,
   scrollAnchor,
+  children,
   ...props
 }: MessageScrollerItemProps): import("react/jsx-runtime").JSX.Element;
 declare function MessageScrollerButton({

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 { MaterialSymbol } from "../icons/material-symbol.js";
 import { Button } from "./button.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +11,7 @@ import { LazyMotion, domAnimation } from "motion/react";
 import { create } from "motion/react-m";
 //#region src/components/message-scroller.tsx
 const MessageScrollerAnimationReadyContext = React$1.createContext(false);
-const MotionMessageScrollerPrimitiveItem = create(MessageScroller$1.Item);
+const MotionDiv = create("div");
 function MessageScrollerProvider(props) {
 	const [ready, setReady] = React$1.useState(false);
 	React$1.useEffect(() => {
@@ -47,19 +47,23 @@ function MessageScrollerContent({ className, ...props }) {
 		...props
 	});
 }
-function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+function MessageScrollerItem({ className, scrollAnchor = false, children, ...props }) {
 	const ready = React$1.useContext(MessageScrollerAnimationReadyContext);
 	const shouldReduceMotion = useReducedMotion();
 	const skipEntrance = !ready || shouldReduceMotion;
-	return /* @__PURE__ */ jsx(MotionMessageScrollerPrimitiveItem, {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
 		...props,
 		"data-slot": "message-scroller-item",
 		scrollAnchor,
 		className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
-		variants: MESSAGE_ANIMATIONS["slide-up"].variants,
-		initial: skipEntrance ? false : "initial",
-		animate: "animate",
-		exit: skipEntrance ? void 0 : "exit"
+		children: /* @__PURE__ */ jsx(MotionDiv, {
+			className: "w-full min-w-0",
+			variants: MESSAGE_ANIMATIONS["slide-up"].variants,
+			initial: skipEntrance ? false : "initial",
+			animate: "animate",
+			exit: skipEntrance ? void 0 : "exit",
+			children
+		})
 	});
 }
 function MessageScrollerButton({ direction = "end", className, children, render, styleVariant = "surface", color = "neutral", size = "icon-small", ...props }) {

package/dist/components/message-scroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-scroller.js","names":["React","MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nconst MotionMessageScrollerPrimitiveItem = create(MessageScrollerPrimitive.Item)\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MotionMessageScrollerPrimitiveItem\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n      variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n      initial={skipEntrance ? false : 'initial'}\n      animate=\"animate\"\n      exit={skipEntrance ? undefined : 'exit'}\n    />\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,uCAAuCA,QAAM,cAAc,KAAK;AAetE,MAAM,qCAAqC,OAAOC,kBAAyB,IAAI;AAE/E,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYD,QAAM,SAAS,KAAK;CAE9C,QAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,YAAD;EAAY,UAAU;EAAc,QAAA;YAClC,oBAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,oBAACC,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAIV,WAAW,GACT,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SACwB;CAC3B,MAAM,QAAQD,QAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,oBAAC,oCAAD;EACE,GAAI;EACJ,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;EACA,UAAU,mBAAmB,YAAY;EACzC,SAAS,eAAe,QAAQ;EAChC,SAAQ;EACR,MAAM,eAAe,KAAA,IAAY;CAClC,CAAA;AAEL;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,oBAACC,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}
+{"version":3,"file":"message-scroller.js","names":["React","MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\nconst MotionDiv = create('div')\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  children,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MessageScrollerPrimitive.Item\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n    >\n      <MotionDiv\n        className=\"w-full min-w-0\"\n        variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n        initial={skipEntrance ? false : 'initial'}\n        animate=\"animate\"\n        exit={skipEntrance ? undefined : 'exit'}\n      >\n        {children}\n      </MotionDiv>\n    </MessageScrollerPrimitive.Item>\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,uCAAuCA,QAAM,cAAc,KAAK;AACtE,MAAM,YAAY,OAAO,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,KAAK;CAE9C,QAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,YAAD;EAAY,UAAU;EAAc,QAAA;YAClC,oBAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,oBAACC,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAIV,WAAW,GACT,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQD,QAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,oBAACC,kBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;YAEA,oBAAC,WAAD;GACE,WAAU;GACV,UAAU,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,oBAACA,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/page-header.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "styleVariant" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/page-header.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "styleVariant" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/popover.cjs

@@ -27,6 +27,12 @@ function PopoverTrigger(props) {
 		...props
 	});
 }
+function PopoverClose(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Close, {
+		"data-slot": "popover-close",
+		...props
+	});
+}
 /** Anchors the popover to this element instead of the trigger. Pass `render` to
 * wrap an existing element (was radix `asChild`). */
 function PopoverAnchor({ render, ...props }) {
@@ -59,6 +65,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
 //#endregion
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverClose = PopoverClose;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 

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/** 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' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\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  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        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',\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, 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;;;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;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,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;GACJ;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,OAAA,IACE,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}
+{"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' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\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  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        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',\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;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,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;GACJ;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,OAAA,IACE,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}

package/dist/components/popover.d.cts

@@ -7,6 +7,7 @@ import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/components/popover.d.ts
 declare function Popover(props: React$1.ComponentProps<typeof Popover$1.Root>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTrigger(props: React$1.ComponentProps<typeof Popover$1.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverClose(props: React$1.ComponentProps<typeof Popover$1.Close>): import("react/jsx-runtime").JSX.Element;
 /** Anchors the popover to this element instead of the trigger. Pass `render` to
  * wrap an existing element (was radix `asChild`). */
 declare function PopoverAnchor({
@@ -25,5 +26,5 @@ declare function PopoverContent({
   ...props
 }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
 //# sourceMappingURL=popover.d.cts.map

package/dist/components/popover.d.ts

@@ -7,6 +7,7 @@ import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/components/popover.d.ts
 declare function Popover(props: React$1.ComponentProps<typeof Popover$1.Root>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTrigger(props: React$1.ComponentProps<typeof Popover$1.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverClose(props: React$1.ComponentProps<typeof Popover$1.Close>): import("react/jsx-runtime").JSX.Element;
 /** Anchors the popover to this element instead of the trigger. Pass `render` to
  * wrap an existing element (was radix `asChild`). */
 declare function PopoverAnchor({
@@ -25,5 +26,5 @@ declare function PopoverContent({
   ...props
 }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
 //# sourceMappingURL=popover.d.ts.map

package/dist/components/popover.js

@@ -24,6 +24,12 @@ function PopoverTrigger(props) {
 		...props
 	});
 }
+function PopoverClose(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Close, {
+		"data-slot": "popover-close",
+		...props
+	});
+}
 /** Anchors the popover to this element instead of the trigger. Pass `render` to
 * wrap an existing element (was radix `asChild`). */
 function PopoverAnchor({ render, ...props }) {
@@ -54,6 +60,6 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
 	});
 }
 //#endregion
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
 
 //# sourceMappingURL=popover.js.map

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/** 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' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\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  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        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',\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, 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;;;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;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,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;GACJ;GACM;aAEZ,oBAACA,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,+MAEA,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'\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' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\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  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        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',\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;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,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;GACJ;GACM;aAEZ,oBAACA,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}

package/dist/components/power-history-chart.cjs

@@ -1,7 +1,6 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
@@ -9,6 +8,7 @@ const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/power-history-chart.js

@@ -1,13 +1,13 @@
 "use client";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import "../utils/chars.js";
 import { twoDecimalFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

package/dist/components/power-history.cjs

@@ -1,10 +1,10 @@
 "use client";
-const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_line_chart = require("./line-chart.cjs");
+const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/power-history.tsx

package/dist/components/power-history.js

@@ -1,10 +1,10 @@
 "use client";
-import { useContainerWidth } from "../hooks/use-container-width.js";
 import "../utils/chars.js";
 import { oneDecimalFormat } from "../utils/format.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
 import { LineChart } from "./line-chart.js";
+import { useContainerWidth } from "../hooks/use-container-width.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/power-history.tsx

package/dist/components/power-network.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_number_flow = require("./number-flow.cjs");
 const require_components_skeleton = require("./skeleton.cjs");

package/dist/components/power-network.js

@@ -1,7 +1,7 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { SectionTitle } from "./typography.js";
 import NumberFlow from "./number-flow.js";
 import { Skeleton } from "./skeleton.js";

package/dist/components/tooltip.cjs

@@ -62,7 +62,7 @@ const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			"aria-label": ariaLabel ?? label,
-			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {

package/dist/components/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\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-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\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-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/components/tooltip.js

@@ -59,7 +59,7 @@ const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		render: /* @__PURE__ */ jsx("button", {
 			"aria-label": ariaLabel ?? label,
-			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ jsx(MaterialSymbol, {

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\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-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,oBAAC,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\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-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,oBAAC,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/icons/material-symbol.cjs

@@ -91,7 +91,7 @@ const MaterialSymbol = ({ name, className }) => {
 	if (!materialSymbolIconNames.includes(name)) console.warn(`[MaterialSymbol] "${name}" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"aria-hidden": "true",
-		className: (0, cnfast.cn)("material-symbols-rounded inline-block size-(length:--spark-icon-size,20px) shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none", className),
+		className: (0, cnfast.cn)("material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none", className),
 		translate: "no",
 		children: name
 	});

package/dist/icons/material-symbol.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"material-symbol.cjs","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n  'access_time',\n  'add',\n  'alarm',\n  'arrow_downward',\n  'arrow_upward',\n  'auto_awesome',\n  'bar_chart',\n  'battery_0_bar',\n  'battery_1_bar',\n  'battery_2_bar',\n  'battery_3_bar',\n  'battery_4_bar',\n  'battery_5_bar',\n  'battery_6_bar',\n  'battery_charging_20',\n  'battery_charging_30',\n  'battery_charging_50',\n  'battery_charging_60',\n  'battery_charging_80',\n  'battery_charging_90',\n  'battery_charging_full',\n  'battery_full',\n  'bolt',\n  'calendar_month',\n  'cancel',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'circle',\n  'close',\n  'close_fullscreen',\n  'content_copy',\n  'dashboard_2',\n  'delete',\n  'dishwasher',\n  'drag_indicator',\n  'edit',\n  'edit_square',\n  'electric_bolt',\n  'electric_car',\n  'electrical_services',\n  'ev_station',\n  'expand_more',\n  'heat_pump',\n  'home',\n  'info',\n  'laundry',\n  'layers',\n  'local_fire_department',\n  'more_vert',\n  'open_in_full',\n  'open_in_new',\n  'payments',\n  'pending',\n  'photo_camera',\n  'power',\n  'search',\n  'power_settings_new',\n  'price_change',\n  'recycling',\n  'refresh',\n  'schedule',\n  'settings',\n  'solar_power',\n  'speed',\n  'sunny',\n  'partly_cloudy_day',\n  'cloudy',\n  'rainy',\n  'weather_snowy',\n  'swap_vert',\n  'thermostat',\n  'toggle_on',\n  'track_changes',\n  'trending_down',\n  'trending_up',\n  'tune',\n  'warning',\n  'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n  .sort()\n  .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n  name: MaterialSymbolIconName\n  className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n  if (!materialSymbolIconNames.includes(name)) {\n    console.warn(\n      `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n    )\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n        // utility — callers size the icon via --spark-icon-size, not font-size classes\n        'material-symbols-rounded inline-block size-(length:--spark-icon-size,20px) shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n        className,\n      )}\n      translate=\"no\"\n    >\n      {name}\n    </span>\n  )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,eAAY;EACZ,YAAA,GAAA,OAAA,IAGE,sKACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}
+{"version":3,"file":"material-symbol.cjs","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n  'access_time',\n  'add',\n  'alarm',\n  'arrow_downward',\n  'arrow_upward',\n  'auto_awesome',\n  'bar_chart',\n  'battery_0_bar',\n  'battery_1_bar',\n  'battery_2_bar',\n  'battery_3_bar',\n  'battery_4_bar',\n  'battery_5_bar',\n  'battery_6_bar',\n  'battery_charging_20',\n  'battery_charging_30',\n  'battery_charging_50',\n  'battery_charging_60',\n  'battery_charging_80',\n  'battery_charging_90',\n  'battery_charging_full',\n  'battery_full',\n  'bolt',\n  'calendar_month',\n  'cancel',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'circle',\n  'close',\n  'close_fullscreen',\n  'content_copy',\n  'dashboard_2',\n  'delete',\n  'dishwasher',\n  'drag_indicator',\n  'edit',\n  'edit_square',\n  'electric_bolt',\n  'electric_car',\n  'electrical_services',\n  'ev_station',\n  'expand_more',\n  'heat_pump',\n  'home',\n  'info',\n  'laundry',\n  'layers',\n  'local_fire_department',\n  'more_vert',\n  'open_in_full',\n  'open_in_new',\n  'payments',\n  'pending',\n  'photo_camera',\n  'power',\n  'search',\n  'power_settings_new',\n  'price_change',\n  'recycling',\n  'refresh',\n  'schedule',\n  'settings',\n  'solar_power',\n  'speed',\n  'sunny',\n  'partly_cloudy_day',\n  'cloudy',\n  'rainy',\n  'weather_snowy',\n  'swap_vert',\n  'thermostat',\n  'toggle_on',\n  'track_changes',\n  'trending_down',\n  'trending_up',\n  'tune',\n  'warning',\n  'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n  .sort()\n  .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n  name: MaterialSymbolIconName\n  className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n  if (!materialSymbolIconNames.includes(name)) {\n    console.warn(\n      `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n    )\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n        // utility — default size is --spark-icon-size. size-[1em] keeps the box tied to the\n        // effective font-size so text-[Npx]! overrides don't leave a 20px box around a smaller glyph.\n        'material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n        className,\n      )}\n      translate=\"no\"\n    >\n      {name}\n    </span>\n  )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,eAAY;EACZ,YAAA,GAAA,OAAA,IAIE,4IACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}

package/dist/icons/material-symbol.js

@@ -90,7 +90,7 @@ const MaterialSymbol = ({ name, className }) => {
 	if (!materialSymbolIconNames.includes(name)) console.warn(`[MaterialSymbol] "${name}" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`);
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cn("material-symbols-rounded inline-block size-(length:--spark-icon-size,20px) shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none", className),
+		className: cn("material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none", className),
 		translate: "no",
 		children: name
 	});

package/dist/icons/material-symbol.js.map

@@ -1 +1 @@
-{"version":3,"file":"material-symbol.js","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n  'access_time',\n  'add',\n  'alarm',\n  'arrow_downward',\n  'arrow_upward',\n  'auto_awesome',\n  'bar_chart',\n  'battery_0_bar',\n  'battery_1_bar',\n  'battery_2_bar',\n  'battery_3_bar',\n  'battery_4_bar',\n  'battery_5_bar',\n  'battery_6_bar',\n  'battery_charging_20',\n  'battery_charging_30',\n  'battery_charging_50',\n  'battery_charging_60',\n  'battery_charging_80',\n  'battery_charging_90',\n  'battery_charging_full',\n  'battery_full',\n  'bolt',\n  'calendar_month',\n  'cancel',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'circle',\n  'close',\n  'close_fullscreen',\n  'content_copy',\n  'dashboard_2',\n  'delete',\n  'dishwasher',\n  'drag_indicator',\n  'edit',\n  'edit_square',\n  'electric_bolt',\n  'electric_car',\n  'electrical_services',\n  'ev_station',\n  'expand_more',\n  'heat_pump',\n  'home',\n  'info',\n  'laundry',\n  'layers',\n  'local_fire_department',\n  'more_vert',\n  'open_in_full',\n  'open_in_new',\n  'payments',\n  'pending',\n  'photo_camera',\n  'power',\n  'search',\n  'power_settings_new',\n  'price_change',\n  'recycling',\n  'refresh',\n  'schedule',\n  'settings',\n  'solar_power',\n  'speed',\n  'sunny',\n  'partly_cloudy_day',\n  'cloudy',\n  'rainy',\n  'weather_snowy',\n  'swap_vert',\n  'thermostat',\n  'toggle_on',\n  'track_changes',\n  'trending_down',\n  'trending_up',\n  'tune',\n  'warning',\n  'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n  .sort()\n  .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n  name: MaterialSymbolIconName\n  className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n  if (!materialSymbolIconNames.includes(name)) {\n    console.warn(\n      `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n    )\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n        // utility — callers size the icon via --spark-icon-size, not font-size classes\n        'material-symbols-rounded inline-block size-(length:--spark-icon-size,20px) shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n        className,\n      )}\n      translate=\"no\"\n    >\n      {name}\n    </span>\n  )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,WAAW,GAGT,sKACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}
+{"version":3,"file":"material-symbol.js","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n  'access_time',\n  'add',\n  'alarm',\n  'arrow_downward',\n  'arrow_upward',\n  'auto_awesome',\n  'bar_chart',\n  'battery_0_bar',\n  'battery_1_bar',\n  'battery_2_bar',\n  'battery_3_bar',\n  'battery_4_bar',\n  'battery_5_bar',\n  'battery_6_bar',\n  'battery_charging_20',\n  'battery_charging_30',\n  'battery_charging_50',\n  'battery_charging_60',\n  'battery_charging_80',\n  'battery_charging_90',\n  'battery_charging_full',\n  'battery_full',\n  'bolt',\n  'calendar_month',\n  'cancel',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'circle',\n  'close',\n  'close_fullscreen',\n  'content_copy',\n  'dashboard_2',\n  'delete',\n  'dishwasher',\n  'drag_indicator',\n  'edit',\n  'edit_square',\n  'electric_bolt',\n  'electric_car',\n  'electrical_services',\n  'ev_station',\n  'expand_more',\n  'heat_pump',\n  'home',\n  'info',\n  'laundry',\n  'layers',\n  'local_fire_department',\n  'more_vert',\n  'open_in_full',\n  'open_in_new',\n  'payments',\n  'pending',\n  'photo_camera',\n  'power',\n  'search',\n  'power_settings_new',\n  'price_change',\n  'recycling',\n  'refresh',\n  'schedule',\n  'settings',\n  'solar_power',\n  'speed',\n  'sunny',\n  'partly_cloudy_day',\n  'cloudy',\n  'rainy',\n  'weather_snowy',\n  'swap_vert',\n  'thermostat',\n  'toggle_on',\n  'track_changes',\n  'trending_down',\n  'trending_up',\n  'tune',\n  'warning',\n  'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n  .sort()\n  .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n  name: MaterialSymbolIconName\n  className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n  if (!materialSymbolIconNames.includes(name)) {\n    console.warn(\n      `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n    )\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n        // utility — default size is --spark-icon-size. size-[1em] keeps the box tied to the\n        // effective font-size so text-[Npx]! overrides don't leave a 20px box around a smaller glyph.\n        'material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n        className,\n      )}\n      translate=\"no\"\n    >\n      {name}\n    </span>\n  )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,WAAW,GAIT,4IACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",