@vamos-ui/react 0.4.0 → 0.4.1

package/dist/components/pin-map.js

@@ -69,7 +69,7 @@ function niceStep(span, target) {
  *   selectedId={selected} onSelectedIdChange={setSelected} />
  * ```
  */
-export const PinMap = React.forwardRef(function PinMap({ pins, bounds, aspectRatio = 16 / 10, variant = "pin", selectedId: selectedProp, defaultSelectedId = null, onSelectedIdChange, callout, showLabels, backdrop, bare, className, style, children, ...props }, ref) {
+export const PinMap = /*#__PURE__*/ React.forwardRef(function PinMap({ pins, bounds, aspectRatio = 16 / 10, variant = "pin", selectedId: selectedProp, defaultSelectedId = null, onSelectedIdChange, callout, showLabels, backdrop, bare, className, style, children, ...props }, ref) {
     const f = useFormat();
     const [selectedId, setSelectedId] = useControllableState({ value: selectedProp, defaultValue: defaultSelectedId, onChange: onSelectedIdChange, name: "PinMap" });
     const [focusId, setFocusId] = React.useState(null);

package/dist/components/placeholder-art.js

@@ -74,7 +74,7 @@ export function placeholderArtStyle(recipe, strength = "subtle") {
  * <AspectRatio ratio="4/3"><PlaceholderArt seed="harbour-terrace" label="Harbour terrace at dusk" /></AspectRatio>
  * ```
  */
-export const PlaceholderArt = React.forwardRef(function PlaceholderArt({ seed, pattern = "auto", icon, label, caption, strength = "subtle", className, style, ...props }, ref) {
+export const PlaceholderArt = /*#__PURE__*/ React.forwardRef(function PlaceholderArt({ seed, pattern = "auto", icon, label, caption, strength = "subtle", className, style, ...props }, ref) {
     const recipe = placeholderArtRecipe(seed ?? label ?? "", pattern);
     const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
     const captionNode = caption === true ? label : caption || null;

package/dist/components/popover.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import * as PopoverPrimitive from "radix-ui/popover";
 import { type VariantProps } from "class-variance-authority";
 /** Root. Controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`). */
 export declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;

package/dist/components/popover.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import * as PopoverPrimitive from "radix-ui/popover";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
 import { usePortalContainer } from "../lib/theme-scope.js";
@@ -14,7 +14,7 @@ export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverAnchor = PopoverPrimitive.Anchor;
 /** Closes the popover; use `asChild` with a Button. */
 export const PopoverClose = PopoverPrimitive.Close;
-export const popoverContentVariants = cva(["surface-popover ui-pop z-(--z-popover) rounded-ui-lg outline-none", "max-h-(--radix-popover-content-available-height) overflow-y-auto overscroll-contain"], {
+export const popoverContentVariants = /*#__PURE__*/ cva(["surface-popover ui-pop z-(--z-popover) rounded-ui-lg outline-none", "max-h-(--radix-popover-content-available-height) overflow-y-auto overscroll-contain"], {
     variants: {
         size: {
             auto: "w-auto max-w-[calc(100vw-1.5rem)]",
@@ -31,13 +31,13 @@ export const popoverContentVariants = cva(["surface-popover ui-pop z-(--z-popove
     },
     defaultVariants: { size: "md", padded: true },
 });
-const PopoverTitleContext = React.createContext(null);
+const PopoverTitleContext = /*#__PURE__*/ React.createContext(null);
 /**
  * The floating panel. Portals into the nearest `ThemeScope`, sets the layer depth
  * (only the first layer blurs in glass mode; a popover inside a dialog turns opaque),
  * and is labelled by its `PopoverTitle` when one is rendered.
  */
-export const PopoverContent = React.forwardRef(function PopoverContent({ className, size, padded, arrow = false, sideOffset = 6, collisionPadding = 12, align = "center", children, ...props }, ref) {
+export const PopoverContent = /*#__PURE__*/ React.forwardRef(function PopoverContent({ className, size, padded, arrow = false, sideOffset = 6, collisionPadding = 12, align = "center", children, ...props }, ref) {
     const container = usePortalContainer();
     const titleId = React.useId();
     const [hasTitle, setHasTitle] = React.useState(false);
@@ -45,11 +45,11 @@ export const PopoverContent = React.forwardRef(function PopoverContent({ classNa
     return (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { ref: ref, "data-slot": "popover-content", sideOffset: sideOffset, collisionPadding: collisionPadding, align: align, "aria-labelledby": hasTitle ? titleId : undefined, className: cn(popoverContentVariants({ size, padded }), className), ...props, children: [_jsx(PopoverTitleContext.Provider, { value: titleCtx, children: children }), arrow ? (_jsx(PopoverPrimitive.Arrow, { asChild: true, width: 14, height: 7, children: _jsx(FloatingArrow, {}) })) : null] }) }) }));
 });
 /** Title + optional description at the top of the content. */
-export const PopoverHeader = React.forwardRef(function PopoverHeader({ title, description, action, className, children, ...props }, ref) {
+export const PopoverHeader = /*#__PURE__*/ React.forwardRef(function PopoverHeader({ title, description, action, className, children, ...props }, ref) {
     return (_jsxs("div", { ref: ref, "data-slot": "popover-header", className: cn("mb-3 flex items-start gap-3", className), ...props, children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [title != null ? _jsx(PopoverTitle, { children: title }) : null, description != null ? _jsx(PopoverDescription, { children: description }) : null, children] }), action ? _jsx("div", { className: "-me-1 -mt-1 shrink-0", children: action }) : null] }));
 });
 /** Heading inside the content; wired to `aria-labelledby`. */
-export const PopoverTitle = React.forwardRef(function PopoverTitle({ className, id, ...props }, ref) {
+export const PopoverTitle = /*#__PURE__*/ React.forwardRef(function PopoverTitle({ className, id, ...props }, ref) {
     const ctx = React.useContext(PopoverTitleContext);
     const register = ctx?.register;
     React.useEffect(() => {
@@ -64,6 +64,6 @@ export function PopoverDescription({ className, ...props }) {
     return _jsx("p", { "data-slot": "popover-description", className: cn("text-[13px] leading-snug text-fg-muted", className), ...props });
 }
 /** Bottom row for actions. Bleeds to the panel edge with a hairline on top. */
-export const PopoverFooter = React.forwardRef(function PopoverFooter({ className, ...props }, ref) {
+export const PopoverFooter = /*#__PURE__*/ React.forwardRef(function PopoverFooter({ className, ...props }, ref) {
     return (_jsx("div", { ref: ref, "data-slot": "popover-footer", className: cn("-mx-(--popover-p) -mb-(--popover-p) mt-4 flex items-center justify-end gap-2 border-t border-line px-(--popover-p) py-[calc(var(--popover-p)*0.7)]", className), ...props }));
 });

package/dist/components/progress.js

@@ -46,7 +46,7 @@ const valueColor = {
 /* ------------------------------------------------------------------ */
 /* Linear                                                               */
 /* ------------------------------------------------------------------ */
-export const progressTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-track", {
+export const progressTrackVariants = /*#__PURE__*/ cva("relative w-full overflow-hidden rounded-full bg-track", {
     variants: {
         size: { xs: "h-0.5", sm: "h-1", md: "h-2" },
     },
@@ -63,7 +63,7 @@ export const progressTrackVariants = cva("relative w-full overflow-hidden rounde
  * <Progress aria-label="Loading" value={null} />
  * ```
  */
-export const Progress = React.forwardRef(function Progress({ value, max, tone, display, valueText, labels, size, label, showValue, hint, className, id, ...props }, ref) {
+export const Progress = /*#__PURE__*/ React.forwardRef(function Progress({ value, max, tone, display, valueText, labels, size, label, showValue, hint, className, id, ...props }, ref) {
     const m = useProgressModel({ value, max, tone, display, valueText, labels });
     const autoId = React.useId();
     const baseId = id ?? `progress${autoId.replace(/:/g, "")}`;
@@ -87,7 +87,7 @@ const CIRCLE = { sm: { px: 18, stroke: 2.5 }, md: { px: 40, stroke: 3.5 }, lg: {
  * <ProgressCircle aria-label="Profile complete" value={72} size="lg" />
  * ```
  */
-export const ProgressCircle = React.forwardRef(function ProgressCircle({ value, max, tone, display, valueText, labels, size = "md", showValue, children, className, ...props }, ref) {
+export const ProgressCircle = /*#__PURE__*/ React.forwardRef(function ProgressCircle({ value, max, tone, display, valueText, labels, size = "md", showValue, children, className, ...props }, ref) {
     const m = useProgressModel({ value, max, tone, display, valueText, labels });
     const { px, stroke } = CIRCLE[size];
     const r = (px - stroke) / 2;

package/dist/components/qr-code.js

@@ -11,7 +11,7 @@ export { encodeQr, qrPath };
  * <QrCode value={otpauthUri} aria-label="QR code for your authenticator app" />
  * ```
  */
-export const QrCode = React.forwardRef(function QrCode({ value, errorCorrection, size = 176, margin, plate = true, fallback = "Too long for a QR code", children, className, style, ...props }, ref) {
+export const QrCode = /*#__PURE__*/ React.forwardRef(function QrCode({ value, errorCorrection, size = 176, margin, plate = true, fallback = "Too long for a QR code", children, className, style, ...props }, ref) {
     const ecl = errorCorrection ?? (children ? "H" : "M");
     let qr = null;
     try {

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as RadioGroupPrimitive from "radix-ui/radio-group";
 export interface RadioGroupOption<V extends string = string> {
     value: V;
     label: React.ReactNode;

package/dist/components/radio-group.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as RadioGroupPrimitive from "radix-ui/radio-group";
 import { cn } from "../lib/cn.js";
 import { mergeIds } from "../lib/compose-refs.js";
 import { FieldContextReset, useFieldContext } from "../lib/field-context.js";
 import { useControllableState } from "../lib/use-controllable-state.js";
-const RadioGroupContext = React.createContext({ variant: "default", size: "md", value: null });
+const RadioGroupContext = /*#__PURE__*/ React.createContext({ variant: "default", size: "md", value: null });
 const segmentedTrack = "inline-flex w-fit max-w-full items-stretch gap-0.5 rounded-ui border border-line bg-selected p-[3px] has-[:focus-visible]:border-ring aria-invalid:border-danger";
 /**
  * Pick exactly one of a small set: post visibility, invoice type, plan. WAI-ARIA radio group on
@@ -51,10 +51,10 @@ function RadioGroupInner({ value: valueProp, defaultValue, onValueChange, items,
                     ? "flex flex-wrap items-start gap-x-6 gap-y-2.5"
                     : "grid gap-2.5", className), children: _jsx(FieldContextReset, { children: _jsxs(RadioGroupContext.Provider, { value: ctx, children: [items?.map((item) => (_jsx(RadioGroupItem, { value: item.value, label: item.label, description: item.description, icon: item.icon, disabled: item.disabled }, item.value))), children] }) }) }));
 }
-export const RadioGroup = React.forwardRef(RadioGroupInner);
+export const RadioGroup = /*#__PURE__*/ React.forwardRef(RadioGroupInner);
 const circle = "peer relative inline-flex shrink-0 items-center justify-center rounded-full border border-field-border-hover bg-field outline-none transition-[border-color,box-shadow,background-color] duration-150 hover:border-fg-subtle focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_var(--accent-soft)] data-[state=checked]:border-accent-ink disabled:cursor-not-allowed disabled:opacity-45 group-aria-invalid/radio:border-danger";
 /** One option inside a `RadioGroup`. */
-export const RadioGroupItem = React.forwardRef(function RadioGroupItem({ label, description, icon, children, className, controlClassName, id: idProp, "aria-describedby": describedBy, onKeyDown, ...props }, ref) {
+export const RadioGroupItem = /*#__PURE__*/ React.forwardRef(function RadioGroupItem({ label, description, icon, children, className, controlClassName, id: idProp, "aria-describedby": describedBy, onKeyDown, ...props }, ref) {
     const { variant, size, value: selected, readOnly } = React.useContext(RadioGroupContext);
     const autoId = React.useId();
     const id = idProp ?? `rd${autoId.replace(/:/g, "")}`;

package/dist/components/record-detail-layout.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Collapsible } from "radix-ui";
+import * as Collapsible from "radix-ui/collapsible";
 import { ArrowLeft, ChevronDown, ChevronLeft, ChevronRight, LockKeyhole, SearchX } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useLabels } from "../lib/labels.js";
@@ -36,7 +36,7 @@ const recordLabels = {
 };
 /** Below this container width (42rem) the side column moves under the header as collapsed sections. Matches navigation.css. */
 const NARROW = 672;
-const RecordLayoutContext = React.createContext({
+const RecordLayoutContext = /*#__PURE__*/ React.createContext({
     narrow: false,
     readOnly: false,
     asidePosition: "end",
@@ -52,7 +52,7 @@ const RecordLayoutContext = React.createContext({
  * `aria-valuenow`; arrows resize, Shift+arrows in bigger steps, Home/End jump to min/max,
  * double-click resets). Logical: works in RTL.
  */
-export const SidePaneHandle = React.forwardRef(function SidePaneHandle({ value, min = 240, max = 560, defaultValue, onValueChange, edge = "start", step = 16, className, onKeyDown, onDoubleClick, ...props }, ref) {
+export const SidePaneHandle = /*#__PURE__*/ React.forwardRef(function SidePaneHandle({ value, min = 240, max = 560, defaultValue, onValueChange, edge = "start", step = 16, className, onKeyDown, onDoubleClick, ...props }, ref) {
     const innerRef = React.useRef(null);
     const composed = useComposedRefs(ref, innerRef);
     const [dragging, setDragging] = React.useState(false);
@@ -122,7 +122,7 @@ export const SidePaneHandle = React.forwardRef(function SidePaneHandle({ value,
  * </RecordLayout>
  * ```
  */
-export const RecordLayout = React.forwardRef(function RecordLayout({ asidePosition = "end", asideWidth: asideWidthProp, defaultAsideWidth = 320, onAsideWidthChange, resizable = false, minAsideWidth = 260, maxAsideWidth = 520, state = "ready", notFound, forbidden, readOnly = false, labels, className, style, children, ...props }, ref) {
+export const RecordLayout = /*#__PURE__*/ React.forwardRef(function RecordLayout({ asidePosition = "end", asideWidth: asideWidthProp, defaultAsideWidth = 320, onAsideWidthChange, resizable = false, minAsideWidth = 260, maxAsideWidth = 520, state = "ready", notFound, forbidden, readOnly = false, labels, className, style, children, ...props }, ref) {
     const t = useLabels("record", recordLabels, labels);
     const { ref: measureRef, width } = useContainerWidth();
     const composed = useComposedRefs(ref, measureRef);
@@ -147,7 +147,7 @@ function RecordLayoutSkeleton({ label }) {
     return (_jsxs(_Fragment, { children: [_jsxs("div", { role: "status", "aria-label": label, "aria-busy": "true", className: "flex items-center gap-4 [grid-area:header]", children: [_jsx(SkeletonAvatar, { size: "xl" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-6 w-56 rounded-ui-sm" }), _jsx(Skeleton, { className: "h-4 w-40 rounded-ui-sm" })] })] }), _jsxs("div", { className: "grid gap-(--gap) [grid-area:main]", children: [_jsx("div", { className: "surface rounded-ui-lg p-(--gap)", children: _jsx(SkeletonText, { lines: 4 }) }), _jsx("div", { className: "surface rounded-ui-lg p-(--gap)", children: _jsx(SkeletonText, { lines: 3 }) })] }), _jsx("div", { className: "grid gap-3 [grid-area:aside]", children: _jsx("div", { className: "surface-2 rounded-ui-lg p-4", children: _jsx(SkeletonText, { lines: 5 }) }) })] }));
 }
 /** The record's header: back link + pager, media, h1, status, subtitle, actions and key facts. */
-export const RecordHeader = React.forwardRef(function RecordHeader({ media, title, subtitle, status, facts, actions, back, pager, saving, size = "md", loading, labels, className, children, ...props }, ref) {
+export const RecordHeader = /*#__PURE__*/ React.forwardRef(function RecordHeader({ media, title, subtitle, status, facts, actions, back, pager, saving, size = "md", loading, labels, className, children, ...props }, ref) {
     const ctx = React.useContext(RecordLayoutContext);
     const t = useLabels("record", recordLabels, labels ?? ctx.labels);
     const showActions = actions && !ctx.readOnly;
@@ -156,7 +156,7 @@ export const RecordHeader = React.forwardRef(function RecordHeader({ media, titl
     return (_jsxs("header", { ref: ref, "data-slot": "record-header", "data-size": size, className: cn("flex min-w-0 flex-col gap-4 [grid-area:header]", className), ...props, children: [back || pager ? (_jsxs("div", { className: "flex min-h-8 items-center justify-between gap-3", children: [back ? (_jsxs(SmartLink, { href: back.href, className: "-ms-0.5 inline-flex w-fit items-center gap-1.5 rounded-ui-sm text-[13px] text-fg-muted transition-colors hover:text-fg focus-ring", children: [_jsx(ArrowLeft, { "aria-hidden": true, className: "size-3.5 rtl:-scale-x-100" }), back.label] })) : (_jsx("span", {})), pager] })) : null, _jsxs("div", { className: "flex flex-wrap items-start gap-x-5 gap-y-4", children: [media ? _jsx("div", { "data-slot": "record-header-media", className: "shrink-0", children: media }) : null, _jsxs("div", { className: "min-w-0 flex-[1_1_16rem] self-center", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [_jsx("h1", { "aria-busy": loading || undefined, className: cn("font-display min-w-0 text-fg [text-wrap:balance]", size === "md" ? "text-[length:calc(28px*var(--display-scale))] leading-[1.1]" : "text-[length:calc(20px*var(--display-scale))] leading-[1.15]"), children: loading ? _jsx(Skeleton, { className: "inline-block h-[0.8em] w-[min(16rem,55vw)] rounded-ui-sm align-middle" }) : title }), status && !loading ? _jsx("span", { className: "inline-flex items-center gap-2", children: status }) : null, saving ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1.5 text-[13px] text-fg-subtle", children: [_jsx(Spinner, { size: "xs" }), " ", t("saving")] })) : null] }), loading ? (_jsx(Skeleton, { className: "mt-2 h-4 w-48 rounded-ui-sm" })) : subtitle ? (_jsx("p", { className: "mt-1 text-[14px] text-fg-muted", children: subtitle })) : null] }), showActions ? _jsx("div", { "data-slot": "record-header-actions", className: "flex flex-wrap items-center gap-2 self-center", children: actions }) : null] }), facts?.length ? (_jsx("div", { ref: factsRef, role: "group", "aria-label": t("facts"), tabIndex: 0, "data-slot": "record-facts", "data-edge-fade": "x", className: "-mx-1 overflow-x-auto scrollbar-none rounded-ui-sm px-1 focus-ring @2xl/record:overflow-visible", children: _jsx("dl", { className: "flex w-max min-w-full items-stretch @2xl/record:w-auto @2xl/record:flex-wrap @2xl/record:gap-y-3", children: facts.map((f, i) => (_jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-1 border-s border-line px-5 first:border-s-0 first:ps-0", children: [_jsx("dt", { className: "text-[12px] text-fg-subtle", children: f.label }), _jsx("dd", { className: "tabular text-[14px] font-medium text-fg", children: f.value })] }, i))) }) })) : null, children] }));
 });
 /** "3 of 128" with previous/next buttons and `j` / `k` shortcuts. */
-export const RecordPager = React.forwardRef(function RecordPager({ index, total, prevHref, nextHref, onPrevious, onNext, shortcuts = true, labels, className, ...props }, ref) {
+export const RecordPager = /*#__PURE__*/ React.forwardRef(function RecordPager({ index, total, prevHref, nextHref, onPrevious, onNext, shortcuts = true, labels, className, ...props }, ref) {
     const ctx = React.useContext(RecordLayoutContext);
     const t = useLabels("record", recordLabels, labels ?? ctx.labels);
     const f = useFormat();
@@ -194,23 +194,23 @@ export const RecordPager = React.forwardRef(function RecordPager({ index, total,
     return (_jsxs("nav", { ref: ref, "aria-label": t("pagerLabel"), "data-slot": "record-pager", className: cn("inline-flex items-center gap-1", className), ...props, children: [_jsx("span", { className: "tabular me-1 text-[13px] text-fg-muted", children: t("pager", { index: f.number(index), total: f.number(total) }) }), _jsxs("span", { className: "inline-flex items-center rounded-ui-sm border border-line", children: [step("prev"), _jsx("span", { "aria-hidden": true, className: "h-4 w-px bg-line" }), step("next")] })] }));
 });
 /** The main column: tabs, overview, activity, related lists. */
-export const RecordMain = React.forwardRef(function RecordMain({ tabs, className, children, ...props }, ref) {
+export const RecordMain = /*#__PURE__*/ React.forwardRef(function RecordMain({ tabs, className, children, ...props }, ref) {
     return (_jsxs("div", { ref: ref, "data-slot": "record-main", className: cn("flex min-w-0 flex-col gap-(--gap) [grid-area:main]", className), ...props, children: [tabs ? _jsx("div", { "data-slot": "record-main-tabs", className: "-mb-1", children: tabs }) : null, children] }));
 });
 /** A titled card in the main column: overview, activity, related deals. `<section aria-labelledby>`. */
-export const RecordSection = React.forwardRef(function RecordSection({ title, description, action, padding = "md", className, children, id, ...props }, ref) {
+export const RecordSection = /*#__PURE__*/ React.forwardRef(function RecordSection({ title, description, action, padding = "md", className, children, id, ...props }, ref) {
     const autoId = React.useId();
     const titleId = `${id ?? `record-section${autoId.replace(/:/g, "")}`}-title`;
     return (_jsxs("section", { ref: ref, id: id, "aria-labelledby": titleId, "data-slot": "record-section", className: cn("surface overflow-hidden rounded-ui-lg", className), ...props, children: [_jsxs("div", { className: "flex items-start justify-between gap-3 px-(--gap) pt-[calc(var(--gap)*0.8)]", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: titleId, className: "text-[15px] font-semibold text-fg", children: title }), description ? _jsx("p", { className: "mt-0.5 text-[13px] text-fg-muted", children: description }) : null] }), action ? _jsx("div", { className: "-me-1 -mt-1 flex shrink-0 items-center gap-1.5", children: action }) : null] }), _jsx("div", { className: cn(padding === "md" ? "p-(--gap) pt-3" : "pt-3"), children: children })] }));
 });
 /** The side column (`<aside>`): description lists, owners, tags, related records. */
-export const RecordAside = React.forwardRef(function RecordAside({ className, children, labels, ...props }, ref) {
+export const RecordAside = /*#__PURE__*/ React.forwardRef(function RecordAside({ className, children, labels, ...props }, ref) {
     const ctx = React.useContext(RecordLayoutContext);
     const t = useLabels("record", recordLabels, labels ?? ctx.labels);
     return (_jsxs("aside", { ref: ref, "aria-label": props["aria-label"] ?? t("details"), "data-slot": "record-aside", className: cn("relative flex min-w-0 flex-col gap-3 [grid-area:aside]", className), ...props, children: [ctx.resizable && !ctx.narrow ? (_jsx(SidePaneHandle, { "aria-label": t("resizeAside"), edge: ctx.asidePosition === "end" ? "start" : "end", value: ctx.asideWidth, min: ctx.minAsideWidth, max: ctx.maxAsideWidth, defaultValue: ctx.defaultAsideWidth, onValueChange: ctx.setAsideWidth })) : null, children] }));
 });
 /** A titled block in the side column; folds like an accordion item when space is short. */
-export const RecordAsideSection = React.forwardRef(function RecordAsideSection({ title, action, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, headingLevel = 2, className, children, ...props }, ref) {
+export const RecordAsideSection = /*#__PURE__*/ React.forwardRef(function RecordAsideSection({ title, action, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, headingLevel = 2, className, children, ...props }, ref) {
     const { narrow } = React.useContext(RecordLayoutContext);
     const foldable = collapsible || narrow;
     const touched = React.useRef(false);

package/dist/components/record-picker.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import * as PopoverPrimitive from "radix-ui/popover";
 import { Check, ChevronsUpDown, ExternalLink, LayoutList, Plus, RotateCw, Search, TriangleAlert, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { mergeIds } from "../lib/compose-refs.js";
@@ -647,4 +647,4 @@ function RecordPickerInner(props, forwardedRef) {
  * <Field label="Company"><RecordPicker source={companies} value={companyId} onValueChange={setCompanyId} /></Field>
  * ```
  */
-export const RecordPicker = React.forwardRef(RecordPickerInner);
+export const RecordPicker = /*#__PURE__*/ React.forwardRef(RecordPickerInner);

package/dist/components/resizable.js

@@ -7,7 +7,7 @@ import { cn } from "../lib/cn.js";
 export const useResizablePanelRef = usePanelRef;
 /** Typed ref for a `ResizableGroup`'s `groupRef` (`getLayout()`, `setLayout()`). */
 export const useResizableGroupRef = useGroupRef;
-const OrientationContext = React.createContext("horizontal");
+const OrientationContext = /*#__PURE__*/ React.createContext("horizontal");
 /** localStorage that never throws (private mode, SSR, blocked storage). */
 const safeLocalStorage = {
     getItem(key) {
@@ -45,7 +45,7 @@ const safeLocalStorage = {
  * units (`"35%"`, `"280px"`, `"20rem"`). In glass mode surfaces inside stop blurring while a
  * handle is dragged. On phones, show one pane and open the other in a Sheet (not automatic).
  */
-export const ResizableGroup = React.forwardRef(function ResizableGroup(props, ref) {
+export const ResizableGroup = /*#__PURE__*/ React.forwardRef(function ResizableGroup(props, ref) {
     return props.autoSaveId ? _jsx(PersistedGroup, { ...props, forwardedRef: ref }) : _jsx(BaseGroup, { ...props, forwardedRef: ref });
 });
 function PersistedGroup({ autoSaveId, storage, onLayoutChanged, defaultLayout, ...props }) {

package/dist/components/scroll-area.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ScrollArea as RadixScrollArea } from "radix-ui";
+import * as RadixScrollArea from "radix-ui/scroll-area";
 type BarSize = "sm" | "md";
 export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixScrollArea.Root>, "dir"> {
     /** Which scrollbars to render. Default `"vertical"`. */

package/dist/components/scroll-area.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ScrollArea as RadixScrollArea } from "radix-ui";
+import * as RadixScrollArea from "radix-ui/scroll-area";
 import { cn } from "../lib/cn.js";
 import { useComposedRefs } from "../lib/compose-refs.js";
 import { useEdgeFade } from "../lib/use-edge-fade.js";
 import { useIsomorphicLayoutEffect } from "../lib/use-controllable-state.js";
-const BarSizeContext = React.createContext("sm");
+const BarSizeContext = /*#__PURE__*/ React.createContext("sm");
 const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
 /**
  * A consistent thin scrollbar for bounded, embedded regions: popover and command lists, the
@@ -21,7 +21,7 @@ const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:n
  * only for embedded regions (performance and iOS momentum). The viewport is keyboard-focusable only
  * when its content has nothing focusable of its own.
  */
-export const ScrollArea = React.forwardRef(function ScrollArea({ orientation = "vertical", maxHeight, fade, size = "sm", type = "hover", viewportRef, viewportClassName, className, children, style, "aria-label": ariaLabel, ...props }, ref) {
+export const ScrollArea = /*#__PURE__*/ React.forwardRef(function ScrollArea({ orientation = "vertical", maxHeight, fade, size = "sm", type = "hover", viewportRef, viewportClassName, className, children, style, "aria-label": ariaLabel, ...props }, ref) {
     const innerRef = React.useRef(null);
     const composed = useComposedRefs(viewportRef, innerRef);
     const axis = orientation === "horizontal" ? "x" : "y";
@@ -49,7 +49,7 @@ export const ScrollArea = React.forwardRef(function ScrollArea({ orientation = "
     return (_jsx(BarSizeContext.Provider, { value: size, children: _jsxs(RadixScrollArea.Root, { ref: ref, type: type, "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), style: style, ...props, children: [_jsx(RadixScrollArea.Viewport, { ref: composed, "data-slot": "scroll-area-viewport", "data-orientation": orientation, "data-edge-fade": fade && orientation !== "both" ? axis : undefined, tabIndex: focusable ? 0 : undefined, role: ariaLabel ? "region" : undefined, "aria-label": ariaLabel, className: cn("size-full rounded-[inherit] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", viewportClassName), style: maxHeight !== undefined ? { maxHeight } : undefined, children: children }), orientation !== "horizontal" ? _jsx(ScrollBar, { orientation: "vertical" }) : null, orientation !== "vertical" ? _jsx(ScrollBar, { orientation: "horizontal" }) : null, _jsx(RadixScrollArea.Corner, {})] }) }));
 });
 /** A scrollbar for `ScrollArea`. Rendered automatically from `orientation`; use it directly for custom layouts. */
-export const ScrollBar = React.forwardRef(function ScrollBar({ orientation = "vertical", size, className, ...props }, ref) {
+export const ScrollBar = /*#__PURE__*/ React.forwardRef(function ScrollBar({ orientation = "vertical", size, className, ...props }, ref) {
     const ctxSize = React.useContext(BarSizeContext);
     const s = size ?? ctxSize;
     return (_jsx(RadixScrollArea.Scrollbar, { ref: ref, orientation: orientation, "data-slot": "scroll-area-bar", className: cn("z-(--z-sticky) flex touch-none select-none p-px transition-[opacity,background-color] duration-150", "data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100", orientation === "vertical" ? (s === "sm" ? "w-2" : "w-2.5") : s === "sm" ? "h-2 flex-col" : "h-2.5 flex-col", orientation === "vertical" ? "h-full border-s border-s-transparent" : "border-t border-t-transparent", "hover:bg-[color-mix(in_srgb,var(--track)_50%,transparent)]", className), ...props, children: _jsx(RadixScrollArea.Thumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full before:absolute before:top-1/2 before:left-1/2 before:size-full before:min-h-8 before:min-w-8 before:-translate-x-1/2 before:-translate-y-1/2" }) }));

package/dist/components/select.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Select as SelectPrimitive } from "radix-ui";
+import * as SelectPrimitive from "radix-ui/select";
 declare const selectLabels: {
     placeholder: string;
     clear: string;

package/dist/components/select.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Select as SelectPrimitive } from "radix-ui";
+import * as SelectPrimitive from "radix-ui/select";
 import { Check, ChevronDown, ChevronUp, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useFieldContext, useFieldControl } from "../lib/field-context.js";
@@ -19,7 +19,7 @@ const selectLabels = {
     loading: "Loading options…",
     empty: "No options",
 };
-const SelectContext = React.createContext({ size: "md", itemSize: "md" });
+const SelectContext = /*#__PURE__*/ React.createContext({ size: "md", itemSize: "md" });
 /* ------------------------------------------------------------------ */
 /* Composite parts                                                     */
 /* ------------------------------------------------------------------ */
@@ -29,21 +29,21 @@ export const SelectRoot = SelectPrimitive.Root;
  * The button that shows the value. Uses `controlVariants`, so it lines up with Input.
  * Reads the surrounding Field (id, description, invalid, disabled).
  */
-export const SelectTrigger = React.forwardRef(function SelectTrigger({ className, size = "md", variant = "default", invalid, readOnly, loading, children, ...rest }, ref) {
+export const SelectTrigger = /*#__PURE__*/ React.forwardRef(function SelectTrigger({ className, size = "md", variant = "default", invalid, readOnly, loading, children, ...rest }, ref) {
     const props = useFieldControl({ ...rest, readOnly, "aria-invalid": invalid ? true : rest["aria-invalid"] });
     const { readOnly: ro, required, name: _name, ...triggerProps } = props;
     void _name;
     return (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", "data-size": size, "data-readonly": ro ? "" : undefined, "aria-readonly": ro || undefined, "aria-required": required || undefined, "aria-busy": loading || undefined, className: cn(controlVariants({ size, variant: variant === "pill" ? "default" : variant, pill: variant === "pill" }), "justify-between text-start whitespace-nowrap cursor-default", "data-placeholder:text-fg-subtle [&>span]:min-w-0 [&>span]:truncate", ro && "cursor-default", className), ...triggerProps, children: [children, loading ? (_jsx(Spinner, { size: size === "lg" ? "md" : "sm", tone: "muted" })) : ro ? null : (_jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { "aria-hidden": true, className: "shrink-0 text-fg-subtle transition-transform duration-150 [[data-state=open]>&]:rotate-180" }) }))] }));
 });
 /** Shows the selected item's text, or the placeholder. Children override the rendering. */
-export const SelectValue = React.forwardRef(function SelectValue({ className, ...props }, ref) {
+export const SelectValue = /*#__PURE__*/ React.forwardRef(function SelectValue({ className, ...props }, ref) {
     return _jsx(SelectPrimitive.Value, { ref: ref, "data-slot": "select-value", className: cn("min-w-0 truncate", className), ...props });
 });
 /**
  * The floating list. Popper-positioned under the trigger, at least as wide as it, portalled into
  * the nearest ThemeScope, and one layer deep (glass blur only at depth 1).
  */
-export const SelectContent = React.forwardRef(function SelectContent({ className, children, position = "popper", sideOffset = 6, collisionPadding = 12, itemSize, ...props }, ref) {
+export const SelectContent = /*#__PURE__*/ React.forwardRef(function SelectContent({ className, children, position = "popper", sideOffset = 6, collisionPadding = 12, itemSize, ...props }, ref) {
     const container = usePortalContainer();
     const parent = React.useContext(SelectContext);
     const ctx = React.useMemo(() => ({ ...parent, itemSize: itemSize ?? parent.itemSize }), [parent, itemSize]);
@@ -54,20 +54,20 @@ export const SelectContent = React.forwardRef(function SelectContent({ className
  * One option. Typeahead uses a locale-folded copy of the text, so typing "i" finds "İstanbul"
  * and "c" finds "Çanakkale". Pass `textValue` when children aren't plain text.
  */
-export const SelectItem = React.forwardRef(function SelectItem({ className, children, icon, description, textValue, ...props }, ref) {
+export const SelectItem = /*#__PURE__*/ React.forwardRef(function SelectItem({ className, children, icon, description, textValue, ...props }, ref) {
     const { itemSize } = React.useContext(SelectContext);
     const { locale } = useLocale();
     const plain = textValue ?? (typeof children === "string" ? children : undefined);
     return (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", textValue: plain !== undefined ? foldText(plain, locale) : undefined, className: cn(itemVariants({ size: itemSize }), "pe-8", description ? "items-start" : undefined, className), ...props, children: [icon ? _jsx("span", { className: cn(itemSlots.icon, "flex items-center justify-center", description && "mt-0.5"), children: icon }) : null, _jsxs("span", { className: "grid min-w-0 flex-1", children: [_jsx(SelectPrimitive.ItemText, { children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [icon ? _jsx("span", { "aria-hidden": true, className: "hidden items-center text-fg-muted [[data-slot=select-trigger]_&]:flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }) }), description ? _jsx("span", { className: itemSlots.description, children: description }) : null] }), _jsx("span", { className: cn("absolute end-2 flex size-4 items-center justify-center text-accent-ink", description && "top-2"), children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { "aria-hidden": true, strokeWidth: 2.5, className: "size-4" }) }) })] }));
 });
 /** Groups items under a heading; announced as a group. */
-export const SelectGroup = React.forwardRef(function SelectGroup({ label, children, ...props }, ref) {
+export const SelectGroup = /*#__PURE__*/ React.forwardRef(function SelectGroup({ label, children, ...props }, ref) {
     return (_jsxs(SelectPrimitive.Group, { ref: ref, "data-slot": "select-group", ...props, children: [label != null ? _jsx(SelectLabel, { children: label }) : null, children] }));
 });
-export const SelectLabel = React.forwardRef(function SelectLabel({ className, ...props }, ref) {
+export const SelectLabel = /*#__PURE__*/ React.forwardRef(function SelectLabel({ className, ...props }, ref) {
     return _jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn(itemSlots.groupLabel, className), ...props });
 });
-export const SelectSeparator = React.forwardRef(function SelectSeparator({ className, ...props }, ref) {
+export const SelectSeparator = /*#__PURE__*/ React.forwardRef(function SelectSeparator({ className, ...props }, ref) {
     return _jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn(itemSlots.separator, className), ...props });
 });
 function groupItems(items) {
@@ -134,4 +134,4 @@ function SelectInner({ value: valueProp, defaultValue, onValueChange, items, chi
  * </Field>
  * ```
  */
-export const Select = React.forwardRef(SelectInner);
+export const Select = /*#__PURE__*/ React.forwardRef(SelectInner);

package/dist/components/separator.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Separator as SeparatorPrimitive } from "radix-ui";
+import * as SeparatorPrimitive from "radix-ui/separator";
 import { type VariantProps } from "class-variance-authority";
 export declare const separatorVariants: (props?: ({
     tone?: "nav" | "strong" | "line" | null | undefined;

package/dist/components/separator.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Separator as SeparatorPrimitive } from "radix-ui";
+import * as SeparatorPrimitive from "radix-ui/separator";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
-export const separatorVariants = cva("shrink-0 border-0", {
+export const separatorVariants = /*#__PURE__*/ cva("shrink-0 border-0", {
     variants: {
         tone: {
             line: "bg-line",
@@ -32,7 +32,7 @@ export const separatorVariants = cva("shrink-0 border-0", {
  * <Separator label="or continue with" />
  * ```
  */
-export const Separator = React.forwardRef(function Separator({ className, orientation = "horizontal", decorative = true, tone, inset, label, labelAlign = "center", ...props }, ref) {
+export const Separator = /*#__PURE__*/ React.forwardRef(function Separator({ className, orientation = "horizontal", decorative = true, tone, inset, label, labelAlign = "center", ...props }, ref) {
     if (label != null && orientation === "horizontal") {
         const line = _jsx(SeparatorPrimitive.Root, { decorative: true, className: cn(separatorVariants({ tone, orientation: "horizontal" }), "w-auto flex-1") });
         return (_jsxs("div", { ref: ref, "data-slot": "separator", "data-orientation": "horizontal", className: cn("flex w-full items-center gap-3 text-xs text-fg-subtle", inset && "px-(--gap)", className), ...props, children: [labelAlign !== "start" ? line : null, _jsx("span", { className: "shrink-0 tracking-[0.01em]", children: label }), labelAlign !== "end" ? line : null] }));

package/dist/components/settings-layout.js

@@ -25,7 +25,7 @@ const settingsLabels = {
     error: "Couldn't save your changes",
     loading: "Loading settings",
 };
-const SettingsLayoutContext = React.createContext({ readOnly: false });
+const SettingsLayoutContext = /*#__PURE__*/ React.createContext({ readOnly: false });
 /**
  * A shared skeleton for settings pages: section nav, titled sections of label | control rows,
  * a sticky save bar that rises when there are unsaved changes, and a danger zone. Not bound to
@@ -41,7 +41,7 @@ const SettingsLayoutContext = React.createContext({ readOnly: false });
  * </SettingsLayout>
  * ```
  */
-export const SettingsLayout = React.forwardRef(function SettingsLayout({ nav, width = "md", readOnly = false, notice, stickyTop, labels, className, style, children, ...props }, ref) {
+export const SettingsLayout = /*#__PURE__*/ React.forwardRef(function SettingsLayout({ nav, width = "md", readOnly = false, notice, stickyTop, labels, className, style, children, ...props }, ref) {
     const ctx = React.useMemo(() => ({ readOnly, labels }), [readOnly, labels]);
     const top = stickyTop === undefined ? undefined : typeof stickyTop === "number" ? `${stickyTop}px` : stickyTop;
     return (_jsx(SettingsLayoutContext.Provider, { value: ctx, children: _jsx("div", { ref: ref, "data-slot": "settings-layout", "data-read-only": readOnly ? "" : undefined, className: cn("@container/settings mx-auto w-full min-w-0", width === "md" ? "max-w-[64rem]" : "max-w-[80rem]", className), style: top !== undefined ? { "--settings-sticky-top": top, ...style } : style, ...props, children: _jsxs("div", { className: cn("grid min-w-0 gap-x-10 gap-y-5", nav && "@2xl/settings:grid-cols-[11.5rem_minmax(0,1fr)]"), children: [nav ? (_jsx("div", { "data-slot": "settings-layout-nav", className: "min-w-0 @2xl/settings:sticky @2xl/settings:top-[calc(var(--settings-sticky-top,var(--topbar-h))+1.5rem)] @2xl/settings:self-start", children: nav })) : null, _jsxs("div", { "data-slot": "settings-layout-content", className: "flex min-w-0 flex-col gap-[calc(var(--gap)*1.6)]", children: [notice, children] })] }) }) }));
@@ -50,7 +50,7 @@ export const SettingsLayout = React.forwardRef(function SettingsLayout({ nav, wi
  * Section navigation: a `nav` with `aria-current`. Anchor items scroll to their section, move focus
  * to its heading, and follow the scroll (scroll-spy). Link items use the app's router.
  */
-export const SettingsNav = React.forwardRef(function SettingsNav({ items: itemsProp, value: valueProp, defaultValue, onValueChange, scrollSpy = true, labels, className, ...props }, ref) {
+export const SettingsNav = /*#__PURE__*/ React.forwardRef(function SettingsNav({ items: itemsProp, value: valueProp, defaultValue, onValueChange, scrollSpy = true, labels, className, ...props }, ref) {
     const ctx = React.useContext(SettingsLayoutContext);
     const t = useLabels("settings", settingsLabels, labels ?? ctx.labels);
     const can = useCan();
@@ -121,7 +121,7 @@ export const SettingsNav = React.forwardRef(function SettingsNav({ items: itemsP
             }) }) }));
 });
 /** A titled group of setting rows. `<section aria-labelledby>`. */
-export const SettingsSection = React.forwardRef(function SettingsSection({ id, title, description, layout = "stacked", tone = "default", footer, loading, headingLevel = 2, labels, className, children, ...props }, ref) {
+export const SettingsSection = /*#__PURE__*/ React.forwardRef(function SettingsSection({ id, title, description, layout = "stacked", tone = "default", footer, loading, headingLevel = 2, labels, className, children, ...props }, ref) {
     const ctx = React.useContext(SettingsLayoutContext);
     const t = useLabels("settings", settingsLabels, labels ?? ctx.labels);
     const autoId = React.useId();
@@ -135,7 +135,7 @@ export const SettingsSection = React.forwardRef(function SettingsSection({ id, t
  * One setting: label + description | control. Acts like a `Field` for kit controls (Input,
  * Switch, Select…): the id, `aria-describedby` and disabled/invalid state are wired for you.
  */
-export const SettingsRow = React.forwardRef(function SettingsRow({ label, description, htmlFor, layout = "split", badge, error, disabled, className, children, ...props }, ref) {
+export const SettingsRow = /*#__PURE__*/ React.forwardRef(function SettingsRow({ label, description, htmlFor, layout = "split", badge, error, disabled, className, children, ...props }, ref) {
     const { readOnly } = React.useContext(SettingsLayoutContext);
     const autoId = React.useId().replace(/:/g, "");
     const controlId = htmlFor ?? `setting-${autoId}`;
@@ -160,7 +160,7 @@ export const SettingsRow = React.forwardRef(function SettingsRow({ label, descri
  * The sticky "Unsaved changes · Discard · Save" bar. It rises from the bottom of the content when
  * the form is dirty, announces itself politely, and `mod+s` saves.
  */
-export const SettingsSaveBar = React.forwardRef(function SettingsSaveBar({ dirty, saving = false, onSave, onReset, message, error, blockNavigation = true, shortcuts = true, saveLabel, labels, className, ...props }, ref) {
+export const SettingsSaveBar = /*#__PURE__*/ React.forwardRef(function SettingsSaveBar({ dirty, saving = false, onSave, onReset, message, error, blockNavigation = true, shortcuts = true, saveLabel, labels, className, ...props }, ref) {
     const ctx = React.useContext(SettingsLayoutContext);
     const t = useLabels("settings", settingsLabels, labels ?? ctx.labels);
     const visible = dirty || saving || Boolean(error);

package/dist/components/sheet.js

@@ -34,7 +34,7 @@ export const SheetBody = LayerBody;
 /** `LayerFooter` for sheets. */
 export const SheetFooter = LayerFooter;
 const sideAlias = { left: "start", right: "end" };
-export const SheetContent = React.forwardRef(function SheetContent({ side: sideProp = "end", size = "md", inset, className, ...props }, ref) {
+export const SheetContent = /*#__PURE__*/ React.forwardRef(function SheetContent({ side: sideProp = "end", size = "md", inset, className, ...props }, ref) {
     const side = sideProp === "left" || sideProp === "right" ? sideAlias[sideProp] : sideProp;
     return (_jsx(LayerContentShell, { ref: ref, "data-slot": "sheet-content", "data-side": side, "data-size": size, "data-inset": inset ? "" : undefined, className: cn("vui-sheet", `ui-sheet-${side}`, className), ...props }));
 });
@@ -138,14 +138,14 @@ export const DrawerClose = DialogClose;
 export const DrawerHeader = LayerHeader;
 export const DrawerFooter = LayerFooter;
 /** The scrolling body of a drawer; dragging starts from it only while it is scrolled to the top. */
-export const DrawerBody = React.forwardRef(function DrawerBody(props, ref) {
+export const DrawerBody = /*#__PURE__*/ React.forwardRef(function DrawerBody(props, ref) {
     return _jsx(LayerBody, { ref: ref, "data-slot": "drawer-body", ...props });
 });
 /** The grab line at the top of a drawer. Decorative (`aria-hidden`). */
 export function DrawerHandle({ className }) {
     return _jsx("div", { "aria-hidden": true, "data-slot": "drawer-handle", className: cn("vui-drawer-handle", className) });
 }
-export const DrawerContent = React.forwardRef(function DrawerContent({ dragToDismiss = true, handle = true, size = "lg", className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }, ref) {
+export const DrawerContent = /*#__PURE__*/ React.forwardRef(function DrawerContent({ dragToDismiss = true, handle = true, size = "lg", className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }, ref) {
     const root = useDialogRoot();
     const { ref: dragRef, handlers } = useDragDismiss({ onDismiss: () => root.requestOpenChange(false), enabled: dragToDismiss });
     const composed = useComposedRefs(ref, dragRef);