themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/components/ui/item.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "./separator";
+declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "sm" | "xs" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "image" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };

package/dist/components/ui/overlay.recipes.d.ts

@@ -0,0 +1,2 @@
+/** One modal scrim recipe; the color comes from the shared semantic token. */
+export declare const modalBackdropRecipe = "fixed inset-0 z-50 bg-(--overlay-backdrop) supports-backdrop-filter:backdrop-blur-sm";

package/dist/components/ui/pagination.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Button } from "./button";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): React.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): React.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,22 @@
+import { type ThemePortalContainer } from '../../lib/theme-scope';
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import * as React from "react";
+declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
+declare function PopoverTrigger({ asChild, nativeButton, render, children, ...props }: PopoverPrimitive.Trigger.Props & {
+    asChild?: boolean;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function PopoverAnchor({ asChild, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function PopoverContent({ className, container, align, alignOffset, side, sideOffset, disablePortal, positionMethod, onOpenAutoFocus, onInteractOutside, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "positionMethod"> & {
+    disablePortal?: boolean;
+    onOpenAutoFocus?: (event: Event) => void;
+    onInteractOutside?: (event: Event) => void;
+} & {
+    container?: ThemePortalContainer;
+}): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): React.JSX.Element;
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

package/dist/components/ui/select.d.ts

@@ -0,0 +1,18 @@
+import { type ThemePortalContainer } from '../../lib/theme-scope';
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import * as React from "react";
+declare const Select: typeof SelectPrimitive.Root;
+declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
+declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+declare function SelectContent({ className, container, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, positionMethod, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger" | "positionMethod"> & {
+    container?: ThemePortalContainer;
+}): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): React.JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/ui/separator.d.ts

@@ -0,0 +1,3 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
+export { Separator };

package/dist/components/ui/sheet.d.ts

@@ -0,0 +1,25 @@
+import { type ThemePortalContainer } from '../../lib/theme-scope';
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import * as React from "react";
+declare function Sheet({ ...props }: SheetPrimitive.Root.Props): React.JSX.Element;
+declare function SheetTrigger({ asChild, ...props }: SheetPrimitive.Trigger.Props & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SheetClose({ asChild, ...props }: SheetPrimitive.Close.Props & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SheetContent({ className, container, children, side, showCloseButton, ...props }: SheetPrimitive.Popup.Props & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+} & {
+    container?: ThemePortalContainer;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, asChild, ...props }: SheetPrimitive.Title.Props & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SheetDescription({ className, asChild, ...props }: SheetPrimitive.Description.Props & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/components/ui/sidebar.d.ts

@@ -0,0 +1,64 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import { TooltipContent } from "./tooltip";
+type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, adaptTo, ref: forwardedRef, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    adaptTo?: "viewport" | "container";
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}): React.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div"> & React.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
+declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
+    showOnHover?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & {
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/components/ui/skeleton.d.ts

@@ -0,0 +1,2 @@
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+export { Skeleton };

package/dist/components/ui/slot.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/** Compatibility adapter for Themelia's single-child composition API. */
+export declare const Slot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+    nativeButton?: boolean;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/ui/sonner.d.ts

@@ -0,0 +1,3 @@
+import { type ToasterProps } from "sonner";
+declare const Toaster: ({ theme, ...props }: ToasterProps) => import("react").JSX.Element;
+export { Toaster };

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,5 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
+    size?: "sm" | "default";
+}): import("react").JSX.Element;
+export { Switch };

package/dist/components/ui/table.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+type TableProps = React.ComponentProps<"table"> & {
+    containerClassName?: string;
+};
+declare function Table({ className, containerClassName, ...props }: TableProps): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/components/ui/tabs.d.ts

@@ -0,0 +1,10 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { type VariantProps } from "class-variance-authority";
+declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import("react").JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
+declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react").JSX.Element;
+declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/components/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,12 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { toggleVariants } from "./toggle";
+export type ToggleGroupProps = ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+};
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupProps): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/ui/toggle.d.ts

@@ -0,0 +1,8 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { type VariantProps } from "class-variance-authority";
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
+export { Toggle, toggleVariants };

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,13 @@
+import { type ThemePortalContainer } from '../../lib/theme-scope';
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+declare function TooltipProvider({ delay, delayDuration, ...props }: TooltipPrimitive.Provider.Props & {
+    delayDuration?: number;
+}): import("react").JSX.Element;
+declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
+declare function TooltipTrigger({ asChild, render, children, ...props }: TooltipPrimitive.Trigger.Props & {
+    asChild?: boolean;
+}): import("react").JSX.Element;
+declare function TooltipContent({ className, container, side, sideOffset, align, alignOffset, positionMethod, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "positionMethod"> & {
+    container?: ThemePortalContainer;
+}): import("react").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/containers-6s-ucRQQ.js

@@ -0,0 +1,125 @@
+"use client";
+import { t as e } from "./utils-C2EKeIw3.js";
+import { o as t } from "./structure.recipes-Bqhf9oIh.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRender as o } from "@base-ui/react/use-render";
+//#region src/components/layout/containers/container.recipes.ts
+var s = {
+	sm: "max-w-content-sm",
+	md: "max-w-content-md",
+	lg: "max-w-content-lg",
+	xl: "max-w-content-xl",
+	"2xl": "max-w-content-2xl",
+	full: "max-w-none"
+}, c = {
+	none: "px-0",
+	sm: "px-surface-xs",
+	md: "px-surface",
+	lg: "px-surface-lg"
+};
+function l({ maxWidth: e = "xl", gutter: t = "md" }) {
+	return [
+		"box-border",
+		"mx-auto",
+		"w-full",
+		s[e],
+		c[t]
+	];
+}
+//#endregion
+//#region src/components/layout/containers/content-container.tsx
+var u = n(function({ className: t, maxWidth: n, gutter: r, render: i, ...a }, s) {
+	return o({
+		defaultTagName: "div",
+		ref: s,
+		render: i,
+		props: {
+			...a,
+			className: e("container--component @container/content", l({
+				maxWidth: n,
+				gutter: r
+			}), t)
+		},
+		state: {}
+	});
+});
+u.displayName = "Container";
+//#endregion
+//#region src/components/layout/containers/page-viewport.tsx
+var d = n(function({ className: t, render: n, tabIndex: r = 0, ...i }, a) {
+	return o({
+		defaultTagName: "div",
+		ref: a,
+		render: n,
+		props: {
+			...i,
+			tabIndex: r,
+			className: e("page-viewport--component min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain [scrollbar-gutter:stable] @container/page focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-inset", t)
+		},
+		state: {}
+	});
+});
+d.displayName = "PageViewport";
+//#endregion
+//#region src/components/layout/containers/section.tsx
+var f = n(function({ className: n, gap: r, render: i, ...a }, s) {
+	return o({
+		defaultTagName: "section",
+		ref: s,
+		render: i,
+		props: {
+			...a,
+			className: e("section--component", t({ gap: r ?? "xl" }), n)
+		},
+		state: {}
+	});
+});
+f.displayName = "Section";
+//#endregion
+//#region src/components/layout/containers/two-column-layout.tsx
+var p = n(function({ header: t, main: n, aside: s, footer: c, stickyAside: l = !1, adaptTo: u = "viewport", slotProps: d, className: f, render: p, ...m }, h) {
+	let { className: g, ..._ } = d?.header ?? {}, { className: v, ...y } = d?.main ?? {}, { className: b, ...x } = d?.aside ?? {}, { className: S, ...C } = d?.footer ?? {};
+	return o({
+		defaultTagName: "div",
+		ref: h,
+		render: p,
+		props: {
+			...m,
+			"data-slot": "two-column-layout",
+			className: e("two-column-layout--component grid min-w-0 grid-cols-1 gap-space-2xl", u === "container" ? "@3xl:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]" : "lg:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]", f),
+			children: /* @__PURE__ */ a(r, { children: [
+				t == null ? null : /* @__PURE__ */ i("div", {
+					..._,
+					"data-slot": "two-column-layout-header",
+					className: e("two-column-layout--header col-span-full min-w-0", g),
+					children: t
+				}),
+				/* @__PURE__ */ i("div", {
+					...y,
+					"data-slot": "two-column-layout-main",
+					className: e("two-column-layout--main min-h-0 min-w-0", v),
+					children: n
+				}),
+				/* @__PURE__ */ i("aside", {
+					...x,
+					"data-slot": "two-column-layout-aside",
+					className: e("two-column-layout--aside min-h-0 min-w-0", l && (u === "container" ? "@3xl:sticky @3xl:top-space-2xl @3xl:self-start" : "lg:sticky lg:top-space-2xl lg:self-start"), b),
+					children: s
+				}),
+				c == null ? null : /* @__PURE__ */ i("div", {
+					...C,
+					"data-slot": "two-column-layout-footer",
+					className: e("two-column-layout--footer col-span-full min-w-0", S),
+					children: c
+				})
+			] })
+		},
+		state: {}
+	});
+});
+p.displayName = "TwoColumnLayout";
+//#endregion
+export { u as i, f as n, d as r, p as t };
+
+//# sourceMappingURL=containers-6s-ucRQQ.js.map

package/dist/containers-6s-ucRQQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers-6s-ucRQQ.js","names":["_Fragment","cn","stackRecipe","Fragment$1","maxWidthClasses","gutterClasses","containerRecipe","maxWidth","gutter","Container","forwardRef","props","useRender","className","PageViewport","Section","gap","TwoColumnLayout","headerClassName","headerProps","slotProps","mainClassName","mainProps","asideClassName","asideProps","footerClassName","footerProps","adaptTo","header","main","stickyAside","aside","footer"],"sources":["../src/components/layout/containers/container.recipes.ts","../src/components/layout/containers/content-container.tsx","../src/components/layout/containers/page-viewport.tsx","../src/components/layout/containers/section.tsx","../src/components/layout/containers/two-column-layout.tsx"],"sourcesContent":["import type { ContainerGutter, ContainerMaxWidth } from './containers.types';\n\nconst maxWidthClasses: Record<ContainerMaxWidth, string> = {\n\tsm: 'max-w-content-sm',\n\tmd: 'max-w-content-md',\n\tlg: 'max-w-content-lg',\n\txl: 'max-w-content-xl',\n\t'2xl': 'max-w-content-2xl',\n\tfull: 'max-w-none',\n};\n\nconst gutterClasses: Record<ContainerGutter, string> = {\n\tnone: 'px-0',\n\tsm: 'px-surface-xs',\n\tmd: 'px-surface',\n\tlg: 'px-surface-lg',\n};\n\nexport function containerRecipe({\n\tmaxWidth = 'xl',\n\tgutter = 'md',\n}: {\n\tmaxWidth?: ContainerMaxWidth;\n\tgutter?: ContainerGutter;\n}): string[] {\n\treturn ['box-border', 'mx-auto', 'w-full', maxWidthClasses[maxWidth], gutterClasses[gutter]];\n}\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nimport { containerRecipe } from './container.recipes';\nimport type { ContainerProps } from './containers.types';\n\n/** Container — one centered content-width and inline-gutter owner. */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n\t{ className, maxWidth, gutter, render, ...props },\n\tref,\n) {\n\treturn useRender({\n\t\tdefaultTagName: 'div',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tclassName: cn('container--component @container/content', containerRecipe({ maxWidth, gutter }), className),\n\t\t},\n\t\tstate: {},\n\t});\n});\n\nContainer.displayName = 'Container';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nimport type { PageViewportProps } from './containers.types';\n\n/** PageViewport — the single page-scroll and page-container-query owner. */\nexport const PageViewport = forwardRef<HTMLDivElement, PageViewportProps>(function PageViewport(\n\t{ className, render, tabIndex = 0, ...props },\n\tref,\n) {\n\treturn useRender({\n\t\tdefaultTagName: 'div',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\ttabIndex,\n\t\t\tclassName: cn(\n\t\t\t\t'page-viewport--component min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain [scrollbar-gutter:stable] @container/page focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-inset',\n\t\t\t\tclassName,\n\t\t\t),\n\t\t},\n\t\tstate: {},\n\t});\n});\n\nPageViewport.displayName = 'PageViewport';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\n\nimport { stackRecipe } from '../../base/structure/structure.recipes';\nimport { cn } from '../../../lib/utils';\n\nimport type { SectionProps } from './containers.types';\n\n/** Section — a semantic vertical-rhythm owner for page content groups. */\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n\t{ className, gap, render, ...props },\n\tref,\n) {\n\treturn useRender({\n\t\tdefaultTagName: 'section',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tclassName: cn('section--component', stackRecipe({ gap: gap ?? 'xl' }), className),\n\t\t},\n\t\tstate: {},\n\t});\n});\n\nSection.displayName = 'Section';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport type { LayoutSlotAttributes } from '../layout.types';\n\nexport interface TwoColumnLayoutSlotProps {\n\theader?: LayoutSlotAttributes<HTMLDivElement>;\n\tmain?: LayoutSlotAttributes<HTMLDivElement>;\n\taside?: LayoutSlotAttributes<HTMLElement>;\n\tfooter?: LayoutSlotAttributes<HTMLDivElement>;\n}\n\nexport interface TwoColumnLayoutProps extends useRender.ComponentProps<'div'> {\n\t/** Optional content spanning both columns before the work regions. */\n\theader?: ReactNode;\n\t/** Primary detail, form, or index content. */\n\tmain: ReactNode;\n\t/** Secondary summary, support, or action rail. */\n\taside: ReactNode;\n\t/** Optional content spanning both columns after the work regions. */\n\tfooter?: ReactNode;\n\t/** Keep the aside visible while the nearest page viewport scrolls. */\n\tstickyAside?: boolean;\n\t/** Preserve viewport breakpoints by default, or adapt inside Container/PageViewport. */\n\tadaptTo?: 'viewport' | 'container';\n\t/** Native attributes for each stable region. */\n\tslotProps?: TwoColumnLayoutSlotProps;\n}\n\n/** TwoColumnLayout — one truthful, stable-order main/aside grid. */\nexport const TwoColumnLayout = forwardRef<HTMLDivElement, TwoColumnLayoutProps>(\n\tfunction TwoColumnLayout(\n\t\t{\n\t\t\theader,\n\t\t\tmain,\n\t\t\taside,\n\t\t\tfooter,\n\t\t\tstickyAside = false,\n\t\t\tadaptTo = 'viewport',\n\t\t\tslotProps,\n\t\t\tclassName,\n\t\t\trender,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst { className: headerClassName, ...headerProps } = slotProps?.header ?? {};\n\t\tconst { className: mainClassName, ...mainProps } = slotProps?.main ?? {};\n\t\tconst { className: asideClassName, ...asideProps } = slotProps?.aside ?? {};\n\t\tconst { className: footerClassName, ...footerProps } = slotProps?.footer ?? {};\n\n\t\treturn useRender({\n\t\t\tdefaultTagName: 'div',\n\t\t\tref,\n\t\t\trender,\n\t\t\tprops: {\n\t\t\t\t...props,\n\t\t\t\t'data-slot': 'two-column-layout',\n\t\t\t\tclassName: cn(\n\t\t\t\t\t'two-column-layout--component grid min-w-0 grid-cols-1 gap-space-2xl',\n\t\t\t\t\tadaptTo === 'container' ? '@3xl:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]' : 'lg:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]',\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t\tchildren: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{header !== undefined && header !== null ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t{...headerProps}\n\t\t\t\t\t\t\t\tdata-slot=\"two-column-layout-header\"\n\t\t\t\t\t\t\t\tclassName={cn('two-column-layout--header col-span-full min-w-0', headerClassName)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t{...mainProps}\n\t\t\t\t\t\t\tdata-slot=\"two-column-layout-main\"\n\t\t\t\t\t\t\tclassName={cn('two-column-layout--main min-h-0 min-w-0', mainClassName)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{main}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<aside\n\t\t\t\t\t\t\t{...asideProps}\n\t\t\t\t\t\t\tdata-slot=\"two-column-layout-aside\"\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'two-column-layout--aside min-h-0 min-w-0',\n\t\t\t\t\t\t\t\tstickyAside && (adaptTo === 'container' ? '@3xl:sticky @3xl:top-space-2xl @3xl:self-start' : 'lg:sticky lg:top-space-2xl lg:self-start'),\n\t\t\t\t\t\t\t\tasideClassName,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{aside}\n\t\t\t\t\t\t</aside>\n\t\t\t\t\t\t{footer !== undefined && footer !== null ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t{...footerProps}\n\t\t\t\t\t\t\t\tdata-slot=\"two-column-layout-footer\"\n\t\t\t\t\t\t\t\tclassName={cn('two-column-layout--footer col-span-full min-w-0', footerClassName)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{footer}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t},\n\t\t\tstate: {},\n\t\t});\n\t},\n);\n\nTwoColumnLayout.displayName = 'TwoColumnLayout';\n"],"mappings":";;;;;;;AAEA,IAAMI,IAAqD;CAC1D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;AACP,GAEMC,IAAiD;CACtD,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACL;AAEA,SAAgBC,EAAgB,EAC/B,cAAW,MACX,YAAS,QAIG;CACZ,OAAO;EAAC;EAAc;EAAW;EAAUF,EAAgBG;EAAWF,EAAcG;CAAO;AAC5F;;;ACjBA,IAAaC,IAAYC,EAA2C,SACnE,EAAE,cAAW,aAAU,WAAQ,WAAQ,GAAGC,KAC1C,GACC;CACD,OAAOC,EAAU;EAChB,gBAAgB;EAChB;EACA;EACA,OAAO;GACN,GAAGD;GACH,WAAWV,EAAG,2CAA2CK,EAAgB;IAAE;IAAU;GAAO,CAAC,GAAGO,CAAS;EAC1G;EACA,OAAO,CAAC;CACT,CAAC;AACF,CAAC;AAED,EAAU,cAAc;;;ACjBxB,IAAaC,IAAeJ,EAA8C,SACzE,EAAE,cAAW,WAAQ,cAAW,GAAG,GAAGC,KACtC,GACC;CACD,OAAOC,EAAU;EAChB,gBAAgB;EAChB;EACA;EACA,OAAO;GACN,GAAGD;GACH;GACA,WAAWV,EACV,kOACAY,CACD;EACD;EACA,OAAO,CAAC;CACT,CAAC;AACF,CAAC;AAED,EAAa,cAAc;;;ACnB3B,IAAaE,IAAUL,EAAsC,SAC5D,EAAE,cAAW,QAAK,WAAQ,GAAGC,KAC7B,GACC;CACD,OAAOC,EAAU;EAChB,gBAAgB;EAChB;EACA;EACA,OAAO;GACN,GAAGD;GACH,WAAWV,EAAG,sBAAsBC,EAAY,EAAE,KAAKc,KAAO,KAAK,CAAC,GAAGH,CAAS;EACjF;EACA,OAAO,CAAC;CACT,CAAC;AACF,CAAC;AAED,EAAQ,cAAc;;;ACOtB,IAAaI,IAAkBP,EAC9B,SACC,EACC,WACA,SACA,UACA,WACA,iBAAc,IACd,aAAU,YACV,cACA,cACA,WACA,GAAGC,KAEJ,GACC;CACD,IAAM,EAAE,WAAWO,GAAiB,GAAGC,MAAgBC,GAAW,UAAU,CAAC,GACvE,EAAE,WAAWC,GAAe,GAAGC,MAAcF,GAAW,QAAQ,CAAC,GACjE,EAAE,WAAWG,GAAgB,GAAGC,MAAeJ,GAAW,SAAS,CAAC,GACpE,EAAE,WAAWK,GAAiB,GAAGC,MAAgBN,GAAW,UAAU,CAAC;CAE7E,OAAOR,EAAU;EAChB,gBAAgB;EAChB;EACA;EACA,OAAO;GACN,GAAGD;GACH,aAAa;GACb,WAAWV,EACV,uEACA0B,MAAY,cAAc,qDAAqD,kDAC/Ed,CACD;GACA,UACC,kBAAAb,GAAA,EAAA,UAAA;IACE4B,KAAmC,OAQhC,OAPH,kBAAC,OAAD;KACC,GAAIT;KACJ,aAAU;KACV,WAAWlB,EAAG,mDAAmDiB,CAAe;KAE/E,UAAAU;IACG,CAAA;IAEN,kBAAC,OAAD;KACC,GAAIN;KACJ,aAAU;KACV,WAAWrB,EAAG,2CAA2CoB,CAAa;KAErE,UAAAQ;IACG,CAAA;IACL,kBAAC,SAAD;KACC,GAAIL;KACJ,aAAU;KACV,WAAWvB,EACV,4CACA6B,MAAgBH,MAAY,cAAc,mDAAmD,6CAC7FJ,CACD;KAEC,UAAAQ;IACK,CAAA;IACNC,KAAmC,OAQhC,OAPH,kBAAC,OAAD;KACC,GAAIN;KACJ,aAAU;KACV,WAAWzB,EAAG,mDAAmDwB,CAAe;KAE/E,UAAAO;IACG,CAAA;GAEL,EAAA,CAAA;EAEJ;EACA,OAAO,CAAC;CACT,CAAC;AACF,CACD;AAEA,EAAgB,cAAc"}

package/dist/content-typography-CnwgMJ37.js

@@ -0,0 +1,6 @@
+//#region src/components/typography/content-typography.ts
+var e = "themelia-content", t = `${e} font-sans text-sm leading-relaxed text-foreground px-control py-control-y-offset focus-visible:outline-none`;
+//#endregion
+export { t as n, e as t };
+
+//# sourceMappingURL=content-typography-CnwgMJ37.js.map

package/dist/content-typography-CnwgMJ37.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-typography-CnwgMJ37.js","names":["contentTypographyClassName","editableContentClassName"],"sources":["../src/components/typography/content-typography.ts"],"sourcesContent":["/** Owned content rhythm; UI text roles remain free of surrounding spacing. */\nexport const contentTypographyClassName = 'themelia-content';\n\n/** Editable content shares the control inset and readable native text recipe. */\nexport const editableContentClassName = `${contentTypographyClassName} font-sans text-sm leading-relaxed text-foreground px-control py-control-y-offset focus-visible:outline-none`;\n"],"mappings":";AACA,IAAaA,IAA6B,oBAG7BC,IAA2B,GAAGD,EAA2B"}

package/dist/copyable-B7SBXJMr.js

@@ -0,0 +1,65 @@
+"use client";
+import { useStrings as e } from "./lib/strings.js";
+import { t } from "./utils-C2EKeIw3.js";
+import { n } from "./buttons-Co6GavvM.js";
+import { a as r } from "./typography-Cv8MT-82.js";
+import { forwardRef as i, useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Check as l, Copy as u } from "lucide-react";
+import { toast as d } from "sonner";
+//#region src/components/base/copyable/copyable.tsx
+var f = {
+	copyLabel: "Copy value",
+	copiedLabel: "Copied",
+	success: "Copied to clipboard",
+	error: "Failed to copy"
+}, p = i(function({ value: i, displayValue: p, mono: m = !1, truncate: h = !1, className: g, contentClassName: _, buttonProps: v, strings: y, onCopy: b, onError: x, ...S }, C) {
+	let w = e(f, y), [T, E] = o(!1);
+	a(() => {
+		if (!T) return;
+		let e = window.setTimeout(() => E(!1), 2e3);
+		return () => window.clearTimeout(e);
+	}, [T]);
+	let D = async () => {
+		try {
+			await navigator.clipboard.writeText(i), E(!0), d.success(w.success), b?.(i);
+		} catch (e) {
+			d.error(w.error), x?.(e);
+		}
+	}, O = p !== void 0 && typeof p != "string" && typeof p != "number" && typeof p != "bigint", { className: k, "aria-label": A, ...j } = v ?? {};
+	return /* @__PURE__ */ c("span", {
+		ref: C,
+		className: t("copyable--component group inline-flex min-w-0 items-center gap-space-sm", h && "max-w-full", g),
+		...S,
+		children: [/* @__PURE__ */ s("span", {
+			className: "copyable--content min-w-0 text-link-color",
+			children: O ? p : /* @__PURE__ */ s(r, {
+				tag: "span",
+				className: t(m && "font-mono", h && "block truncate", "text-link-color", _),
+				children: p ?? i
+			})
+		}), /* @__PURE__ */ s(n, {
+			...j,
+			type: "button",
+			size: "sm",
+			iconOnly: !0,
+			tone: "secondary",
+			buttonStyle: "ghost",
+			"aria-label": A ?? (T ? w.copiedLabel : w.copyLabel),
+			onClick: () => void D(),
+			className: t("copyable--trigger shrink-0 text-link-color opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100", k),
+			children: T ? /* @__PURE__ */ s(l, {
+				className: "size-icon-sm text-success",
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ s(u, {
+				className: "size-icon-sm",
+				"aria-hidden": "true"
+			})
+		})]
+	});
+});
+p.displayName = "Copyable";
+//#endregion
+export { f as n, p as t };
+
+//# sourceMappingURL=copyable-B7SBXJMr.js.map

package/dist/copyable-B7SBXJMr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyable-B7SBXJMr.js","names":["Text","defaultCopyableStrings","Copyable","forwardRef","stringsProp","props","strings","useStrings","copied","setCopied","useState","timeout","handleCopy","value","toast","onCopy","error","onError","hasRichDisplayValue","displayValue","buttonClassName","buttonAriaLabel","copyButtonProps","buttonProps","cn","truncate","className","mono","contentClassName","Button","Check","Copy"],"sources":["../src/components/base/copyable/copyable.tsx"],"sourcesContent":["import { Check, Copy } from 'lucide-react';\nimport {\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n\ttype ComponentPropsWithoutRef,\n\ttype ReactNode,\n} from 'react';\n\nimport { toast } from 'sonner';\n\nimport { Button, type ButtonActionProps } from '../buttons';\nimport { Text } from '../../typography';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nexport interface CopyableStrings {\n\tcopyLabel: string;\n\tcopiedLabel: string;\n\tsuccess: string;\n\terror: string;\n}\n\nexport const defaultCopyableStrings: CopyableStrings = {\n\tcopyLabel: 'Copy value',\n\tcopiedLabel: 'Copied',\n\tsuccess: 'Copied to clipboard',\n\terror: 'Failed to copy',\n};\n\nexport interface CopyableProps extends Omit<\n\tComponentPropsWithoutRef<'span'>,\n\t'children' | 'onCopy' | 'onError'\n> {\n\t/** Value written to the clipboard. */\n\tvalue: string;\n\t/** Optional display content when it differs from the copied value. */\n\tdisplayValue?: ReactNode;\n\t/** Use monospace typography for scalar display content. */\n\tmono?: boolean;\n\t/** Truncate scalar display content with an ellipsis at the width the caller allots. */\n\ttruncate?: boolean;\n\t/** Classes for the scalar display-content wrapper. */\n\tcontentClassName?: string;\n\t/** Classes and native action props for the dedicated copy button. */\n\tbuttonProps?: Omit<ButtonActionProps, 'children' | 'onClick' | 'type'>;\n\t/** Localizable copy affordance and toast copy. */\n\tstrings?: StringsProp<CopyableStrings>;\n\t/** Called after the Clipboard API successfully writes the value. */\n\tonCopy?: (value: string) => void;\n\t/** Called when the Clipboard API rejects the write. */\n\tonError?: (error: unknown) => void;\n}\n\n/**\n * Copyable keeps display content passive and renders a sibling copy button.\n * This permits rich display nodes such as Email or Url without nesting one\n * interactive element inside another.\n */\nexport const Copyable = forwardRef<HTMLSpanElement, CopyableProps>(function Copyable({\n\tvalue,\n\tdisplayValue,\n\tmono = false,\n\ttruncate = false,\n\tclassName,\n\tcontentClassName,\n\tbuttonProps,\n\tstrings: stringsProp,\n\tonCopy,\n\tonError,\n\t...props\n}, ref) {\n\tconst strings = useStrings(defaultCopyableStrings, stringsProp);\n\tconst [copied, setCopied] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!copied) return;\n\t\tconst timeout = window.setTimeout(() => setCopied(false), 2000);\n\t\treturn () => window.clearTimeout(timeout);\n\t}, [copied]);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(value);\n\t\t\tsetCopied(true);\n\t\t\ttoast.success(strings.success);\n\t\t\tonCopy?.(value);\n\t\t} catch (error) {\n\t\t\ttoast.error(strings.error);\n\t\t\tonError?.(error);\n\t\t}\n\t};\n\n\tconst isSimpleText =\n\t\ttypeof displayValue === 'string' ||\n\t\ttypeof displayValue === 'number' ||\n\t\ttypeof displayValue === 'bigint';\n\tconst hasRichDisplayValue = displayValue !== undefined && !isSimpleText;\n\tconst {\n\t\tclassName: buttonClassName,\n\t\t'aria-label': buttonAriaLabel,\n\t\t...copyButtonProps\n\t} = buttonProps ?? {};\n\n\treturn (\n\t\t<span\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t'copyable--component group inline-flex min-w-0 items-center gap-space-sm',\n\t\t\t\t// An inline-flex root sizes to its content, so without this it grew\n\t\t\t\t// past the width the caller allotted and took the copy button out of\n\t\t\t\t// view with it. Capping the root is what gives the content something\n\t\t\t\t// to truncate against; `block` on the value below is the other half.\n\t\t\t\ttruncate && 'max-w-full',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"copyable--content min-w-0 text-link-color\">\n\t\t\t\t{hasRichDisplayValue ? (\n\t\t\t\t\tdisplayValue\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tmono && 'font-mono',\n\t\t\t\t\t\t\t// `block` is load-bearing: Text renders a <span>, and overflow\n\t\t\t\t\t\t\t// and max-width do not apply to a non-replaced inline box, so\n\t\t\t\t\t\t\t// `truncate` alone set only white-space and the value ran past\n\t\t\t\t\t\t\t// its container with no ellipsis. Truncating against the width\n\t\t\t\t\t\t\t// the caller allots also retires a hardcoded max-w-[300px],\n\t\t\t\t\t\t\t// which no consumer token could reach.\n\t\t\t\t\t\t\ttruncate && 'block truncate',\n\t\t\t\t\t\t\t'text-link-color',\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{displayValue ?? value}\n\t\t\t\t\t</Text>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t\t<Button\n\t\t\t\t{...copyButtonProps}\n\t\t\t\ttype=\"button\"\n\t\t\t\tsize=\"sm\" iconOnly\n\t\t\t\ttone=\"secondary\"\n\t\t\t\tbuttonStyle=\"ghost\"\n\t\t\t\taria-label={buttonAriaLabel ?? (copied ? strings.copiedLabel : strings.copyLabel)}\n\t\t\t\tonClick={() => void handleCopy()}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'copyable--trigger shrink-0 text-link-color opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100',\n\t\t\t\t\tbuttonClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{copied ? (\n\t\t\t\t\t<Check className=\"size-icon-sm text-success\" aria-hidden=\"true\" />\n\t\t\t\t) : (\n\t\t\t\t\t<Copy className=\"size-icon-sm\" aria-hidden=\"true\" />\n\t\t\t\t)}\n\t\t\t</Button>\n\t\t</span>\n\t);\n});\n\nCopyable.displayName = 'Copyable';\n"],"mappings":";;;;;;;;;;AAuBA,IAAaC,IAA0C;CACtD,WAAW;CACX,aAAa;CACb,SAAS;CACT,OAAO;AACR,GA+BaC,IAAWC,EAA2C,SAAkB,EACpF,UACA,iBACA,UAAO,IACP,cAAW,IACX,cACA,qBACA,gBACA,SAASC,GACT,WACA,YACA,GAAGC,KACD,GAAK;CACP,IAAMC,IAAUC,EAAWN,GAAwBG,CAAW,GACxD,CAACI,GAAQC,KAAaC,EAAS,EAAK;CAE1C,QAAgB;EACf,IAAI,CAACF,GAAQ;EACb,IAAMG,IAAU,OAAO,iBAAiBF,EAAU,EAAK,GAAG,GAAI;EAC9D,aAAa,OAAO,aAAaE,CAAO;CACzC,GAAG,CAACH,CAAM,CAAC;CAEX,IAAMI,IAAa,YAAY;EAC9B,IAAI;GAIH,AAHA,MAAM,UAAU,UAAU,UAAUC,CAAK,GACzCJ,EAAU,EAAI,GACdK,EAAM,QAAQR,EAAQ,OAAO,GAC7BS,IAASF,CAAK;EACf,SAASG,GAAO;GAEf,AADAF,EAAM,MAAMR,EAAQ,KAAK,GACzBW,IAAUD,CAAK;EAChB;CACD,GAMME,IAAsBC,MAAiB,KAAA,KAH5C,OAAOA,KAAiB,YACxB,OAAOA,KAAiB,YACxB,OAAOA,KAAiB,UAEnB,EACL,WAAWC,GACX,cAAcC,GACd,GAAGC,MACAC,KAAe,CAAC;CAEpB,OACC,kBAAC,QAAD;EACM;EACL,WAAWC,EACV,2EAKAC,KAAY,cACZC,CACD;EACA,GAAIrB;EAXL,UAAA,CAaC,kBAAC,QAAD;GAAM,WAAU;GACd,UAAAa,IACAC,IAEA,kBAACnB,GAAD;IACC,KAAI;IACJ,WAAWwB,EACVG,KAAQ,aAORF,KAAY,kBACZ,mBACAG,CACD;IAEC,UAAAT,KAAgBN;GACZ,CAAA;EAEF,CAAA,GACN,kBAACgB,GAAD;GACC,GAAIP;GACJ,MAAK;GACL,MAAK;GAAK,UAAA;GACV,MAAK;GACL,aAAY;GACZ,cAAYD,MAAoBb,IAASF,EAAQ,cAAcA,EAAQ;GACvE,eAAe,KAAKM,EAAW;GAC/B,WAAWY,EACV,wHACAJ,CACD;GAEC,UAAAZ,IACA,kBAACsB,GAAD;IAAO,WAAU;IAA4B,eAAY;GAAQ,CAAA,IAEjE,kBAACC,GAAD;IAAM,WAAU;IAAe,eAAY;GAAQ,CAAA;EAE7C,CAAA,CACH;;AAER,CAAC;AAED,EAAS,cAAc"}