@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/metric/metric.js

@@ -1,92 +1,86 @@
-import { jsxs as n, jsx as e, Fragment as N } from "react/jsx-runtime";
-import * as a from "react";
-import { CircleInfoIcon as v } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as b } from "../../../lib/utils.js";
-import { Skeleton as T } from "../skeleton/skeleton.js";
-import { Tooltip as k, TooltipTrigger as E, TooltipContent as I } from "../tooltip/tooltip.js";
-import { TrendIndicator as w } from "../trend-indicator/trend-indicator.js";
-const M = {
-  up: "up",
-  down: "down",
-  stable: "flat"
-}, R = {
-  up: "positive",
-  down: "negative",
-  stable: "neutral"
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { Tooltip as t, TooltipContent as n, TooltipTrigger as r } from "../tooltip/tooltip.js";
+import { Skeleton as i } from "../skeleton/skeleton.js";
+import { TrendIndicator as a } from "../trend-indicator/trend-indicator.js";
+import * as o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { CircleInfoIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/metric/metric.tsx
+var d = {
+	up: "up",
+	down: "down",
+	stable: "flat"
+}, f = {
+	up: "positive",
+	down: "negative",
+	stable: "neutral"
 };
-function j({ icon: r }) {
-  return /* @__PURE__ */ e(
-    "span",
-    {
-      "aria-hidden": !0,
-      className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ui-background-status-info)] text-[var(--ui-glyph-on-surface-neutral-dark)] [&_svg]:shrink-0",
-      children: a.isValidElement(r) ? a.cloneElement(r, {
-        size: 16
-      }) : r
-    }
-  );
+function p({ icon: e }) {
+	return /* @__PURE__ */ c("span", {
+		"aria-hidden": !0,
+		className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ui-background-status-info)] text-[var(--ui-glyph-on-surface-neutral-dark)] [&_svg]:shrink-0",
+		children: o.isValidElement(e) ? o.cloneElement(e, { size: 16 }) : e
+	});
 }
-function y({
-  value: r,
-  unit: l
-}) {
-  return /* @__PURE__ */ n(N, { children: [
-    /* @__PURE__ */ e("span", { className: "text-2xl font-semibold leading-8 tabular-nums text-foreground", children: r }),
-    l != null && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: l })
-  ] });
+function m({ value: e, unit: t }) {
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+		className: "text-2xl font-semibold leading-8 tabular-nums text-foreground",
+		children: e
+	}), t != null && /* @__PURE__ */ c("span", {
+		className: "text-xs text-muted-foreground",
+		children: t
+	})] });
 }
-const z = a.forwardRef(
-  ({
-    className: r,
-    value: l,
-    unit: m,
-    caption: i,
-    trend: t,
-    trendValue: u,
-    supportingText: s,
-    badge: o,
-    icon: c,
-    tooltip: d,
-    tooltipLabel: f = "More information",
-    loading: p = !1,
-    children: h,
-    ...x
-  }, g) => /* @__PURE__ */ n("div", { ref: g, className: b("flex flex-col gap-2", r), ...x, children: [
-    /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-        c != null && /* @__PURE__ */ e(j, { icon: c }),
-        /* @__PURE__ */ n("div", { className: "flex items-baseline gap-1", children: [
-          p ? /* @__PURE__ */ e(T, { className: "h-8 w-20" }) : /* @__PURE__ */ e(y, { value: l, unit: m }),
-          o != null && /* @__PURE__ */ e("span", { className: "ms-1 self-center", children: o })
-        ] }),
-        d != null && /* @__PURE__ */ n(k, { children: [
-          /* @__PURE__ */ e(
-            E,
-            {
-              "aria-label": f,
-              className: "inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground",
-              children: /* @__PURE__ */ e(v, { size: 16, "aria-hidden": !0 })
-            }
-          ),
-          /* @__PURE__ */ e(I, { children: d })
-        ] })
-      ] }),
-      i != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: i })
-    ] }),
-    t != null && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      w,
-      {
-        direction: M[t],
-        sentiment: R[t],
-        value: u
-      }
-    ) }),
-    s != null && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: s }),
-    h
-  ] })
-);
-z.displayName = "Metric";
-export {
-  z as Metric
-};
-//# sourceMappingURL=metric.js.map
+var h = o.forwardRef(({ className: o, value: s, unit: h, caption: g, trend: _, trendValue: v, supportingText: y, badge: b, icon: x, tooltip: S, tooltipLabel: C = "More information", loading: w = !1, children: T, ...E }, D) => /* @__PURE__ */ l("div", {
+	ref: D,
+	className: e("flex flex-col gap-2", o),
+	...E,
+	children: [
+		/* @__PURE__ */ l("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ l("div", {
+				className: "flex items-center gap-2",
+				children: [
+					x != null && /* @__PURE__ */ c(p, { icon: x }),
+					/* @__PURE__ */ l("div", {
+						className: "flex items-baseline gap-1",
+						children: [w ? /* @__PURE__ */ c(i, { className: "h-8 w-20" }) : /* @__PURE__ */ c(m, {
+							value: s,
+							unit: h
+						}), b != null && /* @__PURE__ */ c("span", {
+							className: "ms-1 self-center",
+							children: b
+						})]
+					}),
+					S != null && /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c(r, {
+						"aria-label": C,
+						className: "inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground",
+						children: /* @__PURE__ */ c(u, {
+							size: 16,
+							"aria-hidden": !0
+						})
+					}), /* @__PURE__ */ c(n, { children: S })] })
+				]
+			}), g != null && /* @__PURE__ */ c("div", {
+				className: "shrink-0",
+				children: g
+			})]
+		}),
+		_ != null && /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(a, {
+			direction: d[_],
+			sentiment: f[_],
+			value: v
+		}) }),
+		y != null && /* @__PURE__ */ c("div", {
+			className: "text-xs text-muted-foreground",
+			children: y
+		}),
+		T
+	]
+}));
+h.displayName = "Metric";
+//#endregion
+export { h as Metric };
+
+//# sourceMappingURL=metric.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"metric.js","sources":["../../../../src/components/ui/metric/metric.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CircleInfoIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Skeleton } from '../skeleton';\nimport { TrendIndicator } from '../trend-indicator';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A presentational metric stats strip: a single row with an optional status-info\n// icon badge + value + unit on the left and an optional caption on the right, with\n// an optional trend row below and a composable body. No Card wrapper, no size or\n// status axes — nest it inside ChartWidget or a Card when you need card chrome.\n// Colors are semantic `--ui-*` tokens; the badge always uses the info tint per Figma.\n\nconst TREND_DIRECTION = {\n  up: 'up',\n  down: 'down',\n  stable: 'flat',\n} as const satisfies Record<string, 'up' | 'down' | 'flat'>;\n\nconst TREND_SENTIMENT = {\n  up: 'positive',\n  down: 'negative',\n  stable: 'neutral',\n} as const satisfies Record<string, 'positive' | 'negative' | 'neutral'>;\n\nexport interface MetricProps extends React.ComponentProps<'div'> {\n  /**\n   * The primary value, already formatted (`73`, `\"94%\"`, `\"$72K\"`, `\"2.8\"`).\n   * The kit does not format currency, units, or decimals.\n   */\n  value: React.ReactNode;\n  /** Unit shown next to the value at a smaller, muted size — e.g. `\"%\"`, `\"hours\"`. */\n  unit?: React.ReactNode;\n  /** Caption at the right end of the stats row — e.g. a timeframe `Tag`. */\n  caption?: React.ReactNode;\n  /**\n   * Trend direction — renders a `TrendIndicator` on its own row below the value.\n   * Sentiment follows direction: `up` → positive, `down` → negative, `stable` → neutral.\n   * Pair with `trendValue` for the change text.\n   */\n  trend?: 'up' | 'down' | 'stable';\n  /** Change text shown next to the trend arrow — e.g. `\"20%\"`, `\"+3\"`. Requires `trend`. */\n  trendValue?: React.ReactNode;\n  /** Secondary line below the trend — e.g. \"Target: 99%\". */\n  supportingText?: React.ReactNode;\n  /** A small badge / metadata slot beside the value — e.g. a `Tag`. */\n  badge?: React.ReactNode;\n  /** Icon rendered in a status-info-tinted badge before the value. */\n  icon?: React.ReactNode;\n  /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Accessible name for the info affordance that reveals `tooltip`. */\n  tooltipLabel?: string;\n  /** Show a skeleton in place of the value, preserving its space. */\n  loading?: boolean;\n  /** Content below the stats strip — e.g. a chart, a `Separator`, an insight line. */\n  children?: React.ReactNode;\n}\n\n// The status-info-tinted icon chip. The icon is cloned to a fixed 16 px rather\n// than sized in CSS because icons-react icons pick their stroke weight from the\n// `size` prop — CSS alone can't replicate that.\nfunction MetricIconBadge({ icon }: { icon: React.ReactNode }) {\n  return (\n    <span\n      aria-hidden\n      className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ui-background-status-info)] text-[var(--ui-glyph-on-surface-neutral-dark)] [&_svg]:shrink-0\"\n    >\n      {React.isValidElement(icon)\n        ? React.cloneElement(icon as React.ReactElement<{ size?: number }>, {\n            size: 16,\n          })\n        : icon}\n    </span>\n  );\n}\n\n/** The headline number and its unit, sharing one baseline. */\nfunction MetricValue({\n  value,\n  unit,\n}: {\n  value: React.ReactNode;\n  unit?: React.ReactNode;\n}) {\n  return (\n    <>\n      <span className=\"text-2xl font-semibold leading-8 tabular-nums text-foreground\">\n        {value}\n      </span>\n      {unit != null && (\n        <span className=\"text-xs text-muted-foreground\">{unit}</span>\n      )}\n    </>\n  );\n}\n\nconst Metric = React.forwardRef<HTMLDivElement, MetricProps>(\n  (\n    {\n      className,\n      value,\n      unit,\n      caption,\n      trend,\n      trendValue,\n      supportingText,\n      badge,\n      icon,\n      tooltip,\n      tooltipLabel = 'More information',\n      loading = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props}>\n        {/* Stats row: icon badge + value + unit on the left, caption on the right. */}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2\">\n            {icon != null && <MetricIconBadge icon={icon} />}\n            <div className=\"flex items-baseline gap-1\">\n              {loading ? (\n                <Skeleton className=\"h-8 w-20\" />\n              ) : (\n                <MetricValue value={value} unit={unit} />\n              )}\n              {badge != null && (\n                <span className=\"ms-1 self-center\">{badge}</span>\n              )}\n            </div>\n            {tooltip != null && (\n              <Tooltip>\n                <TooltipTrigger\n                  aria-label={tooltipLabel}\n                  className=\"inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground\"\n                >\n                  <CircleInfoIcon size={16} aria-hidden />\n                </TooltipTrigger>\n                <TooltipContent>{tooltip}</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n          {caption != null && <div className=\"shrink-0\">{caption}</div>}\n        </div>\n\n        {/* Trend row: renders TrendIndicator from the first-class trend prop. */}\n        {trend != null && (\n          <div>\n            <TrendIndicator\n              direction={TREND_DIRECTION[trend]}\n              sentiment={TREND_SENTIMENT[trend]}\n              value={trendValue}\n            />\n          </div>\n        )}\n\n        {supportingText != null && (\n          <div className=\"text-xs text-muted-foreground\">{supportingText}</div>\n        )}\n\n        {children}\n      </div>\n    );\n  }\n);\nMetric.displayName = 'Metric';\n\nexport { Metric };\n"],"names":["TREND_DIRECTION","TREND_SENTIMENT","MetricIconBadge","icon","jsx","React","MetricValue","value","unit","jsxs","Fragment","Metric","className","caption","trend","trendValue","supportingText","badge","tooltip","tooltipLabel","loading","children","props","ref","cn","Skeleton","Tooltip","TooltipTrigger","CircleInfoIcon","TooltipContent","TrendIndicator"],"mappings":"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"}
+{"version":3,"file":"metric.js","names":[],"sources":["../../../../src/components/ui/metric/metric.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CircleInfoIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Skeleton } from '../skeleton';\nimport { TrendIndicator } from '../trend-indicator';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A presentational metric stats strip: a single row with an optional status-info\n// icon badge + value + unit on the left and an optional caption on the right, with\n// an optional trend row below and a composable body. No Card wrapper, no size or\n// status axes — nest it inside ChartWidget or a Card when you need card chrome.\n// Colors are semantic `--ui-*` tokens; the badge always uses the info tint per Figma.\n\nconst TREND_DIRECTION = {\n  up: 'up',\n  down: 'down',\n  stable: 'flat',\n} as const satisfies Record<string, 'up' | 'down' | 'flat'>;\n\nconst TREND_SENTIMENT = {\n  up: 'positive',\n  down: 'negative',\n  stable: 'neutral',\n} as const satisfies Record<string, 'positive' | 'negative' | 'neutral'>;\n\nexport interface MetricProps extends React.ComponentProps<'div'> {\n  /**\n   * The primary value, already formatted (`73`, `\"94%\"`, `\"$72K\"`, `\"2.8\"`).\n   * The kit does not format currency, units, or decimals.\n   */\n  value: React.ReactNode;\n  /** Unit shown next to the value at a smaller, muted size — e.g. `\"%\"`, `\"hours\"`. */\n  unit?: React.ReactNode;\n  /** Caption at the right end of the stats row — e.g. a timeframe `Tag`. */\n  caption?: React.ReactNode;\n  /**\n   * Trend direction — renders a `TrendIndicator` on its own row below the value.\n   * Sentiment follows direction: `up` → positive, `down` → negative, `stable` → neutral.\n   * Pair with `trendValue` for the change text.\n   */\n  trend?: 'up' | 'down' | 'stable';\n  /** Change text shown next to the trend arrow — e.g. `\"20%\"`, `\"+3\"`. Requires `trend`. */\n  trendValue?: React.ReactNode;\n  /** Secondary line below the trend — e.g. \"Target: 99%\". */\n  supportingText?: React.ReactNode;\n  /** A small badge / metadata slot beside the value — e.g. a `Tag`. */\n  badge?: React.ReactNode;\n  /** Icon rendered in a status-info-tinted badge before the value. */\n  icon?: React.ReactNode;\n  /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Accessible name for the info affordance that reveals `tooltip`. */\n  tooltipLabel?: string;\n  /** Show a skeleton in place of the value, preserving its space. */\n  loading?: boolean;\n  /** Content below the stats strip — e.g. a chart, a `Separator`, an insight line. */\n  children?: React.ReactNode;\n}\n\n// The status-info-tinted icon chip. The icon is cloned to a fixed 16 px rather\n// than sized in CSS because icons-react icons pick their stroke weight from the\n// `size` prop — CSS alone can't replicate that.\nfunction MetricIconBadge({ icon }: { icon: React.ReactNode }) {\n  return (\n    <span\n      aria-hidden\n      className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ui-background-status-info)] text-[var(--ui-glyph-on-surface-neutral-dark)] [&_svg]:shrink-0\"\n    >\n      {React.isValidElement(icon)\n        ? React.cloneElement(icon as React.ReactElement<{ size?: number }>, {\n            size: 16,\n          })\n        : icon}\n    </span>\n  );\n}\n\n/** The headline number and its unit, sharing one baseline. */\nfunction MetricValue({\n  value,\n  unit,\n}: {\n  value: React.ReactNode;\n  unit?: React.ReactNode;\n}) {\n  return (\n    <>\n      <span className=\"text-2xl font-semibold leading-8 tabular-nums text-foreground\">\n        {value}\n      </span>\n      {unit != null && (\n        <span className=\"text-xs text-muted-foreground\">{unit}</span>\n      )}\n    </>\n  );\n}\n\nconst Metric = React.forwardRef<HTMLDivElement, MetricProps>(\n  (\n    {\n      className,\n      value,\n      unit,\n      caption,\n      trend,\n      trendValue,\n      supportingText,\n      badge,\n      icon,\n      tooltip,\n      tooltipLabel = 'More information',\n      loading = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props}>\n        {/* Stats row: icon badge + value + unit on the left, caption on the right. */}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2\">\n            {icon != null && <MetricIconBadge icon={icon} />}\n            <div className=\"flex items-baseline gap-1\">\n              {loading ? (\n                <Skeleton className=\"h-8 w-20\" />\n              ) : (\n                <MetricValue value={value} unit={unit} />\n              )}\n              {badge != null && (\n                <span className=\"ms-1 self-center\">{badge}</span>\n              )}\n            </div>\n            {tooltip != null && (\n              <Tooltip>\n                <TooltipTrigger\n                  aria-label={tooltipLabel}\n                  className=\"inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground\"\n                >\n                  <CircleInfoIcon size={16} aria-hidden />\n                </TooltipTrigger>\n                <TooltipContent>{tooltip}</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n          {caption != null && <div className=\"shrink-0\">{caption}</div>}\n        </div>\n\n        {/* Trend row: renders TrendIndicator from the first-class trend prop. */}\n        {trend != null && (\n          <div>\n            <TrendIndicator\n              direction={TREND_DIRECTION[trend]}\n              sentiment={TREND_SENTIMENT[trend]}\n              value={trendValue}\n            />\n          </div>\n        )}\n\n        {supportingText != null && (\n          <div className=\"text-xs text-muted-foreground\">{supportingText}</div>\n        )}\n\n        {children}\n      </div>\n    );\n  }\n);\nMetric.displayName = 'Metric';\n\nexport { Metric };\n"],"mappings":";;;;;;;;;AAgBA,IAAM,IAAkB;CACtB,IAAI;CACJ,MAAM;CACN,QAAQ;AACV,GAEM,IAAkB;CACtB,IAAI;CACJ,MAAM;CACN,QAAQ;AACV;AAuCA,SAAS,EAAgB,EAAE,WAAmC;CAC5D,OACE,kBAAC,QAAD;EACE,eAAA;EACA,WAAU;EAET,UAAA,EAAM,eAAe,CAAI,IACtB,EAAM,aAAa,GAA+C,EAChE,MAAM,GACR,CAAC,IACD;CACA,CAAA;AAEV;AAGA,SAAS,EAAY,EACnB,UACA,WAIC;CACD,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EAAM,WAAU;EACb,UAAA;CACG,CAAA,GACL,KAAQ,QACP,kBAAC,QAAD;EAAM,WAAU;EAAiC,UAAA;CAAW,CAAA,CAE9D,EAAA,CAAA;AAEN;AAEA,IAAM,IAAS,EAAM,YAEjB,EACE,cACA,UACA,SACA,YACA,UACA,eACA,mBACA,UACA,SACA,YACA,kBAAe,oBACf,aAAU,IACV,aACA,GAAG,KAEL,MAGE,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,uBAAuB,CAAS;CAAG,GAAI;CAApE,UAAA;EAEE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,KAAQ,QAAQ,kBAAC,GAAD,EAAuB,QAAO,CAAA;KAC/C,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACG,IACC,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,IAEhC,kBAAC,GAAD;OAAoB;OAAa;MAAO,CAAA,GAEzC,KAAS,QACR,kBAAC,QAAD;OAAM,WAAU;OAAoB,UAAA;MAAY,CAAA,CAE/C;;KACJ,KAAW,QACV,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MACE,cAAY;MACZ,WAAU;MAEV,UAAA,kBAAC,GAAD;OAAgB,MAAM;OAAI,eAAA;MAAa,CAAA;KACzB,CAAA,GAChB,kBAAC,GAAD,EAAA,UAAiB,EAAwB,CAAA,CAClC,EAAA,CAAA;IAER;GACJ,CAAA,GAAA,KAAW,QAAQ,kBAAC,OAAD;IAAK,WAAU;IAAY,UAAA;GAAa,CAAA,CACzD;;EAGJ,KAAS,QACR,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;GACE,WAAW,EAAgB;GAC3B,WAAW,EAAgB;GAC3B,OAAO;EACR,CAAA,EACE,CAAA;EAGN,KAAkB,QACjB,kBAAC,OAAD;GAAK,WAAU;GAAiC,UAAA;EAAoB,CAAA;EAGrE;CACE;EAGX;AACA,EAAO,cAAc"}

package/dist/components/ui/number-field/number-field.js

@@ -1,61 +1,37 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as a from "react";
-import { NumberField as t } from "@base-ui/react/number-field";
-import { MinusIcon as n, PlusIcon as u } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as l } from "../../../lib/utils.js";
-const g = t.Root, b = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ i(
-  t.Group,
-  {
-    ref: o,
-    className: l(
-      "flex h-[var(--ui-input-text-global-box-height)] min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors",
-      "not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]",
-      "has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]",
-      "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]",
-      "has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]",
-      e
-    ),
-    ...r
-  }
-));
-b.displayName = "NumberFieldGroup";
-const c = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ i(
-  t.Input,
-  {
-    ref: o,
-    className: l(
-      "min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]",
-      e
-    ),
-    ...r
-  }
-));
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { MinusIcon as r, PlusIcon as i } from "@acronis-platform/icons-react/stroke-mono";
+import { NumberField as a } from "@base-ui/react/number-field";
+//#region src/components/ui/number-field/number-field.tsx
+var o = a.Root, s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Group, {
+	ref: i,
+	className: e("flex h-[var(--ui-input-text-global-box-height)] min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors", "not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]", "has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]", "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]", "has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]", t),
+	...r
+}));
+s.displayName = "NumberFieldGroup";
+var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Input, {
+	ref: i,
+	className: e("min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]", t),
+	...r
+}));
 c.displayName = "NumberFieldInput";
-const s = "flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]", m = a.forwardRef(({ className: e, children: r, ...o }, d) => /* @__PURE__ */ i(
-  t.Decrement,
-  {
-    ref: d,
-    className: l(s, e),
-    ...o,
-    children: r ?? /* @__PURE__ */ i(n, { size: 16 })
-  }
-));
-m.displayName = "NumberFieldDecrement";
-const p = a.forwardRef(({ className: e, children: r, ...o }, d) => /* @__PURE__ */ i(
-  t.Increment,
-  {
-    ref: d,
-    className: l(s, e),
-    ...o,
-    children: r ?? /* @__PURE__ */ i(u, { size: 16 })
-  }
-));
-p.displayName = "NumberFieldIncrement";
-export {
-  g as NumberField,
-  m as NumberFieldDecrement,
-  b as NumberFieldGroup,
-  p as NumberFieldIncrement,
-  c as NumberFieldInput
-};
-//# sourceMappingURL=number-field.js.map
+var l = "flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]", u = t.forwardRef(({ className: t, children: i, ...o }, s) => /* @__PURE__ */ n(a.Decrement, {
+	ref: s,
+	className: e(l, t),
+	...o,
+	children: i ?? /* @__PURE__ */ n(r, { size: 16 })
+}));
+u.displayName = "NumberFieldDecrement";
+var d = t.forwardRef(({ className: t, children: r, ...o }, s) => /* @__PURE__ */ n(a.Increment, {
+	ref: s,
+	className: e(l, t),
+	...o,
+	children: r ?? /* @__PURE__ */ n(i, { size: 16 })
+}));
+d.displayName = "NumberFieldIncrement";
+//#endregion
+export { o as NumberField, u as NumberFieldDecrement, s as NumberFieldGroup, d as NumberFieldIncrement, c as NumberFieldInput };
+
+//# sourceMappingURL=number-field.js.map

package/dist/components/ui/number-field/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","sources":["../../../../src/components/ui/number-field/number-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `number-field`, on Base UI's NumberField\n// (Root / Group / Decrement / Input / Increment). No `--ui-number-field-*` tier —\n// the box reuses the `--ui-input-text-*` tier (already imported) so it matches\n// InputBox / InputText; the steppers use the muted/primary surface + text tokens.\n\nconst NumberField = NumberFieldPrimitive.Root;\n\n// The bordered box wrapping the steppers + input. Mirrors the InputBox field box\n// (height / radius / border / bg / hover / focus-within ring / disabled / invalid).\nconst NumberFieldGroup = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex h-[var(--ui-input-text-global-box-height)] min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors',\n      'not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n      'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldGroup.displayName = 'NumberFieldGroup';\n\nconst NumberFieldInput = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Input\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldInput.displayName = 'NumberFieldInput';\n\nconst stepperClassName =\n  'flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]';\n\nconst NumberFieldDecrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Decrement>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Decrement>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Decrement\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <MinusIcon size={16} />}\n  </NumberFieldPrimitive.Decrement>\n));\nNumberFieldDecrement.displayName = 'NumberFieldDecrement';\n\nconst NumberFieldIncrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Increment>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Increment>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Increment\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <PlusIcon size={16} />}\n  </NumberFieldPrimitive.Increment>\n));\nNumberFieldIncrement.displayName = 'NumberFieldIncrement';\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n};\n"],"names":["NumberField","NumberFieldPrimitive","NumberFieldGroup","React","className","props","ref","jsx","cn","NumberFieldInput","stepperClassName","NumberFieldDecrement","children","MinusIcon","NumberFieldIncrement","PlusIcon"],"mappings":";;;;;AAaA,MAAMA,IAAcC,EAAqB,MAInCC,IAAmBC,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAiB,cAAc;AAE/B,MAAMO,IAAmBN,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAiB,cAAc;AAE/B,MAAMC,IACJ,mUAEIC,IAAuBR,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,GAAGP,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAGE,GAAkBN,CAAS;AAAA,IACxC,GAAGC;AAAA,IAEH,UAAAO,KAAY,gBAAAL,EAACM,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,EAAA;AACpC,CACD;AACDF,EAAqB,cAAc;AAEnC,MAAMG,IAAuBX,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,GAAGP,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAGE,GAAkBN,CAAS;AAAA,IACxC,GAAGC;AAAA,IAEH,UAAAO,KAAY,gBAAAL,EAACQ,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,EAAA;AACnC,CACD;AACDD,EAAqB,cAAc;"}
+{"version":3,"file":"number-field.js","names":[],"sources":["../../../../src/components/ui/number-field/number-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `number-field`, on Base UI's NumberField\n// (Root / Group / Decrement / Input / Increment). No `--ui-number-field-*` tier —\n// the box reuses the `--ui-input-text-*` tier (already imported) so it matches\n// InputBox / InputText; the steppers use the muted/primary surface + text tokens.\n\nconst NumberField = NumberFieldPrimitive.Root;\n\n// The bordered box wrapping the steppers + input. Mirrors the InputBox field box\n// (height / radius / border / bg / hover / focus-within ring / disabled / invalid).\nconst NumberFieldGroup = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex h-[var(--ui-input-text-global-box-height)] min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors',\n      'not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n      'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldGroup.displayName = 'NumberFieldGroup';\n\nconst NumberFieldInput = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Input\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldInput.displayName = 'NumberFieldInput';\n\nconst stepperClassName =\n  'flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]';\n\nconst NumberFieldDecrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Decrement>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Decrement>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Decrement\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <MinusIcon size={16} />}\n  </NumberFieldPrimitive.Decrement>\n));\nNumberFieldDecrement.displayName = 'NumberFieldDecrement';\n\nconst NumberFieldIncrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Increment>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Increment>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Increment\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <PlusIcon size={16} />}\n  </NumberFieldPrimitive.Increment>\n));\nNumberFieldIncrement.displayName = 'NumberFieldIncrement';\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n};\n"],"mappings":";;;;;;;AAaA,IAAM,IAAc,EAAqB,MAInC,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAqB,OAAtB;CACO;CACL,WAAW,EACT,qRACA,sFACA,uLACA,gLACA,0KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAc;AAE/B,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAqB,OAAtB;CACO;CACL,WAAW,EACT,kVACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAc;AAE/B,IAAM,IACJ,mUAEI,IAAuB,EAAM,YAGhC,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,EAAqB,WAAtB;CACO;CACL,WAAW,EAAG,GAAkB,CAAS;CACzC,GAAI;CAEH,UAAA,KAAY,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;AACL,CAAA,CACjC;AACD,EAAqB,cAAc;AAEnC,IAAM,IAAuB,EAAM,YAGhC,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,EAAqB,WAAtB;CACO;CACL,WAAW,EAAG,GAAkB,CAAS;CACzC,GAAI;CAEH,UAAA,KAAY,kBAAC,GAAD,EAAU,MAAM,GAAK,CAAA;AACJ,CAAA,CACjC;AACD,EAAqB,cAAc"}

package/dist/components/ui/page-content/page-content.js

@@ -1,19 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as r from "react";
-import { cn as m } from "../../../lib/utils.js";
-const n = r.forwardRef(
-  ({ className: t, ...o }, a) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: a,
-      "data-slot": "page-content",
-      className: m("flex-1 p-6", t),
-      ...o
-    }
-  )
-);
-n.displayName = "PageContent";
-export {
-  n as PageContent
-};
-//# sourceMappingURL=page-content.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ui/page-content/page-content.tsx
+var r = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	"data-slot": "page-content",
+	className: e("flex-1 p-6", t),
+	...r
+}));
+r.displayName = "PageContent";
+//#endregion
+export { r as PageContent };
+
+//# sourceMappingURL=page-content.js.map

package/dist/components/ui/page-content/page-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-content.js","sources":["../../../../src/components/ui/page-content/page-content.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The page content region — the padded gutter for a page's body. Ported from\n// `@acronis-platform`'s `page-content`. Rendered as a `<div>`, not `<main>` —\n// `AppShellChatContentBody` doesn't provide a `main` landmark either, so wrap\n// this in your own `<main>` regardless of whether it nests inside\n// `AppShellChatContentBody` or is used standalone. Layout-only (flex-1 + page\n// padding).\nexport type PageContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst PageContent = React.forwardRef<HTMLDivElement, PageContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"page-content\"\n      className={cn('flex-1 p-6', className)}\n      {...props}\n    />\n  )\n);\nPageContent.displayName = 'PageContent';\n\nexport { PageContent };\n"],"names":["PageContent","React","className","props","ref","jsx","cn"],"mappings":";;;AAYA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE,EAAG,cAAcJ,CAAS;AAAA,MACpC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAY,cAAc;"}
+{"version":3,"file":"page-content.js","names":[],"sources":["../../../../src/components/ui/page-content/page-content.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The page content region — the padded gutter for a page's body. Ported from\n// `@acronis-platform`'s `page-content`. Rendered as a `<div>`, not `<main>` —\n// `AppShellChatContentBody` doesn't provide a `main` landmark either, so wrap\n// this in your own `<main>` regardless of whether it nests inside\n// `AppShellChatContentBody` or is used standalone. Layout-only (flex-1 + page\n// padding).\nexport type PageContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst PageContent = React.forwardRef<HTMLDivElement, PageContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"page-content\"\n      className={cn('flex-1 p-6', className)}\n      {...props}\n    />\n  )\n);\nPageContent.displayName = 'PageContent';\n\nexport { PageContent };\n"],"mappings":";;;;AAYA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EAAG,cAAc,CAAS;CACrC,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc"}