@acronis-platform/ui-react 5.4.4 → 5.5.0

package/dist/components/ui/dialog/dialog.js

@@ -1,116 +1,118 @@
 import { cn as e } from "../../../lib/utils.js";
 import { usePortalContainer as t } from "../../../lib/portal-container.js";
 import { cva as n } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { Button as r } from "../button/button.js";
-import { DialogFooterDefault as i } from "../dialog-footer-default/dialog-footer-default.js";
-import { InputText as a } from "../input-text/input-text.js";
-import { Loading as o } from "../loading/loading.js";
-import * as s from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { TimesIcon as d } from "@acronis-platform/icons-react/stroke-mono";
-import { Dialog as f } from "@base-ui/react/dialog";
+import { ButtonIcon as r } from "../button-icon/button-icon.js";
+import { Button as i } from "../button/button.js";
+import { DialogFooterDefault as a } from "../dialog-footer-default/dialog-footer-default.js";
+import { InputText as o } from "../input-text/input-text.js";
+import { Loading as s } from "../loading/loading.js";
+import * as c from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { TimesIcon as f } from "@acronis-platform/icons-react/stroke-mono";
+import { Dialog as p } from "@base-ui/react/dialog";
 //#region src/components/ui/dialog/dialog.tsx
-var p = n("fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95", {
+var m = n("fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95", {
 	variants: { size: {
 		sm: "max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]",
 		large: "max-w-[min(832px,calc(100dvw-96px))]"
 	} },
 	defaultVariants: { size: "sm" }
-}), m = f.Root;
-f.Trigger, f.Portal;
-var h = f.Close, g = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l(f.Backdrop, {
+}), h = p.Root;
+p.Trigger, p.Portal;
+var g = p.Close, _ = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u(p.Backdrop, {
 	ref: r,
 	className: e("fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0", t),
 	...n
 }));
-g.displayName = "DialogOverlay";
-var _ = s.forwardRef(({ className: n, children: r, size: i, portal: a = !0, portalContainer: o, keepMounted: s, ...d }, m) => {
-	let h = t(), _ = o ?? h, v = /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(g, {}), /* @__PURE__ */ l(f.Popup, {
-		ref: m,
-		className: e(p({ size: i }), n),
-		...d,
+_.displayName = "DialogOverlay";
+var v = c.forwardRef(({ className: n, children: r, size: i, portal: a = !0, portalContainer: o, keepMounted: s, ...c }, f) => {
+	let h = t(), g = o ?? h, v = /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(_, {}), /* @__PURE__ */ u(p.Popup, {
+		ref: f,
+		className: e(m({ size: i }), n),
+		...c,
 		children: r
 	})] });
-	return a ? /* @__PURE__ */ l(f.Portal, {
-		container: _,
+	return a ? /* @__PURE__ */ u(p.Portal, {
+		container: g,
 		keepMounted: s,
 		children: v
 	}) : v;
 });
-_.displayName = "DialogContent";
-var v = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+v.displayName = "DialogContent";
+var y = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u("div", {
 	ref: r,
 	className: e("flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4", t),
 	...n
 }));
-v.displayName = "DialogHeaderRoot";
-var y = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+y.displayName = "DialogHeaderRoot";
+var b = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u("div", {
 	ref: r,
 	className: e("flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4", t),
 	...n
 }));
-y.displayName = "DialogFooterRoot";
-var b = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+b.displayName = "DialogFooterRoot";
+var x = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u("div", {
 	ref: r,
 	className: e("flex-1 overflow-auto p-6", t),
 	...n
 }));
-b.displayName = "DialogBodyRoot";
-var x = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l(f.Title, {
+x.displayName = "DialogBodyRoot";
+var S = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u(p.Title, {
 	ref: r,
 	className: e("flex-1 text-2xl font-normal leading-8 text-foreground", t),
 	...n
 }));
-x.displayName = "DialogTitle";
-var S = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l(f.Description, {
+S.displayName = "DialogTitle";
+var C = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u(p.Description, {
 	ref: r,
 	className: e("text-sm text-muted-foreground", t),
 	...n
 }));
-S.displayName = "DialogDescription";
-var C = s.forwardRef(({ className: t, closeLabel: n = "Close", ...r }, i) => /* @__PURE__ */ u(f.Close, {
+C.displayName = "DialogDescription";
+var w = c.forwardRef(({ className: e, closeLabel: t = "Close", ...n }, i) => /* @__PURE__ */ d(p.Close, {
 	ref: i,
-	className: e("cursor-pointer rounded p-1 text-[var(--ui-button-icon-global-icon-color-idle)] transition-colors hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:cursor-default disabled:text-[var(--ui-button-icon-global-icon-color-disabled)]", t),
-	...r,
-	children: [/* @__PURE__ */ l(d, { size: 24 }), /* @__PURE__ */ l("span", {
+	render: /* @__PURE__ */ u(r, { variant: "ghost" }),
+	className: e,
+	...n,
+	children: [/* @__PURE__ */ u(f, {}), /* @__PURE__ */ u("span", {
 		className: "sr-only",
-		children: n
+		children: t
 	})]
 }));
-C.displayName = "DialogCloseButton";
-function w({ title: e, closeLabel: t }) {
-	return /* @__PURE__ */ u("div", {
+w.displayName = "DialogCloseButton";
+function T({ title: e, closeLabel: t }) {
+	return /* @__PURE__ */ d("div", {
 		className: "flex h-[var(--ui-dialog-header-height)] shrink-0 items-center gap-[var(--ui-dialog-header-gap)] border-b-[length:var(--ui-dialog-header-border-width)] border-[var(--ui-dialog-header-border-color)] bg-[var(--ui-dialog-header-color)] px-[var(--ui-dialog-header-padding-x)]",
-		children: [/* @__PURE__ */ l(x, { children: e }), /* @__PURE__ */ l(C, { closeLabel: t })]
+		children: [/* @__PURE__ */ u(S, { children: e }), /* @__PURE__ */ u(w, { closeLabel: t })]
 	});
 }
-function T({ children: e, inert: t }) {
-	return /* @__PURE__ */ l("div", {
+function E({ children: e, inert: t }) {
+	return /* @__PURE__ */ u("div", {
 		inert: t,
 		className: "flex min-h-[var(--ui-dialog-body-height-min)] flex-col justify-center-safe gap-[var(--ui-dialog-body-gap)] overflow-y-auto px-4 py-[var(--ui-dialog-body-padding-y)]",
-		children: typeof e == "string" ? /* @__PURE__ */ l("p", {
+		children: typeof e == "string" ? /* @__PURE__ */ u("p", {
 			className: "text-sm leading-6 text-foreground",
 			children: e
 		}) : e
 	});
 }
-function E({ secondaryLabel: e, primaryLabel: t, primaryVariant: n, primaryCloses: i, onPrimaryAction: a }) {
-	return /* @__PURE__ */ u(c, { children: [e && /* @__PURE__ */ l(h, { render: /* @__PURE__ */ l(r, {
+function D({ secondaryLabel: e, primaryLabel: t, primaryVariant: n, primaryCloses: r, onPrimaryAction: a }) {
+	return /* @__PURE__ */ d(l, { children: [e && /* @__PURE__ */ u(g, { render: /* @__PURE__ */ u(i, {
 		variant: "secondary",
 		children: e
-	}) }), i ? /* @__PURE__ */ l(h, {
+	}) }), r ? /* @__PURE__ */ u(g, {
 		onClick: a,
-		render: /* @__PURE__ */ l(r, {
+		render: /* @__PURE__ */ u(i, {
 			variant: n,
 			children: t
 		})
-	}) : /* @__PURE__ */ l(r, {
+	}) : /* @__PURE__ */ u(i, {
 		variant: n,
 		onClick: a,
 		children: t
 	})] });
 }
-var D = {
+var O = {
 	default: {
 		title: "Dialog title",
 		body: "Drop any content into this slot.",
@@ -120,7 +122,7 @@ var D = {
 	},
 	rename: {
 		title: (e = "object name") => `Rename ${e}`,
-		body: (e = "Current name", t = "Object name") => /* @__PURE__ */ l(a, {
+		body: (e = "Current name", t = "Object name") => /* @__PURE__ */ u(o, {
 			"aria-label": t,
 			defaultValue: e
 		}),
@@ -144,12 +146,12 @@ var D = {
 	},
 	"discard changes": {
 		title: "Discard changes",
-		body: (e = "Object name") => /* @__PURE__ */ u("p", {
+		body: (e = "Object name") => /* @__PURE__ */ d("p", {
 			className: "text-sm leading-6 text-foreground",
 			children: [
 				"Are you sure you want to discard the unsaved changes to",
 				" ",
-				/* @__PURE__ */ l("strong", {
+				/* @__PURE__ */ u("strong", {
 					className: "font-semibold",
 					children: e
 				}),
@@ -181,52 +183,52 @@ var D = {
 		primaryLabel: "Confirm",
 		primaryVariant: "default"
 	}
-}, O = s.forwardRef(({ variant: t = "default", hasLoading: n = !1, loadingLabel: r, hasHeader: a = !0, hasFooter: s = !0, children: c, title: d, objectName: f, objectNameLabel: p, secondaryLabel: h, primaryLabel: g, onPrimaryAction: v, footer: y, closeLabel: b, size: S, portal: C, portalContainer: O, keepMounted: k, className: A, ...j }, M) => {
-	let N = D[t], P = typeof N.title == "function" ? N.title(f) : N.title, F = typeof N.body == "function" ? N.body(f, p) : N.body, I = c ?? F, L = d ?? P, R = h ?? N.secondaryLabel, z = g ?? N.primaryLabel, B = S ?? (t === "wide" ? "large" : "sm");
-	return /* @__PURE__ */ l(m, {
+}, k = c.forwardRef(({ variant: t = "default", hasLoading: n = !1, loadingLabel: r, hasHeader: i = !0, hasFooter: o = !0, children: c, title: l, objectName: f, objectNameLabel: p, secondaryLabel: m, primaryLabel: g, onPrimaryAction: _, footer: y, closeLabel: b, size: x, portal: C, portalContainer: w, keepMounted: k, className: A, ...j }, M) => {
+	let N = O[t], P = typeof N.title == "function" ? N.title(f) : N.title, F = typeof N.body == "function" ? N.body(f, p) : N.body, I = c ?? F, L = l ?? P, R = m ?? N.secondaryLabel, z = g ?? N.primaryLabel, B = x ?? (t === "wide" ? "large" : "sm");
+	return /* @__PURE__ */ u(h, {
 		...j,
-		children: /* @__PURE__ */ u(_, {
+		children: /* @__PURE__ */ d(v, {
 			ref: M,
 			size: B,
 			portal: C,
-			portalContainer: O,
+			portalContainer: w,
 			keepMounted: k,
 			className: A,
 			"aria-busy": n || void 0,
 			children: [
-				a ? /* @__PURE__ */ l(w, {
+				i ? /* @__PURE__ */ u(T, {
 					title: L,
 					closeLabel: b
-				}) : /* @__PURE__ */ l(x, {
+				}) : /* @__PURE__ */ u(S, {
 					className: "sr-only",
 					children: L
 				}),
-				/* @__PURE__ */ l(T, {
+				/* @__PURE__ */ u(E, {
 					inert: n,
 					children: I
 				}),
-				s && /* @__PURE__ */ l(i, {
+				o && /* @__PURE__ */ u(a, {
 					inert: n,
-					children: y ?? /* @__PURE__ */ l(E, {
+					children: y ?? /* @__PURE__ */ u(D, {
 						secondaryLabel: R,
 						primaryLabel: z,
 						primaryVariant: N.primaryVariant,
 						primaryCloses: N.primaryCloses,
-						onPrimaryAction: v
+						onPrimaryAction: _
 					})
 				}),
-				n && /* @__PURE__ */ l(o, {
+				n && /* @__PURE__ */ u(s, {
 					variant: "onSurfaceSecondary",
 					hasLabel: !1,
 					label: r,
-					className: e("absolute inset-x-0 bottom-0 rounded-none", a ? "top-[var(--ui-dialog-header-height)]" : "top-0")
+					className: e("absolute inset-x-0 bottom-0 rounded-none", i ? "top-[var(--ui-dialog-header-height)]" : "top-0")
 				})
 			]
 		})
 	});
 });
-O.displayName = "Dialog";
+k.displayName = "Dialog";
 //#endregion
-export { O as Dialog, b as DialogBodyRoot, h as DialogClose, C as DialogCloseButton, _ as DialogContent, S as DialogDescription, y as DialogFooterRoot, v as DialogHeaderRoot, g as DialogOverlay, m as DialogRoot, x as DialogTitle, p as dialogContentVariants };
+export { k as Dialog, x as DialogBodyRoot, g as DialogClose, w as DialogCloseButton, v as DialogContent, C as DialogDescription, b as DialogFooterRoot, y as DialogHeaderRoot, _ as DialogOverlay, h as DialogRoot, S as DialogTitle, m as dialogContentVariants };
 
 //# sourceMappingURL=dialog.js.map

package/dist/components/ui/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../../../src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\nimport { Button } from '../button';\nimport { DialogFooterDefault } from '../dialog-footer-default';\nimport { InputText } from '../input-text';\nimport { Loading } from '../loading';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `dialog`\n// (packages/ui-legacy/src/components/ui/dialog.tsx). A modal overlay built on\n// the Base UI Dialog primitive (keyboard, focus trap, scroll lock, ARIA come\n// from Base UI). A `--ui-dialog-*` / `--ui-button-icon-*` token tier covers the\n// container + close button (reconciled against the Figma \"DialogDefault\" node,\n// 6343:58898); the composable DialogRoot / DialogHeaderRoot / DialogFooterRoot\n// / DialogBodyRoot parts below are internal-only (no public export, no Figma\n// node of their own) and keep the prior semantic-token approach — not to be\n// confused with the recipe-local `DialogHeader`/`DialogBody` further down,\n// which back the public `Dialog` and are reconciled against Figma:\n//   • overlay  -> var(--ui-background-backdrop-screen)   (legacy `bg-black/80`)\n//   • popup    -> var(--ui-dialog-container-color) / var(--ui-dialog-container-border-radius)\n//   • header / footer -> bg-background = --ui-background-surface-primary (white\n//     bars over the muted body), divided by border-border\n//   • title    -> text-foreground / description -> text-muted-foreground\n//   • close    -> var(--ui-button-icon-global-icon-color-*) (idle/hover/active\n//     share one blue in the default brand), bg via\n//     var(--ui-button-icon-global-container-color-*), focus ring var(--ui-focus-primary)\n// Enter/exit animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes — overlay\n// fades, popup fades + zooms. `size` has two values: `sm` (512px, the Figma\n// default, backed by `--ui-dialog-container-size-sm`) and `large` (832px) — the\n// latter predates the Figma node and has no token; it's kept as a plain\n// arbitrary value solely for backward compatibility with existing call sites\n// that need a wider popup (see the `Large` story).\n//\n// Dialog's composable primitive parts (this file) are internal-only — not\n// re-exported from the package root — except `DialogClose`, which stays\n// public: it's required by the `wide` variant's documented custom-`footer`\n// escape hatch (see the `footer` prop and dialog.mdx). The public `Dialog`\n// component below is the sole sanctioned entry point; it's built on these\n// parts internally. (In Figma the matching component set is named\n// \"DialogDefault\"; the code-facing name stays `Dialog` — see dialog.figma.tsx.)\n\n// Figma's \"DialogWelcome\" frame (variant=carousel, node 6353:6164) wraps its\n// popup preview in a `p-[48px]` ancestor — the minimum margin the popup must\n// keep from the viewport edge on any screen size. `max-w`/`max-h` (not\n// padding, since the popup itself is centered via `fixed` + transform)\n// enforce it here so every consumer keeps that margin, not just the frame\n// that surfaced it.\nconst dialogContentVariants = cva(\n  'fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]',\n        large: 'max-w-[min(832px,calc(100dvw-96px))]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n);\n\nconst DialogRoot = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n      className\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n    VariantProps<typeof dialogContentVariants> {\n  /**\n   * Popup max-width. `sm` (512px, default) is the Figma-defined size; `large`\n   * (832px) is a backward-compatibility size with no design token (see the\n   * `Large` story).\n   */\n  size?: VariantProps<typeof dialogContentVariants>['size'];\n  /**\n   * Render the content inside a portal (default `true`). Base UI requires the\n   * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n   * (e.g. when the caller supplies its own `DialogPortal`, or in tests).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: DialogPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Popup>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      size,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    const popup = (\n      <>\n        <DialogOverlay />\n        <DialogPrimitive.Popup\n          ref={ref}\n          className={cn(dialogContentVariants({ size }), className)}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Popup>\n      </>\n    );\n\n    return portal ? (\n      <DialogPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {popup}\n      </DialogPrimitive.Portal>\n    ) : (\n      popup\n    );\n  }\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeaderRoot = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nDialogHeaderRoot.displayName = 'DialogHeaderRoot';\n\nconst DialogFooterRoot = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nDialogFooterRoot.displayName = 'DialogFooterRoot';\n\nconst DialogBodyRoot = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nDialogBodyRoot.displayName = 'DialogBodyRoot';\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'flex-1 text-2xl font-normal leading-8 text-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport interface DialogCloseButtonProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {\n  /** Accessible name for screen readers. Defaults to `'Close'`. */\n  closeLabel?: string;\n}\n\nconst DialogCloseButton = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  DialogCloseButtonProps\n>(({ className, closeLabel = 'Close', ...props }, ref) => (\n  <DialogPrimitive.Close\n    ref={ref}\n    className={cn(\n      'cursor-pointer rounded p-1 text-[var(--ui-button-icon-global-icon-color-idle)] transition-colors hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:cursor-default disabled:text-[var(--ui-button-icon-global-icon-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    <TimesIcon size={24} />\n    <span className=\"sr-only\">{closeLabel}</span>\n  </DialogPrimitive.Close>\n));\nDialogCloseButton.displayName = 'DialogCloseButton';\n\n// The recipe-specific header: title + close button, reconciled against the\n// Figma \"DialogHeader\" node (4220:3516) via the `--ui-dialog-header-*` tier.\n// Local to this file (not exported) — distinct from the generic, unstyled\n// `DialogHeaderRoot` composable primitive above.\ninterface DialogHeaderProps {\n  title: string;\n  closeLabel?: string;\n}\n\nfunction DialogHeader({ title, closeLabel }: DialogHeaderProps) {\n  return (\n    <div className=\"flex h-[var(--ui-dialog-header-height)] shrink-0 items-center gap-[var(--ui-dialog-header-gap)] border-b-[length:var(--ui-dialog-header-border-width)] border-[var(--ui-dialog-header-border-color)] bg-[var(--ui-dialog-header-color)] px-[var(--ui-dialog-header-padding-x)]\">\n      <DialogTitle>{title}</DialogTitle>\n      <DialogCloseButton closeLabel={closeLabel} />\n    </div>\n  );\n}\n\n// The recipe-specific body: the variant's canned copy (or the `children`\n// override), reconciled against the Figma DialogDefault node via the\n// `--ui-dialog-body-*` tier. Local to this file — distinct from the generic\n// `DialogBodyRoot` composable primitive above.\ninterface DialogBodyProps {\n  children: React.ReactNode;\n  /** Makes the body unfocusable/unclickable while the loading overlay is shown. */\n  inert?: boolean;\n}\n\nfunction DialogBody({ children, inert }: DialogBodyProps) {\n  return (\n    <div\n      inert={inert}\n      className=\"flex min-h-[var(--ui-dialog-body-height-min)] flex-col justify-center-safe gap-[var(--ui-dialog-body-gap)] overflow-y-auto px-4 py-[var(--ui-dialog-body-padding-y)]\"\n    >\n      {typeof children === 'string' ? (\n        <p className=\"text-sm leading-6 text-foreground\">{children}</p>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n\n// The recipe-specific footer actions: a secondary (dismiss) button plus a\n// primary action, the latter either closing the dialog itself (`read-only`'s\n// \"Done\") or firing `onPrimaryAction` and leaving the close to the caller.\n// Local to this file — distinct from the generic `DialogFooterRoot`.\ninterface DialogFooterActionsProps {\n  secondaryLabel?: string;\n  primaryLabel: string;\n  primaryVariant: 'default' | 'destructive';\n  primaryCloses?: boolean;\n  onPrimaryAction?: () => void;\n}\n\nfunction DialogFooterActions({\n  secondaryLabel,\n  primaryLabel,\n  primaryVariant,\n  primaryCloses,\n  onPrimaryAction,\n}: DialogFooterActionsProps) {\n  return (\n    <>\n      {secondaryLabel && (\n        <DialogClose render={<Button variant=\"secondary\">{secondaryLabel}</Button>} />\n      )}\n      {primaryCloses ? (\n        <DialogClose\n          onClick={onPrimaryAction}\n          render={<Button variant={primaryVariant}>{primaryLabel}</Button>}\n        />\n      ) : (\n        <Button variant={primaryVariant} onClick={onPrimaryAction}>\n          {primaryLabel}\n        </Button>\n      )}\n    </>\n  );\n}\n\n// A higher-level \"recipe\" built on top of the Dialog primitive parts above\n// (DialogRoot + DialogContent give the portal, backdrop, focus trap, scroll\n// lock and open state; DialogTitle wires the accessible name; DialogCloseButton\n// / DialogClose give the dismiss controls). It bakes in the seven Figma\n// \"DialogDefault\" use-cases (node 6343:58898) plus one legacy `wide` escape\n// hatch kept for backward compatibility: each `variant` picks a canned title,\n// body copy and footer buttons; `children` overrides only the body slot;\n// `title` overrides only the title; `footer` overrides only the footer's\n// action content (the free-form escape hatch `wide` relies on); `hasLoading`\n// drops a spinner overlay over the body + footer. `hasHeader`/`hasFooter`\n// (both default `true`) hide the header/footer chrome entirely — a\n// ui-react-only extension beyond the Figma DialogDefault contract, which\n// always shows both; the title stays rendered off-screen when the header is\n// hidden so the dialog keeps an accessible name.\n//\n// Colors resolve to shipped semantic tokens via the bridged Tailwind names the\n// Dialog family already uses (text-foreground, the backdrop + focus tokens\n// inside DialogContent / DialogCloseButton) and the Button / InputText token\n// tiers — nothing is hand-authored. The loading scrim renders `Loading`'s\n// `onSurfaceSecondary` variant (`--ui-loading-element-container-color-secondary`),\n// matching the design's translucent surface fill.\n//\n// Header + footer geometry/color resolve to the `--ui-dialog-header-*` /\n// `--ui-footer-*` tiers, reconciled against the DialogDefault Figma node.\n\nexport type DialogVariant =\n  | 'default'\n  | 'rename'\n  | 'save changes'\n  | 'reset password'\n  | 'discard changes'\n  | 'accept'\n  | 'read-only'\n  | 'wide';\n\ninterface DialogVariantContent {\n  /**\n   * The variant's canned title. A function receives `objectName` (falls back\n   * to its own placeholder default when omitted) for variants whose title\n   * embeds the acted-on object's name.\n   */\n  title: string | ((objectName?: string) => string);\n  /**\n   * Same `objectName` interpolation as `title`, for body copy/fields that\n   * embed it. The `rename` variant's field also receives `objectNameLabel`\n   * for its accessible name.\n   */\n  body:\n    | React.ReactNode\n    | ((objectName?: string, objectNameLabel?: string) => React.ReactNode);\n  /** Secondary (dismiss) button label. Omitted when the variant has none. */\n  secondaryLabel?: string;\n  primaryLabel: string;\n  primaryVariant: 'default' | 'destructive';\n  /** Whether the primary button dismisses the dialog (e.g. read-only \"Done\"). */\n  primaryCloses?: boolean;\n}\n\nconst DIALOG_VARIANT_CONTENT: Record<DialogVariant, DialogVariantContent> = {\n  default: {\n    title: 'Dialog title',\n    body: 'Drop any content into this slot.',\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Label',\n    primaryVariant: 'default',\n  },\n  rename: {\n    title: (objectName = 'object name') => `Rename ${objectName}`,\n    // `objectName` prefills the field with the real current name; the field's\n    // accessible name (`objectNameLabel`) is separate — it's the label, not the value.\n    body: (objectName = 'Current name', objectNameLabel = 'Object name') => (\n      <InputText aria-label={objectNameLabel} defaultValue={objectName} />\n    ),\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Rename',\n    primaryVariant: 'default',\n  },\n  'save changes': {\n    title: 'Save changes',\n    body: 'You have unsaved changes. Do you want to save them before leaving?',\n    secondaryLabel: 'Go back',\n    primaryLabel: 'Save',\n    primaryVariant: 'default',\n  },\n  'reset password': {\n    title: 'Reset password',\n    body: 'Further instructions will be sent to your email address.',\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Reset',\n    primaryVariant: 'default',\n  },\n  'discard changes': {\n    title: 'Discard changes',\n    body: (objectName = 'Object name') => (\n      <p className=\"text-sm leading-6 text-foreground\">\n        Are you sure you want to discard the unsaved changes to{' '}\n        <strong className=\"font-semibold\">{objectName}</strong>?\n      </p>\n    ),\n    secondaryLabel: 'Go back',\n    primaryLabel: 'Confirm',\n    primaryVariant: 'destructive',\n  },\n  accept: {\n    title: (objectName = 'object name') => `Accept ${objectName}`,\n    body: 'Click Accept to confirm that you have read, understood, and agree to the terms and conditions below.',\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Accept',\n    primaryVariant: 'default',\n  },\n  'read-only': {\n    title: 'License agreement',\n    body: 'This is a read-only dialog used to view legal documents such as the License Agreement, EULA updates, Terms of Service, and other legal documents.',\n    primaryLabel: 'Done',\n    primaryVariant: 'default',\n    primaryCloses: true,\n  },\n  // No Figma preset — a legacy, free-form escape hatch (see the `footer` prop\n  // and the `Large` story). This fallback title/body/footer only renders if\n  // the caller supplies neither `footer` nor `title`/`children` — every real\n  // `wide` call site overrides them.\n  wide: {\n    title: 'Dialog title',\n    body: 'Drop any content into this slot.',\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Confirm',\n    primaryVariant: 'default',\n  },\n};\n\ntype DialogRootProps = React.ComponentPropsWithoutRef<typeof DialogRoot>;\n\nexport interface DialogProps extends Omit<DialogRootProps, 'children'> {\n  /**\n   * Selects the canned title / body / footer preset. Defaults to `'default'`.\n   * `'wide'` is a legacy escape hatch (no canned preset) kept for backward\n   * compatibility — pair it with `size=\"large\"` and the `footer` prop.\n   */\n  variant?: DialogVariant;\n  /**\n   * Show a spinner overlay across the body + footer, and make both `inert`\n   * (unfocusable, unclickable, hidden from assistive tech) so a keyboard user\n   * can't activate the visually obscured footer buttons while busy.\n   */\n  hasLoading?: boolean;\n  /**\n   * Overrides the loading overlay's accessible label. Defaults to `Loading`'s\n   * own default (`'Data is loading…'`). Ignored when `hasLoading` is `false`.\n   */\n  loadingLabel?: string;\n  /**\n   * Show the header (title + close button). Defaults to `true`. When `false`,\n   * the title is still rendered off-screen so the dialog keeps an accessible\n   * name — only the visible bar and close button are omitted. Beyond the\n   * strict Figma contract (all seven `DialogDefault` variants always show the\n   * header); a ui-react-only extension, like `wide`/`size=\"large\"`.\n   */\n  hasHeader?: boolean;\n  /**\n   * Show the footer (action buttons). Defaults to `true`. Beyond the strict\n   * Figma contract (all seven `DialogDefault` variants always show the\n   * footer); a ui-react-only extension, like `wide`/`size=\"large\"`. When\n   * `false`, `footer` (and the canned footer it would otherwise replace) is\n   * not rendered either.\n   */\n  hasFooter?: boolean;\n  /** Overrides the variant's default body content. */\n  children?: React.ReactNode;\n  /** Overrides the variant's default title. */\n  title?: string;\n  /**\n   * The real name of the object being acted on (e.g. a file or resource\n   * name). Interpolated into the `rename`/`discard changes`/`accept`\n   * variants' canned title/body in place of the generic placeholder text;\n   * ignored by variants that don't reference an object name.\n   */\n  objectName?: string;\n  /**\n   * Overrides the accessible name of the `rename` variant's text field\n   * (default `'Object name'`). Ignored by every other variant.\n   */\n  objectNameLabel?: string;\n  /**\n   * Overrides the variant's default secondary (dismiss) button label. Passing\n   * this for a variant with no secondary button by default (e.g. `read-only`)\n   * also makes the button appear. Ignored when `footer` is provided.\n   */\n  secondaryLabel?: string;\n  /** Overrides the variant's default primary button label. Ignored when `footer` is provided. */\n  primaryLabel?: string;\n  /**\n   * Fires when the primary footer button is clicked. The dialog does not\n   * close automatically afterwards — pair this with `open`/`onOpenChange` to\n   * close it once the action completes. Ignored when `footer` is provided\n   * (wire behavior onto your own buttons there instead).\n   */\n  onPrimaryAction?: () => void;\n  /**\n   * Replaces the footer's action content entirely with free-form buttons —\n   * the escape hatch the `wide` variant is meant to be paired with, for\n   * legacy call sites that don't fit one of the seven canned presets. Ignored\n   * (along with the canned footer) when `hasFooter` is `false`.\n   */\n  footer?: React.ReactNode;\n  /** Overrides the close button's accessible name. Defaults to `'Close'`. */\n  closeLabel?: string;\n  /**\n   * Popup max-width (forwarded to `DialogContent`). Defaults to `'sm'`, or to\n   * `'large'` when `variant` is `'wide'`.\n   */\n  size?: DialogContentProps['size'];\n  /** Render inside a portal (forwarded to `DialogContent`). Defaults to `true`. */\n  portal?: boolean;\n  /** Portal container (forwarded to `DialogContent`). */\n  portalContainer?: DialogContentProps['portalContainer'];\n  /** Keep the content mounted while closed (forwarded to `DialogContent`). */\n  keepMounted?: DialogContentProps['keepMounted'];\n  /** Extra classes merged onto the popup container. */\n  className?: string;\n}\n\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>(\n  (\n    {\n      variant = 'default',\n      hasLoading = false,\n      loadingLabel,\n      hasHeader = true,\n      hasFooter = true,\n      children,\n      title,\n      objectName,\n      objectNameLabel,\n      secondaryLabel,\n      primaryLabel,\n      onPrimaryAction,\n      footer,\n      closeLabel,\n      size,\n      portal,\n      portalContainer,\n      keepMounted,\n      className,\n      ...rootProps\n    },\n    ref\n  ) => {\n    const content = DIALOG_VARIANT_CONTENT[variant];\n    const resolvedTitle =\n      typeof content.title === 'function' ? content.title(objectName) : content.title;\n    const resolvedBody =\n      typeof content.body === 'function'\n        ? content.body(objectName, objectNameLabel)\n        : content.body;\n    const bodyContent = children ?? resolvedBody;\n    const titleText = title ?? resolvedTitle;\n    const secondaryLabelText = secondaryLabel ?? content.secondaryLabel;\n    const primaryLabelText = primaryLabel ?? content.primaryLabel;\n    const resolvedSize = size ?? (variant === 'wide' ? 'large' : 'sm');\n\n    return (\n      <DialogRoot {...rootProps}>\n        <DialogContent\n          ref={ref}\n          size={resolvedSize}\n          portal={portal}\n          portalContainer={portalContainer}\n          keepMounted={keepMounted}\n          className={className}\n          aria-busy={hasLoading || undefined}\n        >\n          {hasHeader ? (\n            <DialogHeader title={titleText} closeLabel={closeLabel} />\n          ) : (\n            // Header hidden, but the dialog still needs an accessible name.\n            <DialogTitle className=\"sr-only\">{titleText}</DialogTitle>\n          )}\n\n          <DialogBody inert={hasLoading}>{bodyContent}</DialogBody>\n\n          {hasFooter && (\n            <DialogFooterDefault inert={hasLoading}>\n              {footer ?? (\n                <DialogFooterActions\n                  secondaryLabel={secondaryLabelText}\n                  primaryLabel={primaryLabelText}\n                  primaryVariant={content.primaryVariant}\n                  primaryCloses={content.primaryCloses}\n                  onPrimaryAction={onPrimaryAction}\n                />\n              )}\n            </DialogFooterDefault>\n          )}\n\n          {hasLoading && (\n            <Loading\n              variant=\"onSurfaceSecondary\"\n              hasLabel={false}\n              label={loadingLabel}\n              className={cn(\n                'absolute inset-x-0 bottom-0 rounded-none',\n                hasHeader ? 'top-[var(--ui-dialog-header-height)]' : 'top-0'\n              )}\n            />\n          )}\n        </DialogContent>\n      </DialogRoot>\n    );\n  }\n);\nDialog.displayName = 'Dialog';\n\nexport {\n  DialogRoot,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogCloseButton,\n  DialogTrigger,\n  DialogContent,\n  DialogHeaderRoot,\n  DialogFooterRoot,\n  DialogTitle,\n  DialogBodyRoot,\n  DialogDescription,\n  dialogContentVariants,\n  Dialog,\n};\n"],"mappings":"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"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../../src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { DialogFooterDefault } from '../dialog-footer-default';\nimport { InputText } from '../input-text';\nimport { Loading } from '../loading';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `dialog`\n// (packages/ui-legacy/src/components/ui/dialog.tsx). A modal overlay built on\n// the Base UI Dialog primitive (keyboard, focus trap, scroll lock, ARIA come\n// from Base UI). A `--ui-dialog-*` / `--ui-button-icon-*` token tier covers the\n// container + close button (reconciled against the Figma \"DialogDefault\" node,\n// 6343:58898); the composable DialogRoot / DialogHeaderRoot / DialogFooterRoot\n// / DialogBodyRoot parts below are internal-only (no public export, no Figma\n// node of their own) and keep the prior semantic-token approach — not to be\n// confused with the recipe-local `DialogHeader`/`DialogBody` further down,\n// which back the public `Dialog` and are reconciled against Figma:\n//   • overlay  -> var(--ui-background-backdrop-screen)   (legacy `bg-black/80`)\n//   • popup    -> var(--ui-dialog-container-color) / var(--ui-dialog-container-border-radius)\n//   • header / footer -> bg-background = --ui-background-surface-primary (white\n//     bars over the muted body), divided by border-border\n//   • title    -> text-foreground / description -> text-muted-foreground\n//   • close    -> var(--ui-button-icon-global-icon-color-*) (idle/hover/active\n//     share one blue in the default brand), bg via\n//     var(--ui-button-icon-global-container-color-*), focus ring var(--ui-focus-primary)\n// Enter/exit animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes — overlay\n// fades, popup fades + zooms. `size` has two values: `sm` (512px, the Figma\n// default, backed by `--ui-dialog-container-size-sm`) and `large` (832px) — the\n// latter predates the Figma node and has no token; it's kept as a plain\n// arbitrary value solely for backward compatibility with existing call sites\n// that need a wider popup (see the `Large` story).\n//\n// Dialog's composable primitive parts (this file) are internal-only — not\n// re-exported from the package root — except `DialogClose`, which stays\n// public: it's required by the `wide` variant's documented custom-`footer`\n// escape hatch (see the `footer` prop and dialog.mdx). The public `Dialog`\n// component below is the sole sanctioned entry point; it's built on these\n// parts internally. (In Figma the matching component set is named\n// \"DialogDefault\"; the code-facing name stays `Dialog` — see dialog.figma.tsx.)\n\n// Figma's \"DialogWelcome\" frame (variant=carousel, node 6353:6164) wraps its\n// popup preview in a `p-[48px]` ancestor — the minimum margin the popup must\n// keep from the viewport edge on any screen size. `max-w`/`max-h` (not\n// padding, since the popup itself is centered via `fixed` + transform)\n// enforce it here so every consumer keeps that margin, not just the frame\n// that surfaced it.\nconst dialogContentVariants = cva(\n  'fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]',\n        large: 'max-w-[min(832px,calc(100dvw-96px))]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n);\n\nconst DialogRoot = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n      className\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n    VariantProps<typeof dialogContentVariants> {\n  /**\n   * Popup max-width. `sm` (512px, default) is the Figma-defined size; `large`\n   * (832px) is a backward-compatibility size with no design token (see the\n   * `Large` story).\n   */\n  size?: VariantProps<typeof dialogContentVariants>['size'];\n  /**\n   * Render the content inside a portal (default `true`). Base UI requires the\n   * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n   * (e.g. when the caller supplies its own `DialogPortal`, or in tests).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: DialogPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Popup>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      size,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    const popup = (\n      <>\n        <DialogOverlay />\n        <DialogPrimitive.Popup\n          ref={ref}\n          className={cn(dialogContentVariants({ size }), className)}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Popup>\n      </>\n    );\n\n    return portal ? (\n      <DialogPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {popup}\n      </DialogPrimitive.Portal>\n    ) : (\n      popup\n    );\n  }\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeaderRoot = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nDialogHeaderRoot.displayName = 'DialogHeaderRoot';\n\nconst DialogFooterRoot = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nDialogFooterRoot.displayName = 'DialogFooterRoot';\n\nconst DialogBodyRoot = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nDialogBodyRoot.displayName = 'DialogBodyRoot';\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'flex-1 text-2xl font-normal leading-8 text-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport interface DialogCloseButtonProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {\n  /** Accessible name for screen readers. Defaults to `'Close'`. */\n  closeLabel?: string;\n}\n\nconst DialogCloseButton = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  DialogCloseButtonProps\n>(({ className, closeLabel = 'Close', ...props }, ref) => (\n  <DialogPrimitive.Close\n    ref={ref}\n    render={<ButtonIcon variant=\"ghost\" />}\n    className={className}\n    {...props}\n  >\n    <TimesIcon />\n    <span className=\"sr-only\">{closeLabel}</span>\n  </DialogPrimitive.Close>\n));\nDialogCloseButton.displayName = 'DialogCloseButton';\n\n// The recipe-specific header: title + close button, reconciled against the\n// Figma \"DialogHeader\" node (4220:3516) via the `--ui-dialog-header-*` tier.\n// Local to this file (not exported) — distinct from the generic, unstyled\n// `DialogHeaderRoot` composable primitive above.\ninterface DialogHeaderProps {\n  title: string;\n  closeLabel?: string;\n}\n\nfunction DialogHeader({ title, closeLabel }: DialogHeaderProps) {\n  return (\n    <div className=\"flex h-[var(--ui-dialog-header-height)] shrink-0 items-center gap-[var(--ui-dialog-header-gap)] border-b-[length:var(--ui-dialog-header-border-width)] border-[var(--ui-dialog-header-border-color)] bg-[var(--ui-dialog-header-color)] px-[var(--ui-dialog-header-padding-x)]\">\n      <DialogTitle>{title}</DialogTitle>\n      <DialogCloseButton closeLabel={closeLabel} />\n    </div>\n  );\n}\n\n// The recipe-specific body: the variant's canned copy (or the `children`\n// override), reconciled against the Figma DialogDefault node via the\n// `--ui-dialog-body-*` tier. Local to this file — distinct from the generic\n// `DialogBodyRoot` composable primitive above.\ninterface DialogBodyProps {\n  children: React.ReactNode;\n  /** Makes the body unfocusable/unclickable while the loading overlay is shown. */\n  inert?: boolean;\n}\n\nfunction DialogBody({ children, inert }: DialogBodyProps) {\n  return (\n    <div\n      inert={inert}\n      className=\"flex min-h-[var(--ui-dialog-body-height-min)] flex-col justify-center-safe gap-[var(--ui-dialog-body-gap)] overflow-y-auto px-4 py-[var(--ui-dialog-body-padding-y)]\"\n    >\n      {typeof children === 'string' ? (\n        <p className=\"text-sm leading-6 text-foreground\">{children}</p>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n\n// The recipe-specific footer actions: a secondary (dismiss) button plus a\n// primary action, the latter either closing the dialog itself (`read-only`'s\n// \"Done\") or firing `onPrimaryAction` and leaving the close to the caller.\n// Local to this file — distinct from the generic `DialogFooterRoot`.\ninterface DialogFooterActionsProps {\n  secondaryLabel?: string;\n  primaryLabel: string;\n  primaryVariant: 'default' | 'destructive';\n  primaryCloses?: boolean;\n  onPrimaryAction?: () => void;\n}\n\nfunction DialogFooterActions({\n  secondaryLabel,\n  primaryLabel,\n  primaryVariant,\n  primaryCloses,\n  onPrimaryAction,\n}: DialogFooterActionsProps) {\n  return (\n    <>\n      {secondaryLabel && (\n        <DialogClose render={<Button variant=\"secondary\">{secondaryLabel}</Button>} />\n      )}\n      {primaryCloses ? (\n        <DialogClose\n          onClick={onPrimaryAction}\n          render={<Button variant={primaryVariant}>{primaryLabel}</Button>}\n        />\n      ) : (\n        <Button variant={primaryVariant} onClick={onPrimaryAction}>\n          {primaryLabel}\n        </Button>\n      )}\n    </>\n  );\n}\n\n// A higher-level \"recipe\" built on top of the Dialog primitive parts above\n// (DialogRoot + DialogContent give the portal, backdrop, focus trap, scroll\n// lock and open state; DialogTitle wires the accessible name; DialogCloseButton\n// / DialogClose give the dismiss controls). It bakes in the seven Figma\n// \"DialogDefault\" use-cases (node 6343:58898) plus one legacy `wide` escape\n// hatch kept for backward compatibility: each `variant` picks a canned title,\n// body copy and footer buttons; `children` overrides only the body slot;\n// `title` overrides only the title; `footer` overrides only the footer's\n// action content (the free-form escape hatch `wide` relies on); `hasLoading`\n// drops a spinner overlay over the body + footer. `hasHeader`/`hasFooter`\n// (both default `true`) hide the header/footer chrome entirely — a\n// ui-react-only extension beyond the Figma DialogDefault contract, which\n// always shows both; the title stays rendered off-screen when the header is\n// hidden so the dialog keeps an accessible name.\n//\n// Colors resolve to shipped semantic tokens via the bridged Tailwind names the\n// Dialog family already uses (text-foreground, the backdrop + focus tokens\n// inside DialogContent / DialogCloseButton) and the Button / InputText token\n// tiers — nothing is hand-authored. The loading scrim renders `Loading`'s\n// `onSurfaceSecondary` variant (`--ui-loading-element-container-color-secondary`),\n// matching the design's translucent surface fill.\n//\n// Header + footer geometry/color resolve to the `--ui-dialog-header-*` /\n// `--ui-footer-*` tiers, reconciled against the DialogDefault Figma node.\n\nexport type DialogVariant =\n  | 'default'\n  | 'rename'\n  | 'save changes'\n  | 'reset password'\n  | 'discard changes'\n  | 'accept'\n  | 'read-only'\n  | 'wide';\n\ninterface DialogVariantContent {\n  /**\n   * The variant's canned title. A function receives `objectName` (falls back\n   * to its own placeholder default when omitted) for variants whose title\n   * embeds the acted-on object's name.\n   */\n  title: string | ((objectName?: string) => string);\n  /**\n   * Same `objectName` interpolation as `title`, for body copy/fields that\n   * embed it. The `rename` variant's field also receives `objectNameLabel`\n   * for its accessible name.\n   */\n  body:\n    | React.ReactNode\n    | ((objectName?: string, objectNameLabel?: string) => React.ReactNode);\n  /** Secondary (dismiss) button label. Omitted when the variant has none. */\n  secondaryLabel?: string;\n  primaryLabel: string;\n  primaryVariant: 'default' | 'destructive';\n  /** Whether the primary button dismisses the dialog (e.g. read-only \"Done\"). */\n  primaryCloses?: boolean;\n}\n\nconst DIALOG_VARIANT_CONTENT: Record<DialogVariant, DialogVariantContent> = {\n  default: {\n    title: 'Dialog title',\n    body: 'Drop any content into this slot.',\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Label',\n    primaryVariant: 'default',\n  },\n  rename: {\n    title: (objectName = 'object name') => `Rename ${objectName}`,\n    // `objectName` prefills the field with the real current name; the field's\n    // accessible name (`objectNameLabel`) is separate — it's the label, not the value.\n    body: (objectName = 'Current name', objectNameLabel = 'Object name') => (\n      <InputText aria-label={objectNameLabel} defaultValue={objectName} />\n    ),\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Rename',\n    primaryVariant: 'default',\n  },\n  'save changes': {\n    title: 'Save changes',\n    body: 'You have unsaved changes. Do you want to save them before leaving?',\n    secondaryLabel: 'Go back',\n    primaryLabel: 'Save',\n    primaryVariant: 'default',\n  },\n  'reset password': {\n    title: 'Reset password',\n    body: 'Further instructions will be sent to your email address.',\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Reset',\n    primaryVariant: 'default',\n  },\n  'discard changes': {\n    title: 'Discard changes',\n    body: (objectName = 'Object name') => (\n      <p className=\"text-sm leading-6 text-foreground\">\n        Are you sure you want to discard the unsaved changes to{' '}\n        <strong className=\"font-semibold\">{objectName}</strong>?\n      </p>\n    ),\n    secondaryLabel: 'Go back',\n    primaryLabel: 'Confirm',\n    primaryVariant: 'destructive',\n  },\n  accept: {\n    title: (objectName = 'object name') => `Accept ${objectName}`,\n    body: 'Click Accept to confirm that you have read, understood, and agree to the terms and conditions below.',\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Accept',\n    primaryVariant: 'default',\n  },\n  'read-only': {\n    title: 'License agreement',\n    body: 'This is a read-only dialog used to view legal documents such as the License Agreement, EULA updates, Terms of Service, and other legal documents.',\n    primaryLabel: 'Done',\n    primaryVariant: 'default',\n    primaryCloses: true,\n  },\n  // No Figma preset — a legacy, free-form escape hatch (see the `footer` prop\n  // and the `Large` story). This fallback title/body/footer only renders if\n  // the caller supplies neither `footer` nor `title`/`children` — every real\n  // `wide` call site overrides them.\n  wide: {\n    title: 'Dialog title',\n    body: 'Drop any content into this slot.',\n    secondaryLabel: 'Cancel',\n    primaryLabel: 'Confirm',\n    primaryVariant: 'default',\n  },\n};\n\ntype DialogRootProps = React.ComponentPropsWithoutRef<typeof DialogRoot>;\n\nexport interface DialogProps extends Omit<DialogRootProps, 'children'> {\n  /**\n   * Selects the canned title / body / footer preset. Defaults to `'default'`.\n   * `'wide'` is a legacy escape hatch (no canned preset) kept for backward\n   * compatibility — pair it with `size=\"large\"` and the `footer` prop.\n   */\n  variant?: DialogVariant;\n  /**\n   * Show a spinner overlay across the body + footer, and make both `inert`\n   * (unfocusable, unclickable, hidden from assistive tech) so a keyboard user\n   * can't activate the visually obscured footer buttons while busy.\n   */\n  hasLoading?: boolean;\n  /**\n   * Overrides the loading overlay's accessible label. Defaults to `Loading`'s\n   * own default (`'Data is loading…'`). Ignored when `hasLoading` is `false`.\n   */\n  loadingLabel?: string;\n  /**\n   * Show the header (title + close button). Defaults to `true`. When `false`,\n   * the title is still rendered off-screen so the dialog keeps an accessible\n   * name — only the visible bar and close button are omitted. Beyond the\n   * strict Figma contract (all seven `DialogDefault` variants always show the\n   * header); a ui-react-only extension, like `wide`/`size=\"large\"`.\n   */\n  hasHeader?: boolean;\n  /**\n   * Show the footer (action buttons). Defaults to `true`. Beyond the strict\n   * Figma contract (all seven `DialogDefault` variants always show the\n   * footer); a ui-react-only extension, like `wide`/`size=\"large\"`. When\n   * `false`, `footer` (and the canned footer it would otherwise replace) is\n   * not rendered either.\n   */\n  hasFooter?: boolean;\n  /** Overrides the variant's default body content. */\n  children?: React.ReactNode;\n  /** Overrides the variant's default title. */\n  title?: string;\n  /**\n   * The real name of the object being acted on (e.g. a file or resource\n   * name). Interpolated into the `rename`/`discard changes`/`accept`\n   * variants' canned title/body in place of the generic placeholder text;\n   * ignored by variants that don't reference an object name.\n   */\n  objectName?: string;\n  /**\n   * Overrides the accessible name of the `rename` variant's text field\n   * (default `'Object name'`). Ignored by every other variant.\n   */\n  objectNameLabel?: string;\n  /**\n   * Overrides the variant's default secondary (dismiss) button label. Passing\n   * this for a variant with no secondary button by default (e.g. `read-only`)\n   * also makes the button appear. Ignored when `footer` is provided.\n   */\n  secondaryLabel?: string;\n  /** Overrides the variant's default primary button label. Ignored when `footer` is provided. */\n  primaryLabel?: string;\n  /**\n   * Fires when the primary footer button is clicked. The dialog does not\n   * close automatically afterwards — pair this with `open`/`onOpenChange` to\n   * close it once the action completes. Ignored when `footer` is provided\n   * (wire behavior onto your own buttons there instead).\n   */\n  onPrimaryAction?: () => void;\n  /**\n   * Replaces the footer's action content entirely with free-form buttons —\n   * the escape hatch the `wide` variant is meant to be paired with, for\n   * legacy call sites that don't fit one of the seven canned presets. Ignored\n   * (along with the canned footer) when `hasFooter` is `false`.\n   */\n  footer?: React.ReactNode;\n  /** Overrides the close button's accessible name. Defaults to `'Close'`. */\n  closeLabel?: string;\n  /**\n   * Popup max-width (forwarded to `DialogContent`). Defaults to `'sm'`, or to\n   * `'large'` when `variant` is `'wide'`.\n   */\n  size?: DialogContentProps['size'];\n  /** Render inside a portal (forwarded to `DialogContent`). Defaults to `true`. */\n  portal?: boolean;\n  /** Portal container (forwarded to `DialogContent`). */\n  portalContainer?: DialogContentProps['portalContainer'];\n  /** Keep the content mounted while closed (forwarded to `DialogContent`). */\n  keepMounted?: DialogContentProps['keepMounted'];\n  /** Extra classes merged onto the popup container. */\n  className?: string;\n}\n\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>(\n  (\n    {\n      variant = 'default',\n      hasLoading = false,\n      loadingLabel,\n      hasHeader = true,\n      hasFooter = true,\n      children,\n      title,\n      objectName,\n      objectNameLabel,\n      secondaryLabel,\n      primaryLabel,\n      onPrimaryAction,\n      footer,\n      closeLabel,\n      size,\n      portal,\n      portalContainer,\n      keepMounted,\n      className,\n      ...rootProps\n    },\n    ref\n  ) => {\n    const content = DIALOG_VARIANT_CONTENT[variant];\n    const resolvedTitle =\n      typeof content.title === 'function' ? content.title(objectName) : content.title;\n    const resolvedBody =\n      typeof content.body === 'function'\n        ? content.body(objectName, objectNameLabel)\n        : content.body;\n    const bodyContent = children ?? resolvedBody;\n    const titleText = title ?? resolvedTitle;\n    const secondaryLabelText = secondaryLabel ?? content.secondaryLabel;\n    const primaryLabelText = primaryLabel ?? content.primaryLabel;\n    const resolvedSize = size ?? (variant === 'wide' ? 'large' : 'sm');\n\n    return (\n      <DialogRoot {...rootProps}>\n        <DialogContent\n          ref={ref}\n          size={resolvedSize}\n          portal={portal}\n          portalContainer={portalContainer}\n          keepMounted={keepMounted}\n          className={className}\n          aria-busy={hasLoading || undefined}\n        >\n          {hasHeader ? (\n            <DialogHeader title={titleText} closeLabel={closeLabel} />\n          ) : (\n            // Header hidden, but the dialog still needs an accessible name.\n            <DialogTitle className=\"sr-only\">{titleText}</DialogTitle>\n          )}\n\n          <DialogBody inert={hasLoading}>{bodyContent}</DialogBody>\n\n          {hasFooter && (\n            <DialogFooterDefault inert={hasLoading}>\n              {footer ?? (\n                <DialogFooterActions\n                  secondaryLabel={secondaryLabelText}\n                  primaryLabel={primaryLabelText}\n                  primaryVariant={content.primaryVariant}\n                  primaryCloses={content.primaryCloses}\n                  onPrimaryAction={onPrimaryAction}\n                />\n              )}\n            </DialogFooterDefault>\n          )}\n\n          {hasLoading && (\n            <Loading\n              variant=\"onSurfaceSecondary\"\n              hasLabel={false}\n              label={loadingLabel}\n              className={cn(\n                'absolute inset-x-0 bottom-0 rounded-none',\n                hasHeader ? 'top-[var(--ui-dialog-header-height)]' : 'top-0'\n              )}\n            />\n          )}\n        </DialogContent>\n      </DialogRoot>\n    );\n  }\n);\nDialog.displayName = 'Dialog';\n\nexport {\n  DialogRoot,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogCloseButton,\n  DialogTrigger,\n  DialogContent,\n  DialogHeaderRoot,\n  DialogFooterRoot,\n  DialogTitle,\n  DialogBodyRoot,\n  DialogDescription,\n  dialogContentVariants,\n  Dialog,\n};\n"],"mappings":"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"}

package/dist/components/ui/funnel-chart/funnel-chart.js

@@ -127,19 +127,19 @@ function te({ x: t = 0, y: n = 0, upperWidth: r = 0, lowerWidth: i = 0, height:
 		strokeWidth: g ? w : c
 	});
 }
-var W = u.forwardRef(({ className: t, config: C, palette: w, data: T, dataKey: E, nameKey: D, lastShape: O = "triangle", reversed: A = !1, showLabels: j = !1, labelFormat: M = "name", labelPosition: N = "right", showValueLabels: P = !1, valuePosition: F, labelFill: I, labelFormatter: L, percentFormatter: R, showLegend: z = !0, legendValueFormatter: H, stageSettings: W, showActiveShape: ne = !1, stroke: re, strokeWidth: G, funnelWidth: ie, margin: ae, showTooltip: K = !0, tooltipContent: q, animate: oe, animationDuration: se, animationBegin: ce, animationEasing: le, ...ue }, de) => {
-	let fe = c({
-		animate: oe,
-		animationDuration: se,
-		animationBegin: ce,
-		animationEasing: le
-	}), J = u.useMemo(() => {
-		let e = T.filter((e) => !W?.[String(e[D])]?.hidden), t = e.reduce((e, t) => {
+var W = u.forwardRef(({ className: t, config: C, palette: w, data: T, dataKey: E, nameKey: D, lastShape: O = "triangle", reversed: A = !1, showLabels: j = !1, labelFormat: M = "name", labelPosition: N = "right", showValueLabels: P = !1, valuePosition: F, labelFill: I, labelFormatter: L, percentFormatter: R, showLegend: z = !0, legendFontSize: H, legendValueFormatter: W, stageSettings: G, showActiveShape: ne = !1, stroke: re, strokeWidth: K, funnelWidth: ie, margin: ae, showTooltip: oe = !0, tooltipContent: se, animate: ce, animationDuration: le, animationBegin: ue, animationEasing: de, ...fe }, pe) => {
+	let me = c({
+		animate: ce,
+		animationDuration: le,
+		animationBegin: ue,
+		animationEasing: de
+	}), q = u.useMemo(() => {
+		let e = T.filter((e) => !G?.[String(e[D])]?.hidden), t = e.reduce((e, t) => {
 			let n = Number(t[E]);
 			return Number.isFinite(n) && n > e ? n : e;
 		}, 0);
 		return e.map((e, n) => {
-			let r = String(e[D]), i = W?.[r]?.color ?? `var(--color-${s(r)})`, a = {
+			let r = String(e[D]), i = G?.[r]?.color ?? `var(--color-${s(r)})`, a = {
 				name: r,
 				value: e[E],
 				base: t,
@@ -167,76 +167,76 @@ var W = u.forwardRef(({ className: t, config: C, palette: w, data: T, dataKey: E
 		L,
 		D,
 		R,
-		W
-	]), Y = u.useMemo(() => z ? o(C, w ?? k) : null, [
+		G
+	]), J = u.useMemo(() => z ? o(C, w ?? k) : null, [
 		z,
 		C,
 		w
-	]), pe = u.useMemo(() => {
-		if (!Y) return [];
+	]), he = u.useMemo(() => {
+		if (!J) return [];
 		let e = /* @__PURE__ */ new Set();
-		return J.flatMap((t) => {
+		return q.flatMap((t) => {
 			let n = String(t[D]);
 			return e.has(n) ? [] : (e.add(n), [{
 				value: n,
 				dataKey: D,
 				type: "rect",
-				color: W?.[n]?.color ?? Y[n]?.color ?? String(t.fill),
+				color: G?.[n]?.color ?? J[n]?.color ?? String(t.fill),
 				payload: t
 			}]);
 		});
 	}, [
 		D,
+		q,
 		J,
-		Y,
-		W
-	]), X = F ?? y(N), me = j && N !== "inside" || P && X !== "inside", Z = v[N], Q = v[X], he = {
+		G
+	]), Y = F ?? y(N), X = j && N !== "inside" || P && Y !== "inside", Z = v[N], Q = v[Y], ge = {
 		...V({
 			showLabels: j,
 			labelPosition: N,
 			showValueLabels: P,
-			valuePosition: X
+			valuePosition: Y
 		}),
 		...ae
-	}, ge = ie ?? B({
+	}, _e = ie ?? B({
 		showLabels: j,
 		labelPosition: N,
 		labelFormat: M
-	}), _e = re ?? (G == null ? "none" : "var(--ui-border-on-surface-border)"), $ = (e) => /* @__PURE__ */ d(te, {
+	}), ve = re ?? (K == null ? "none" : "var(--ui-border-on-surface-border)"), $ = (e) => /* @__PURE__ */ d(te, {
 		...e,
 		showActiveShape: ne,
-		topStageIndex: A ? J.length - 1 : 0
+		topStageIndex: A ? q.length - 1 : 0
 	});
 	return /* @__PURE__ */ f("div", {
-		ref: de,
+		ref: pe,
 		"data-last-shape": O,
 		className: e("flex flex-row items-center gap-4", !z && "justify-center", _({ lastShape: O }), t),
-		...ue,
+		...fe,
 		children: [/* @__PURE__ */ d("div", {
-			className: me ? "h-[120px] flex-1" : e(ee, "shrink-0"),
+			className: X ? "h-[120px] flex-1" : e(ee, "shrink-0"),
 			children: /* @__PURE__ */ d(n, {
 				config: C,
 				palette: w ?? k,
 				className: "size-full",
 				children: /* @__PURE__ */ f(h, {
-					margin: he,
-					children: [K && /* @__PURE__ */ d(i, { content: q ?? /* @__PURE__ */ d(a, {
+					margin: ge,
+					children: [oe && /* @__PURE__ */ d(i, { content: se ?? /* @__PURE__ */ d(a, {
 						nameKey: D,
 						hideLabel: !0
 					}) }), /* @__PURE__ */ f(m, {
 						dataKey: E,
 						nameKey: D,
-						data: J,
+						data: q,
 						lastShapeType: O ?? "triangle",
 						reversed: A,
-						width: ge,
-						stroke: _e,
-						strokeWidth: G,
+						width: _e,
+						stroke: ve,
+						strokeWidth: K,
 						shape: $,
 						activeShape: $,
-						...fe,
+						...me,
 						children: [
-							J.map((e, t) => /* @__PURE__ */ d(p, { fill: String(e.fill) }, t)),
+							q.map((e, t) => /* @__PURE__ */ d(p, { fill: String(e.fill) }, t)),
 							j && /* @__PURE__ */ d(g, {
 								position: Z,
 								dataKey: b,
@@ -255,13 +255,14 @@ var W = u.forwardRef(({ className: t, config: C, palette: w, data: T, dataKey: E
 					})]
 				})
 			})
-		}), z && Y && /* @__PURE__ */ d(r, {
+		}), z && J && /* @__PURE__ */ d(r, {
 			variant: "list",
-			payload: pe,
-			config: Y,
+			payload: he,
+			config: J,
 			nameKey: D,
+			fontSize: H,
 			valueKey: E,
-			valueFormatter: H,
+			valueFormatter: W,
 			valueClassName: "text-[var(--ui-text-on-surface-primary)]",
 			className: "min-w-0 flex-1"
 		})]