@acronis-platform/ui-react 3.0.0 → 4.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../../../src/components/ui/search/search.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MagnifierIcon,\n  TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Internal primitive: the bare search box behind the public `InputSearch` field\n// (which is also exported as `Search`). Not exported from the package; consumed\n// by `input-search`. A bordered box (the dedicated `--ui-input-search-*` token\n// tier) holding a leading magnifier, a borderless native input, and a trailing\n// clear button shown once there's a value. The box owns the visual state via\n// `focus-within` (the input-search tier has no focus/active border token, so the\n// focused border reuses `--ui-input-search-border-color-hover` plus a 3px\n// `--ui-focus-primary` ring) / hover / disabled; the magnifier uses\n// `--ui-input-search-icon-search-color-{idle,disabled}` (via the `group`) and the\n// clear button is a ghost ButtonIcon, so its glyph uses\n// `--ui-button-icon-global-icon-color-idle` (the input-search tier dropped its own\n// clear-icon token in the Figma sync).\n\nexport interface SearchBoxProps extends React.ComponentPropsWithoutRef<'input'> {\n  /** Called when the clear (×) button is pressed, after the value is cleared. */\n  onClear?: () => void;\n}\n\nconst SearchBox = React.forwardRef<HTMLInputElement, SearchBoxProps>(\n  (\n    {\n      className,\n      type = 'search',\n      disabled,\n      onClear,\n      onChange,\n      value,\n      defaultValue,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    const [hasValue, setHasValue] = React.useState(\n      () => String(value ?? defaultValue ?? '').length > 0\n    );\n\n    // Keep the clear button in sync when the value is controlled externally.\n    React.useEffect(() => {\n      if (value !== undefined) setHasValue(String(value).length > 0);\n    }, [value]);\n\n    const setRefs = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        innerRef.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      },\n      [forwardedRef]\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setHasValue(event.target.value.length > 0);\n      onChange?.(event);\n    };\n\n    const handleClear = () => {\n      const input = innerRef.current;\n      if (!input) return;\n      // Use the native value setter when available + dispatch a real input event\n      // so React's onChange fires for both controlled and uncontrolled usage.\n      let setter: ((this: HTMLInputElement, value: string) => void) | undefined;\n      try {\n        setter = Object.getOwnPropertyDescriptor(\n          globalThis.HTMLInputElement?.prototype,\n          'value'\n        )?.set;\n      } catch {\n        setter = undefined;\n      }\n\n      if (setter) setter.call(input, '');\n      else input.value = '';\n\n      input.dispatchEvent(new Event('input', { bubbles: true }));\n      setHasValue(false);\n      input.focus();\n      onClear?.();\n    };\n\n    return (\n      <div\n        data-disabled={disabled || undefined}\n        className={cn(\n          'group inline-flex h-[var(--ui-input-search-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-search-box-gap)] rounded-[var(--ui-input-search-box-border-radius)] border bg-[var(--ui-input-search-box-color-idle)] border-[var(--ui-input-search-border-color-idle)] px-[var(--ui-input-search-box-padding-x)] text-sm leading-6 text-[var(--ui-input-search-value-color-idle)] transition-colors not-data-[disabled]:hover:bg-[var(--ui-input-search-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-search-border-color-hover)] focus-within:border-[var(--ui-input-search-border-color-hover)] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-search-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-search-box-color-disabled)] data-[disabled]:text-[var(--ui-input-search-value-color-disabled)]',\n          className\n        )}\n      >\n        <MagnifierIcon\n          size={16}\n          className=\"shrink-0 text-[var(--ui-input-search-icon-search-color-idle)] group-data-[disabled]:text-[var(--ui-input-search-icon-search-color-disabled)]\"\n        />\n        <input\n          ref={setRefs}\n          type={type}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleChange}\n          aria-label=\"Search\"\n          className=\"h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-[var(--ui-input-search-placeholder-color-idle)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none\"\n          {...props}\n        />\n        {hasValue && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear search\"\n            onClick={handleClear}\n            className=\"inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&>svg]:size-4\"\n          >\n            <TimesIcon size={16} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nSearchBox.displayName = 'SearchBox';\n\nexport { SearchBox };\n"],"names":["SearchBox","React","className","type","disabled","onClear","onChange","value","defaultValue","props","forwardedRef","innerRef","hasValue","setHasValue","setRefs","node","handleChange","event","handleClear","input","setter","_b","_a","jsxs","cn","jsx","MagnifierIcon","TimesIcon"],"mappings":";;;;AA0BA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAWV,EAAM,OAAyB,IAAI,GAC9C,CAACW,GAAUC,CAAW,IAAIZ,EAAM;AAAA,MACpC,MAAM,OAAOM,KAASC,KAAgB,EAAE,EAAE,SAAS;AAAA,IAAA;AAIrD,IAAAP,EAAM,UAAU,MAAM;AACpB,MAAIM,MAAU,UAAWM,EAAY,OAAON,CAAK,EAAE,SAAS,CAAC;AAAA,IAC/D,GAAG,CAACA,CAAK,CAAC;AAEV,UAAMO,IAAUb,EAAM;AAAA,MACpB,CAACc,MAAkC;AACjC,QAAAJ,EAAS,UAAUI,GACf,OAAOL,KAAiB,aAAYA,EAAaK,CAAI,IAChDL,QAA2B,UAAUK;AAAA,MAChD;AAAA,MACA,CAACL,CAAY;AAAA,IAAA,GAGTM,IAAe,CAACC,MAA+C;AACnE,MAAAJ,EAAYI,EAAM,OAAO,MAAM,SAAS,CAAC,GACzCX,KAAA,QAAAA,EAAWW;AAAA,IACb,GAEMC,IAAc,MAAM;;AACxB,YAAMC,IAAQR,EAAS;AACvB,UAAI,CAACQ,EAAO;AAGZ,UAAIC;AACJ,UAAI;AACF,QAAAA,KAASC,IAAA,OAAO;AAAA,WACdC,IAAA,WAAW,qBAAX,gBAAAA,EAA6B;AAAA,UAC7B;AAAA,QAAA,MAFO,gBAAAD,EAGN;AAAA,MACL,QAAQ;AACN,QAAAD,IAAS;AAAA,MACX;AAEA,MAAIA,IAAQA,EAAO,KAAKD,GAAO,EAAE,MACtB,QAAQ,IAEnBA,EAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAA,CAAM,CAAC,GACzDN,EAAY,EAAK,GACjBM,EAAM,MAAA,GACNd,KAAA,QAAAA;AAAA,IACF;AAEA,WACE,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,iBAAenB,KAAY;AAAA,QAC3B,WAAWoB;AAAA,UACT;AAAA,UACAtB;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAuB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKX;AAAA,cACL,MAAAX;AAAA,cACA,UAAAC;AAAA,cACA,OAAAG;AAAA,cACA,cAAAC;AAAA,cACA,UAAUQ;AAAA,cACV,cAAW;AAAA,cACX,WAAU;AAAA,cACT,GAAGP;AAAA,YAAA;AAAA,UAAA;AAAA,UAELG,KAAY,CAACR,KACZ,gBAAAqB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAASP;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,gBAAAO,EAACE,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACA3B,EAAU,cAAc;"}
+{"version":3,"file":"search.js","names":[],"sources":["../../../../src/components/ui/search/search.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MagnifierIcon,\n  TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Internal primitive: the bare search box behind the public `InputSearch` field\n// (which is also exported as `Search`). Not exported from the package; consumed\n// by `input-search`. A bordered box (the dedicated `--ui-input-search-*` token\n// tier) holding a leading magnifier, a borderless native input, and a trailing\n// clear button shown once there's a value. The box owns the visual state via\n// `focus-within` (the input-search tier has no focus/active border token, so the\n// focused border reuses `--ui-input-search-border-color-hover` plus a 3px\n// `--ui-focus-primary` ring) / hover / disabled; the magnifier uses\n// `--ui-input-search-icon-search-color-{idle,disabled}` (via the `group`) and the\n// clear button is a ghost ButtonIcon, so its glyph uses\n// `--ui-button-icon-global-icon-color-idle` (the input-search tier dropped its own\n// clear-icon token in the Figma sync).\n\nexport interface SearchBoxProps extends React.ComponentPropsWithoutRef<'input'> {\n  /** Called when the clear (×) button is pressed, after the value is cleared. */\n  onClear?: () => void;\n}\n\nconst SearchBox = React.forwardRef<HTMLInputElement, SearchBoxProps>(\n  (\n    {\n      className,\n      type = 'search',\n      disabled,\n      onClear,\n      onChange,\n      value,\n      defaultValue,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    const [hasValue, setHasValue] = React.useState(\n      () => String(value ?? defaultValue ?? '').length > 0\n    );\n\n    // Keep the clear button in sync when the value is controlled externally.\n    React.useEffect(() => {\n      if (value !== undefined) setHasValue(String(value).length > 0);\n    }, [value]);\n\n    const setRefs = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        innerRef.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      },\n      [forwardedRef]\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setHasValue(event.target.value.length > 0);\n      onChange?.(event);\n    };\n\n    const handleClear = () => {\n      const input = innerRef.current;\n      if (!input) return;\n      // Use the native value setter when available + dispatch a real input event\n      // so React's onChange fires for both controlled and uncontrolled usage.\n      let setter: ((this: HTMLInputElement, value: string) => void) | undefined;\n      try {\n        setter = Object.getOwnPropertyDescriptor(\n          globalThis.HTMLInputElement?.prototype,\n          'value'\n        )?.set;\n      } catch {\n        setter = undefined;\n      }\n\n      if (setter) setter.call(input, '');\n      else input.value = '';\n\n      input.dispatchEvent(new Event('input', { bubbles: true }));\n      setHasValue(false);\n      input.focus();\n      onClear?.();\n    };\n\n    return (\n      <div\n        data-disabled={disabled || undefined}\n        className={cn(\n          'group inline-flex h-[var(--ui-input-search-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-search-box-gap)] rounded-[var(--ui-input-search-box-border-radius)] border bg-[var(--ui-input-search-box-color-idle)] border-[var(--ui-input-search-border-color-idle)] px-[var(--ui-input-search-box-padding-x)] text-sm leading-6 text-[var(--ui-input-search-value-color-idle)] transition-colors not-data-[disabled]:hover:bg-[var(--ui-input-search-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-search-border-color-hover)] focus-within:border-[var(--ui-input-search-border-color-hover)] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-search-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-search-box-color-disabled)] data-[disabled]:text-[var(--ui-input-search-value-color-disabled)]',\n          className\n        )}\n      >\n        <MagnifierIcon\n          size={16}\n          className=\"shrink-0 text-[var(--ui-input-search-icon-search-color-idle)] group-data-[disabled]:text-[var(--ui-input-search-icon-search-color-disabled)]\"\n        />\n        <input\n          ref={setRefs}\n          type={type}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleChange}\n          aria-label=\"Search\"\n          className=\"h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-[var(--ui-input-search-placeholder-color-idle)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none\"\n          {...props}\n        />\n        {hasValue && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear search\"\n            onClick={handleClear}\n            className=\"inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&>svg]:size-4\"\n          >\n            <TimesIcon size={16} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nSearchBox.displayName = 'SearchBox';\n\nexport { SearchBox };\n"],"mappings":";;;;;AA0BA,IAAM,IAAY,EAAM,YAEpB,EACE,cACA,UAAO,UACP,aACA,YACA,aACA,UACA,iBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAW,EAAM,OAAyB,IAAI,GAC9C,CAAC,GAAU,KAAe,EAAM,eAC9B,OAAO,KAAS,KAAgB,EAAE,CAAC,CAAC,SAAS,CACrD;CAGA,EAAM,gBAAgB;EACpB,AAAI,MAAU,KAAA,KAAW,EAAY,OAAO,CAAK,CAAC,CAAC,SAAS,CAAC;CAC/D,GAAG,CAAC,CAAK,CAAC;CAEV,IAAM,IAAU,EAAM,aACnB,MAAkC;EAEjC,AADA,EAAS,UAAU,GACf,OAAO,KAAiB,aAAY,EAAa,CAAI,IAChD,MAAc,EAAa,UAAU;CAChD,GACA,CAAC,CAAY,CACf,GAEM,KAAgB,MAA+C;EAEnE,AADA,EAAY,EAAM,OAAO,MAAM,SAAS,CAAC,GACzC,IAAW,CAAK;CAClB,GAEM,UAAoB;EACxB,IAAM,IAAQ,EAAS;EACvB,IAAI,CAAC,GAAO;EAGZ,IAAI;EACJ,IAAI;GACF,IAAS,OAAO,yBACd,WAAW,kBAAkB,WAC7B,OACF,CAAC,EAAE;EACL,QAAQ;GACN,IAAS,KAAA;EACX;EAQA,AANI,IAAQ,EAAO,KAAK,GAAO,EAAE,IAC5B,EAAM,QAAQ,IAEnB,EAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACzD,EAAY,EAAK,GACjB,EAAM,MAAM,GACZ,IAAU;CACZ;CAEA,OACE,kBAAC,OAAD;EACE,iBAAe,KAAY,KAAA;EAC3B,WAAW,EACT,k5BACA,CACF;EALF,UAAA;GAOE,kBAAC,GAAD;IACE,MAAM;IACN,WAAU;GACX,CAAA;GACD,kBAAC,SAAD;IACE,KAAK;IACC;IACI;IACH;IACO;IACd,UAAU;IACV,cAAW;IACX,WAAU;IACV,GAAI;GACL,CAAA;GACA,KAAY,CAAC,KACZ,kBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;IAEV,UAAA,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;GAChB,CAAA;EAEP;;AAET,CACF;AACA,EAAU,cAAc"}

package/dist/components/ui/section/section.js

@@ -1,37 +1,125 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as i from "react";
-import { cn as n } from "../../../lib/utils.js";
-const s = i.forwardRef(
-  ({ className: e, ...t }, o) => /* @__PURE__ */ a("section", { ref: o, className: n("space-y-4", e), ...t })
-);
-s.displayName = "Section";
-const c = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a("div", { ref: o, className: n("space-y-1", e), ...t }));
-c.displayName = "SectionHeader";
-const r = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
-  "h2",
-  {
-    ref: o,
-    className: n("text-lg font-semibold leading-none tracking-tight", e),
-    ...t
-  }
-));
-r.displayName = "SectionTitle";
-const m = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
-  "p",
-  {
-    ref: o,
-    className: n("text-sm text-muted-foreground", e),
-    ...t
-  }
-));
-m.displayName = "SectionDescription";
-const d = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a("div", { ref: o, className: n("pt-2", e), ...t }));
-d.displayName = "SectionContent";
-export {
-  s as Section,
-  d as SectionContent,
-  m as SectionDescription,
-  c as SectionHeader,
-  r as SectionTitle
-};
-//# sourceMappingURL=section.js.map
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { AccordionContainer as t } from "../accordion-container/accordion-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 { buttonIconVariants as r } from "../button-icon/button-icon.js";
+import { Switch as i } from "../switch/switch.js";
+import * as a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useRender as l } from "@base-ui/react/use-render";
+import { mergeProps as u } from "@base-ui/react/merge-props";
+//#region src/components/ui/section/section.tsx
+var d = n("flex w-full flex-col gap-3", {
+	variants: {
+		variant: {
+			column1: "px-4 pt-4",
+			"column2-70-30": "px-4 pt-4",
+			grid3: "px-4 pt-4",
+			table: ""
+		},
+		hasBottomBorder: {
+			false: "",
+			true: "border-b border-[var(--ui-border-on-surface-divider)]"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "column1",
+			hasBottomBorder: !0,
+			class: "pb-4"
+		},
+		{
+			variant: "column2-70-30",
+			hasBottomBorder: !0,
+			class: "pb-4"
+		},
+		{
+			variant: "grid3",
+			hasBottomBorder: !0,
+			class: "pb-4"
+		}
+	],
+	defaultVariants: {
+		variant: "column1",
+		hasBottomBorder: !1
+	}
+}), f = a.createContext({ variant: "column1" }), p = () => a.useContext(f), m = a.forwardRef(({ className: t, variant: n = "column1", hasBottomBorder: r = !1, render: i, ...o }, c) => {
+	let p = a.useMemo(() => ({ variant: n ?? "column1" }), [n]), m = l({
+		render: i,
+		ref: c,
+		defaultTagName: "section",
+		props: u({ className: e(d({
+			variant: n,
+			hasBottomBorder: r
+		}), t) }, o)
+	});
+	return /* @__PURE__ */ s(f.Provider, {
+		value: p,
+		children: m
+	});
+});
+m.displayName = "Section";
+var h = a.forwardRef(({ className: n, title: a, description: d, hasDescription: f = !1, isSwitchable: m = !1, switchChecked: h, defaultSwitchChecked: g, onSwitchCheckedChange: _, switchDisabled: v, switchLabel: y = "Toggle section", extras: b, actions: x, isCollapsible: S = !1, collapseLabel: C = "Collapse section", render: w, children: T, ...E }, D) => {
+	let { variant: O } = p();
+	return l({
+		render: w,
+		ref: D,
+		defaultTagName: "div",
+		props: u({
+			className: e("flex w-full shrink-0 items-center gap-2", O === "table" && "px-4 pt-4", n),
+			children: /* @__PURE__ */ c(o, { children: [
+				m && /* @__PURE__ */ s(i, {
+					checked: h,
+					defaultChecked: g,
+					onCheckedChange: _,
+					disabled: v,
+					"aria-label": y,
+					className: "shrink-0"
+				}),
+				(a || b || f) && /* @__PURE__ */ c("div", {
+					className: "flex min-w-0 flex-1 flex-col items-start justify-center gap-0.5",
+					children: [/* @__PURE__ */ c("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [a && /* @__PURE__ */ s("p", {
+							className: "truncate text-xl leading-6 font-medium text-[var(--ui-text-on-surface-primary)]",
+							children: a
+						}), b]
+					}), f && /* @__PURE__ */ s("p", {
+						className: "w-full truncate text-sm leading-6 text-[var(--ui-text-on-surface-secondary)]",
+						children: d
+					})]
+				}),
+				T,
+				x,
+				S && /* @__PURE__ */ s(t.Trigger, {
+					"aria-label": C,
+					className: r({ variant: "ghost" })
+				})
+			] })
+		}, E)
+	});
+});
+h.displayName = "SectionHeader";
+var g = a.forwardRef(({ className: t, secondaryContent: n, render: r, children: i, ...a }, d) => {
+	let { variant: f } = p(), m = f === "column2-70-30";
+	return l({
+		render: r,
+		ref: d,
+		defaultTagName: "div",
+		props: u({
+			className: e("w-full", (m || f === "grid3") && "grid grid-cols-3 items-start gap-4", t),
+			children: m ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+				className: "col-span-2 min-w-0",
+				children: i
+			}), n != null && /* @__PURE__ */ s("div", {
+				className: "col-span-1 min-w-0",
+				children: n
+			})] }) : i
+		}, a)
+	});
+});
+g.displayName = "SectionContent";
+//#endregion
+export { m as Section, g as SectionContent, h as SectionHeader, d as sectionVariants, p as useSectionContext };
+
+//# sourceMappingURL=section.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"section.js","sources":["../../../../src/components/ui/section/section.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported 1:1 from `@acronis-platform`'s `section`. A titled content block —\n// semantic markup parts; the only color is the muted description\n// (`text-muted-foreground` → --ui-text-on-surface-secondary).\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...props }, ref) => (\n    <section ref={ref} className={cn('space-y-4', className)} {...props} />\n  )\n);\nSection.displayName = 'Section';\n\nconst SectionHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('space-y-1', className)} {...props} />\n));\nSectionHeader.displayName = 'SectionHeader';\n\nconst SectionTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h2\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n));\nSectionTitle.displayName = 'SectionTitle';\n\nconst SectionDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nSectionDescription.displayName = 'SectionDescription';\n\nconst SectionContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('pt-2', className)} {...props} />\n));\nSectionContent.displayName = 'SectionContent';\n\nexport {\n  Section,\n  SectionHeader,\n  SectionTitle,\n  SectionDescription,\n  SectionContent,\n};\n"],"names":["Section","React","className","props","ref","jsx","cn","SectionHeader","SectionTitle","SectionDescription","SectionContent"],"mappings":";;;AAOA,MAAMA,IAAUC,EAAM;AAAA,EACpB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC,EAAC,WAAA,EAAQ,KAAAD,GAAU,WAAWE,EAAG,aAAaJ,CAAS,GAAI,GAAGC,EAAA,CAAO;AAEzE;AACAH,EAAQ,cAAc;AAEtB,MAAMO,IAAgBN,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,aAAaJ,CAAS,GAAI,GAAGC,GAAO,CAClE;AACDI,EAAc,cAAc;AAE5B,MAAMC,IAAeP,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,qDAAqDJ,CAAS;AAAA,IAC3E,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAa,cAAc;AAE3B,MAAMC,IAAqBR,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAmB,cAAc;AAEjC,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,QAAQJ,CAAS,GAAI,GAAGC,GAAO,CAC7D;AACDO,EAAe,cAAc;"}
+{"version":3,"file":"section.js","names":[],"sources":["../../../../src/components/ui/section/section.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Switch } from '@/components/ui/switch';\nimport { buttonIconVariants } from '@/components/ui/button-icon';\nimport { AccordionContainer } from '@/components/ui/accordion-container';\n\n// Figma node 8262:6179 (\"Section\"). A titled band that groups cards — or a\n// table — on a page. Where `Card` owns a single surface and `CardSection`\n// divides a card's body, `Section` is the page-level grouping above both.\n//\n// Padding is variant-dependent, straight from the design. The three card\n// layouts (`column1`, `column2-70-30`, `grid3`) inset their content\n// (`px-4 pt-4`) and deliberately reserve no bottom padding: stacked unbordered\n// sections would otherwise double up their vertical spacing, since the next\n// section already opens with its own `pt-4`. `hasBottomBorder` adds the divider\n// plus the matching `pb-4` that closes the band off. The `table` variant sits\n// completely flush — no root padding at all — so its rows can bleed to the page\n// edges; only the divider still applies, and `SectionHeader` re-applies the\n// inset it drops. This is the same reasoning as `card-section.tsx`'s\n// `table-actions` variant, one level up.\n//\n// `hasHeader` from Figma isn't reproduced as a boolean: this is a compound\n// component (`Section` + `SectionHeader` + `SectionContent`), so a part is\n// simply omitted by the consumer instead of hidden behind a flag — same pattern\n// as `Card`. `SectionHeader`'s own toggles (`hasDescription`, `isSwitchable`,\n// `isCollapsible`) stay booleans because each gates a real sub-part with its\n// own payload.\n//\n// The design's `isCollapsable` variant (`false` / `true-expanded` /\n// `true-collapsed`) is implemented by composing `Section` with\n// `AccordionContainer` — the shared disclosure primitive — exactly like `Card`:\n// wrap header + content, set `SectionHeader`'s `isCollapsible` to render the\n// trigger, and restyle that trigger with `buttonIconVariants({ variant:\n// 'ghost' })` because Figma's `ButtonCollapse` is a real ghost `ButtonIcon`.\n//\n// No dedicated `--ui-section-*` token tier exists in tokens-pd (same as\n// `Card` / `CardSection`), so the chrome rides on the shared semantic tier.\n\nconst sectionVariants = cva('flex w-full flex-col gap-3', {\n  variants: {\n    variant: {\n      column1: 'px-4 pt-4',\n      'column2-70-30': 'px-4 pt-4',\n      grid3: 'px-4 pt-4',\n      // Flush: the table's own rows run edge-to-edge.\n      table: '',\n    },\n    hasBottomBorder: {\n      false: '',\n      true: 'border-b border-[var(--ui-border-on-surface-divider)]',\n    },\n  },\n  compoundVariants: [\n    { variant: 'column1', hasBottomBorder: true, class: 'pb-4' },\n    { variant: 'column2-70-30', hasBottomBorder: true, class: 'pb-4' },\n    { variant: 'grid3', hasBottomBorder: true, class: 'pb-4' },\n  ],\n  defaultVariants: {\n    variant: 'column1',\n    hasBottomBorder: false,\n  },\n});\n\ntype SectionVariant = NonNullable<\n  VariantProps<typeof sectionVariants>['variant']\n>;\n\ninterface SectionContextValue {\n  variant: SectionVariant;\n}\n\n// `SectionContent` and `SectionHeader` need the root's content layout without\n// the consumer repeating `variant` on every part, so the root publishes it.\nconst SectionContext = React.createContext<SectionContextValue>({\n  variant: 'column1',\n});\n\n/**\n * Reads the content layout of the nearest `Section` ancestor. Falls back to\n * `column1` for a part rendered outside a `Section`.\n */\nconst useSectionContext = () => React.useContext(SectionContext);\n\nexport interface SectionProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof sectionVariants> {\n  /**\n   * Replace the rendered `<section>` with another element or component (Base UI\n   * composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Section = React.forwardRef<HTMLElement, SectionProps>(\n  (\n    { className, variant = 'column1', hasBottomBorder = false, render, ...props },\n    ref\n  ) => {\n    const contextValue = React.useMemo<SectionContextValue>(\n      () => ({ variant: variant ?? 'column1' }),\n      [variant]\n    );\n\n    const rendered = useRender({\n      render,\n      ref,\n      defaultTagName: 'section',\n      props: mergeProps<'section'>(\n        {\n          className: cn(\n            sectionVariants({ variant, hasBottomBorder }),\n            className\n          ),\n        },\n        props\n      ),\n    });\n\n    return (\n      <SectionContext.Provider value={contextValue}>\n        {rendered}\n      </SectionContext.Provider>\n    );\n  }\n);\nSection.displayName = 'Section';\n\nexport interface SectionHeaderProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** The section's title. Renders nothing when omitted. */\n  title?: string;\n  /** Helper text shown under the title; only rendered when `hasDescription`. */\n  description?: string;\n  /** Shows `description` below the title. */\n  hasDescription?: boolean;\n  /** Shows a toggle switch at the start of the header. */\n  isSwitchable?: boolean;\n  /** Controlled checked state of the header switch. */\n  switchChecked?: boolean;\n  /** Uncontrolled initial checked state of the header switch. */\n  defaultSwitchChecked?: boolean;\n  /** Fires when the header switch is toggled. */\n  onSwitchCheckedChange?: (checked: boolean) => void;\n  /** Disables the header switch. */\n  switchDisabled?: boolean;\n  /** Accessible label for the header switch. */\n  switchLabel?: string;\n  /** Extra content rendered inline next to the title (e.g. a tag or badge). */\n  extras?: React.ReactNode;\n  /** Actions rendered at the end of the header (e.g. a button). */\n  actions?: React.ReactNode;\n  /**\n   * Shows a disclosure trigger at the end of the header. Only has an effect\n   * when this header renders inside a collapsible `AccordionContainer` —\n   * see the collapsible composition example.\n   */\n  isCollapsible?: boolean;\n  /** Accessible label for the collapse trigger. */\n  collapseLabel?: string;\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(\n  (\n    {\n      className,\n      title,\n      description,\n      hasDescription = false,\n      isSwitchable = false,\n      switchChecked,\n      defaultSwitchChecked,\n      onSwitchCheckedChange,\n      switchDisabled,\n      switchLabel = 'Toggle section',\n      extras,\n      actions,\n      isCollapsible = false,\n      collapseLabel = 'Collapse section',\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { variant } = useSectionContext();\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'flex w-full shrink-0 items-center gap-2',\n            // The `table` root drops its inset so the rows below can bleed to\n            // the page edges; the header re-applies it so the title still lines\n            // up with the first column.\n            variant === 'table' && 'px-4 pt-4',\n            className\n          ),\n          children: (\n            <>\n              {isSwitchable && (\n                <Switch\n                  checked={switchChecked}\n                  defaultChecked={defaultSwitchChecked}\n                  onCheckedChange={onSwitchCheckedChange}\n                  disabled={switchDisabled}\n                  aria-label={switchLabel}\n                  className=\"shrink-0\"\n                />\n              )}\n              {/* Gated as a whole: an empty wrapper would still claim the\n                  header row's free space through `flex-1` and push a\n                  consumer-supplied heading (`children`) to the end. */}\n              {(title || extras || hasDescription) && (\n                <div className=\"flex min-w-0 flex-1 flex-col items-start justify-center gap-0.5\">\n                  <div className=\"flex min-w-0 items-center gap-2\">\n                    {title && (\n                      <p className=\"truncate text-xl leading-6 font-medium text-[var(--ui-text-on-surface-primary)]\">\n                        {title}\n                      </p>\n                    )}\n                    {extras}\n                  </div>\n                  {hasDescription && (\n                    <p className=\"w-full truncate text-sm leading-6 text-[var(--ui-text-on-surface-secondary)]\">\n                      {description}\n                    </p>\n                  )}\n                </div>\n              )}\n              {children}\n              {actions}\n              {isCollapsible && (\n                <AccordionContainer.Trigger\n                  aria-label={collapseLabel}\n                  className={buttonIconVariants({ variant: 'ghost' })}\n                />\n              )}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nSectionHeader.displayName = 'SectionHeader';\n\nexport interface SectionContentProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The narrow (~30%) second column of the `column2-70-30` layout. Ignored by\n   * every other variant, which has only one content area.\n   */\n  secondaryContent?: React.ReactNode;\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst SectionContent = React.forwardRef<HTMLDivElement, SectionContentProps>(\n  ({ className, secondaryContent, render, children, ...props }, ref) => {\n    const { variant } = useSectionContext();\n    const isTwoColumn = variant === 'column2-70-30';\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'w-full',\n            // Both grid layouts share the same 3-column track; the 70/30 split\n            // is a 2:1 span of it, and `grid3` simply lets children flow.\n            (isTwoColumn || variant === 'grid3') &&\n              'grid grid-cols-3 items-start gap-4',\n            className\n          ),\n          children: isTwoColumn ? (\n            <>\n              <div className=\"col-span-2 min-w-0\">{children}</div>\n              {secondaryContent != null && (\n                <div className=\"col-span-1 min-w-0\">{secondaryContent}</div>\n              )}\n            </>\n          ) : (\n            children\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nSectionContent.displayName = 'SectionContent';\n\nexport {\n  Section,\n  SectionHeader,\n  SectionContent,\n  sectionVariants,\n  useSectionContext,\n  type SectionVariant,\n};\n"],"mappings":";;;;;;;;;;;AA4CA,IAAM,IAAkB,EAAI,8BAA8B;CACxD,UAAU;EACR,SAAS;GACP,SAAS;GACT,iBAAiB;GACjB,OAAO;GAEP,OAAO;EACT;EACA,iBAAiB;GACf,OAAO;GACP,MAAM;EACR;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAW,iBAAiB;GAAM,OAAO;EAAO;EAC3D;GAAE,SAAS;GAAiB,iBAAiB;GAAM,OAAO;EAAO;EACjE;GAAE,SAAS;GAAS,iBAAiB;GAAM,OAAO;EAAO;CAC3D;CACA,iBAAiB;EACf,SAAS;EACT,iBAAiB;CACnB;AACF,CAAC,GAYK,IAAiB,EAAM,cAAmC,EAC9D,SAAS,UACX,CAAC,GAMK,UAA0B,EAAM,WAAW,CAAc,GAazD,IAAU,EAAM,YAElB,EAAE,cAAW,aAAU,WAAW,qBAAkB,IAAO,WAAQ,GAAG,KACtE,MACG;CACH,IAAM,IAAe,EAAM,eAClB,EAAE,SAAS,KAAW,UAAU,IACvC,CAAC,CAAO,CACV,GAEM,IAAW,EAAU;EACzB;EACA;EACA,gBAAgB;EAChB,OAAO,EACL,EACE,WAAW,EACT,EAAgB;GAAE;GAAS;EAAgB,CAAC,GAC5C,CACF,EACF,GACA,CACF;CACF,CAAC;CAED,OACE,kBAAC,EAAe,UAAhB;EAAyB,OAAO;EAC7B,UAAA;CACsB,CAAA;AAE7B,CACF;AACA,EAAQ,cAAc;AA2CtB,IAAM,IAAgB,EAAM,YAExB,EACE,cACA,UACA,gBACA,oBAAiB,IACjB,kBAAe,IACf,kBACA,yBACA,0BACA,mBACA,iBAAc,kBACd,WACA,YACA,mBAAgB,IAChB,mBAAgB,oBAChB,WACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,EAAE,eAAY,EAAkB;CAEtC,OAAO,EAAU;EACf;EACA;EACA,gBAAgB;EAChB,OAAO,EACL;GACE,WAAW,EACT,2CAIA,MAAY,WAAW,aACvB,CACF;GACA,UACE,kBAAA,GAAA,EAAA,UAAA;IACG,KACC,kBAAC,GAAD;KACE,SAAS;KACT,gBAAgB;KAChB,iBAAiB;KACjB,UAAU;KACV,cAAY;KACZ,WAAU;IACX,CAAA;KAKD,KAAS,KAAU,MACnB,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACG,KACC,kBAAC,KAAD;OAAG,WAAU;OACV,UAAA;MACA,CAAA,GAEJ,CACE;KACJ,CAAA,GAAA,KACC,kBAAC,KAAD;MAAG,WAAU;MACV,UAAA;KACA,CAAA,CAEF;;IAEN;IACA;IACA,KACC,kBAAC,EAAmB,SAApB;KACE,cAAY;KACZ,WAAW,EAAmB,EAAE,SAAS,QAAQ,CAAC;IACnD,CAAA;GAEH,EAAA,CAAA;EAEN,GACA,CACF;CACF,CAAC;AACH,CACF;AACA,EAAc,cAAc;AAgB5B,IAAM,IAAiB,EAAM,YAC1B,EAAE,cAAW,qBAAkB,WAAQ,aAAU,GAAG,KAAS,MAAQ;CACpE,IAAM,EAAE,eAAY,EAAkB,GAChC,IAAc,MAAY;CAEhC,OAAO,EAAU;EACf;EACA;EACA,gBAAgB;EAChB,OAAO,EACL;GACE,WAAW,EACT,WAGC,KAAe,MAAY,YAC1B,sCACF,CACF;GACA,UAAU,IACR,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAsB;GAAc,CAAA,GAClD,KAAoB,QACnB,kBAAC,OAAD;IAAK,WAAU;IAAsB,UAAA;GAAsB,CAAA,CAE7D,EAAA,CAAA,IAEF;EAEJ,GACA,CACF;CACF,CAAC;AACH,CACF;AACA,EAAe,cAAc"}

package/dist/components/ui/separator/separator.js

@@ -1,22 +1,16 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as m from "react";
-import { Separator as e } from "@base-ui/react/separator";
-import { cn as f } from "../../../lib/utils.js";
-const l = m.forwardRef(({ className: o, orientation: r = "horizontal", ...a }, p) => /* @__PURE__ */ t(
-  e,
-  {
-    ref: p,
-    orientation: r,
-    className: f(
-      "shrink-0 bg-border",
-      r === "horizontal" ? "h-px w-full" : "h-full w-px",
-      o
-    ),
-    ...a
-  }
-));
-l.displayName = "Separator";
-export {
-  l as Separator
-};
-//# sourceMappingURL=separator.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Separator as r } from "@base-ui/react/separator";
+//#region src/components/ui/separator/separator.tsx
+var i = t.forwardRef(({ className: t, orientation: i = "horizontal", ...a }, o) => /* @__PURE__ */ n(r, {
+	ref: o,
+	orientation: i,
+	className: e("shrink-0 bg-border", i === "horizontal" ? "h-px w-full" : "h-full w-px", t),
+	...a
+}));
+i.displayName = "Separator";
+//#endregion
+export { i as Separator };
+
+//# sourceMappingURL=separator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"separator.js","sources":["../../../../src/components/ui/separator/separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `separator`\n// (packages/ui-legacy/src/components/ui/separator.tsx). A thin divider built on\n// the Base UI Separator primitive (sets the `separator` role + aria-orientation).\n// No `--ui-separator-*` tier; the line uses the shared divider token `bg-border`\n// (--ui-border-on-surface-border), replacing the legacy `bg-primary/10` hack.\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>\n>(({ className, orientation = 'horizontal', ...props }, ref) => (\n  <SeparatorPrimitive\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'shrink-0 bg-border',\n      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n      className\n    )}\n    {...props}\n  />\n));\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"],"names":["Separator","React","className","orientation","props","ref","jsx","SeparatorPrimitive","cn"],"mappings":";;;;AAWA,MAAMA,IAAYC,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,GAAGC,KAASC,MACtD,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,aAAAF;AAAA,IACA,WAAWK;AAAA,MACT;AAAA,MACAL,MAAgB,eAAe,gBAAgB;AAAA,MAC/CD;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAU,cAAc;"}
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/components/ui/separator/separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `separator`\n// (packages/ui-legacy/src/components/ui/separator.tsx). A thin divider built on\n// the Base UI Separator primitive (sets the `separator` role + aria-orientation).\n// No `--ui-separator-*` tier; the line uses the shared divider token `bg-border`\n// (--ui-border-on-surface-border), replacing the legacy `bg-primary/10` hack.\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>\n>(({ className, orientation = 'horizontal', ...props }, ref) => (\n  <SeparatorPrimitive\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'shrink-0 bg-border',\n      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n      className\n    )}\n    {...props}\n  />\n));\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"],"mappings":";;;;;AAWA,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,iBAAc,cAAc,GAAG,KAAS,MACtD,kBAAC,GAAD;CACO;CACQ;CACb,WAAW,EACT,sBACA,MAAgB,eAAe,gBAAgB,eAC/C,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc"}

package/dist/components/ui/sheet/sheet-details.js

@@ -1,80 +1,57 @@
-import { jsxs as l, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { Sheet as S, SheetTrigger as D, SheetContent as x, SheetHeader as L, SheetTitle as N, SheetCloseButton as E, SheetBody as T, SheetFooter as b } from "./sheet.js";
-import { Loading as j } from "../loading/loading.js";
-import { Empty as w, EmptyHeader as B, EmptyTitle as v, EmptyDescription as C } from "../empty/empty.js";
-import { DescriptionList as F, DescriptionListItem as H, DescriptionListLabel as I, DescriptionListValue as V } from "../description-list/description-list.js";
-function k({
-  contentState: t,
-  properties: i,
-  children: n,
-  emptyTitle: d,
-  emptyDescription: h,
-  errorTitle: m,
-  errorDescription: s
-}) {
-  if (t === "loading")
-    return /* @__PURE__ */ e("div", { className: "flex h-40 items-center justify-center", children: /* @__PURE__ */ e(j, {}) });
-  if (t === "empty" || t === "error") {
-    const r = t === "error";
-    return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ l(B, { children: [
-      /* @__PURE__ */ e(v, { children: r ? m ?? "Something went wrong" : d ?? "Nothing to show" }),
-      /* @__PURE__ */ e(C, { children: r ? s ?? "The details could not be loaded." : h ?? "There are no details to display yet." })
-    ] }) });
-  }
-  return n ? /* @__PURE__ */ e(p, { children: n }) : i != null && i.length ? /* @__PURE__ */ e(
-    F,
-    {
-      className: "-mx-6",
-      style: { "--description-list-label": "9rem" },
-      children: i.map((r, o) => /* @__PURE__ */ l(H, { children: [
-        /* @__PURE__ */ e(I, { className: "text-muted-foreground", children: r.label }),
-        /* @__PURE__ */ e(V, { className: "font-medium", children: r.value })
-      ] }, o))
-    }
-  ) : null;
+import { DescriptionList as e, DescriptionListItem as t, DescriptionListLabel as n, DescriptionListValue as r } from "../description-list/description-list.js";
+import { Loading as i } from "../loading/loading.js";
+import { Empty as a, EmptyDescription as o, EmptyHeader as s, EmptyTitle as c } from "../empty/empty.js";
+import { Sheet as l, SheetBody as u, SheetCloseButton as d, SheetContent as f, SheetFooter as p, SheetHeader as m, SheetTitle as h, SheetTrigger as g } from "./sheet.js";
+import "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/ui/sheet/sheet-details.tsx
+function b({ contentState: l, properties: u, children: d, emptyTitle: f, emptyDescription: p, errorTitle: m, errorDescription: h }) {
+	if (l === "loading") return /* @__PURE__ */ v("div", {
+		className: "flex h-40 items-center justify-center",
+		children: /* @__PURE__ */ v(i, {})
+	});
+	if (l === "empty" || l === "error") {
+		let e = l === "error";
+		return /* @__PURE__ */ v(a, { children: /* @__PURE__ */ y(s, { children: [/* @__PURE__ */ v(c, { children: e ? m ?? "Something went wrong" : f ?? "Nothing to show" }), /* @__PURE__ */ v(o, { children: e ? h ?? "The details could not be loaded." : p ?? "There are no details to display yet." })] }) });
+	}
+	return d ? /* @__PURE__ */ v(_, { children: d }) : u?.length ? /* @__PURE__ */ v(e, {
+		className: "-mx-6",
+		style: { "--description-list-label": "9rem" },
+		children: u.map((e, i) => /* @__PURE__ */ y(t, { children: [/* @__PURE__ */ v(n, {
+			className: "text-muted-foreground",
+			children: e.label
+		}), /* @__PURE__ */ v(r, {
+			className: "font-medium",
+			children: e.value
+		})] }, i))
+	}) : null;
 }
-function q({
-  open: t,
-  defaultOpen: i,
-  onOpenChange: n,
-  title: d,
-  side: h = "right",
-  contentState: m = "content",
-  properties: s,
-  children: r,
-  actions: o,
-  trigger: c,
-  emptyTitle: a,
-  emptyDescription: u,
-  errorTitle: f,
-  errorDescription: y,
-  portalContainer: g
-}) {
-  return /* @__PURE__ */ l(S, { open: t, defaultOpen: i, onOpenChange: n, children: [
-    c ? /* @__PURE__ */ e(D, { render: c }) : null,
-    /* @__PURE__ */ l(x, { side: h, portalContainer: g, children: [
-      /* @__PURE__ */ l(L, { children: [
-        /* @__PURE__ */ e(N, { children: d }),
-        /* @__PURE__ */ e(E, {})
-      ] }),
-      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
-        k,
-        {
-          contentState: m,
-          properties: s,
-          emptyTitle: a,
-          emptyDescription: u,
-          errorTitle: f,
-          errorDescription: y,
-          children: r
-        }
-      ) }),
-      o ? /* @__PURE__ */ e(b, { children: o }) : null
-    ] })
-  ] });
+function x({ open: e, defaultOpen: t, onOpenChange: n, title: r, side: i = "right", contentState: a = "content", properties: o, children: s, actions: c, trigger: _, emptyTitle: x, emptyDescription: S, errorTitle: C, errorDescription: w, portalContainer: T }) {
+	return /* @__PURE__ */ y(l, {
+		open: e,
+		defaultOpen: t,
+		onOpenChange: n,
+		children: [_ ? /* @__PURE__ */ v(g, { render: _ }) : null, /* @__PURE__ */ y(f, {
+			side: i,
+			portalContainer: T,
+			children: [
+				/* @__PURE__ */ y(m, { children: [/* @__PURE__ */ v(h, { children: r }), /* @__PURE__ */ v(d, {})] }),
+				/* @__PURE__ */ v(u, { children: /* @__PURE__ */ v(b, {
+					contentState: a,
+					properties: o,
+					emptyTitle: x,
+					emptyDescription: S,
+					errorTitle: C,
+					errorDescription: w,
+					children: s
+				}) }),
+				c ? /* @__PURE__ */ v(p, { children: c }) : null
+			]
+		})]
+	});
 }
-q.displayName = "SheetDetails";
-export {
-  q as SheetDetails
-};
-//# sourceMappingURL=sheet-details.js.map
+x.displayName = "SheetDetails";
+//#endregion
+export { x as SheetDetails };
+
+//# sourceMappingURL=sheet-details.js.map

package/dist/components/ui/sheet/sheet-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-details.js","sources":["../../../../src/components/ui/sheet/sheet-details.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n} from '../description-list';\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from '../empty';\nimport { Loading } from '../loading';\nimport {\n  Sheet,\n  SheetBody,\n  SheetCloseButton,\n  type SheetContentProps,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet';\n\n// `SheetDetails` is the preset for the `sheet-detail-panel` usage pattern — the\n// \"easy path that IS the pattern\". It bakes a right-anchored Sheet's header\n// (title + close), a body that switches by `contentState`\n// (loading → Loading, empty/error → Empty, else a key/value property list or\n// custom children), and an optional footer of actions — so consumers don't\n// re-assemble (or hand-roll) the recipe. For anything outside the recipe, compose\n// the `Sheet*` parts directly. (React composition of the Vue kit's `Details`.)\n\nexport interface SheetDetailsProperty {\n  label: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport type SheetDetailsContentState = 'content' | 'loading' | 'empty' | 'error';\n\nexport interface SheetDetailsProps {\n  /** Controlled open state. Pair with `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Fires when the sheet opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Panel title (header). Also the accessible name. */\n  title: React.ReactNode;\n  /** Edge the panel anchors to. Defaults to `right`. */\n  side?: SheetContentProps['side'];\n  /** Which body view to show. Defaults to `content`. */\n  contentState?: SheetDetailsContentState;\n  /** Key/value rows rendered as the body in the `content` state (unless `children`). */\n  properties?: SheetDetailsProperty[];\n  /** Custom body for the `content` state — overrides `properties`. */\n  children?: React.ReactNode;\n  /** Footer action(s). Omit for no footer. */\n  actions?: React.ReactNode;\n  /** Optional trigger element (rendered via the Sheet trigger's `render`). */\n  trigger?: React.ReactElement;\n  /** Empty-state copy (`contentState=\"empty\"`). */\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n  /** Error-state copy (`contentState=\"error\"`). */\n  errorTitle?: React.ReactNode;\n  errorDescription?: React.ReactNode;\n  /** Portal container (shadow-root mount for isolated previews). */\n  portalContainer?: SheetContentProps['portalContainer'];\n}\n\nfunction SheetDetailsBody({\n  contentState,\n  properties,\n  children,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n}: Pick<\n  SheetDetailsProps,\n  | 'contentState'\n  | 'properties'\n  | 'children'\n  | 'emptyTitle'\n  | 'emptyDescription'\n  | 'errorTitle'\n  | 'errorDescription'\n>) {\n  if (contentState === 'loading') {\n    return (\n      <div className=\"flex h-40 items-center justify-center\">\n        <Loading />\n      </div>\n    );\n  }\n  if (contentState === 'empty' || contentState === 'error') {\n    const isError = contentState === 'error';\n    return (\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>\n            {isError\n              ? (errorTitle ?? 'Something went wrong')\n              : (emptyTitle ?? 'Nothing to show')}\n          </EmptyTitle>\n          <EmptyDescription>\n            {isError\n              ? (errorDescription ?? 'The details could not be loaded.')\n              : (emptyDescription ?? 'There are no details to display yet.')}\n          </EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    );\n  }\n  if (children) return <>{children}</>;\n  if (properties?.length) {\n    // Render through DescriptionList. `-mx-6` cancels the SheetBody padding so\n    // the row dividers go full-bleed while the content stays aligned at the\n    // panel's 24px inset; the label column is tightened for the narrow panel.\n    return (\n      <DescriptionList\n        className=\"-mx-6\"\n        style={{ '--description-list-label': '9rem' } as React.CSSProperties}\n      >\n        {properties.map((p, i) => (\n          <DescriptionListItem key={i}>\n            <DescriptionListLabel className=\"text-muted-foreground\">\n              {p.label}\n            </DescriptionListLabel>\n            <DescriptionListValue className=\"font-medium\">\n              {p.value}\n            </DescriptionListValue>\n          </DescriptionListItem>\n        ))}\n      </DescriptionList>\n    );\n  }\n  return null;\n}\n\nfunction SheetDetails({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  side = 'right',\n  contentState = 'content',\n  properties,\n  children,\n  actions,\n  trigger,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n  portalContainer,\n}: SheetDetailsProps) {\n  return (\n    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {trigger ? <SheetTrigger render={trigger} /> : null}\n      <SheetContent side={side} portalContainer={portalContainer}>\n        <SheetHeader>\n          <SheetTitle>{title}</SheetTitle>\n          <SheetCloseButton />\n        </SheetHeader>\n        <SheetBody>\n          <SheetDetailsBody\n            contentState={contentState}\n            properties={properties}\n            emptyTitle={emptyTitle}\n            emptyDescription={emptyDescription}\n            errorTitle={errorTitle}\n            errorDescription={errorDescription}\n          >\n            {children}\n          </SheetDetailsBody>\n        </SheetBody>\n        {actions ? <SheetFooter>{actions}</SheetFooter> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\nSheetDetails.displayName = 'SheetDetails';\n\nexport { SheetDetails };\n"],"names":["SheetDetailsBody","contentState","properties","children","emptyTitle","emptyDescription","errorTitle","errorDescription","jsx","Loading","isError","Empty","jsxs","EmptyHeader","EmptyTitle","EmptyDescription","Fragment","DescriptionList","p","i","DescriptionListItem","DescriptionListLabel","DescriptionListValue","SheetDetails","open","defaultOpen","onOpenChange","title","side","actions","trigger","portalContainer","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetCloseButton","SheetBody","SheetFooter"],"mappings":";;;;;AAyEA,SAASA,EAAiB;AAAA,EACxB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACF,GASG;AACD,MAAIN,MAAiB;AACnB,6BACG,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAO,EAACC,KAAQ,GACX;AAGJ,MAAIR,MAAiB,WAAWA,MAAiB,SAAS;AACxD,UAAMS,IAAUT,MAAiB;AACjC,WACE,gBAAAO,EAACG,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EACE,UAAAJ,IACIJ,KAAc,yBACdF,KAAc,mBACrB;AAAA,wBACCW,GAAA,EACE,UAAAL,IACIH,KAAoB,qCACpBF,KAAoB,uCAAA,CAC3B;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACA,SAAIF,IAAiB,gBAAAK,EAAAQ,GAAA,EAAG,UAAAb,EAAA,CAAS,IAC7BD,KAAA,QAAAA,EAAY,SAKZ,gBAAAM;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,4BAA4B,OAAA;AAAA,MAEpC,YAAW,IAAI,CAACC,GAAGC,wBACjBC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAA,EAAqB,WAAU,yBAC7B,UAAAH,EAAE,OACL;AAAA,QACA,gBAAAV,EAACc,GAAA,EAAqB,WAAU,eAC7B,YAAE,MAAA,CACL;AAAA,MAAA,EAAA,GANwBH,CAO1B,CACD;AAAA,IAAA;AAAA,EAAA,IAIA;AACT;AAEA,SAASI,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAA3B,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAA0B;AAAA,EACA,SAAAC;AAAA,EACA,YAAA1B;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAwB;AACF,GAAsB;AACpB,SACE,gBAAAnB,EAACoB,GAAA,EAAM,MAAAR,GAAY,aAAAC,GAA0B,cAAAC,GAC1C,UAAA;AAAA,IAAAI,IAAU,gBAAAtB,EAACyB,GAAA,EAAa,QAAQH,EAAA,CAAS,IAAK;AAAA,IAC/C,gBAAAlB,EAACsB,GAAA,EAAa,MAAAN,GAAY,iBAAAG,GACxB,UAAA;AAAA,MAAA,gBAAAnB,EAACuB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAA3B,EAAC4B,KAAY,UAAAT,EAAA,CAAM;AAAA,0BAClBU,GAAA,CAAA,CAAiB;AAAA,MAAA,GACpB;AAAA,wBACCC,GAAA,EACC,UAAA,gBAAA9B;AAAA,QAACR;AAAA,QAAA;AAAA,UACC,cAAAC;AAAA,UACA,YAAAC;AAAA,UACA,YAAAE;AAAA,UACA,kBAAAC;AAAA,UACA,YAAAC;AAAA,UACA,kBAAAC;AAAA,UAEC,UAAAJ;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACC0B,IAAU,gBAAArB,EAAC+B,GAAA,EAAa,UAAAV,EAAA,CAAQ,IAAiB;AAAA,IAAA,EAAA,CACpD;AAAA,EAAA,GACF;AAEJ;AACAN,EAAa,cAAc;"}
+{"version":3,"file":"sheet-details.js","names":[],"sources":["../../../../src/components/ui/sheet/sheet-details.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n} from '../description-list';\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from '../empty';\nimport { Loading } from '../loading';\nimport {\n  Sheet,\n  SheetBody,\n  SheetCloseButton,\n  type SheetContentProps,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet';\n\n// `SheetDetails` is the preset for the `sheet-detail-panel` usage pattern — the\n// \"easy path that IS the pattern\". It bakes a right-anchored Sheet's header\n// (title + close), a body that switches by `contentState`\n// (loading → Loading, empty/error → Empty, else a key/value property list or\n// custom children), and an optional footer of actions — so consumers don't\n// re-assemble (or hand-roll) the recipe. For anything outside the recipe, compose\n// the `Sheet*` parts directly. (React composition of the Vue kit's `Details`.)\n\nexport interface SheetDetailsProperty {\n  label: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport type SheetDetailsContentState = 'content' | 'loading' | 'empty' | 'error';\n\nexport interface SheetDetailsProps {\n  /** Controlled open state. Pair with `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Fires when the sheet opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Panel title (header). Also the accessible name. */\n  title: React.ReactNode;\n  /** Edge the panel anchors to. Defaults to `right`. */\n  side?: SheetContentProps['side'];\n  /** Which body view to show. Defaults to `content`. */\n  contentState?: SheetDetailsContentState;\n  /** Key/value rows rendered as the body in the `content` state (unless `children`). */\n  properties?: SheetDetailsProperty[];\n  /** Custom body for the `content` state — overrides `properties`. */\n  children?: React.ReactNode;\n  /** Footer action(s). Omit for no footer. */\n  actions?: React.ReactNode;\n  /** Optional trigger element (rendered via the Sheet trigger's `render`). */\n  trigger?: React.ReactElement;\n  /** Empty-state copy (`contentState=\"empty\"`). */\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n  /** Error-state copy (`contentState=\"error\"`). */\n  errorTitle?: React.ReactNode;\n  errorDescription?: React.ReactNode;\n  /** Portal container (shadow-root mount for isolated previews). */\n  portalContainer?: SheetContentProps['portalContainer'];\n}\n\nfunction SheetDetailsBody({\n  contentState,\n  properties,\n  children,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n}: Pick<\n  SheetDetailsProps,\n  | 'contentState'\n  | 'properties'\n  | 'children'\n  | 'emptyTitle'\n  | 'emptyDescription'\n  | 'errorTitle'\n  | 'errorDescription'\n>) {\n  if (contentState === 'loading') {\n    return (\n      <div className=\"flex h-40 items-center justify-center\">\n        <Loading />\n      </div>\n    );\n  }\n  if (contentState === 'empty' || contentState === 'error') {\n    const isError = contentState === 'error';\n    return (\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>\n            {isError\n              ? (errorTitle ?? 'Something went wrong')\n              : (emptyTitle ?? 'Nothing to show')}\n          </EmptyTitle>\n          <EmptyDescription>\n            {isError\n              ? (errorDescription ?? 'The details could not be loaded.')\n              : (emptyDescription ?? 'There are no details to display yet.')}\n          </EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    );\n  }\n  if (children) return <>{children}</>;\n  if (properties?.length) {\n    // Render through DescriptionList. `-mx-6` cancels the SheetBody padding so\n    // the row dividers go full-bleed while the content stays aligned at the\n    // panel's 24px inset; the label column is tightened for the narrow panel.\n    return (\n      <DescriptionList\n        className=\"-mx-6\"\n        style={{ '--description-list-label': '9rem' } as React.CSSProperties}\n      >\n        {properties.map((p, i) => (\n          <DescriptionListItem key={i}>\n            <DescriptionListLabel className=\"text-muted-foreground\">\n              {p.label}\n            </DescriptionListLabel>\n            <DescriptionListValue className=\"font-medium\">\n              {p.value}\n            </DescriptionListValue>\n          </DescriptionListItem>\n        ))}\n      </DescriptionList>\n    );\n  }\n  return null;\n}\n\nfunction SheetDetails({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  side = 'right',\n  contentState = 'content',\n  properties,\n  children,\n  actions,\n  trigger,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n  portalContainer,\n}: SheetDetailsProps) {\n  return (\n    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {trigger ? <SheetTrigger render={trigger} /> : null}\n      <SheetContent side={side} portalContainer={portalContainer}>\n        <SheetHeader>\n          <SheetTitle>{title}</SheetTitle>\n          <SheetCloseButton />\n        </SheetHeader>\n        <SheetBody>\n          <SheetDetailsBody\n            contentState={contentState}\n            properties={properties}\n            emptyTitle={emptyTitle}\n            emptyDescription={emptyDescription}\n            errorTitle={errorTitle}\n            errorDescription={errorDescription}\n          >\n            {children}\n          </SheetDetailsBody>\n        </SheetBody>\n        {actions ? <SheetFooter>{actions}</SheetFooter> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\nSheetDetails.displayName = 'SheetDetails';\n\nexport { SheetDetails };\n"],"mappings":";;;;;;;AAyEA,SAAS,EAAiB,EACxB,iBACA,eACA,aACA,eACA,qBACA,eACA,uBAUC;CACD,IAAI,MAAiB,WACnB,OACE,kBAAC,OAAD;EAAK,WAAU;EACb,UAAA,kBAAC,GAAD,CAAU,CAAA;CACP,CAAA;CAGT,IAAI,MAAiB,WAAW,MAAiB,SAAS;EACxD,IAAM,IAAU,MAAiB;EACjC,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACG,IACI,KAAc,yBACd,KAAc,kBACT,CAAA,GACZ,kBAAC,GAAD,EAAA,UACG,IACI,KAAoB,qCACpB,KAAoB,uCACT,CAAA,CACP,EAAA,CAAA,EACR,CAAA;CAEX;CAwBA,OAvBI,IAAiB,kBAAA,GAAA,EAAG,YAAW,CAAA,IAC/B,GAAY,SAKZ,kBAAC,GAAD;EACE,WAAU;EACV,OAAO,EAAE,4BAA4B,OAAO;EAE3C,UAAA,EAAW,KAAK,GAAG,MAClB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAsB,WAAU;GAC7B,UAAA,EAAE;EACiB,CAAA,GACtB,kBAAC,GAAD;GAAsB,WAAU;GAC7B,UAAA,EAAE;EACiB,CAAA,CACH,EAAA,GAPK,CAOL,CACtB;CACc,CAAA,IAGd;AACT;AAEA,SAAS,EAAa,EACpB,SACA,gBACA,iBACA,UACA,UAAO,SACP,kBAAe,WACf,eACA,aACA,YACA,YACA,eACA,qBACA,eACA,qBACA,sBACoB;CACpB,OACE,kBAAC,GAAD;EAAa;EAAmB;EAA2B;EAA3D,UAAA,CACG,IAAU,kBAAC,GAAD,EAAc,QAAQ,EAAU,CAAA,IAAI,MAC/C,kBAAC,GAAD;GAAoB;GAAuB;GAA3C,UAAA;IACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA,GAC/B,kBAAC,GAAD,CAAmB,CAAA,CACR,EAAA,CAAA;IACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KACgB;KACF;KACA;KACM;KACN;KACM;KAEjB;IACe,CAAA,EACT,CAAA;IACV,IAAU,kBAAC,GAAD,EAAA,UAAc,EAAqB,CAAA,IAAI;GACtC;EACT,CAAA,CAAA;;AAEX;AACA,EAAa,cAAc"}